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