Félix Péault
cdabe6935b
It's been tricky but got there finally! Hello `:global` - Avoid using one global CSS file containing everything - Import the component SCSS file in a script tag from the component file to allow style scoping and including it only when used
77 lines
1.6 KiB
SCSS
77 lines
1.6 KiB
SCSS
.issue {
|
|
position: relative;
|
|
display: flex;
|
|
background: #fff;
|
|
border-radius: 6px;
|
|
transition: background-color 0.4s, transform 0.7s var(--ease-quart);
|
|
will-change: transform;
|
|
|
|
a {
|
|
display: flex;
|
|
padding: 20px;
|
|
text-decoration: none;
|
|
}
|
|
// Image
|
|
:global(img) {
|
|
$shadow-color: rgba(#936B47, 0.06);
|
|
display: block;
|
|
width: 80px;
|
|
height: 56px;
|
|
margin-right: 16px;
|
|
border-radius: 3px;
|
|
box-shadow:
|
|
0 1.5px 1.5px $shadow-color,
|
|
0 3px 3px $shadow-color,
|
|
0 12px 12px $shadow-color;
|
|
}
|
|
// Title
|
|
dt {
|
|
margin-bottom: 8px;
|
|
color: $color-secondary;
|
|
font-size: rem(20px);
|
|
font-family: $font-serif;
|
|
font-weight: 400;
|
|
transition: color 0.2s;
|
|
}
|
|
// Description
|
|
dd {
|
|
font-size: rem(14px);
|
|
color: $color-gray;
|
|
}
|
|
// Date
|
|
time {
|
|
display: block;
|
|
margin-top: 8px;
|
|
opacity: 0.6;
|
|
font-size: rem(12px);
|
|
}
|
|
|
|
// Under layer
|
|
&:after {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
z-index: -1;
|
|
top: 0;
|
|
left: 2%;
|
|
width: 96%;
|
|
height: 100%;
|
|
border-radius: 6px;
|
|
background: rgba(#fff, 0.4);
|
|
transition: transform 0.7s var(--ease-quart);
|
|
}
|
|
|
|
|
|
// Hover
|
|
&:hover {
|
|
background: $color-cream;
|
|
transform: rotate(-1.25deg) translateZ(0) !important;
|
|
|
|
dt {
|
|
color: $color-primary;
|
|
}
|
|
&:after {
|
|
transform: rotate(3deg) translateZ(0);
|
|
}
|
|
}
|
|
} |