2017-09-19 14:47:10 +00:00
|
|
|
.boxed-section {
|
|
|
|
margin-bottom: 1.5em;
|
|
|
|
|
2017-11-15 20:44:32 +00:00
|
|
|
&:last-child {
|
|
|
|
margin-bottom: 0;
|
|
|
|
}
|
|
|
|
|
2017-09-19 14:47:10 +00:00
|
|
|
.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;
|
|
|
|
}
|
2021-04-20 13:33:16 +00:00
|
|
|
|
|
|
|
.is-fixed-width {
|
|
|
|
display: inline-block;
|
|
|
|
width: 8em;
|
|
|
|
}
|
2019-07-23 20:37:34 +00:00
|
|
|
|
|
|
|
&.is-compact {
|
|
|
|
padding: 0.75em;
|
|
|
|
}
|
2017-09-19 14:47:10 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.boxed-section-head {
|
|
|
|
border-top-left-radius: $radius;
|
|
|
|
border-top-right-radius: $radius;
|
|
|
|
|
|
|
|
&.is-light {
|
|
|
|
background: $white;
|
|
|
|
}
|
|
|
|
|
2018-05-02 18:16:11 +00:00
|
|
|
&.is-hollow {
|
|
|
|
border-bottom: none;
|
|
|
|
background: transparent;
|
|
|
|
|
|
|
|
& + .boxed-section-body {
|
|
|
|
border-top: none;
|
2018-09-14 17:20:33 +00:00
|
|
|
padding-top: 0.75em;
|
2018-05-02 18:16:11 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-09-19 14:47:10 +00:00
|
|
|
& + .boxed-section-body {
|
|
|
|
padding: 1.5em;
|
|
|
|
border-top-left-radius: 0;
|
|
|
|
border-top-right-radius: 0;
|
|
|
|
}
|
2020-06-13 20:06:08 +00:00
|
|
|
|
|
|
|
.button {
|
|
|
|
display: inline-block;
|
|
|
|
}
|
2017-09-19 14:47:10 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.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 {
|
2018-07-31 01:20:44 +00:00
|
|
|
background: $dark-2;
|
2017-09-19 14:47:10 +00:00
|
|
|
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;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|