fleet/frontend/components/StackedWhiteBoxes/_styles.scss

73 lines
1.3 KiB
SCSS

.stacked-white-boxes {
@include position(absolute, null null null 50%);
@include transition(all 300ms ease-in);
margin: 75px 0 0 -262px;
width: 524px;
&--loading {
@include transform(scale(1.3));
opacity: 0;
}
&--loaded {
@include transform(scale(1));
opacity: 1;
}
&--leaving {
@include transform(scale(1.3));
opacity: 0;
}
&__box {
background-color: $white;
border-radius: 4px;
box-shadow: 0 0 30px 0 rgba($black, 0.3);
min-height: 402px;
box-sizing: border-box;
padding: 30px;
font-weight: 300;
&-text {
color: $text-ultradark;
font-size: $medium;
line-height: 30px;
letter-spacing: 0.64px;
}
}
&__header {
width: 100%;
&-text {
font-size: $large;
font-weight: 300;
color: $text-ultradark;
line-height: 32px;
margin-top: 0;
margin-bottom: 0;
text-transform: uppercase;
}
}
&__back {
text-align: right;
width: 100%;
&-link {
@include transition(color 150ms ease-in-out);
color: $text-light;
text-decoration: none;
position: absolute;
top: 10px;
right: 15px;
cursor: pointer;
font-weight: bold;
font-size: 30px;
&:hover {
color: $brand-light;
}
}
}
}