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