[Summary view] [Print] [Text view]

   1  /**
   2   * @provides aphront-multi-column-view-css
   3   */
   4  
   5  .aphront-multi-column-view {
   6    width: 100%;
   7  }
   8  
   9  .device .aphront-multi-column-outer {
  10    padding: 0;
  11    margin: 0 auto;
  12    width: 100%;
  13  }
  14  
  15  .aphront-multi-column-inner .aphront-multi-column-column-last,
  16  .device .aphront-multi-column-column {
  17    margin: 0;
  18  }
  19  
  20  .device-desktop .phui-workboard-view-shadow .aphront-multi-column-inner
  21    .aphront-multi-column-column-last {
  22    margin-right: 8px;
  23  }
  24  
  25  .device .aphront-multi-column-outer
  26    div.aphront-multi-column-column-outer {
  27    width: auto;
  28    margin-bottom: 16px;
  29  }
  30  
  31  .device .aphront-multi-column-fixed .aphront-multi-column-inner {
  32     width: 100%;
  33  }
  34  
  35  .aphront-multi-column-fixed .aphront-multi-column-column-outer {
  36    width: 300px;
  37  }
  38  
  39  /* flexible, but with a minimum */
  40  .device-desktop .aphront-multi-column-fluidish .aphront-multi-column-1-up {
  41    min-width: 200px;
  42  }
  43  
  44  .device-desktop .aphront-multi-column-fluidish .aphront-multi-column-2-up {
  45    min-width: 400px;
  46  }
  47  
  48  .device-desktop .aphront-multi-column-fluidish .aphront-multi-column-3-up {
  49    min-width: 600px;
  50  }
  51  
  52  .device-desktop .aphront-multi-column-fluidish .aphront-multi-column-4-up {
  53    min-width: 800px;
  54  }
  55  
  56  .device-desktop .aphront-multi-column-fluidish .aphront-multi-column-5-up {
  57    min-width: 1000px;
  58  }
  59  
  60  .device-desktop .aphront-multi-column-fluidish .aphront-multi-column-6-up {
  61    min-width: 1200px;
  62  }
  63  
  64  .device-desktop .aphront-multi-column-fluidish .aphront-multi-column-7-up {
  65    min-width: 1400px;
  66  }
  67  
  68  /* table division */
  69  .aphront-multi-column-fluid .aphront-multi-column-1-up
  70    .aphront-multi-column-column-outer {
  71    width: 100%;
  72  }
  73  
  74  .aphront-multi-column-fluid .aphront-multi-column-2-up
  75    .aphront-multi-column-column-outer {
  76    width: 50%;
  77  }
  78  
  79  .aphront-multi-column-fluid .aphront-multi-column-3-up
  80    .aphront-multi-column-column-outer {
  81    width: 33.3333%;
  82  }
  83  
  84  .aphront-multi-column-fluid .aphront-multi-column-4-up
  85    .aphront-multi-column-column-outer {
  86    width: 25%;
  87  }
  88  
  89  .aphront-multi-column-fluid .aphront-multi-column-5-up
  90    .aphront-multi-column-column-outer {
  91    width: 20%;
  92  }
  93  
  94  .aphront-multi-column-fluid .aphront-multi-column-6-up
  95    .aphront-multi-column-column-outer {
  96    width: 16.6666%;
  97  }
  98  
  99  .aphront-multi-column-fluid .aphront-multi-column-7-up
 100    .aphront-multi-column-column-outer {
 101    width: 14.2857%;
 102  }
 103  
 104  /* Shadow Panels */
 105  
 106  .aphront-multi-column-inner {
 107    display: table;
 108    width: 100%;
 109  }
 110  
 111  .device-desktop .aphront-multi-column-fixed .aphront-multi-column-inner {
 112    margin: 0 0 12px 12px;
 113  }
 114  
 115  /* magic sauce */
 116  .aphront-multi-column-fluid .aphront-multi-column-inner {
 117    table-layout: fixed;
 118  }
 119  
 120  .device .aphront-multi-column-inner {
 121    display: block;
 122    width: auto;
 123  }
 124  
 125  .aphront-multi-column-column-outer {
 126    display: table-cell;
 127    height: 100%;
 128    vertical-align: top;
 129  }
 130  
 131  .phui-box-border .aphront-multi-column-column-outer {
 132    border-right: 1px solid {$lightblueborder};
 133    padding-left: 8px;
 134    padding-right: 8px;
 135  }
 136  
 137  .phui-box-border .aphront-multi-colum-column-outer-last {
 138    border: none;
 139  }
 140  
 141  .device .aphront-multi-column-column-outer {
 142    display: block;
 143    border: none;
 144  }
 145  
 146  .device .phui-box-border .aphront-multi-column-column-outer {
 147    padding-bottom: 16px;
 148    border-bottom: 1px solid #e7e7e7;
 149  }
 150  
 151  .device .phui-box-border .aphront-multi-colum-column-outer-last {
 152    border: none;
 153    padding-bottom: 0;
 154  }