[Summary view] [Print] [Text view]

   1  // Layout
   2  
   3  .grid-child {
   4    display: flex;
   5    width: 100%;
   6    max-width: max-width(xxl);
   7    margin-right: auto;
   8    margin-left: auto;
   9  }
  10  
  11  .mod-custom {
  12    position: relative;
  13  }
  14  
  15  .container-topbar,
  16  .container-below-top {
  17    color: $white;
  18    a {
  19      color: currentColor;
  20    }
  21  }
  22  
  23  .container-banner {
  24    display: block;
  25    margin: 0 0 2rem;
  26  }
  27  
  28  .container-top-a,
  29  .container-top-b,
  30  .container-bottom-a,
  31  .container-bottom-b {
  32    position: relative;
  33    > * {
  34      flex: 1;
  35      margin: ($cassiopeia-grid-gutter * .5) 0;
  36    }
  37  
  38    @include media-breakpoint-down(lg) {
  39      flex-direction: column;
  40  
  41      > * {
  42        flex: 0 1 auto;
  43      }
  44    }
  45  }
  46  
  47  .container-component nav {
  48    position: relative;
  49  }
  50  
  51  .container-component,
  52  .container-sidebar-left,
  53  .container-sidebar-right {
  54    display: flex;
  55    flex: 1;
  56    flex-direction: column;
  57  
  58    > * {
  59      margin-bottom: 0;
  60  
  61      &:first-child {
  62        margin-top: $cassiopeia-grid-gutter;
  63      }
  64    }
  65  
  66    > * + * {
  67      margin-top: $cassiopeia-grid-gutter;
  68    }
  69  }
  70  
  71  .container-sidebar-left,
  72  .container-sidebar-right {
  73    flex: 0 0 auto;
  74    width: calc(100% - #{$cassiopeia-grid-gutter});
  75    order: 1;
  76  
  77    @include media-breakpoint-up(md) {
  78      width: calc(25% - #{$cassiopeia-grid-gutter});
  79      order: 0;
  80    }
  81  }
  82  
  83  .container-sidebar-left {
  84    .sidebar-left:first-child {
  85      margin-top: $cassiopeia-grid-gutter;
  86    }
  87    .sidebar-left:last-child {
  88      margin-bottom: $cassiopeia-grid-gutter;
  89    }
  90  }
  91  .container-sidebar-right {
  92    .sidebar-right:first-child {
  93      margin-top: $cassiopeia-grid-gutter;
  94    }
  95    .sidebar-right:last-child {
  96      margin-bottom: $cassiopeia-grid-gutter;
  97    }
  98  }
  99  
 100  .system-debug {
 101    display: block;
 102  }
 103  
 104  .options-form {
 105    width: 100%;
 106    padding: 1vw 2vw;
 107    margin-bottom: 1rem;
 108    color: #495057;
 109    background-color: $white;
 110    border: 1px solid #b2bfcd;
 111  
 112    > legend {
 113      float: none;
 114      width: auto;
 115      padding: 0 .5rem;
 116      font-weight: 700;
 117      color: #495057;
 118      background-color: $white;
 119    }
 120  }