github.com/hspak/nomad@v0.7.2-0.20180309000617-bc4ae22a39a5/ui/app/styles/components/boxed-section.scss (about)

     1  .boxed-section {
     2    margin-bottom: 1.5em;
     3  
     4    &:last-child {
     5      margin-bottom: 0;
     6    }
     7  
     8    .boxed-section-head,
     9    .boxed-section-foot {
    10      padding: 0.75em 1.5em;
    11      border: 1px solid $grey-blue;
    12      background: $white-ter;
    13      display: flex;
    14      flex-direction: row;
    15      align-items: baseline;
    16      flex-wrap: wrap;
    17  
    18      .pull-right {
    19        margin-left: auto;
    20      }
    21    }
    22  
    23    .boxed-section-head {
    24      border-top-left-radius: $radius;
    25      border-top-right-radius: $radius;
    26  
    27      &.is-light {
    28        background: $white;
    29      }
    30  
    31      & + .boxed-section-body {
    32        padding: 1.5em;
    33        border-top-left-radius: 0;
    34        border-top-right-radius: 0;
    35      }
    36    }
    37  
    38    .boxed-section-body {
    39      padding: 0.75em 1.5em;
    40      background: $white;
    41      border: 1px solid $grey-blue;
    42      margin-top: -1px;
    43      border-radius: $radius;
    44  
    45      &.is-full-bleed {
    46        padding: 0;
    47        border: none;
    48  
    49        // Often components will have a DOM presence but no layout.
    50        // In that case, pass through.
    51        > *:first-child,
    52        > .ember-view:first-child > *:first-child {
    53          border-top-left-radius: 0;
    54          border-top-right-radius: 0;
    55        }
    56      }
    57  
    58      &.is-dark {
    59        background: darken($dark, 5%);
    60        border-color: lighten($dark, 30%);
    61        color: $white;
    62      }
    63  
    64      &.with-foot {
    65        border-bottom-left-radius: 0;
    66        border-bottom-right-radius: 0;
    67      }
    68    }
    69  
    70    .boxed-section-foot {
    71      margin-top: -1px;
    72      border-bottom-left-radius: $radius;
    73      border-bottom-right-radius: $radius;
    74    }
    75  
    76    .boxed-section-row {
    77      width: 100%;
    78      display: flex;
    79      align-items: baseline;
    80  
    81      + .boxed-section-row {
    82        margin-top: 0.5em;
    83      }
    84    }
    85  
    86    &.is-small {
    87      font-size: $size-7;
    88    }
    89  
    90    @each $name, $pair in $colors {
    91      $color: nth($pair, 1);
    92      $color-invert: nth($pair, 2);
    93  
    94      &.is-#{$name} {
    95        > .boxed-section-head {
    96          background: $color;
    97          border-color: $color;
    98          color: $color-invert;
    99        }
   100  
   101        > .boxed-section-body {
   102          border-color: $color;
   103        }
   104  
   105        > .boxed-section-foot {
   106          border-color: $color;
   107          background: lighten($color, 40%);
   108          color: $color;
   109        }
   110      }
   111    }
   112  }