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