office-ui-fabric-core-rails 4.1.0.0 → 5.0.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. checksums.yaml +4 -4
  2. data/.gitignore +1 -0
  3. data/Rakefile +3 -3
  4. data/lib/office-ui-fabric-core-rails/version.rb +2 -2
  5. data/{bower.json → package.json} +2 -2
  6. data/vendor/assets/css/fabric.css +2573 -129
  7. data/vendor/assets/css/fabric.min.css +2 -2
  8. data/vendor/assets/css/fabric.rtl.css +1242 -458
  9. data/vendor/assets/css/fabric.rtl.min.css +2 -2
  10. data/vendor/assets/scss/Fabric.Brand.Icons.Output.scss +19 -0
  11. data/vendor/assets/scss/Fabric.Icons.Font.Output.scss +2 -3
  12. data/vendor/assets/scss/Fabric.Icons.Output.scss +708 -645
  13. data/vendor/assets/scss/Fabric.Icons.RTL.Output.scss +144 -342
  14. data/vendor/assets/scss/Fabric.Responsive.Utilities.Output.scss +767 -777
  15. data/vendor/assets/scss/Fabric.Typography.Fonts.Extended.Output.scss +9 -9
  16. data/vendor/assets/scss/Fabric.scss +3 -0
  17. data/vendor/assets/scss/_Fabric.Animations.scss +6 -6
  18. data/vendor/assets/scss/_Fabric.Brand.Icons.scss +51 -0
  19. data/vendor/assets/scss/_Fabric.Color.Variables.scss +64 -64
  20. data/vendor/assets/scss/_Fabric.Icons.scss +115 -53
  21. data/vendor/assets/scss/_Fabric.Responsive.Utilities.Variables.scss +918 -192
  22. data/vendor/assets/scss/_Fabric.Responsive.Variables.scss +6 -6
  23. data/vendor/assets/scss/_Fabric.Typography.Fonts.scss +21 -21
  24. data/vendor/assets/scss/_Fabric.Typography.Language.Overrides.scss +12 -12
  25. data/vendor/assets/scss/_Fabric.Typography.Variables.scss +16 -16
  26. data/vendor/assets/scss/_Fabric.ZIndex.Variables.scss +17 -17
  27. metadata +5 -4
  28. data/vendor/assets/scss/_Fabric.Icons.Adjustments.scss +0 -6
@@ -114,584 +114,1310 @@
114
114
  left: auto;
115
115
  }
116
116
 
117
+ // Small Offset classes 0 ... 11
118
+ @mixin ms-u-smOffset11 {
119
+ margin-left: 91.66666666666666%;
120
+ }
121
+ @mixin ms-u-smOffset10 {
122
+ margin-left: 83.33333333333334%;
123
+ }
124
+ @mixin ms-u-smOffset9 {
125
+ margin-left: 75%;
126
+ }
127
+ @mixin ms-u-smOffset8 {
128
+ margin-left: 66.66666666666666%;
129
+ }
130
+ @mixin ms-u-smOffset7 {
131
+ margin-left: 58.333333333333336%;
132
+ }
133
+ @mixin ms-u-smOffset6 {
134
+ margin-left: 50%;
135
+ }
136
+ @mixin ms-u-smOffset5 {
137
+ margin-left: 41.66666666666667%;
138
+ }
139
+ @mixin ms-u-smOffset4 {
140
+ margin-left: 33.33333333333333%;
141
+ }
142
+ @mixin ms-u-smOffset3 {
143
+ margin-left: 25%;
144
+ }
145
+ @mixin ms-u-smOffset2 {
146
+ margin-left: 16.666666666666664%;
147
+ }
148
+ @mixin ms-u-smOffset1 {
149
+ margin-left: 8.333333333333332%;
150
+ }
151
+ @mixin ms-u-smOffset0 {
152
+ margin-left: 0;
153
+ }
154
+
117
155
  // Medium Screens
118
156
  @mixin ms-u-md12 {
119
- width: 100%;
157
+ @media (min-width: $ms-screen-md-min) {
158
+ width: 100%;
159
+ }
120
160
  }
121
161
  @mixin ms-u-md11 {
122
- width: 91.66666666666666%;
162
+ @media (min-width: $ms-screen-md-min) {
163
+ width: 91.66666666666666%;
164
+ }
123
165
  }
124
166
  @mixin ms-u-md10 {
125
- width: 83.33333333333334%;
167
+ @media (min-width: $ms-screen-md-min) {
168
+ width: 83.33333333333334%;
169
+ }
126
170
  }
127
171
  @mixin ms-u-md9 {
128
- width: 75%;
172
+ @media (min-width: $ms-screen-md-min) {
173
+ width: 75%;
174
+ }
129
175
  }
130
176
  @mixin ms-u-md8 {
131
- width: 66.66666666666666%;
177
+ @media (min-width: $ms-screen-md-min) {
178
+ width: 66.66666666666666%;
179
+ }
132
180
  }
133
181
  @mixin ms-u-md7 {
134
- width: 58.333333333333336%;
182
+ @media (min-width: $ms-screen-md-min) {
183
+ width: 58.333333333333336%;
184
+ }
135
185
  }
136
186
  @mixin ms-u-md6 {
137
- width: 50%;
187
+ @media (min-width: $ms-screen-md-min) {
188
+ width: 50%;
189
+ }
138
190
  }
139
191
  @mixin ms-u-md5 {
140
- width: 41.66666666666667%;
192
+ @media (min-width: $ms-screen-md-min) {
193
+ width: 41.66666666666667%;
194
+ }
141
195
  }
142
196
  @mixin ms-u-md4 {
143
- width: 33.33333333333333%;
197
+ @media (min-width: $ms-screen-md-min) {
198
+ width: 33.33333333333333%;
199
+ }
144
200
  }
145
201
  @mixin ms-u-md3 {
146
- width: 25%;
202
+ @media (min-width: $ms-screen-md-min) {
203
+ width: 25%;
204
+ }
147
205
  }
148
206
  @mixin ms-u-md2 {
149
- width: 16.666666666666664%;
207
+ @media (min-width: $ms-screen-md-min) {
208
+ width: 16.666666666666664%;
209
+ }
150
210
  }
151
211
  @mixin ms-u-md1 {
152
- width: 8.333333333333332%;
212
+ @media (min-width: $ms-screen-md-min) {
213
+ width: 8.333333333333332%;
214
+ }
153
215
  }
154
216
  @mixin ms-u-mdPull12 {
155
- right: 100%;
217
+ @media (min-width: $ms-screen-md-min) {
218
+ right: 100%;
219
+ }
156
220
  }
157
221
  @mixin ms-u-mdPull11 {
158
- right: 91.66666666666666%;
222
+ @media (min-width: $ms-screen-md-min) {
223
+ right: 91.66666666666666%;
224
+ }
159
225
  }
160
226
  @mixin ms-u-mdPull10 {
161
- right: 83.33333333333334%;
227
+ @media (min-width: $ms-screen-md-min) {
228
+ right: 83.33333333333334%;
229
+ }
162
230
  }
163
231
  @mixin ms-u-mdPull9 {
164
- right: 75%;
232
+ @media (min-width: $ms-screen-md-min) {
233
+ right: 75%;
234
+ }
165
235
  }
166
236
  @mixin ms-u-mdPull8 {
167
- right: 66.66666666666666%;
237
+ @media (min-width: $ms-screen-md-min) {
238
+ right: 66.66666666666666%;
239
+ }
168
240
  }
169
241
  @mixin ms-u-mdPull7 {
170
- right: 58.333333333333336%;
242
+ @media (min-width: $ms-screen-md-min) {
243
+ right: 58.333333333333336%;
244
+ }
171
245
  }
172
246
  @mixin ms-u-mdPull6 {
173
- right: 50%;
247
+ @media (min-width: $ms-screen-md-min) {
248
+ right: 50%;
249
+ }
174
250
  }
175
251
  @mixin ms-u-mdPull5 {
176
- right: 41.66666666666667%;
252
+ @media (min-width: $ms-screen-md-min) {
253
+ right: 41.66666666666667%;
254
+ }
177
255
  }
178
256
  @mixin ms-u-mdPull4 {
179
- right: 33.33333333333333%;
257
+ @media (min-width: $ms-screen-md-min) {
258
+ right: 33.33333333333333%;
259
+ }
180
260
  }
181
261
  @mixin ms-u-mdPull3 {
182
- right: 25%;
262
+ @media (min-width: $ms-screen-md-min) {
263
+ right: 25%;
264
+ }
183
265
  }
184
266
  @mixin ms-u-mdPull2 {
185
- right: 16.666666666666664%;
267
+ @media (min-width: $ms-screen-md-min) {
268
+ right: 16.666666666666664%;
269
+ }
186
270
  }
187
271
  @mixin ms-u-mdPull1 {
188
- right: 8.333333333333332%;
272
+ @media (min-width: $ms-screen-md-min) {
273
+ right: 8.333333333333332%;
274
+ }
189
275
  }
190
276
  @mixin ms-u-mdPull0 {
191
- right: auto;
277
+ @media (min-width: $ms-screen-md-min) {
278
+ right: auto;
279
+ }
192
280
  }
193
281
  @mixin ms-u-mdPush12 {
194
- left: 100%;
282
+ @media (min-width: $ms-screen-md-min) {
283
+ left: 100%;
284
+ }
195
285
  }
196
286
  @mixin ms-u-mdPush11 {
197
- left: 91.66666666666666%;
287
+ @media (min-width: $ms-screen-md-min) {
288
+ left: 91.66666666666666%;
289
+ }
198
290
  }
199
291
  @mixin ms-u-mdPush10 {
200
- left: 83.33333333333334%;
292
+ @media (min-width: $ms-screen-md-min) {
293
+ left: 83.33333333333334%;
294
+ }
201
295
  }
202
296
  @mixin ms-u-mdPush9 {
203
- left: 75%;
297
+ @media (min-width: $ms-screen-md-min) {
298
+ left: 75%;
299
+ }
204
300
  }
205
301
  @mixin ms-u-mdPush8 {
206
- left: 66.66666666666666%;
302
+ @media (min-width: $ms-screen-md-min) {
303
+ left: 66.66666666666666%;
304
+ }
207
305
  }
208
306
  @mixin ms-u-mdPush7 {
209
- left: 58.333333333333336%;
307
+ @media (min-width: $ms-screen-md-min) {
308
+ left: 58.333333333333336%;
309
+ }
210
310
  }
211
311
  @mixin ms-u-mdPush6 {
212
- left: 50%;
312
+ @media (min-width: $ms-screen-md-min) {
313
+ left: 50%;
314
+ }
213
315
  }
214
316
  @mixin ms-u-mdPush5 {
215
- left: 41.66666666666667%;
317
+ @media (min-width: $ms-screen-md-min) {
318
+ left: 41.66666666666667%;
319
+ }
216
320
  }
217
321
  @mixin ms-u-mdPush4 {
218
- left: 33.33333333333333%;
322
+ @media (min-width: $ms-screen-md-min) {
323
+ left: 33.33333333333333%;
324
+ }
219
325
  }
220
326
  @mixin ms-u-mdPush3 {
221
- left: 25%;
327
+ @media (min-width: $ms-screen-md-min) {
328
+ left: 25%;
329
+ }
222
330
  }
223
331
  @mixin ms-u-mdPush2 {
224
- left: 16.666666666666664%;
332
+ @media (min-width: $ms-screen-md-min) {
333
+ left: 16.666666666666664%;
334
+ }
225
335
  }
226
336
  @mixin ms-u-mdPush1 {
227
- left: 8.333333333333332%;
337
+ @media (min-width: $ms-screen-md-min) {
338
+ left: 8.333333333333332%;
339
+ }
228
340
  }
229
341
  @mixin ms-u-mdPush0 {
230
- left: auto;
342
+ @media (min-width: $ms-screen-md-min) {
343
+ left: auto;
344
+ }
345
+ }
346
+
347
+ // Medium Offset classes 0 ... 11
348
+ @mixin ms-u-mdOffset11 {
349
+ @media (min-width: $ms-screen-md-min) {
350
+ margin-left: 91.66666666666666%;
351
+ }
352
+ }
353
+ @mixin ms-u-mdOffset10 {
354
+ @media (min-width: $ms-screen-md-min) {
355
+ margin-left: 83.33333333333334%;
356
+ }
357
+ }
358
+ @mixin ms-u-mdOffset9 {
359
+ @media (min-width: $ms-screen-md-min) {
360
+ margin-left: 75%;
361
+ }
362
+ }
363
+ @mixin ms-u-mdOffset8 {
364
+ @media (min-width: $ms-screen-md-min) {
365
+ margin-left: 66.66666666666666%;
366
+ }
367
+ }
368
+ @mixin ms-u-mdOffset7 {
369
+ @media (min-width: $ms-screen-md-min) {
370
+ margin-left: 58.333333333333336%;
371
+ }
372
+ }
373
+ @mixin ms-u-mdOffset6 {
374
+ @media (min-width: $ms-screen-md-min) {
375
+ margin-left: 50%;
376
+ }
377
+ }
378
+ @mixin ms-u-mdOffset5 {
379
+ @media (min-width: $ms-screen-md-min) {
380
+ margin-left: 41.66666666666667%;
381
+ }
382
+ }
383
+ @mixin ms-u-mdOffset4 {
384
+ @media (min-width: $ms-screen-md-min) {
385
+ margin-left: 33.33333333333333%;
386
+ }
387
+ }
388
+ @mixin ms-u-mdOffset3 {
389
+ @media (min-width: $ms-screen-md-min) {
390
+ margin-left: 25%;
391
+ }
392
+ }
393
+ @mixin ms-u-mdOffset2 {
394
+ @media (min-width: $ms-screen-md-min) {
395
+ margin-left: 16.666666666666664%;
396
+ }
397
+ }
398
+ @mixin ms-u-mdOffset1 {
399
+ @media (min-width: $ms-screen-md-min) {
400
+ margin-left: 8.333333333333332%;
401
+ }
402
+ }
403
+ @mixin ms-u-mdOffset0 {
404
+ @media (min-width: $ms-screen-md-min) {
405
+ margin-left: 0;
406
+ }
231
407
  }
232
408
 
233
409
  // Large screens
234
410
  @mixin ms-u-lg12 {
235
- width: 100%;
411
+ @media (min-width: $ms-screen-lg-min) {
412
+ width: 100%;
413
+ }
236
414
  }
237
415
  @mixin ms-u-lg11 {
238
- width: 91.66666666666666%;
416
+ @media (min-width: $ms-screen-lg-min) {
417
+ width: 91.66666666666666%;
418
+ }
239
419
  }
240
420
  @mixin ms-u-lg10 {
241
- width: 83.33333333333334%;
421
+ @media (min-width: $ms-screen-lg-min) {
422
+ width: 83.33333333333334%;
423
+ }
242
424
  }
243
425
  @mixin ms-u-lg9 {
244
- width: 75%;
426
+ @media (min-width: $ms-screen-lg-min) {
427
+ width: 75%;
428
+ }
245
429
  }
246
430
  @mixin ms-u-lg8 {
247
- width: 66.66666666666666%;
431
+ @media (min-width: $ms-screen-lg-min) {
432
+ width: 66.66666666666666%;
433
+ }
248
434
  }
249
435
  @mixin ms-u-lg7 {
250
- width: 58.333333333333336%;
436
+ @media (min-width: $ms-screen-lg-min) {
437
+ width: 58.333333333333336%;
438
+ }
251
439
  }
252
440
  @mixin ms-u-lg6 {
253
- width: 50%;
441
+ @media (min-width: $ms-screen-lg-min) {
442
+ width: 50%;
443
+ }
254
444
  }
255
445
  @mixin ms-u-lg5 {
256
- width: 41.66666666666667%;
446
+ @media (min-width: $ms-screen-lg-min) {
447
+ width: 41.66666666666667%;
448
+ }
257
449
  }
258
450
  @mixin ms-u-lg4 {
259
- width: 33.33333333333333%;
451
+ @media (min-width: $ms-screen-lg-min) {
452
+ width: 33.33333333333333%;
453
+ }
260
454
  }
261
455
  @mixin ms-u-lg3 {
262
- width: 25%;
456
+ @media (min-width: $ms-screen-lg-min) {
457
+ width: 25%;
458
+ }
263
459
  }
264
460
  @mixin ms-u-lg2 {
265
- width: 16.666666666666664%;
461
+ @media (min-width: $ms-screen-lg-min) {
462
+ width: 16.666666666666664%;
463
+ }
266
464
  }
267
465
  @mixin ms-u-lg1 {
268
- width: 8.333333333333332%;
466
+ @media (min-width: $ms-screen-lg-min) {
467
+ width: 8.333333333333332%;
468
+ }
269
469
  }
270
470
  @mixin ms-u-lgPull12 {
271
- right: 100%;
471
+ @media (min-width: $ms-screen-lg-min) {
472
+ right: 100%;
473
+ }
272
474
  }
273
475
  @mixin ms-u-lgPull11 {
274
- right: 91.66666666666666%;
476
+ @media (min-width: $ms-screen-lg-min) {
477
+ right: 91.66666666666666%;
478
+ }
275
479
  }
276
480
  @mixin ms-u-lgPull10 {
277
- right: 83.33333333333334%;
481
+ @media (min-width: $ms-screen-lg-min) {
482
+ right: 83.33333333333334%;
483
+ }
278
484
  }
279
485
  @mixin ms-u-lgPull9 {
280
- right: 75%;
486
+ @media (min-width: $ms-screen-lg-min) {
487
+ right: 75%;
488
+ }
281
489
  }
282
490
  @mixin ms-u-lgPull8 {
283
- right: 66.66666666666666%;
491
+ @media (min-width: $ms-screen-lg-min) {
492
+ right: 66.66666666666666%;
493
+ }
284
494
  }
285
495
  @mixin ms-u-lgPull7 {
286
- right: 58.333333333333336%;
496
+ @media (min-width: $ms-screen-lg-min) {
497
+ right: 58.333333333333336%;
498
+ }
287
499
  }
288
500
  @mixin ms-u-lgPull6 {
289
- right: 50%;
501
+ @media (min-width: $ms-screen-lg-min) {
502
+ right: 50%;
503
+ }
290
504
  }
291
505
  @mixin ms-u-lgPull5 {
292
- right: 41.66666666666667%;
506
+ @media (min-width: $ms-screen-lg-min) {
507
+ right: 41.66666666666667%;
508
+ }
293
509
  }
294
510
  @mixin ms-u-lgPull4 {
295
- right: 33.33333333333333%;
511
+ @media (min-width: $ms-screen-lg-min) {
512
+ right: 33.33333333333333%;
513
+ }
296
514
  }
297
515
  @mixin ms-u-lgPull3 {
298
- right: 25%;
516
+ @media (min-width: $ms-screen-lg-min) {
517
+ right: 25%;
518
+ }
299
519
  }
300
520
  @mixin ms-u-lgPull2 {
301
- right: 16.666666666666664%;
521
+ @media (min-width: $ms-screen-lg-min) {
522
+ right: 16.666666666666664%;
523
+ }
302
524
  }
303
525
  @mixin ms-u-lgPull1 {
304
- right: 8.333333333333332%;
526
+ @media (min-width: $ms-screen-lg-min) {
527
+ right: 8.333333333333332%;
528
+ }
305
529
  }
306
530
  @mixin ms-u-lgPull0 {
307
- right: auto;
531
+ @media (min-width: $ms-screen-lg-min) {
532
+ right: auto;
533
+ }
308
534
  }
309
535
  @mixin ms-u-lgPush12 {
310
- left: 100%;
536
+ @media (min-width: $ms-screen-lg-min) {
537
+ left: 100%;
538
+ }
311
539
  }
312
540
  @mixin ms-u-lgPush11 {
313
- left: 91.66666666666666%;
541
+ @media (min-width: $ms-screen-lg-min) {
542
+ left: 91.66666666666666%;
543
+ }
314
544
  }
315
545
  @mixin ms-u-lgPush10 {
316
- left: 83.33333333333334%;
546
+ @media (min-width: $ms-screen-lg-min) {
547
+ left: 83.33333333333334%;
548
+ }
317
549
  }
318
550
  @mixin ms-u-lgPush9 {
319
- left: 75%;
551
+ @media (min-width: $ms-screen-lg-min) {
552
+ left: 75%;
553
+ }
320
554
  }
321
555
  @mixin ms-u-lgPush8 {
322
- left: 66.66666666666666%;
556
+ @media (min-width: $ms-screen-lg-min) {
557
+ left: 66.66666666666666%;
558
+ }
323
559
  }
324
560
  @mixin ms-u-lgPush7 {
325
- left: 58.333333333333336%;
561
+ @media (min-width: $ms-screen-lg-min) {
562
+ left: 58.333333333333336%;
563
+ }
326
564
  }
327
565
  @mixin ms-u-lgPush6 {
328
- left: 50%;
566
+ @media (min-width: $ms-screen-lg-min) {
567
+ left: 50%;
568
+ }
329
569
  }
330
570
  @mixin ms-u-lgPush5 {
331
- left: 41.66666666666667%;
571
+ @media (min-width: $ms-screen-lg-min) {
572
+ left: 41.66666666666667%;
573
+ }
332
574
  }
333
575
  @mixin ms-u-lgPush4 {
334
- left: 33.33333333333333%;
576
+ @media (min-width: $ms-screen-lg-min) {
577
+ left: 33.33333333333333%;
578
+ }
335
579
  }
336
580
  @mixin ms-u-lgPush3 {
337
- left: 25%;
581
+ @media (min-width: $ms-screen-lg-min) {
582
+ left: 25%;
583
+ }
338
584
  }
339
585
  @mixin ms-u-lgPush2 {
340
- left: 16.666666666666664%;
586
+ @media (min-width: $ms-screen-lg-min) {
587
+ left: 16.666666666666664%;
588
+ }
341
589
  }
342
590
  @mixin ms-u-lgPush1 {
343
- left: 8.333333333333332%;
591
+ @media (min-width: $ms-screen-lg-min) {
592
+ left: 8.333333333333332%;
593
+ }
344
594
  }
345
595
  @mixin ms-u-lgPush0 {
346
- left: auto;
596
+ @media (min-width: $ms-screen-lg-min) {
597
+ left: auto;
598
+ }
599
+ }
600
+
601
+ // Large Offset classes 0 ... 11
602
+ @mixin ms-u-lgOffset11 {
603
+ @media (min-width: $ms-screen-lg-min) {
604
+ margin-left: 91.66666666666666%;
605
+ }
606
+ }
607
+ @mixin ms-u-lgOffset10 {
608
+ @media (min-width: $ms-screen-lg-min) {
609
+ margin-left: 83.33333333333334%;
610
+ }
611
+ }
612
+ @mixin ms-u-lgOffset9 {
613
+ @media (min-width: $ms-screen-lg-min) {
614
+ margin-left: 75%;
615
+ }
616
+ }
617
+ @mixin ms-u-lgOffset8 {
618
+ @media (min-width: $ms-screen-lg-min) {
619
+ margin-left: 66.66666666666666%;
620
+ }
621
+ }
622
+ @mixin ms-u-lgOffset7 {
623
+ @media (min-width: $ms-screen-lg-min) {
624
+ margin-left: 58.333333333333336%;
625
+ }
626
+ }
627
+ @mixin ms-u-lgOffset6 {
628
+ @media (min-width: $ms-screen-lg-min) {
629
+ margin-left: 50%;
630
+ }
631
+ }
632
+ @mixin ms-u-lgOffset5 {
633
+ @media (min-width: $ms-screen-lg-min) {
634
+ margin-left: 41.66666666666667%;
635
+ }
636
+ }
637
+ @mixin ms-u-lgOffset4 {
638
+ @media (min-width: $ms-screen-lg-min) {
639
+ margin-left: 33.33333333333333%;
640
+ }
641
+ }
642
+ @mixin ms-u-lgOffset3 {
643
+ @media (min-width: $ms-screen-lg-min) {
644
+ margin-left: 25%;
645
+ }
646
+ }
647
+ @mixin ms-u-lgOffset2 {
648
+ @media (min-width: $ms-screen-lg-min) {
649
+ margin-left: 16.666666666666664%;
650
+ }
651
+ }
652
+ @mixin ms-u-lgOffset1 {
653
+ @media (min-width: $ms-screen-lg-min) {
654
+ margin-left: 8.333333333333332%;
655
+ }
656
+ }
657
+ @mixin ms-u-lgOffset0 {
658
+ @media (min-width: $ms-screen-lg-min) {
659
+ margin-left: 0;
660
+ }
347
661
  }
348
662
 
349
663
  // Extra Large Screens
350
664
  @mixin ms-u-xl12 {
351
- width: 100%;
665
+ @media (min-width: $ms-screen-xl-min) {
666
+ width: 100%;
667
+ }
352
668
  }
353
669
  @mixin ms-u-xl11 {
354
- width: 91.66666666666666%;
670
+ @media (min-width: $ms-screen-xl-min) {
671
+ width: 91.66666666666666%;
672
+ }
355
673
  }
356
674
  @mixin ms-u-xl10 {
357
- width: 83.33333333333334%;
675
+ @media (min-width: $ms-screen-xl-min) {
676
+ width: 83.33333333333334%;
677
+ }
358
678
  }
359
679
  @mixin ms-u-xl9 {
360
- width: 75%;
680
+ @media (min-width: $ms-screen-xl-min) {
681
+ width: 75%;
682
+ }
361
683
  }
362
684
  @mixin ms-u-xl8 {
363
- width: 66.66666666666666%;
685
+ @media (min-width: $ms-screen-xl-min) {
686
+ width: 66.66666666666666%;
687
+ }
364
688
  }
365
689
  @mixin ms-u-xl7 {
366
- width: 58.333333333333336%;
690
+ @media (min-width: $ms-screen-xl-min) {
691
+ width: 58.333333333333336%;
692
+ }
367
693
  }
368
694
  @mixin ms-u-xl6 {
369
- width: 50%;
695
+ @media (min-width: $ms-screen-xl-min) {
696
+ width: 50%;
697
+ }
370
698
  }
371
699
  @mixin ms-u-xl5 {
372
- width: 41.66666666666667%;
700
+ @media (min-width: $ms-screen-xl-min) {
701
+ width: 41.66666666666667%;
702
+ }
373
703
  }
374
704
  @mixin ms-u-xl4 {
375
- width: 33.33333333333333%;
705
+ @media (min-width: $ms-screen-xl-min) {
706
+ width: 33.33333333333333%;
707
+ }
376
708
  }
377
709
  @mixin ms-u-xl3 {
378
- width: 25%;
710
+ @media (min-width: $ms-screen-xl-min) {
711
+ width: 25%;
712
+ }
379
713
  }
380
714
  @mixin ms-u-xl2 {
381
- width: 16.666666666666664%;
715
+ @media (min-width: $ms-screen-xl-min) {
716
+ width: 16.666666666666664%;
717
+ }
382
718
  }
383
719
  @mixin ms-u-xl1 {
384
- width: 8.333333333333332%;
720
+ @media (min-width: $ms-screen-xl-min) {
721
+ width: 8.333333333333332%;
722
+ }
385
723
  }
386
724
  @mixin ms-u-xlPull12 {
387
- right: 100%;
725
+ @media (min-width: $ms-screen-xl-min) {
726
+ right: 100%;
727
+ }
388
728
  }
389
729
  @mixin ms-u-xlPull11 {
390
- right: 91.66666666666666%;
730
+ @media (min-width: $ms-screen-xl-min) {
731
+ right: 91.66666666666666%;
732
+ }
391
733
  }
392
734
  @mixin ms-u-xlPull10 {
393
- right: 83.33333333333334%;
735
+ @media (min-width: $ms-screen-xl-min) {
736
+ right: 83.33333333333334%;
737
+ }
394
738
  }
395
739
  @mixin ms-u-xlPull9 {
396
- right: 75%;
740
+ @media (min-width: $ms-screen-xl-min) {
741
+ right: 75%;
742
+ }
397
743
  }
398
744
  @mixin ms-u-xlPull8 {
399
- right: 66.66666666666666%;
745
+ @media (min-width: $ms-screen-xl-min) {
746
+ right: 66.66666666666666%;
747
+ }
400
748
  }
401
749
  @mixin ms-u-xlPull7 {
402
- right: 58.333333333333336%;
750
+ @media (min-width: $ms-screen-xl-min) {
751
+ right: 58.333333333333336%;
752
+ }
403
753
  }
404
754
  @mixin ms-u-xlPull6 {
405
- right: 50%;
755
+ @media (min-width: $ms-screen-xl-min) {
756
+ right: 50%;
757
+ }
406
758
  }
407
759
  @mixin ms-u-xlPull5 {
408
- right: 41.66666666666667%;
760
+ @media (min-width: $ms-screen-xl-min) {
761
+ right: 41.66666666666667%;
762
+ }
409
763
  }
410
764
  @mixin ms-u-xlPull4 {
411
- right: 33.33333333333333%;
765
+ @media (min-width: $ms-screen-xl-min) {
766
+ right: 33.33333333333333%;
767
+ }
412
768
  }
413
769
  @mixin ms-u-xlPull3 {
414
- right: 25%;
770
+ @media (min-width: $ms-screen-xl-min) {
771
+ right: 25%;
772
+ }
415
773
  }
416
774
  @mixin ms-u-xlPull2 {
417
- right: 16.666666666666664%;
775
+ @media (min-width: $ms-screen-xl-min) {
776
+ right: 16.666666666666664%;
777
+ }
418
778
  }
419
779
  @mixin ms-u-xlPull1 {
420
- right: 8.333333333333332%;
780
+ @media (min-width: $ms-screen-xl-min) {
781
+ right: 8.333333333333332%;
782
+ }
421
783
  }
422
784
  @mixin ms-u-xlPull0 {
423
- right: auto;
785
+ @media (min-width: $ms-screen-xl-min) {
786
+ right: auto;
787
+ }
424
788
  }
425
789
  @mixin ms-u-xlPush12 {
426
- left: 100%;
790
+ @media (min-width: $ms-screen-xl-min) {
791
+ left: 100%;
792
+ }
427
793
  }
428
794
  @mixin ms-u-xlPush11 {
429
- left: 91.66666666666666%;
795
+ @media (min-width: $ms-screen-xl-min) {
796
+ left: 91.66666666666666%;
797
+ }
430
798
  }
431
799
  @mixin ms-u-xlPush10 {
432
- left: 83.33333333333334%;
800
+ @media (min-width: $ms-screen-xl-min) {
801
+ left: 83.33333333333334%;
802
+ }
433
803
  }
434
804
  @mixin ms-u-xlPush9 {
435
- left: 75%;
805
+ @media (min-width: $ms-screen-xl-min) {
806
+ left: 75%;
807
+ }
436
808
  }
437
809
  @mixin ms-u-xlPush8 {
438
- left: 66.66666666666666%;
810
+ @media (min-width: $ms-screen-xl-min) {
811
+ left: 66.66666666666666%;
812
+ }
439
813
  }
440
814
  @mixin ms-u-xlPush7 {
441
- left: 58.333333333333336%;
815
+ @media (min-width: $ms-screen-xl-min) {
816
+ left: 58.333333333333336%;
817
+ }
442
818
  }
443
819
  @mixin ms-u-xlPush6 {
444
- left: 50%;
820
+ @media (min-width: $ms-screen-xl-min) {
821
+ left: 50%;
822
+ }
445
823
  }
446
824
  @mixin ms-u-xlPush5 {
447
- left: 41.66666666666667%;
825
+ @media (min-width: $ms-screen-xl-min) {
826
+ left: 41.66666666666667%;
827
+ }
448
828
  }
449
829
  @mixin ms-u-xlPush4 {
450
- left: 33.33333333333333%;
830
+ @media (min-width: $ms-screen-xl-min) {
831
+ left: 33.33333333333333%;
832
+ }
451
833
  }
452
834
  @mixin ms-u-xlPush3 {
453
- left: 25%;
835
+ @media (min-width: $ms-screen-xl-min) {
836
+ left: 25%;
837
+ }
454
838
  }
455
839
  @mixin ms-u-xlPush2 {
456
- left: 16.666666666666664%;
840
+ @media (min-width: $ms-screen-xl-min) {
841
+ left: 16.666666666666664%;
842
+ }
457
843
  }
458
844
  @mixin ms-u-xlPush1 {
459
- left: 8.333333333333332%;
845
+ @media (min-width: $ms-screen-xl-min) {
846
+ left: 8.333333333333332%;
847
+ }
460
848
  }
461
849
  @mixin ms-u-xlPush0 {
462
- left: auto;
850
+ @media (min-width: $ms-screen-xl-min) {
851
+ left: auto;
852
+ }
463
853
  }
464
854
 
855
+ // Large Offset classes 0 ... 11
856
+ @mixin ms-u-xlOffset11 {
857
+ @media (min-width: $ms-screen-xl-min) {
858
+ margin-left: 91.66666666666666%;
859
+ }
860
+ }
861
+ @mixin ms-u-xlOffset10 {
862
+ @media (min-width: $ms-screen-xl-min) {
863
+ margin-left: 83.33333333333334%;
864
+ }
865
+ }
866
+ @mixin ms-u-xlOffset9 {
867
+ @media (min-width: $ms-screen-xl-min) {
868
+ margin-left: 75%;
869
+ }
870
+ }
871
+ @mixin ms-u-xlOffset8 {
872
+ @media (min-width: $ms-screen-xl-min) {
873
+ margin-left: 66.66666666666666%;
874
+ }
875
+ }
876
+ @mixin ms-u-xlOffset7 {
877
+ @media (min-width: $ms-screen-xl-min) {
878
+ margin-left: 58.333333333333336%;
879
+ }
880
+ }
881
+ @mixin ms-u-xlOffset6 {
882
+ @media (min-width: $ms-screen-xl-min) {
883
+ margin-left: 50%;
884
+ }
885
+ }
886
+ @mixin ms-u-xlOffset5 {
887
+ @media (min-width: $ms-screen-xl-min) {
888
+ margin-left: 41.66666666666667%;
889
+ }
890
+ }
891
+ @mixin ms-u-xlOffset4 {
892
+ @media (min-width: $ms-screen-xl-min) {
893
+ margin-left: 33.33333333333333%;
894
+ }
895
+ }
896
+ @mixin ms-u-xlOffset3 {
897
+ @media (min-width: $ms-screen-xl-min) {
898
+ margin-left: 25%;
899
+ }
900
+ }
901
+ @mixin ms-u-xlOffset2 {
902
+ @media (min-width: $ms-screen-xl-min) {
903
+ margin-left: 16.666666666666664%;
904
+ }
905
+ }
906
+ @mixin ms-u-xlOffset1 {
907
+ @media (min-width: $ms-screen-xl-min) {
908
+ margin-left: 8.333333333333332%;
909
+ }
910
+ }
911
+ @mixin ms-u-xlOffset0 {
912
+ @media (min-width: $ms-screen-xl-min) {
913
+ margin-left: 0;
914
+ }
915
+ }
465
916
 
466
917
  // XXL Screens
467
918
  @mixin ms-u-xxl12 {
468
- width: 100%;
919
+ @media (min-width: $ms-screen-xxl-min) {
920
+ width: 100%;
921
+ }
469
922
  }
470
923
  @mixin ms-u-xxl11 {
471
- width: 91.66666666666666%;
924
+ @media (min-width: $ms-screen-xxl-min) {
925
+ width: 91.66666666666666%;
926
+ }
472
927
  }
473
928
  @mixin ms-u-xxl10 {
474
- width: 83.33333333333334%;
929
+ @media (min-width: $ms-screen-xxl-min) {
930
+ width: 83.33333333333334%;
931
+ }
475
932
  }
476
933
  @mixin ms-u-xxl9 {
477
- width: 75%;
934
+ @media (min-width: $ms-screen-xxl-min) {
935
+ width: 75%;
936
+ }
478
937
  }
479
938
  @mixin ms-u-xxl8 {
480
- width: 66.66666666666666%;
939
+ @media (min-width: $ms-screen-xxl-min) {
940
+ width: 66.66666666666666%;
941
+ }
481
942
  }
482
943
  @mixin ms-u-xxl7 {
483
- width: 58.333333333333336%;
944
+ @media (min-width: $ms-screen-xxl-min) {
945
+ width: 58.333333333333336%;
946
+ }
484
947
  }
485
948
  @mixin ms-u-xxl6 {
486
- width: 50%;
949
+ @media (min-width: $ms-screen-xxl-min) {
950
+ width: 50%;
951
+ }
487
952
  }
488
953
  @mixin ms-u-xxl5 {
489
- width: 41.66666666666667%;
954
+ @media (min-width: $ms-screen-xxl-min) {
955
+ width: 41.66666666666667%;
956
+ }
490
957
  }
491
958
  @mixin ms-u-xxl4 {
492
- width: 33.33333333333333%;
959
+ @media (min-width: $ms-screen-xxl-min) {
960
+ width: 33.33333333333333%;
961
+ }
493
962
  }
494
963
  @mixin ms-u-xxl3 {
495
- width: 25%;
964
+ @media (min-width: $ms-screen-xxl-min) {
965
+ width: 25%;
966
+ }
496
967
  }
497
968
  @mixin ms-u-xxl2 {
498
- width: 16.666666666666664%;
969
+ @media (min-width: $ms-screen-xxl-min) {
970
+ width: 16.666666666666664%;
971
+ }
499
972
  }
500
973
  @mixin ms-u-xxl1 {
501
- width: 8.333333333333332%;
974
+ @media (min-width: $ms-screen-xxl-min) {
975
+ width: 8.333333333333332%;
976
+ }
502
977
  }
503
978
  @mixin ms-u-xxlPull12 {
504
- right: 100%;
979
+ @media (min-width: $ms-screen-xxl-min) {
980
+ right: 100%;
981
+ }
505
982
  }
506
983
  @mixin ms-u-xxlPull11 {
507
- right: 91.66666666666666%;
984
+ @media (min-width: $ms-screen-xxl-min) {
985
+ right: 91.66666666666666%;
986
+ }
508
987
  }
509
988
  @mixin ms-u-xxlPull10 {
510
- right: 83.33333333333334%;
989
+ @media (min-width: $ms-screen-xxl-min) {
990
+ right: 83.33333333333334%;
991
+ }
511
992
  }
512
993
  @mixin ms-u-xxlPull9 {
513
- right: 75%;
994
+ @media (min-width: $ms-screen-xxl-min) {
995
+ right: 75%;
996
+ }
514
997
  }
515
998
  @mixin ms-u-xxlPull8 {
516
- right: 66.66666666666666%;
999
+ @media (min-width: $ms-screen-xxl-min) {
1000
+ right: 66.66666666666666%;
1001
+ }
517
1002
  }
518
1003
  @mixin ms-u-xxlPull7 {
519
- right: 58.333333333333336%;
1004
+ @media (min-width: $ms-screen-xxl-min) {
1005
+ right: 58.333333333333336%;
1006
+ }
520
1007
  }
521
1008
  @mixin ms-u-xxlPull6 {
522
- right: 50%;
1009
+ @media (min-width: $ms-screen-xxl-min) {
1010
+ right: 50%;
1011
+ }
523
1012
  }
524
1013
  @mixin ms-u-xxlPull5 {
525
- right: 41.66666666666667%;
1014
+ @media (min-width: $ms-screen-xxl-min) {
1015
+ right: 41.66666666666667%;
1016
+ }
526
1017
  }
527
1018
  @mixin ms-u-xxlPull4 {
528
- right: 33.33333333333333%;
1019
+ @media (min-width: $ms-screen-xxl-min) {
1020
+ right: 33.33333333333333%;
1021
+ }
529
1022
  }
530
1023
  @mixin ms-u-xxlPull3 {
531
- right: 25%;
1024
+ @media (min-width: $ms-screen-xxl-min) {
1025
+ right: 25%;
1026
+ }
532
1027
  }
533
1028
  @mixin ms-u-xxlPull2 {
534
- right: 16.666666666666664%;
1029
+ @media (min-width: $ms-screen-xxl-min) {
1030
+ right: 16.666666666666664%;
1031
+ }
535
1032
  }
536
1033
  @mixin ms-u-xxlPull1 {
537
- right: 8.333333333333332%;
1034
+ @media (min-width: $ms-screen-xxl-min) {
1035
+ right: 8.333333333333332%;
1036
+ }
538
1037
  }
539
1038
  @mixin ms-u-xxlPull0 {
540
- right: auto;
1039
+ @media (min-width: $ms-screen-xxl-min) {
1040
+ right: auto;
1041
+ }
541
1042
  }
542
1043
  @mixin ms-u-xxlPush12 {
543
- left: 100%;
1044
+ @media (min-width: $ms-screen-xxl-min) {
1045
+ left: 100%;
1046
+ }
544
1047
  }
545
1048
  @mixin ms-u-xxlPush11 {
546
- left: 91.66666666666666%;
1049
+ @media (min-width: $ms-screen-xxl-min) {
1050
+ left: 91.66666666666666%;
1051
+ }
547
1052
  }
548
1053
  @mixin ms-u-xxlPush10 {
549
- left: 83.33333333333334%;
1054
+ @media (min-width: $ms-screen-xxl-min) {
1055
+ left: 83.33333333333334%;
1056
+ }
550
1057
  }
551
1058
  @mixin ms-u-xxlPush9 {
552
- left: 75%;
1059
+ @media (min-width: $ms-screen-xxl-min) {
1060
+ left: 75%;
1061
+ }
553
1062
  }
554
1063
  @mixin ms-u-xxlPush8 {
555
- left: 66.66666666666666%;
1064
+ @media (min-width: $ms-screen-xxl-min) {
1065
+ left: 66.66666666666666%;
1066
+ }
556
1067
  }
557
1068
  @mixin ms-u-xxlPush7 {
558
- left: 58.333333333333336%;
1069
+ @media (min-width: $ms-screen-xxl-min) {
1070
+ left: 58.333333333333336%;
1071
+ }
559
1072
  }
560
1073
  @mixin ms-u-xxlPush6 {
561
- left: 50%;
1074
+ @media (min-width: $ms-screen-xxl-min) {
1075
+ left: 50%;
1076
+ }
562
1077
  }
563
1078
  @mixin ms-u-xxlPush5 {
564
- left: 41.66666666666667%;
1079
+ @media (min-width: $ms-screen-xxl-min) {
1080
+ left: 41.66666666666667%;
1081
+ }
565
1082
  }
566
1083
  @mixin ms-u-xxlPush4 {
567
- left: 33.33333333333333%;
1084
+ @media (min-width: $ms-screen-xxl-min) {
1085
+ left: 33.33333333333333%;
1086
+ }
568
1087
  }
569
1088
  @mixin ms-u-xxlPush3 {
570
- left: 25%;
1089
+ @media (min-width: $ms-screen-xxl-min) {
1090
+ left: 25%;
1091
+ }
571
1092
  }
572
1093
  @mixin ms-u-xxlPush2 {
573
- left: 16.666666666666664%;
1094
+ @media (min-width: $ms-screen-xxl-min) {
1095
+ left: 16.666666666666664%;
1096
+ }
574
1097
  }
575
1098
  @mixin ms-u-xxlPush1 {
576
- left: 8.333333333333332%;
1099
+ @media (min-width: $ms-screen-xxl-min) {
1100
+ left: 8.333333333333332%;
1101
+ }
577
1102
  }
578
1103
  @mixin ms-u-xxlPush0 {
579
- left: auto;
1104
+ @media (min-width: $ms-screen-xxl-min) {
1105
+ left: auto;
1106
+ }
580
1107
  }
581
1108
 
582
- // Extra extra extra large screens
1109
+ // Extra extra large Offset classes 0 ... 11
1110
+ @mixin ms-u-xxlOffset11 {
1111
+ @media (min-width: $ms-screen-xxl-min) {
1112
+ margin-left: 91.66666666666666%;
1113
+ }
1114
+ }
1115
+ @mixin ms-u-xxlOffset10 {
1116
+ @media (min-width: $ms-screen-xxl-min) {
1117
+ margin-left: 83.33333333333334%;
1118
+ }
1119
+ }
1120
+ @mixin ms-u-xxlOffset9 {
1121
+ @media (min-width: $ms-screen-xxl-min) {
1122
+ margin-left: 75%;
1123
+ }
1124
+ }
1125
+ @mixin ms-u-xxlOffset8 {
1126
+ @media (min-width: $ms-screen-xxl-min) {
1127
+ margin-left: 66.66666666666666%;
1128
+ }
1129
+ }
1130
+ @mixin ms-u-xxlOffset7 {
1131
+ @media (min-width: $ms-screen-xxl-min) {
1132
+ margin-left: 58.333333333333336%;
1133
+ }
1134
+ }
1135
+ @mixin ms-u-xxlOffset6 {
1136
+ @media (min-width: $ms-screen-xxl-min) {
1137
+ margin-left: 50%;
1138
+ }
1139
+ }
1140
+ @mixin ms-u-xxlOffset5 {
1141
+ @media (min-width: $ms-screen-xxl-min) {
1142
+ margin-left: 41.66666666666667%;
1143
+ }
1144
+ }
1145
+ @mixin ms-u-xxlOffset4 {
1146
+ @media (min-width: $ms-screen-xxl-min) {
1147
+ margin-left: 33.33333333333333%;
1148
+ }
1149
+ }
1150
+ @mixin ms-u-xxlOffset3 {
1151
+ @media (min-width: $ms-screen-xxl-min) {
1152
+ margin-left: 25%;
1153
+ }
1154
+ }
1155
+ @mixin ms-u-xxlOffset2 {
1156
+ @media (min-width: $ms-screen-xxl-min) {
1157
+ margin-left: 16.666666666666664%;
1158
+ }
1159
+ }
1160
+ @mixin ms-u-xxlOffset1 {
1161
+ @media (min-width: $ms-screen-xxl-min) {
1162
+ margin-left: 8.333333333333332%;
1163
+ }
1164
+ }
1165
+ @mixin ms-u-xxlOffset0 {
1166
+ @media (min-width: $ms-screen-xxl-min) {
1167
+ margin-left: 0;
1168
+ }
1169
+ }
583
1170
 
1171
+ // Extra extra extra large screens
584
1172
  @mixin ms-u-xxxl12 {
585
- width: 100%;
1173
+ @media (min-width: $ms-screen-xxxl-min) {
1174
+ width: 100%;
1175
+ }
586
1176
  }
587
1177
  @mixin ms-u-xxxl11 {
588
- width: 91.66666666666666%;
1178
+ @media (min-width: $ms-screen-xxxl-min) {
1179
+ width: 91.66666666666666%;
1180
+ }
589
1181
  }
590
1182
  @mixin ms-u-xxxl10 {
591
- width: 83.33333333333334%;
1183
+ @media (min-width: $ms-screen-xxxl-min) {
1184
+ width: 83.33333333333334%;
1185
+ }
592
1186
  }
593
1187
  @mixin ms-u-xxxl9 {
594
- width: 75%;
1188
+ @media (min-width: $ms-screen-xxxl-min) {
1189
+ width: 75%;
1190
+ }
595
1191
  }
596
1192
  @mixin ms-u-xxxl8 {
597
- width: 66.66666666666666%;
1193
+ @media (min-width: $ms-screen-xxxl-min) {
1194
+ width: 66.66666666666666%;
1195
+ }
598
1196
  }
599
1197
  @mixin ms-u-xxxl7 {
600
- width: 58.333333333333336%;
1198
+ @media (min-width: $ms-screen-xxxl-min) {
1199
+ width: 58.333333333333336%;
1200
+ }
601
1201
  }
602
1202
  @mixin ms-u-xxxl6 {
603
- width: 50%;
1203
+ @media (min-width: $ms-screen-xxxl-min) {
1204
+ width: 50%;
1205
+ }
604
1206
  }
605
1207
  @mixin ms-u-xxxl5 {
606
- width: 41.66666666666667%;
1208
+ @media (min-width: $ms-screen-xxxl-min) {
1209
+ width: 41.66666666666667%;
1210
+ }
607
1211
  }
608
1212
  @mixin ms-u-xxxl4 {
609
- width: 33.33333333333333%;
1213
+ @media (min-width: $ms-screen-xxxl-min) {
1214
+ width: 33.33333333333333%;
1215
+ }
610
1216
  }
611
1217
  @mixin ms-u-xxxl3 {
612
- width: 25%;
1218
+ @media (min-width: $ms-screen-xxxl-min) {
1219
+ width: 25%;
1220
+ }
613
1221
  }
614
1222
  @mixin ms-u-xxxl2 {
615
- width: 16.666666666666664%;
1223
+ @media (min-width: $ms-screen-xxxl-min) {
1224
+ width: 16.666666666666664%;
1225
+ }
616
1226
  }
617
1227
  @mixin ms-u-xxxl1 {
618
- width: 8.333333333333332%;
1228
+ @media (min-width: $ms-screen-xxxl-min) {
1229
+ width: 8.333333333333332%;
1230
+ }
619
1231
  }
620
1232
  @mixin ms-u-xxxlPull12 {
621
- right: 100%;
1233
+ @media (min-width: $ms-screen-xxxl-min) {
1234
+ right: 100%;
1235
+ }
622
1236
  }
623
1237
  @mixin ms-u-xxxlPull11 {
624
- right: 91.66666666666666%;
1238
+ @media (min-width: $ms-screen-xxxl-min) {
1239
+ right: 91.66666666666666%;
1240
+ }
625
1241
  }
626
1242
  @mixin ms-u-xxxlPull10 {
627
- right: 83.33333333333334%;
1243
+ @media (min-width: $ms-screen-xxxl-min) {
1244
+ right: 83.33333333333334%;
1245
+ }
628
1246
  }
629
1247
  @mixin ms-u-xxxlPull9 {
630
- right: 75%;
1248
+ @media (min-width: $ms-screen-xxxl-min) {
1249
+ right: 75%;
1250
+ }
631
1251
  }
632
1252
  @mixin ms-u-xxxlPull8 {
633
- right: 66.66666666666666%;
1253
+ @media (min-width: $ms-screen-xxxl-min) {
1254
+ right: 66.66666666666666%;
1255
+ }
634
1256
  }
635
1257
  @mixin ms-u-xxxlPull7 {
636
- right: 58.333333333333336%;
1258
+ @media (min-width: $ms-screen-xxxl-min) {
1259
+ right: 58.333333333333336%;
1260
+ }
637
1261
  }
638
1262
  @mixin ms-u-xxxlPull6 {
639
- right: 50%;
1263
+ @media (min-width: $ms-screen-xxxl-min) {
1264
+ right: 50%;
1265
+ }
640
1266
  }
641
1267
  @mixin ms-u-xxxlPull5 {
642
- right: 41.66666666666667%;
1268
+ @media (min-width: $ms-screen-xxxl-min) {
1269
+ right: 41.66666666666667%;
1270
+ }
643
1271
  }
644
1272
  @mixin ms-u-xxxlPull4 {
645
- right: 33.33333333333333%;
1273
+ @media (min-width: $ms-screen-xxxl-min) {
1274
+ right: 33.33333333333333%;
1275
+ }
646
1276
  }
647
1277
  @mixin ms-u-xxxlPull3 {
648
- right: 25%;
1278
+ @media (min-width: $ms-screen-xxxl-min) {
1279
+ right: 25%;
1280
+ }
649
1281
  }
650
1282
  @mixin ms-u-xxxlPull2 {
651
- right: 16.666666666666664%;
1283
+ @media (min-width: $ms-screen-xxxl-min) {
1284
+ right: 16.666666666666664%;
1285
+ }
652
1286
  }
653
1287
  @mixin ms-u-xxxlPull1 {
654
- right: 8.333333333333332%;
1288
+ @media (min-width: $ms-screen-xxxl-min) {
1289
+ right: 8.333333333333332%;
1290
+ }
655
1291
  }
656
1292
  @mixin ms-u-xxxlPull0 {
657
- right: auto;
1293
+ @media (min-width: $ms-screen-xxxl-min) {
1294
+ right: auto;
1295
+ }
658
1296
  }
659
1297
  @mixin ms-u-xxxlPush12 {
660
- left: 100%;
1298
+ @media (min-width: $ms-screen-xxxl-min) {
1299
+ left: 100%;
1300
+ }
661
1301
  }
662
1302
  @mixin ms-u-xxxlPush11 {
663
- left: 91.66666666666666%;
1303
+ @media (min-width: $ms-screen-xxxl-min) {
1304
+ left: 91.66666666666666%;
1305
+ }
664
1306
  }
665
1307
  @mixin ms-u-xxxlPush10 {
666
- left: 83.33333333333334%;
1308
+ @media (min-width: $ms-screen-xxxl-min) {
1309
+ left: 83.33333333333334%;
1310
+ }
667
1311
  }
668
1312
  @mixin ms-u-xxxlPush9 {
669
- left: 75%;
1313
+ @media (min-width: $ms-screen-xxxl-min) {
1314
+ left: 75%;
1315
+ }
670
1316
  }
671
1317
  @mixin ms-u-xxxlPush8 {
672
- left: 66.66666666666666%;
1318
+ @media (min-width: $ms-screen-xxxl-min) {
1319
+ left: 66.66666666666666%;
1320
+ }
673
1321
  }
674
1322
  @mixin ms-u-xxxlPush7 {
675
- left: 58.333333333333336%;
1323
+ @media (min-width: $ms-screen-xxxl-min) {
1324
+ left: 58.333333333333336%;
1325
+ }
676
1326
  }
677
1327
  @mixin ms-u-xxxlPush6 {
678
- left: 50%;
1328
+ @media (min-width: $ms-screen-xxxl-min) {
1329
+ left: 50%;
1330
+ }
679
1331
  }
680
1332
  @mixin ms-u-xxxlPush5 {
681
- left: 41.66666666666667%;
1333
+ @media (min-width: $ms-screen-xxxl-min) {
1334
+ left: 41.66666666666667%;
1335
+ }
682
1336
  }
683
1337
  @mixin ms-u-xxxlPush4 {
684
- left: 33.33333333333333%;
1338
+ @media (min-width: $ms-screen-xxxl-min) {
1339
+ left: 33.33333333333333%;
1340
+ }
685
1341
  }
686
1342
  @mixin ms-u-xxxlPush3 {
687
- left: 25%;
1343
+ @media (min-width: $ms-screen-xxxl-min) {
1344
+ left: 25%;
1345
+ }
688
1346
  }
689
1347
  @mixin ms-u-xxxlPush2 {
690
- left: 16.666666666666664%;
1348
+ @media (min-width: $ms-screen-xxxl-min) {
1349
+ left: 16.666666666666664%;
1350
+ }
691
1351
  }
692
1352
  @mixin ms-u-xxxlPush1 {
693
- left: 8.333333333333332%;
1353
+ @media (min-width: $ms-screen-xxxl-min) {
1354
+ left: 8.333333333333332%;
1355
+ }
694
1356
  }
695
1357
  @mixin ms-u-xxxlPush0 {
696
- left: auto;
697
- }
1358
+ @media (min-width: $ms-screen-xxxl-min) {
1359
+ left: auto;
1360
+ }
1361
+ }
1362
+
1363
+ // Extra extra extra large Offset classes 0 ... 11
1364
+ @mixin ms-u-xxxlOffset11 {
1365
+ @media (min-width: $ms-screen-xxxl-min) {
1366
+ margin-left: 91.66666666666666%;
1367
+ }
1368
+ }
1369
+ @mixin ms-u-xxxlOffset10 {
1370
+ @media (min-width: $ms-screen-xxxl-min) {
1371
+ margin-left: 83.33333333333334%;
1372
+ }
1373
+ }
1374
+ @mixin ms-u-xxxlOffset9 {
1375
+ @media (min-width: $ms-screen-xxxl-min) {
1376
+ margin-left: 75%;
1377
+ }
1378
+ }
1379
+ @mixin ms-u-xxxlOffset8 {
1380
+ @media (min-width: $ms-screen-xxxl-min) {
1381
+ margin-left: 66.66666666666666%;
1382
+ }
1383
+ }
1384
+ @mixin ms-u-xxxlOffset7 {
1385
+ @media (min-width: $ms-screen-xxxl-min) {
1386
+ margin-left: 58.333333333333336%;
1387
+ }
1388
+ }
1389
+ @mixin ms-u-xxxlOffset6 {
1390
+ @media (min-width: $ms-screen-xxxl-min) {
1391
+ margin-left: 50%;
1392
+ }
1393
+ }
1394
+ @mixin ms-u-xxxlOffset5 {
1395
+ @media (min-width: $ms-screen-xxxl-min) {
1396
+ margin-left: 41.66666666666667%;
1397
+ }
1398
+ }
1399
+ @mixin ms-u-xxxlOffset4 {
1400
+ @media (min-width: $ms-screen-xxxl-min) {
1401
+ margin-left: 33.33333333333333%;
1402
+ }
1403
+ }
1404
+ @mixin ms-u-xxxlOffset3 {
1405
+ @media (min-width: $ms-screen-xxxl-min) {
1406
+ margin-left: 25%;
1407
+ }
1408
+ }
1409
+ @mixin ms-u-xxxlOffset2 {
1410
+ @media (min-width: $ms-screen-xxxl-min) {
1411
+ margin-left: 16.666666666666664%;
1412
+ }
1413
+ }
1414
+ @mixin ms-u-xxxlOffset1 {
1415
+ @media (min-width: $ms-screen-xxxl-min) {
1416
+ margin-left: 8.333333333333332%;
1417
+ }
1418
+ }
1419
+ @mixin ms-u-xxxlOffset0 {
1420
+ @media (min-width: $ms-screen-xxxl-min) {
1421
+ margin-left: 0;
1422
+ }
1423
+ }