github.com/ferranbt/nomad@v0.9.3-0.20190607002617-85c449b7667c/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      &.is-hollow {
    32        border-bottom: none;
    33        background: transparent;
    34  
    35        & + .boxed-section-body {
    36          border-top: none;
    37          padding-top: 0.75em;
    38        }
    39      }
    40  
    41      & + .boxed-section-body {
    42        padding: 1.5em;
    43        border-top-left-radius: 0;
    44        border-top-right-radius: 0;
    45      }
    46    }
    47  
    48    .boxed-section-body {
    49      padding: 0.75em 1.5em;
    50      background: $white;
    51      border: 1px solid $grey-blue;
    52      margin-top: -1px;
    53      border-radius: $radius;
    54  
    55      &.is-full-bleed {
    56        padding: 0;
    57        border: none;
    58  
    59        // Often components will have a DOM presence but no layout.
    60        // In that case, pass through.
    61        > *:first-child,
    62        > .ember-view:first-child > *:first-child {
    63          border-top-left-radius: 0;
    64          border-top-right-radius: 0;
    65        }
    66      }
    67  
    68      &.is-dark {
    69        background: $dark-2;
    70        border-color: lighten($dark, 30%);
    71        color: $white;
    72      }
    73  
    74      &.with-foot {
    75        border-bottom-left-radius: 0;
    76        border-bottom-right-radius: 0;
    77      }
    78    }
    79  
    80    .boxed-section-foot {
    81      margin-top: -1px;
    82      border-bottom-left-radius: $radius;
    83      border-bottom-right-radius: $radius;
    84    }
    85  
    86    .boxed-section-row {
    87      width: 100%;
    88      display: flex;
    89      align-items: baseline;
    90  
    91      + .boxed-section-row {
    92        margin-top: 0.5em;
    93      }
    94    }
    95  
    96    &.is-small {
    97      font-size: $size-7;
    98    }
    99  
   100    @each $name, $pair in $colors {
   101      $color: nth($pair, 1);
   102      $color-invert: nth($pair, 2);
   103  
   104      &.is-#{$name} {
   105        > .boxed-section-head {
   106          background: $color;
   107          border-color: $color;
   108          color: $color-invert;
   109        }
   110  
   111        > .boxed-section-body {
   112          border-color: $color;
   113        }
   114  
   115        > .boxed-section-foot {
   116          border-color: $color;
   117          background: lighten($color, 40%);
   118          color: $color;
   119        }
   120      }
   121    }
   122  }