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