123 lines
2.3 KiB
SCSS
123 lines
2.3 KiB
SCSS
.boxed-section {
|
|
margin-bottom: 1.5em;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.boxed-section-head,
|
|
.boxed-section-foot {
|
|
padding: 0.75em 1.5em;
|
|
border: 1px solid $grey-blue;
|
|
background: $white-ter;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: baseline;
|
|
flex-wrap: wrap;
|
|
|
|
.pull-right {
|
|
margin-left: auto;
|
|
}
|
|
}
|
|
|
|
.boxed-section-head {
|
|
border-top-left-radius: $radius;
|
|
border-top-right-radius: $radius;
|
|
|
|
&.is-light {
|
|
background: $white;
|
|
}
|
|
|
|
&.is-hollow {
|
|
border-bottom: none;
|
|
background: transparent;
|
|
|
|
& + .boxed-section-body {
|
|
border-top: none;
|
|
padding-top: 0.75em;
|
|
}
|
|
}
|
|
|
|
& + .boxed-section-body {
|
|
padding: 1.5em;
|
|
border-top-left-radius: 0;
|
|
border-top-right-radius: 0;
|
|
}
|
|
}
|
|
|
|
.boxed-section-body {
|
|
padding: 0.75em 1.5em;
|
|
background: $white;
|
|
border: 1px solid $grey-blue;
|
|
margin-top: -1px;
|
|
border-radius: $radius;
|
|
|
|
&.is-full-bleed {
|
|
padding: 0;
|
|
border: none;
|
|
|
|
// Often components will have a DOM presence but no layout.
|
|
// In that case, pass through.
|
|
> *:first-child,
|
|
> .ember-view:first-child > *:first-child {
|
|
border-top-left-radius: 0;
|
|
border-top-right-radius: 0;
|
|
}
|
|
}
|
|
|
|
&.is-dark {
|
|
background: $dark-2;
|
|
border-color: lighten($dark, 30%);
|
|
color: $white;
|
|
}
|
|
|
|
&.with-foot {
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
}
|
|
|
|
.boxed-section-foot {
|
|
margin-top: -1px;
|
|
border-bottom-left-radius: $radius;
|
|
border-bottom-right-radius: $radius;
|
|
}
|
|
|
|
.boxed-section-row {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: baseline;
|
|
|
|
+ .boxed-section-row {
|
|
margin-top: 0.5em;
|
|
}
|
|
}
|
|
|
|
&.is-small {
|
|
font-size: $size-7;
|
|
}
|
|
|
|
@each $name, $pair in $colors {
|
|
$color: nth($pair, 1);
|
|
$color-invert: nth($pair, 2);
|
|
|
|
&.is-#{$name} {
|
|
> .boxed-section-head {
|
|
background: $color;
|
|
border-color: $color;
|
|
color: $color-invert;
|
|
}
|
|
|
|
> .boxed-section-body {
|
|
border-color: $color;
|
|
}
|
|
|
|
> .boxed-section-foot {
|
|
border-color: $color;
|
|
background: lighten($color, 40%);
|
|
color: $color;
|
|
}
|
|
}
|
|
}
|
|
}
|