129 lines
2.0 KiB
SCSS
129 lines
2.0 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-top: 0;
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
margin-bottom: $site-margins-mobile * 6;
|
|
|
|
@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 {
|
|
padding: ($gap / 2) 0;
|
|
box-shadow: $box-shadow;
|
|
border-top: none;
|
|
border-bottom: none;
|
|
}
|
|
|
|
.panel {
|
|
@include panel-base;
|
|
@include panel-theme-default;
|
|
@include panel-margin;
|
|
@include shadow-panel;
|
|
|
|
.panel__content {
|
|
margin: ($gap * 2) 0;
|
|
padding: 0 ($gap * 2);
|
|
|
|
@include media($medium-screen) {
|
|
margin: ($gap * 4) 0;
|
|
padding: 0 ($gap * 4);
|
|
}
|
|
}
|
|
|
|
.panel__body {
|
|
margin-right: $gap * 2;
|
|
}
|
|
|
|
.panel__heading {
|
|
padding: $gap * 2;
|
|
|
|
@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;
|
|
}
|
|
}
|
|
|
|
.panel__footer {
|
|
padding: 3 * $gap;
|
|
}
|
|
|
|
hr {
|
|
border: 0;
|
|
border-bottom: 1px dashed $color-gray-light;
|
|
margin: ($gap * 4) ($site-margins * -4);
|
|
}
|
|
}
|
|
|
|
.panel__actions {
|
|
@include panel-actions;
|
|
}
|