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