open-nomad/ui/app/styles/components/boxed-section.scss

136 lines
2.4 KiB
SCSS
Raw Normal View History

2017-09-19 14:47:10 +00:00
.boxed-section {
margin-bottom: 1.5em;
&: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;
}
.is-fixed-width {
display: inline-block;
width: 8em;
}
&.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;
}
&.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;
}
}
2017-09-19 14:47:10 +00:00
& + .boxed-section-body {
padding: 1.5em;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.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 {
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;
}
}
}
}