app/assets/stylesheets/atoms/_layout.scss
.slab {
@include full-bleed();
position: relative;
padding: {
top: 2em;
bottom: 2em;
}
border-bottom: 1px solid $color-tan;
&:last-child {
border-bottom: 0;
}
}
.slab--white {
background-color: #FFFFFF;
}
.slab--gradient {
background-color: rgba($color-teal, .05);
@include linear-gradient(to right, rgba($color-magenta, .015) 0%, rgba($color-teal, .04) 65%);
}
.slab--padded {
padding: {
top: 3em;
bottom: 3em;
}
}
.slab--not-padded {
padding: {
top: 0;
bottom: 0;
}
}
.slab--bleed {
overflow: hidden;
}
.card {
box-shadow: 0px 3px 8px rgba(0,0,0,.15);
border-radius: $border-radius;
padding: 1.5em $site-margins/2;
background-color: #FFFFFF;
margin-bottom: 2em;
> *:last-child {
margin-bottom: 0;
}
@include media($tablet-up) {
padding: 1.5em 2em;
}
}
.notice {
background-color: rgba($color-teal, .05);
padding: $site-margins/2;
margin-bottom: 1em;
}
.tile {
border: 1px solid $color-light-grey;
padding: 1.5em 1em;
}
.textwell {
display: none;
.textwell__content {
text-align: left;
margin-bottom: 1em;
max-height: 31rem;
overflow: auto;
}
@include media($tablet-up) {
display: block;
.textwell__content {
padding: 2em;
border: 2px solid $color-light-grey;
}
.textwell__expander {
display: none;
}
}
@include media(max-width $mobile-up) {
.textwell__content {
overflow: hidden;
padding: 0;
}
}
&.textwell--expanded {
.textwell__content {
max-height: initial;
}
.textwell__expander {
display: none;
}
}
}