atst/styles/elements/_panels.scss

110 lines
1.6 KiB
SCSS

/*
* Panels
* A generic block container
*/
@mixin panel-base {
background-color: $color-white;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-left: 0;
border-right: 0;
}
@mixin panel-theme-default {
border-top-color: $color-black;
border-bottom-color: $color-gray-light;
}
@mixin panel-margin {
margin: $spacing-large 0;
@include media($medium-screen) {
margin-bottom: $site-margins * 8;
}
}
@mixin panel-row {
@include grid-row;
.col {
margin: 0 ($site-margins-mobile * 2);
@include media($medium-screen) {
margin: 0 ($site-margins * 2);
}
}
}
@mixin panel-actions {
padding: $gap;
}
@mixin shadow-panel {
box-shadow: $box-shadow;
border-top: none;
border-bottom: none;
}
.panel {
@include panel-base;
@include panel-theme-default;
@include panel-margin;
@include shadow-panel;
max-width: $max-panel-width;
&__content {
padding: 3.2rem 2.4rem;
}
&__body {
margin-right: $gap * 2;
}
&__heading {
padding: 3.2rem 2.4rem;
@include media($medium-screen) {
padding: $gap * 4;
}
&--tight {
padding: $gap * 2;
}
&--divider {
border-bottom: 1px solid $color-gray-light;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
display: inline-block;
.subtitle {
color: $color-gray;
}
}
.icon-tooltip {
margin-left: $gap * 2;
}
&--grow {
display: flex;
flex-direction: row;
justify-content: space-between;
}
}
&__footer {
padding: 3 * $gap;
}
}