github.com/hernad/nomad@v1.6.112/ui/app/styles/components/boxed-section.scss (about)

     1  /**
     2   * Copyright (c) HashiCorp, Inc.
     3   * SPDX-License-Identifier: MPL-2.0
     4   */
     5  
     6  .boxed-section {
     7    margin-bottom: 1.5em;
     8  
     9    &:last-child {
    10      margin-bottom: 0;
    11    }
    12  
    13    .boxed-section-head,
    14    .boxed-section-foot {
    15      padding: 0.75em 1.5em;
    16      border: 1px solid $grey-blue;
    17      background: $white-ter;
    18      display: flex;
    19      flex-direction: row;
    20      align-items: baseline;
    21      flex-wrap: wrap;
    22  
    23      .pull-right {
    24        margin-left: auto;
    25      }
    26  
    27      .is-subsection {
    28        display: flex;
    29        align-items: baseline;
    30  
    31        .is-padded {
    32          padding: 0em 0em 0em 1em;
    33        }
    34        .is-one-line {
    35          white-space: nowrap;
    36        }
    37      }
    38  
    39      .is-fixed-width {
    40        display: inline-block;
    41        width: 8em;
    42      }
    43  
    44      &.is-compact {
    45        padding: 0.75em;
    46      }
    47    }
    48  
    49    .boxed-section-head {
    50      border-top-left-radius: $radius;
    51      border-top-right-radius: $radius;
    52  
    53      &.is-light {
    54        background: $white;
    55      }
    56  
    57      &.is-hollow {
    58        border-bottom: none;
    59        background: transparent;
    60  
    61        & + .boxed-section-body {
    62          border-top: none;
    63          padding-top: 0.75em;
    64        }
    65      }
    66  
    67      & + .boxed-section-body {
    68        padding: 1.5em;
    69        border-top-left-radius: 0;
    70        border-top-right-radius: 0;
    71      }
    72  
    73      .button,
    74      .is-inline-block {
    75        display: inline-block;
    76      }
    77  
    78      .header-toggle {
    79        display: inline-block;
    80        position: relative;
    81        top: 0.2em;
    82        margin-left: $control-padding-horizontal;
    83        margin-right: $control-padding-horizontal;
    84      }
    85  
    86      &.task-log-head .header-toggle {
    87        top: 0.5em;
    88      }
    89    }
    90  
    91    .boxed-section-body {
    92      padding: 0.75em 1.5em;
    93      background: $white;
    94      border: 1px solid $grey-blue;
    95      margin-top: -1px;
    96      border-radius: $radius;
    97  
    98      &.is-full-bleed {
    99        padding: 0;
   100        border: none;
   101  
   102        // Often components will have a DOM presence but no layout.
   103        // In that case, pass through.
   104        > *:first-child,
   105        > .ember-view:first-child > *:first-child {
   106          border-top-left-radius: 0;
   107          border-top-right-radius: 0;
   108        }
   109      }
   110  
   111      &.is-dark {
   112        background: $dark-2;
   113        border-color: lighten($dark, 30%);
   114        color: $white;
   115      }
   116  
   117      &.with-foot {
   118        border-bottom-left-radius: 0;
   119        border-bottom-right-radius: 0;
   120      }
   121    }
   122  
   123    .boxed-section-foot {
   124      margin-top: -1px;
   125      border-bottom-left-radius: $radius;
   126      border-bottom-right-radius: $radius;
   127    }
   128  
   129    .boxed-section-row {
   130      width: 100%;
   131      display: flex;
   132      align-items: baseline;
   133  
   134      + .boxed-section-row {
   135        margin-top: 0.5em;
   136      }
   137    }
   138  
   139    &.is-small {
   140      font-size: $size-7;
   141    }
   142  
   143    @each $name, $pair in $colors {
   144      $color: nth($pair, 1);
   145      $color-invert: nth($pair, 2);
   146  
   147      &.is-#{$name} {
   148        > .boxed-section-head {
   149          background: $color;
   150          border-color: $color;
   151          color: $color-invert;
   152        }
   153  
   154        > .boxed-section-body {
   155          border-color: $color;
   156        }
   157  
   158        > .boxed-section-foot {
   159          border-color: $color;
   160          background: lighten($color, 40%);
   161          color: $color;
   162        }
   163      }
   164    }
   165  }