1  // ==========================================================================
  2  // Base – Grid
  3  // ==========================================================================
  4  .section { position: relative; }
  5  
  6  .container {
  7    max-width: @desktop-container;
  8    margin-left: auto;
  9    margin-right: auto;
 10    padding-left: 10px;
 11    padding-right: 10px;
 12  }
 13  .container-full {
 14    max-width: @desktop-container;
 15    margin-left: auto;
 16    margin-right: auto;
 17  }
 18  
 19  // Columns
 20  .col {
 21    float: left;
 22    padding-left: 10px;
 23    padding-right: 10px;
 24  }
 25  [class*="pull-"], [class*="push-"] { position: relative; }
 26  
 27  .no-gutter {
 28    padding-left: 0;
 29    padding-right: 0;
 30  }
 31  
 32  .col-1 {
 33    width: 8.33333%; // Fallback if calc() is not supported
 34    width: calc(~'100% / 12 * 1');
 35    width: -webkit-calc(~'100% / 12 * 1');
 36    width: -moz-calc(~'100% / 12 * 1');
 37  }
 38  .col-2 {
 39    width: 16.66667%; // Fallback if calc() is not supported
 40    width: calc(~'100% / 12 * 2');
 41    width: -webkit-calc(~'100% / 12 * 2');
 42    width: -moz-calc(~'100% / 12 * 2');
 43  }
 44  .col-3 {
 45    width: 25%; // Fallback if calc() is not supported
 46    width: calc(~'100% / 12 * 3');
 47    width: -webkit-calc(~'100% / 12 * 3');
 48    width: -moz-calc(~'100% / 12 * 3');
 49  }
 50  .col-4 {
 51    width: 33.33333%; // Fallback if calc() is not supported
 52    width: calc(~'100% / 12 * 4');
 53    width: -webkit-calc(~'100% / 12 * 4');
 54    width: -moz-calc(~'100% / 12 * 4');
 55  }
 56  .col-5 {
 57    width: 41.66665%; // Fallback if calc() is not supported
 58    width: calc(~'100% / 12 * 5');
 59    width: -webkit-calc(~'100% / 12 * 5');
 60    width: -moz-calc(~'100% / 12 * 5');
 61  }
 62  .col-6 {
 63    width: 50%; // Fallback if calc() is not supported
 64    width: calc(~'100% / 12 * 6');
 65    width: -webkit-calc(~'100% / 12 * 6');
 66    width: -moz-calc(~'100% / 12 * 6');
 67  }
 68  .col-7 {
 69    width: 58.33333%; // Fallback if calc() is not supported
 70    width: calc(~'100% / 12 * 7');
 71    width: -webkit-calc(~'100% / 12 * 7');
 72    width: -moz-calc(~'100% / 12 * 7');
 73  }
 74  .col-8 {
 75    width: 66.66666%; // Fallback if calc() is not supported
 76    width: calc(~'100% / 12 * 8');
 77    width: -webkit-calc(~'100% / 12 * 8');
 78    width: -moz-calc(~'100% / 12 * 8');
 79  }
 80  .col-9 {
 81    width: 75%; // Fallback if calc() is not supported
 82    width: calc(~'100% / 12 * 9');
 83    width: -webkit-calc(~'100% / 12 * 9');
 84    width: -moz-calc(~'100% / 12 * 9');
 85  }
 86  .col-10 {
 87    width: 83.33333%; // Fallback if calc() is not supported
 88    width: calc(~'100% / 12 * 10');
 89    width: -webkit-calc(~'100% / 12 * 10');
 90    width: -moz-calc(~'100% / 12 * 10');
 91  }
 92  .col-11 {
 93    width: 91.66666%; // Fallback if calc() is not supported
 94    width: calc(~'100% / 12 * 11');
 95    width: -webkit-calc(~'100% / 12 * 11');
 96    width: -moz-calc(~'100% / 12 * 11');
 97  }
 98  .col-12 { width: 100%; }
 99  
100  .col-1-2 { &:extend(.col-6); }
101  .col-1-3 { &:extend(.col-4); }
102  .col-1-4 { &:extend(.col-3); }
103  .col-3-4 { &:extend(.col-9); }
104  
105  // Push/Pull
106  .push-1 {
107    left: 8.33333%; // Fallback if calc() is not supported
108    left: calc(~'100% / 12 * 1');
109    left: -webkit-calc(~'100% / 12 * 1');
110    left: -moz-calc(~'100% / 12 * 1');
111  }
112  .pull-1 {
113    left: -8.33333%; // Fallback if calc() is not supported
114    left: calc(~'-100% / 12 * 1');
115    left: -webkit-calc(~'-100% / 12 * 1');
116    left: -moz-calc(~'-100% / 12 * 1');
117  }
118  .push-2 {
119    left: 16.66667%; // Fallback if calc() is not supported
120    left: calc(~'100% / 12 * 2');
121    left: -webkit-calc(~'100% / 12 * 2');
122    left: -moz-calc(~'100% / 12 * 2');
123  }
124  .pull-2 {
125    left: -16.66667%; // Fallback if calc() is not supported
126    left: calc(~'-100% / 12 * 2');
127    left: -webkit-calc(~'-100% / 12 * 2');
128    left: -moz-calc(~'-100% / 12 * 2');
129  }
130  .push-3 {
131    left: 25%; // Fallback if calc() is not supported
132    left: calc(~'100% / 12 * 3');
133    left: -webkit-calc(~'100% / 12 * 3');
134    left: -moz-calc(~'100% / 12 * 3');
135  }
136  .pull-3 {
137    left: -25%; // Fallback if calc() is not supported
138    left: calc(~'-100% / 12 * 3');
139    left: -webkit-calc(~'-100% / 12 * 3');
140    left: -moz-calc(~'-100% / 12 * 3');
141  }
142  .push-4 {
143    left: 33.33333%; // Fallback if calc() is not supported
144    left: calc(~'100% / 12 * 4');
145    left: -webkit-calc(~'100% / 12 * 4');
146    left: -moz-calc(~'100% / 12 * 4');
147  }
148  .pull-4 {
149    left: -33.33333%; // Fallback if calc() is not supported
150    left: calc(~'-100% / 12 * 4');
151    left: -webkit-calc(~'-100% / 12 * 4');
152    left: -moz-calc(~'-100% / 12 * 4');
153  }
154  .push-5 {
155    left: 41.66665%; // Fallback if calc() is not supported
156    left: calc(~'100% / 12 * 5');
157    left: -webkit-calc(~'100% / 12 * 5');
158    left: -moz-calc(~'100% / 12 * 5');
159  }
160  .pull-5 {
161    left: -41.66665%; // Fallback if calc() is not supported
162    left: calc(~'-100% / 12 * 5');
163    left: -webkit-calc(~'-100% / 12 * 5');
164    left: -moz-calc(~'-100% / 12 * 5');
165  }
166  .push-6 {
167    left: 50%; // Fallback if calc() is not supported
168    left: calc(~'100% / 12 * 6');
169    left: -webkit-calc(~'100% / 12 * 6');
170    left: -moz-calc(~'100% / 12 * 6');
171  }
172  .pull-6 {
173    left: -50%; // Fallback if calc() is not supported
174    left: calc(~'-100% / 12 * 6');
175    left: -webkit-calc(~'-100% / 12 * 6');
176    left: -moz-calc(~'-100% / 12 * 6');
177  }
178  .push-7 {
179    left: 58.33333%; // Fallback if calc() is not supported
180    left: calc(~'100% / 12 * 7');
181    left: -webkit-calc(~'100% / 12 * 7');
182    left: -moz-calc(~'100% / 12 * 7');
183  }
184  .pull-7 {
185    left: -58.33333%; // Fallback if calc() is not supported
186    left: calc(~'-100% / 12 * 7');
187    left: -webkit-calc(~'-100% / 12 * 7');
188    left: -moz-calc(~'-100% / 12 * 7');
189  }
190  .push-8 {
191    left: 66.66666%; // Fallback if calc() is not supported
192    left: calc(~'100% / 12 * 8');
193    left: -webkit-calc(~'100% / 12 * 8');
194    left: -moz-calc(~'100% / 12 * 8');
195  }
196  .pull-8 {
197    left: -66.66666%; // Fallback if calc() is not supported
198    left: calc(~'-100% / 12 * 8');
199    left: -webkit-calc(~'-100% / 12 * 8');
200    left: -moz-calc(~'-100% / 12 * 8');
201  }
202  .push-9 {
203    left: 75%; // Fallback if calc() is not supported
204    left: calc(~'100% / 12 * 9');
205    left: -webkit-calc(~'100% / 12 * 9');
206    left: -moz-calc(~'100% / 12 * 9');
207  }
208  .pull-9 {
209    left: -75%; // Fallback if calc() is not supported
210    left: calc(~'-100% / 12 * 9');
211    left: -webkit-calc(~'-100% / 12 * 9');
212    left: -moz-calc(~'-100% / 12 * 9');
213  }
214  .push-10 {
215    left: 83.33333%; // Fallback if calc() is not supported
216    left: calc(~'100% / 12 * 10');
217    left: -webkit-calc(~'100% / 12 * 10');
218    left: -moz-calc(~'100% / 12 * 10');
219  }
220  .pull-10 {
221    left: -83.33333%; // Fallback if calc() is not supported
222    left: calc(~'-100% / 12 * 10');
223    left: -webkit-calc(~'-100% / 12 * 10');
224    left: -moz-calc(~'-100% / 12 * 10');
225  }
226  .push-11 {
227    left: 91.66666%; // Fallback if calc() is not supported
228    left: calc(~'100% / 12 * 11');
229    left: -webkit-calc(~'100% / 12 * 11');
230    left: -moz-calc(~'100% / 12 * 11');
231  }
232  .pull-11 {
233    left: -91.66666%; // Fallback if calc() is not supported
234    left: calc(~'-100% / 12 * 11');
235    left: -webkit-calc(~'-100% / 12 * 11');
236    left: -moz-calc(~'-100% / 12 * 11');
237  }
238  
239  .push-1-2 { &:extend(.push-6); }
240  .pull-1-2 { &:extend(.pull-6); }
241  .push-1-3 { &:extend(.push-4); }
242  .pull-1-3 { &:extend(.pull-4); }
243  .push-1-4 { &:extend(.push-3); }
244  .pull-1-4 { &:extend(.pull-3); }
245  .push-3-4 { &:extend(.push-9); }
246  .pull-3-4 { &:extend(.pull-9); }
247  
248  // Rows
249  .row {
250    padding-top: 1em;
251    padding-bottom: 1em;
252  }
253  
254  .no-desktop { display: none; }
255  
256  // Remove Margin / Padding
257  .no-margin { margin: 0; }
258  .no-padding { padding: 0; }
259  
260  @import "../_desktop-styles.import.less"; // Import Custom Desktop Styles