Nenhuma descrição
Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.

Fabric.Responsive.Utilities.Output.scss 17KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022
  1. // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
  2. //
  3. // Office UI Fabric
  4. // --------------------------------------------------
  5. // Responsive utilities based on defined variables, component visibility,
  6. // and size for different displays.
  7. @import "./Fabric.Responsive.Variables";
  8. @import "./Fabric.Responsive.Utilities.Variables";
  9. //== Responsive visiblity classes
  10. //
  11. // Hidden on small
  12. @media (max-width: $ms-screen-sm-max) {
  13. .ms-u-hiddenSm,
  14. .ms-u-hiddenMdDown,
  15. .ms-u-hiddenLgDown,
  16. .ms-u-hiddenXlDown,
  17. .ms-u-hiddenXxlDown {
  18. display: none !important;
  19. }
  20. }
  21. // Hidden on medium
  22. @media (min-width: $ms-screen-md-min) and (max-width: $ms-screen-md-max) {
  23. .ms-u-hiddenMd,
  24. .ms-u-hiddenMdUp,
  25. .ms-u-hiddenMdDown,
  26. .ms-u-hiddenLgDown,
  27. .ms-u-hiddenXlDown,
  28. .ms-u-hiddenXxlDown {
  29. display: none !important;
  30. }
  31. }
  32. // Hidden on large
  33. @media (min-width: $ms-screen-lg-min) and (max-width: $ms-screen-lg-max) {
  34. .ms-u-hiddenMdUp,
  35. .ms-u-hiddenLg,
  36. .ms-u-hiddenLgUp,
  37. .ms-u-hiddenLgDown,
  38. .ms-u-hiddenXlDown,
  39. .ms-u-hiddenXxlDown {
  40. display: none !important;
  41. }
  42. }
  43. // Hidden on extra large
  44. @media (min-width: $ms-screen-xl-min) and (max-width: $ms-screen-xl-max) {
  45. .ms-u-hiddenMdUp,
  46. .ms-u-hiddenLgUp,
  47. .ms-u-hiddenXl,
  48. .ms-u-hiddenXlUp,
  49. .ms-u-hiddenXlDown,
  50. .ms-u-hiddenXxlDown {
  51. display: none !important;
  52. }
  53. }
  54. // Hidden on extra extra large
  55. @media (min-width: $ms-screen-xxl-min) and (max-width: $ms-screen-xxl-max) {
  56. .ms-u-hiddenMdUp,
  57. .ms-u-hiddenLgUp,
  58. .ms-u-hiddenXlUp,
  59. .ms-u-hiddenXxl,
  60. .ms-u-hiddenXxlUp,
  61. .ms-u-hiddenXxlDown {
  62. display: none !important;
  63. }
  64. }
  65. // Hidden on extra extra extra large
  66. @media (min-width: $ms-screen-xxxl-min) {
  67. .ms-u-hiddenMdUp,
  68. .ms-u-hiddenLgUp,
  69. .ms-u-hiddenXlUp,
  70. .ms-u-hiddenXxlUp,
  71. .ms-u-hiddenXxxl {
  72. display: none !important;
  73. }
  74. }
  75. //== Responsive sizes
  76. //
  77. // These are all based on a 12 column grid. For example,
  78. // ms-u-sm6 sets the width to 50% (6/12) on small screens.
  79. // Small screens (default)
  80. .ms-u-sm12 {
  81. @include ms-u-sm12;
  82. }
  83. .ms-u-sm11 {
  84. @include ms-u-sm11;
  85. }
  86. .ms-u-sm10 {
  87. @include ms-u-sm10;
  88. }
  89. .ms-u-sm9 {
  90. @include ms-u-sm9;
  91. }
  92. .ms-u-sm8 {
  93. @include ms-u-sm8;
  94. }
  95. .ms-u-sm7 {
  96. @include ms-u-sm7;
  97. }
  98. .ms-u-sm6 {
  99. @include ms-u-sm6;
  100. }
  101. .ms-u-sm5 {
  102. @include ms-u-sm5;
  103. }
  104. .ms-u-sm4 {
  105. @include ms-u-sm4;
  106. }
  107. .ms-u-sm3 {
  108. @include ms-u-sm3;
  109. }
  110. .ms-u-sm2 {
  111. @include ms-u-sm2;
  112. }
  113. .ms-u-sm1 {
  114. @include ms-u-sm1;
  115. }
  116. .ms-u-smPull12 {
  117. @include ms-u-smPull12;
  118. }
  119. .ms-u-smPull11 {
  120. @include ms-u-smPull11;
  121. }
  122. .ms-u-smPull10 {
  123. @include ms-u-smPull10;
  124. }
  125. .ms-u-smPull9 {
  126. @include ms-u-smPull9;
  127. }
  128. .ms-u-smPull8 {
  129. @include ms-u-smPull8;
  130. }
  131. .ms-u-smPull7 {
  132. @include ms-u-smPull7;
  133. }
  134. .ms-u-smPull6 {
  135. @include ms-u-smPull6;
  136. }
  137. .ms-u-smPull5 {
  138. @include ms-u-smPull5;
  139. }
  140. .ms-u-smPull4 {
  141. @include ms-u-smPull4;
  142. }
  143. .ms-u-smPull3 {
  144. @include ms-u-smPull3;
  145. }
  146. .ms-u-smPull2 {
  147. @include ms-u-smPull2;
  148. }
  149. .ms-u-smPull1 {
  150. @include ms-u-smPull1;
  151. }
  152. .ms-u-smPull0 {
  153. @include ms-u-smPull0;
  154. }
  155. .ms-u-smPush12 {
  156. @include ms-u-smPush12;
  157. }
  158. .ms-u-smPush11 {
  159. @include ms-u-smPush11;
  160. }
  161. .ms-u-smPush10 {
  162. @include ms-u-smPush10;
  163. }
  164. .ms-u-smPush9 {
  165. @include ms-u-smPush9;
  166. }
  167. .ms-u-smPush8 {
  168. @include ms-u-smPush8;
  169. }
  170. .ms-u-smPush7 {
  171. @include ms-u-smPush7;
  172. }
  173. .ms-u-smPush6 {
  174. @include ms-u-smPush6;
  175. }
  176. .ms-u-smPush5 {
  177. @include ms-u-smPush5;
  178. }
  179. .ms-u-smPush4 {
  180. @include ms-u-smPush4;
  181. }
  182. .ms-u-smPush3 {
  183. @include ms-u-smPush3;
  184. }
  185. .ms-u-smPush2 {
  186. @include ms-u-smPush2;
  187. }
  188. .ms-u-smPush1 {
  189. @include ms-u-smPush1;
  190. }
  191. .ms-u-smPush0 {
  192. @include ms-u-smPush0;
  193. }
  194. // Small Offset classes 0 ... 11
  195. .ms-u-smOffset11 {
  196. margin-left: 91.66666666666666%;
  197. }
  198. .ms-u-smOffset10 {
  199. margin-left: 83.33333333333334%;
  200. }
  201. .ms-u-smOffset9 {
  202. margin-left: 75%;
  203. }
  204. .ms-u-smOffset8 {
  205. margin-left: 66.66666666666666%;
  206. }
  207. .ms-u-smOffset7 {
  208. margin-left: 58.333333333333336%;
  209. }
  210. .ms-u-smOffset6 {
  211. margin-left: 50%;
  212. }
  213. .ms-u-smOffset5 {
  214. margin-left: 41.66666666666667%;
  215. }
  216. .ms-u-smOffset4 {
  217. margin-left: 33.33333333333333%;
  218. }
  219. .ms-u-smOffset3 {
  220. margin-left: 25%;
  221. }
  222. .ms-u-smOffset2 {
  223. margin-left: 16.666666666666664%;
  224. }
  225. .ms-u-smOffset1 {
  226. margin-left: 8.333333333333332%;
  227. }
  228. .ms-u-smOffset0 {
  229. margin-left: 0;
  230. }
  231. // Medium screens
  232. @media (min-width: $ms-screen-md-min) {
  233. .ms-u-md12 {
  234. @include ms-u-md12;
  235. }
  236. .ms-u-md11 {
  237. @include ms-u-md11;
  238. }
  239. .ms-u-md10 {
  240. @include ms-u-md10;
  241. }
  242. .ms-u-md9 {
  243. @include ms-u-md9;
  244. }
  245. .ms-u-md8 {
  246. @include ms-u-md8;
  247. }
  248. .ms-u-md7 {
  249. @include ms-u-md7;
  250. }
  251. .ms-u-md6 {
  252. @include ms-u-md6;
  253. }
  254. .ms-u-md5 {
  255. @include ms-u-md5;
  256. }
  257. .ms-u-md4 {
  258. @include ms-u-md4;
  259. }
  260. .ms-u-md3 {
  261. @include ms-u-md3;
  262. }
  263. .ms-u-md2 {
  264. @include ms-u-md2;
  265. }
  266. .ms-u-md1 {
  267. @include ms-u-md1;
  268. }
  269. .ms-u-mdPull12 {
  270. @include ms-u-mdPull12;
  271. }
  272. .ms-u-mdPull11 {
  273. @include ms-u-mdPull11;
  274. }
  275. .ms-u-mdPull10 {
  276. @include ms-u-mdPull10;
  277. }
  278. .ms-u-mdPull9 {
  279. @include ms-u-mdPull9;
  280. }
  281. .ms-u-mdPull8 {
  282. @include ms-u-mdPull8;
  283. }
  284. .ms-u-mdPull7 {
  285. @include ms-u-mdPull7;
  286. }
  287. .ms-u-mdPull6 {
  288. @include ms-u-mdPull6;
  289. }
  290. .ms-u-mdPull5 {
  291. @include ms-u-mdPull5;
  292. }
  293. .ms-u-mdPull4 {
  294. @include ms-u-mdPull4;
  295. }
  296. .ms-u-mdPull3 {
  297. @include ms-u-mdPull3;
  298. }
  299. .ms-u-mdPull2 {
  300. @include ms-u-mdPull2;
  301. }
  302. .ms-u-mdPull1 {
  303. @include ms-u-mdPull1;
  304. }
  305. .ms-u-mdPull0 {
  306. @include ms-u-mdPull0;
  307. }
  308. .ms-u-mdPush12 {
  309. @include ms-u-mdPush12;
  310. }
  311. .ms-u-mdPush11 {
  312. @include ms-u-mdPush11;
  313. }
  314. .ms-u-mdPush10 {
  315. @include ms-u-mdPush10;
  316. }
  317. .ms-u-mdPush9 {
  318. @include ms-u-mdPush9;
  319. }
  320. .ms-u-mdPush8 {
  321. @include ms-u-mdPush8;
  322. }
  323. .ms-u-mdPush7 {
  324. @include ms-u-mdPush7;
  325. }
  326. .ms-u-mdPush6 {
  327. @include ms-u-mdPush6;
  328. }
  329. .ms-u-mdPush5 {
  330. @include ms-u-mdPush5;
  331. }
  332. .ms-u-mdPush4 {
  333. @include ms-u-mdPush4;
  334. }
  335. .ms-u-mdPush3 {
  336. @include ms-u-mdPush3;
  337. }
  338. .ms-u-mdPush2 {
  339. @include ms-u-mdPush2;
  340. }
  341. .ms-u-mdPush1 {
  342. @include ms-u-mdPush1;
  343. }
  344. .ms-u-mdPush0 {
  345. @include ms-u-mdPush0;
  346. }
  347. // Medium Offset classes 0 ... 11
  348. .ms-u-mdOffset11 {
  349. margin-left: 91.66666666666666%;
  350. }
  351. .ms-u-mdOffset10 {
  352. margin-left: 83.33333333333334%;
  353. }
  354. .ms-u-mdOffset9 {
  355. margin-left: 75%;
  356. }
  357. .ms-u-mdOffset8 {
  358. margin-left: 66.66666666666666%;
  359. }
  360. .ms-u-mdOffset7 {
  361. margin-left: 58.333333333333336%;
  362. }
  363. .ms-u-mdOffset6 {
  364. margin-left: 50%;
  365. }
  366. .ms-u-mdOffset5 {
  367. margin-left: 41.66666666666667%;
  368. }
  369. .ms-u-mdOffset4 {
  370. margin-left: 33.33333333333333%;
  371. }
  372. .ms-u-mdOffset3 {
  373. margin-left: 25%;
  374. }
  375. .ms-u-mdOffset2 {
  376. margin-left: 16.666666666666664%;
  377. }
  378. .ms-u-mdOffset1 {
  379. margin-left: 8.333333333333332%;
  380. }
  381. .ms-u-mdOffset0 {
  382. margin-left: 0;
  383. }
  384. }
  385. // Large screens
  386. @media (min-width: $ms-screen-lg-min) {
  387. .ms-u-lg12 {
  388. @include ms-u-lg12;
  389. }
  390. .ms-u-lg11 {
  391. @include ms-u-lg11;
  392. }
  393. .ms-u-lg10 {
  394. @include ms-u-lg10;
  395. }
  396. .ms-u-lg9 {
  397. @include ms-u-lg9;
  398. }
  399. .ms-u-lg8 {
  400. @include ms-u-lg8;
  401. }
  402. .ms-u-lg7 {
  403. @include ms-u-lg7;
  404. }
  405. .ms-u-lg6 {
  406. @include ms-u-lg6;
  407. }
  408. .ms-u-lg5 {
  409. @include ms-u-lg5;
  410. }
  411. .ms-u-lg4 {
  412. @include ms-u-lg4;
  413. }
  414. .ms-u-lg3 {
  415. @include ms-u-lg3;
  416. }
  417. .ms-u-lg2 {
  418. @include ms-u-lg2;
  419. }
  420. .ms-u-lg1 {
  421. @include ms-u-lg1;
  422. }
  423. .ms-u-lgPull12 {
  424. @include ms-u-lgPull12;
  425. }
  426. .ms-u-lgPull11 {
  427. @include ms-u-lgPull11;
  428. }
  429. .ms-u-lgPull10 {
  430. @include ms-u-lgPull10;
  431. }
  432. .ms-u-lgPull9 {
  433. @include ms-u-lgPull9;
  434. }
  435. .ms-u-lgPull8 {
  436. @include ms-u-lgPull8;
  437. }
  438. .ms-u-lgPull7 {
  439. @include ms-u-lgPull7;
  440. }
  441. .ms-u-lgPull6 {
  442. @include ms-u-lgPull6;
  443. }
  444. .ms-u-lgPull5 {
  445. @include ms-u-lgPull5;
  446. }
  447. .ms-u-lgPull4 {
  448. @include ms-u-lgPull4;
  449. }
  450. .ms-u-lgPull3 {
  451. @include ms-u-lgPull3;
  452. }
  453. .ms-u-lgPull2 {
  454. @include ms-u-lgPull2;
  455. }
  456. .ms-u-lgPull1 {
  457. @include ms-u-lgPull1;
  458. }
  459. .ms-u-lgPull0 {
  460. @include ms-u-lgPull0;
  461. }
  462. .ms-u-lgPush12 {
  463. @include ms-u-lgPush12;
  464. }
  465. .ms-u-lgPush11 {
  466. @include ms-u-lgPush11;
  467. }
  468. .ms-u-lgPush10 {
  469. @include ms-u-lgPush10;
  470. }
  471. .ms-u-lgPush9 {
  472. @include ms-u-lgPush9;
  473. }
  474. .ms-u-lgPush8 {
  475. @include ms-u-lgPush8;
  476. }
  477. .ms-u-lgPush7 {
  478. @include ms-u-lgPush7;
  479. }
  480. .ms-u-lgPush6 {
  481. @include ms-u-lgPush6;
  482. }
  483. .ms-u-lgPush5 {
  484. @include ms-u-lgPush5;
  485. }
  486. .ms-u-lgPush4 {
  487. @include ms-u-lgPush4;
  488. }
  489. .ms-u-lgPush3 {
  490. @include ms-u-lgPush3;
  491. }
  492. .ms-u-lgPush2 {
  493. @include ms-u-lgPush2;
  494. }
  495. .ms-u-lgPush1 {
  496. @include ms-u-lgPush1;
  497. }
  498. .ms-u-lgPush0 {
  499. @include ms-u-lgPush0;
  500. }
  501. // Large Offset classes 0 ... 11
  502. .ms-u-lgOffset11 {
  503. margin-left: 91.66666666666666%;
  504. }
  505. .ms-u-lgOffset10 {
  506. margin-left: 83.33333333333334%;
  507. }
  508. .ms-u-lgOffset9 {
  509. margin-left: 75%;
  510. }
  511. .ms-u-lgOffset8 {
  512. margin-left: 66.66666666666666%;
  513. }
  514. .ms-u-lgOffset7 {
  515. margin-left: 58.333333333333336%;
  516. }
  517. .ms-u-lgOffset6 {
  518. margin-left: 50%;
  519. }
  520. .ms-u-lgOffset5 {
  521. margin-left: 41.66666666666667%;
  522. }
  523. .ms-u-lgOffset4 {
  524. margin-left: 33.33333333333333%;
  525. }
  526. .ms-u-lgOffset3 {
  527. margin-left: 25%;
  528. }
  529. .ms-u-lgOffset2 {
  530. margin-left: 16.666666666666664%;
  531. }
  532. .ms-u-lgOffset1 {
  533. margin-left: 8.333333333333332%;
  534. }
  535. .ms-u-lgOffset0 {
  536. margin-left: 0;
  537. }
  538. }
  539. // Extra large screens
  540. @media (min-width: $ms-screen-xl-min) {
  541. .ms-u-xl12 {
  542. @include ms-u-xl12;
  543. }
  544. .ms-u-xl11 {
  545. @include ms-u-xl11;
  546. }
  547. .ms-u-xl10 {
  548. @include ms-u-xl10;
  549. }
  550. .ms-u-xl9 {
  551. @include ms-u-xl9;
  552. }
  553. .ms-u-xl8 {
  554. @include ms-u-xl8;
  555. }
  556. .ms-u-xl7 {
  557. @include ms-u-xl7;
  558. }
  559. .ms-u-xl6 {
  560. @include ms-u-xl6;
  561. }
  562. .ms-u-xl5 {
  563. @include ms-u-xl5;
  564. }
  565. .ms-u-xl4 {
  566. @include ms-u-xl4;
  567. }
  568. .ms-u-xl3 {
  569. @include ms-u-xl3;
  570. }
  571. .ms-u-xl2 {
  572. @include ms-u-xl2;
  573. }
  574. .ms-u-xl1 {
  575. @include ms-u-xl1;
  576. }
  577. .ms-u-xlPull12 {
  578. @include ms-u-xlPull12;
  579. }
  580. .ms-u-xlPull11 {
  581. @include ms-u-xlPull11;
  582. }
  583. .ms-u-xlPull10 {
  584. @include ms-u-xlPull10;
  585. }
  586. .ms-u-xlPull9 {
  587. @include ms-u-xlPull9;
  588. }
  589. .ms-u-xlPull8 {
  590. @include ms-u-xlPull8;
  591. }
  592. .ms-u-xlPull7 {
  593. @include ms-u-xlPull7;
  594. }
  595. .ms-u-xlPull6 {
  596. @include ms-u-xlPull6;
  597. }
  598. .ms-u-xlPull5 {
  599. @include ms-u-xlPull5;
  600. }
  601. .ms-u-xlPull4 {
  602. @include ms-u-xlPull4;
  603. }
  604. .ms-u-xlPull3 {
  605. @include ms-u-xlPull3;
  606. }
  607. .ms-u-xlPull2 {
  608. @include ms-u-xlPull2;
  609. }
  610. .ms-u-xlPull1 {
  611. @include ms-u-xlPull1;
  612. }
  613. .ms-u-xlPull0 {
  614. @include ms-u-xlPull0;
  615. }
  616. .ms-u-xlPush12 {
  617. @include ms-u-xlPush12;
  618. }
  619. .ms-u-xlPush11 {
  620. @include ms-u-xlPush11;
  621. }
  622. .ms-u-xlPush10 {
  623. @include ms-u-xlPush10;
  624. }
  625. .ms-u-xlPush9 {
  626. @include ms-u-xlPush9;
  627. }
  628. .ms-u-xlPush8 {
  629. @include ms-u-xlPush8;
  630. }
  631. .ms-u-xlPush7 {
  632. @include ms-u-xlPush7;
  633. }
  634. .ms-u-xlPush6 {
  635. @include ms-u-xlPush6;
  636. }
  637. .ms-u-xlPush5 {
  638. @include ms-u-xlPush5;
  639. }
  640. .ms-u-xlPush4 {
  641. @include ms-u-xlPush4;
  642. }
  643. .ms-u-xlPush3 {
  644. @include ms-u-xlPush3;
  645. }
  646. .ms-u-xlPush2 {
  647. @include ms-u-xlPush2;
  648. }
  649. .ms-u-xlPush1 {
  650. @include ms-u-xlPush1;
  651. }
  652. .ms-u-xlPush0 {
  653. @include ms-u-xlPush0;
  654. }
  655. // Large Offset classes 0 ... 11
  656. .ms-u-xlOffset11 {
  657. margin-left: 91.66666666666666%;
  658. }
  659. .ms-u-xlOffset10 {
  660. margin-left: 83.33333333333334%;
  661. }
  662. .ms-u-xlOffset9 {
  663. margin-left: 75%;
  664. }
  665. .ms-u-xlOffset8 {
  666. margin-left: 66.66666666666666%;
  667. }
  668. .ms-u-xlOffset7 {
  669. margin-left: 58.333333333333336%;
  670. }
  671. .ms-u-xlOffset6 {
  672. margin-left: 50%;
  673. }
  674. .ms-u-xlOffset5 {
  675. margin-left: 41.66666666666667%;
  676. }
  677. .ms-u-xlOffset4 {
  678. margin-left: 33.33333333333333%;
  679. }
  680. .ms-u-xlOffset3 {
  681. margin-left: 25%;
  682. }
  683. .ms-u-xlOffset2 {
  684. margin-left: 16.666666666666664%;
  685. }
  686. .ms-u-xlOffset1 {
  687. margin-left: 8.333333333333332%;
  688. }
  689. .ms-u-xlOffset0 {
  690. margin-left: 0;
  691. }
  692. }
  693. // Extra extra large screens
  694. @media (min-width: $ms-screen-xxl-min) {
  695. .ms-u-xxl12 {
  696. @include ms-u-xxl12;
  697. }
  698. .ms-u-xxl11 {
  699. @include ms-u-xxl11;
  700. }
  701. .ms-u-xxl10 {
  702. @include ms-u-xxl10;
  703. }
  704. .ms-u-xxl9 {
  705. @include ms-u-xxl9;
  706. }
  707. .ms-u-xxl8 {
  708. @include ms-u-xxl8;
  709. }
  710. .ms-u-xxl7 {
  711. @include ms-u-xxl7;
  712. }
  713. .ms-u-xxl6 {
  714. @include ms-u-xxl6;
  715. }
  716. .ms-u-xxl5 {
  717. @include ms-u-xxl5;
  718. }
  719. .ms-u-xxl4 {
  720. @include ms-u-xxl4;
  721. }
  722. .ms-u-xxl3 {
  723. @include ms-u-xxl3;
  724. }
  725. .ms-u-xxl2 {
  726. @include ms-u-xxl2;
  727. }
  728. .ms-u-xxl1 {
  729. @include ms-u-xxl1;
  730. }
  731. .ms-u-xxlPull12 {
  732. @include ms-u-xxlPull12;
  733. }
  734. .ms-u-xxlPull11 {
  735. @include ms-u-xxlPull11;
  736. }
  737. .ms-u-xxlPull10 {
  738. @include ms-u-xxlPull10;
  739. }
  740. .ms-u-xxlPull9 {
  741. @include ms-u-xxlPull9;
  742. }
  743. .ms-u-xxlPull8 {
  744. @include ms-u-xxlPull8;
  745. }
  746. .ms-u-xxlPull7 {
  747. @include ms-u-xxlPull7;
  748. }
  749. .ms-u-xxlPull6 {
  750. @include ms-u-xxlPull6;
  751. }
  752. .ms-u-xxlPull5 {
  753. @include ms-u-xxlPull5;
  754. }
  755. .ms-u-xxlPull4 {
  756. @include ms-u-xxlPull4;
  757. }
  758. .ms-u-xxlPull3 {
  759. @include ms-u-xxlPull3;
  760. }
  761. .ms-u-xxlPull2 {
  762. @include ms-u-xxlPull2;
  763. }
  764. .ms-u-xxlPull1 {
  765. @include ms-u-xxlPull1;
  766. }
  767. .ms-u-xxlPull0 {
  768. @include ms-u-xxlPull0;
  769. }
  770. .ms-u-xxlPush12 {
  771. @include ms-u-xxlPush12;
  772. }
  773. .ms-u-xxlPush11 {
  774. @include ms-u-xxlPush11;
  775. }
  776. .ms-u-xxlPush10 {
  777. @include ms-u-xxlPush10;
  778. }
  779. .ms-u-xxlPush9 {
  780. @include ms-u-xxlPush9;
  781. }
  782. .ms-u-xxlPush8 {
  783. @include ms-u-xxlPush8;
  784. }
  785. .ms-u-xxlPush7 {
  786. @include ms-u-xxlPush7;
  787. }
  788. .ms-u-xxlPush6 {
  789. @include ms-u-xxlPush6;
  790. }
  791. .ms-u-xxlPush5 {
  792. @include ms-u-xxlPush5;
  793. }
  794. .ms-u-xxlPush4 {
  795. @include ms-u-xxlPush4;
  796. }
  797. .ms-u-xxlPush3 {
  798. @include ms-u-xxlPush3;
  799. }
  800. .ms-u-xxlPush2 {
  801. @include ms-u-xxlPush2;
  802. }
  803. .ms-u-xxlPush1 {
  804. @include ms-u-xxlPush1;
  805. }
  806. .ms-u-xxlPush0 {
  807. @include ms-u-xxlPush0;
  808. }
  809. // Extra extra large Offset classes 0 ... 11
  810. .ms-u-xxlOffset11 {
  811. margin-left: 91.66666666666666%;
  812. }
  813. .ms-u-xxlOffset10 {
  814. margin-left: 83.33333333333334%;
  815. }
  816. .ms-u-xxlOffset9 {
  817. margin-left: 75%;
  818. }
  819. .ms-u-xxlOffset8 {
  820. margin-left: 66.66666666666666%;
  821. }
  822. .ms-u-xxlOffset7 {
  823. margin-left: 58.333333333333336%;
  824. }
  825. .ms-u-xxlOffset6 {
  826. margin-left: 50%;
  827. }
  828. .ms-u-xxlOffset5 {
  829. margin-left: 41.66666666666667%;
  830. }
  831. .ms-u-xxlOffset4 {
  832. margin-left: 33.33333333333333%;
  833. }
  834. .ms-u-xxlOffset3 {
  835. margin-left: 25%;
  836. }
  837. .ms-u-xxlOffset2 {
  838. margin-left: 16.666666666666664%;
  839. }
  840. .ms-u-xxlOffset1 {
  841. margin-left: 8.333333333333332%;
  842. }
  843. .ms-u-xxlOffset0 {
  844. margin-left: 0;
  845. }
  846. }
  847. // Extra extra extra large screens
  848. @media (min-width: $ms-screen-xxxl-min) {
  849. .ms-u-xxxl12 {
  850. @include ms-u-xxxl12;
  851. }
  852. .ms-u-xxxl11 {
  853. @include ms-u-xxxl11;
  854. }
  855. .ms-u-xxxl10 {
  856. @include ms-u-xxxl10;
  857. }
  858. .ms-u-xxxl9 {
  859. @include ms-u-xxxl9;
  860. }
  861. .ms-u-xxxl8 {
  862. @include ms-u-xxxl8;
  863. }
  864. .ms-u-xxxl7 {
  865. @include ms-u-xxxl7;
  866. }
  867. .ms-u-xxxl6 {
  868. @include ms-u-xxxl6;
  869. }
  870. .ms-u-xxxl5 {
  871. @include ms-u-xxxl5;
  872. }
  873. .ms-u-xxxl4 {
  874. @include ms-u-xxxl4;
  875. }
  876. .ms-u-xxxl3 {
  877. @include ms-u-xxxl3;
  878. }
  879. .ms-u-xxxl2 {
  880. @include ms-u-xxxl2;
  881. }
  882. .ms-u-xxxl1 {
  883. @include ms-u-xxxl1;
  884. }
  885. .ms-u-xxxlPull12 {
  886. @include ms-u-xxxlPull12;
  887. }
  888. .ms-u-xxxlPull11 {
  889. @include ms-u-xxxlPull11;
  890. }
  891. .ms-u-xxxlPull10 {
  892. @include ms-u-xxxlPull10;
  893. }
  894. .ms-u-xxxlPull9 {
  895. @include ms-u-xxxlPull9;
  896. }
  897. .ms-u-xxxlPull8 {
  898. @include ms-u-xxxlPull8;
  899. }
  900. .ms-u-xxxlPull7 {
  901. @include ms-u-xxxlPull7;
  902. }
  903. .ms-u-xxxlPull6 {
  904. @include ms-u-xxxlPull6;
  905. }
  906. .ms-u-xxxlPull5 {
  907. @include ms-u-xxxlPull5;
  908. }
  909. .ms-u-xxxlPull4 {
  910. @include ms-u-xxxlPull4;
  911. }
  912. .ms-u-xxxlPull3 {
  913. @include ms-u-xxxlPull3;
  914. }
  915. .ms-u-xxxlPull2 {
  916. @include ms-u-xxxlPull2;
  917. }
  918. .ms-u-xxxlPull1 {
  919. @include ms-u-xxxlPull1;
  920. }
  921. .ms-u-xxxlPull0 {
  922. @include ms-u-xxxlPull0;
  923. }
  924. .ms-u-xxxlPush12 {
  925. @include ms-u-xxxlPush12;
  926. }
  927. .ms-u-xxxlPush11 {
  928. @include ms-u-xxxlPush11;
  929. }
  930. .ms-u-xxxlPush10 {
  931. @include ms-u-xxxlPush10;
  932. }
  933. .ms-u-xxxlPush9 {
  934. @include ms-u-xxxlPush9;
  935. }
  936. .ms-u-xxxlPush8 {
  937. @include ms-u-xxxlPush8;
  938. }
  939. .ms-u-xxxlPush7 {
  940. @include ms-u-xxxlPush7;
  941. }
  942. .ms-u-xxxlPush6 {
  943. @include ms-u-xxxlPush6;
  944. }
  945. .ms-u-xxxlPush5 {
  946. @include ms-u-xxxlPush5;
  947. }
  948. .ms-u-xxxlPush4 {
  949. @include ms-u-xxxlPush4;
  950. }
  951. .ms-u-xxxlPush3 {
  952. @include ms-u-xxxlPush3;
  953. }
  954. .ms-u-xxxlPush2 {
  955. @include ms-u-xxxlPush2;
  956. }
  957. .ms-u-xxxlPush1 {
  958. @include ms-u-xxxlPush1;
  959. }
  960. .ms-u-xxxlPush0 {
  961. @include ms-u-xxxlPush0;
  962. }
  963. // Extra extra extra large Offset classes 0 ... 11
  964. .ms-u-xxxlOffset11 {
  965. margin-left: 91.66666666666666%;
  966. }
  967. .ms-u-xxxlOffset10 {
  968. margin-left: 83.33333333333334%;
  969. }
  970. .ms-u-xxxlOffset9 {
  971. margin-left: 75%;
  972. }
  973. .ms-u-xxxlOffset8 {
  974. margin-left: 66.66666666666666%;
  975. }
  976. .ms-u-xxxlOffset7 {
  977. margin-left: 58.333333333333336%;
  978. }
  979. .ms-u-xxxlOffset6 {
  980. margin-left: 50%;
  981. }
  982. .ms-u-xxxlOffset5 {
  983. margin-left: 41.66666666666667%;
  984. }
  985. .ms-u-xxxlOffset4 {
  986. margin-left: 33.33333333333333%;
  987. }
  988. .ms-u-xxxlOffset3 {
  989. margin-left: 25%;
  990. }
  991. .ms-u-xxxlOffset2 {
  992. margin-left: 16.666666666666664%;
  993. }
  994. .ms-u-xxxlOffset1 {
  995. margin-left: 8.333333333333332%;
  996. }
  997. .ms-u-xxxlOffset0 {
  998. margin-left: 0;
  999. }
  1000. }