[Summary view] [Print] [Text view]

   1  // General layout
   2  .media-container {
   3    display: flex;
   4    flex-wrap: wrap;
   5    margin-top: 1rem;
   6    background-color: #fff;
   7    border-radius: $border-radius;
   8    box-shadow: $col-box-shadow;
   9  
  10    .contentpane & {
  11      margin: 0 -20px;
  12      box-shadow: none;
  13    }
  14  }
  15  
  16  .media-col-main-panel {
  17    flex: 0 0 $col-main-panel-width;
  18    max-width: $col-main-panel-width;
  19  }
  20  
  21  .media-col-side-panel {
  22    flex: 0 0 $col-side-panel-width;
  23    max-width: $col-side-panel-width;
  24  }
  25  
  26  [class^="media-col"], [class*=" media-col"] {
  27    position: relative;
  28    width: 100%;
  29    min-height: 1px;
  30    padding-right: $col-gutter-width * .5;
  31    padding-left: $col-gutter-width * .5;
  32  }
  33  
  34  @media (min-width: var(--breakpoint-md)) {
  35    [class^="media-col"], [class*=" media-col"] {
  36      flex: 0 0 100%;
  37      max-width: 100%;
  38    }
  39  }
  40  
  41  .media-main {
  42    position: relative;
  43    flex: 1 1 600px;
  44    min-height: 75vh;
  45  }
  46  
  47  .media-sidebar {
  48    flex: 0 0 280px;
  49    padding: 1rem;
  50  }