暫無描述
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

_Fabric.Responsive.Utilities.Variables.scss 10KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697
  1. // Small Screens
  2. @mixin ms-u-sm12 {
  3. width: 100%;
  4. }
  5. @mixin ms-u-sm11 {
  6. width: 91.66666666666666%;
  7. }
  8. @mixin ms-u-sm10 {
  9. width: 83.33333333333334%;
  10. }
  11. @mixin ms-u-sm9 {
  12. width: 75%;
  13. }
  14. @mixin ms-u-sm8 {
  15. width: 66.66666666666666%;
  16. }
  17. @mixin ms-u-sm7 {
  18. width: 58.333333333333336%;
  19. }
  20. @mixin ms-u-sm6 {
  21. width: 50%;
  22. }
  23. @mixin ms-u-sm5 {
  24. width: 41.66666666666667%;
  25. }
  26. @mixin ms-u-sm4 {
  27. width: 33.33333333333333%;
  28. }
  29. @mixin ms-u-sm3 {
  30. width: 25%;
  31. }
  32. @mixin ms-u-sm2 {
  33. width: 16.666666666666664%;
  34. }
  35. @mixin ms-u-sm1 {
  36. width: 8.333333333333332%;
  37. }
  38. @mixin ms-u-smPull12 {
  39. right: 100%;
  40. }
  41. @mixin ms-u-smPull11 {
  42. right: 91.66666666666666%;
  43. }
  44. @mixin ms-u-smPull10 {
  45. right: 83.33333333333334%;
  46. }
  47. @mixin ms-u-smPull9 {
  48. right: 75%;
  49. }
  50. @mixin ms-u-smPull8 {
  51. right: 66.66666666666666%;
  52. }
  53. @mixin ms-u-smPull7 {
  54. right: 58.333333333333336%;
  55. }
  56. @mixin ms-u-smPull6 {
  57. right: 50%;
  58. }
  59. @mixin ms-u-smPull5 {
  60. right: 41.66666666666667%;
  61. }
  62. @mixin ms-u-smPull4 {
  63. right: 33.33333333333333%;
  64. }
  65. @mixin ms-u-smPull3 {
  66. right: 25%;
  67. }
  68. @mixin ms-u-smPull2 {
  69. right: 16.666666666666664%;
  70. }
  71. @mixin ms-u-smPull1 {
  72. right: 8.333333333333332%;
  73. }
  74. @mixin ms-u-smPull0 {
  75. right: auto;
  76. }
  77. @mixin ms-u-smPush12 {
  78. left: 100%;
  79. }
  80. @mixin ms-u-smPush11 {
  81. left: 91.66666666666666%;
  82. }
  83. @mixin ms-u-smPush10 {
  84. left: 83.33333333333334%;
  85. }
  86. @mixin ms-u-smPush9 {
  87. left: 75%;
  88. }
  89. @mixin ms-u-smPush8 {
  90. left: 66.66666666666666%;
  91. }
  92. @mixin ms-u-smPush7 {
  93. left: 58.333333333333336%;
  94. }
  95. @mixin ms-u-smPush6 {
  96. left: 50%;
  97. }
  98. @mixin ms-u-smPush5 {
  99. left: 41.66666666666667%;
  100. }
  101. @mixin ms-u-smPush4 {
  102. left: 33.33333333333333%;
  103. }
  104. @mixin ms-u-smPush3 {
  105. left: 25%;
  106. }
  107. @mixin ms-u-smPush2 {
  108. left: 16.666666666666664%;
  109. }
  110. @mixin ms-u-smPush1 {
  111. left: 8.333333333333332%;
  112. }
  113. @mixin ms-u-smPush0 {
  114. left: auto;
  115. }
  116. // Medium Screens
  117. @mixin ms-u-md12 {
  118. width: 100%;
  119. }
  120. @mixin ms-u-md11 {
  121. width: 91.66666666666666%;
  122. }
  123. @mixin ms-u-md10 {
  124. width: 83.33333333333334%;
  125. }
  126. @mixin ms-u-md9 {
  127. width: 75%;
  128. }
  129. @mixin ms-u-md8 {
  130. width: 66.66666666666666%;
  131. }
  132. @mixin ms-u-md7 {
  133. width: 58.333333333333336%;
  134. }
  135. @mixin ms-u-md6 {
  136. width: 50%;
  137. }
  138. @mixin ms-u-md5 {
  139. width: 41.66666666666667%;
  140. }
  141. @mixin ms-u-md4 {
  142. width: 33.33333333333333%;
  143. }
  144. @mixin ms-u-md3 {
  145. width: 25%;
  146. }
  147. @mixin ms-u-md2 {
  148. width: 16.666666666666664%;
  149. }
  150. @mixin ms-u-md1 {
  151. width: 8.333333333333332%;
  152. }
  153. @mixin ms-u-mdPull12 {
  154. right: 100%;
  155. }
  156. @mixin ms-u-mdPull11 {
  157. right: 91.66666666666666%;
  158. }
  159. @mixin ms-u-mdPull10 {
  160. right: 83.33333333333334%;
  161. }
  162. @mixin ms-u-mdPull9 {
  163. right: 75%;
  164. }
  165. @mixin ms-u-mdPull8 {
  166. right: 66.66666666666666%;
  167. }
  168. @mixin ms-u-mdPull7 {
  169. right: 58.333333333333336%;
  170. }
  171. @mixin ms-u-mdPull6 {
  172. right: 50%;
  173. }
  174. @mixin ms-u-mdPull5 {
  175. right: 41.66666666666667%;
  176. }
  177. @mixin ms-u-mdPull4 {
  178. right: 33.33333333333333%;
  179. }
  180. @mixin ms-u-mdPull3 {
  181. right: 25%;
  182. }
  183. @mixin ms-u-mdPull2 {
  184. right: 16.666666666666664%;
  185. }
  186. @mixin ms-u-mdPull1 {
  187. right: 8.333333333333332%;
  188. }
  189. @mixin ms-u-mdPull0 {
  190. right: auto;
  191. }
  192. @mixin ms-u-mdPush12 {
  193. left: 100%;
  194. }
  195. @mixin ms-u-mdPush11 {
  196. left: 91.66666666666666%;
  197. }
  198. @mixin ms-u-mdPush10 {
  199. left: 83.33333333333334%;
  200. }
  201. @mixin ms-u-mdPush9 {
  202. left: 75%;
  203. }
  204. @mixin ms-u-mdPush8 {
  205. left: 66.66666666666666%;
  206. }
  207. @mixin ms-u-mdPush7 {
  208. left: 58.333333333333336%;
  209. }
  210. @mixin ms-u-mdPush6 {
  211. left: 50%;
  212. }
  213. @mixin ms-u-mdPush5 {
  214. left: 41.66666666666667%;
  215. }
  216. @mixin ms-u-mdPush4 {
  217. left: 33.33333333333333%;
  218. }
  219. @mixin ms-u-mdPush3 {
  220. left: 25%;
  221. }
  222. @mixin ms-u-mdPush2 {
  223. left: 16.666666666666664%;
  224. }
  225. @mixin ms-u-mdPush1 {
  226. left: 8.333333333333332%;
  227. }
  228. @mixin ms-u-mdPush0 {
  229. left: auto;
  230. }
  231. // Large screens
  232. @mixin ms-u-lg12 {
  233. width: 100%;
  234. }
  235. @mixin ms-u-lg11 {
  236. width: 91.66666666666666%;
  237. }
  238. @mixin ms-u-lg10 {
  239. width: 83.33333333333334%;
  240. }
  241. @mixin ms-u-lg9 {
  242. width: 75%;
  243. }
  244. @mixin ms-u-lg8 {
  245. width: 66.66666666666666%;
  246. }
  247. @mixin ms-u-lg7 {
  248. width: 58.333333333333336%;
  249. }
  250. @mixin ms-u-lg6 {
  251. width: 50%;
  252. }
  253. @mixin ms-u-lg5 {
  254. width: 41.66666666666667%;
  255. }
  256. @mixin ms-u-lg4 {
  257. width: 33.33333333333333%;
  258. }
  259. @mixin ms-u-lg3 {
  260. width: 25%;
  261. }
  262. @mixin ms-u-lg2 {
  263. width: 16.666666666666664%;
  264. }
  265. @mixin ms-u-lg1 {
  266. width: 8.333333333333332%;
  267. }
  268. @mixin ms-u-lgPull12 {
  269. right: 100%;
  270. }
  271. @mixin ms-u-lgPull11 {
  272. right: 91.66666666666666%;
  273. }
  274. @mixin ms-u-lgPull10 {
  275. right: 83.33333333333334%;
  276. }
  277. @mixin ms-u-lgPull9 {
  278. right: 75%;
  279. }
  280. @mixin ms-u-lgPull8 {
  281. right: 66.66666666666666%;
  282. }
  283. @mixin ms-u-lgPull7 {
  284. right: 58.333333333333336%;
  285. }
  286. @mixin ms-u-lgPull6 {
  287. right: 50%;
  288. }
  289. @mixin ms-u-lgPull5 {
  290. right: 41.66666666666667%;
  291. }
  292. @mixin ms-u-lgPull4 {
  293. right: 33.33333333333333%;
  294. }
  295. @mixin ms-u-lgPull3 {
  296. right: 25%;
  297. }
  298. @mixin ms-u-lgPull2 {
  299. right: 16.666666666666664%;
  300. }
  301. @mixin ms-u-lgPull1 {
  302. right: 8.333333333333332%;
  303. }
  304. @mixin ms-u-lgPull0 {
  305. right: auto;
  306. }
  307. @mixin ms-u-lgPush12 {
  308. left: 100%;
  309. }
  310. @mixin ms-u-lgPush11 {
  311. left: 91.66666666666666%;
  312. }
  313. @mixin ms-u-lgPush10 {
  314. left: 83.33333333333334%;
  315. }
  316. @mixin ms-u-lgPush9 {
  317. left: 75%;
  318. }
  319. @mixin ms-u-lgPush8 {
  320. left: 66.66666666666666%;
  321. }
  322. @mixin ms-u-lgPush7 {
  323. left: 58.333333333333336%;
  324. }
  325. @mixin ms-u-lgPush6 {
  326. left: 50%;
  327. }
  328. @mixin ms-u-lgPush5 {
  329. left: 41.66666666666667%;
  330. }
  331. @mixin ms-u-lgPush4 {
  332. left: 33.33333333333333%;
  333. }
  334. @mixin ms-u-lgPush3 {
  335. left: 25%;
  336. }
  337. @mixin ms-u-lgPush2 {
  338. left: 16.666666666666664%;
  339. }
  340. @mixin ms-u-lgPush1 {
  341. left: 8.333333333333332%;
  342. }
  343. @mixin ms-u-lgPush0 {
  344. left: auto;
  345. }
  346. // Extra Large Screens
  347. @mixin ms-u-xl12 {
  348. width: 100%;
  349. }
  350. @mixin ms-u-xl11 {
  351. width: 91.66666666666666%;
  352. }
  353. @mixin ms-u-xl10 {
  354. width: 83.33333333333334%;
  355. }
  356. @mixin ms-u-xl9 {
  357. width: 75%;
  358. }
  359. @mixin ms-u-xl8 {
  360. width: 66.66666666666666%;
  361. }
  362. @mixin ms-u-xl7 {
  363. width: 58.333333333333336%;
  364. }
  365. @mixin ms-u-xl6 {
  366. width: 50%;
  367. }
  368. @mixin ms-u-xl5 {
  369. width: 41.66666666666667%;
  370. }
  371. @mixin ms-u-xl4 {
  372. width: 33.33333333333333%;
  373. }
  374. @mixin ms-u-xl3 {
  375. width: 25%;
  376. }
  377. @mixin ms-u-xl2 {
  378. width: 16.666666666666664%;
  379. }
  380. @mixin ms-u-xl1 {
  381. width: 8.333333333333332%;
  382. }
  383. @mixin ms-u-xlPull12 {
  384. right: 100%;
  385. }
  386. @mixin ms-u-xlPull11 {
  387. right: 91.66666666666666%;
  388. }
  389. @mixin ms-u-xlPull10 {
  390. right: 83.33333333333334%;
  391. }
  392. @mixin ms-u-xlPull9 {
  393. right: 75%;
  394. }
  395. @mixin ms-u-xlPull8 {
  396. right: 66.66666666666666%;
  397. }
  398. @mixin ms-u-xlPull7 {
  399. right: 58.333333333333336%;
  400. }
  401. @mixin ms-u-xlPull6 {
  402. right: 50%;
  403. }
  404. @mixin ms-u-xlPull5 {
  405. right: 41.66666666666667%;
  406. }
  407. @mixin ms-u-xlPull4 {
  408. right: 33.33333333333333%;
  409. }
  410. @mixin ms-u-xlPull3 {
  411. right: 25%;
  412. }
  413. @mixin ms-u-xlPull2 {
  414. right: 16.666666666666664%;
  415. }
  416. @mixin ms-u-xlPull1 {
  417. right: 8.333333333333332%;
  418. }
  419. @mixin ms-u-xlPull0 {
  420. right: auto;
  421. }
  422. @mixin ms-u-xlPush12 {
  423. left: 100%;
  424. }
  425. @mixin ms-u-xlPush11 {
  426. left: 91.66666666666666%;
  427. }
  428. @mixin ms-u-xlPush10 {
  429. left: 83.33333333333334%;
  430. }
  431. @mixin ms-u-xlPush9 {
  432. left: 75%;
  433. }
  434. @mixin ms-u-xlPush8 {
  435. left: 66.66666666666666%;
  436. }
  437. @mixin ms-u-xlPush7 {
  438. left: 58.333333333333336%;
  439. }
  440. @mixin ms-u-xlPush6 {
  441. left: 50%;
  442. }
  443. @mixin ms-u-xlPush5 {
  444. left: 41.66666666666667%;
  445. }
  446. @mixin ms-u-xlPush4 {
  447. left: 33.33333333333333%;
  448. }
  449. @mixin ms-u-xlPush3 {
  450. left: 25%;
  451. }
  452. @mixin ms-u-xlPush2 {
  453. left: 16.666666666666664%;
  454. }
  455. @mixin ms-u-xlPush1 {
  456. left: 8.333333333333332%;
  457. }
  458. @mixin ms-u-xlPush0 {
  459. left: auto;
  460. }
  461. // XXL Screens
  462. @mixin ms-u-xxl12 {
  463. width: 100%;
  464. }
  465. @mixin ms-u-xxl11 {
  466. width: 91.66666666666666%;
  467. }
  468. @mixin ms-u-xxl10 {
  469. width: 83.33333333333334%;
  470. }
  471. @mixin ms-u-xxl9 {
  472. width: 75%;
  473. }
  474. @mixin ms-u-xxl8 {
  475. width: 66.66666666666666%;
  476. }
  477. @mixin ms-u-xxl7 {
  478. width: 58.333333333333336%;
  479. }
  480. @mixin ms-u-xxl6 {
  481. width: 50%;
  482. }
  483. @mixin ms-u-xxl5 {
  484. width: 41.66666666666667%;
  485. }
  486. @mixin ms-u-xxl4 {
  487. width: 33.33333333333333%;
  488. }
  489. @mixin ms-u-xxl3 {
  490. width: 25%;
  491. }
  492. @mixin ms-u-xxl2 {
  493. width: 16.666666666666664%;
  494. }
  495. @mixin ms-u-xxl1 {
  496. width: 8.333333333333332%;
  497. }
  498. @mixin ms-u-xxlPull12 {
  499. right: 100%;
  500. }
  501. @mixin ms-u-xxlPull11 {
  502. right: 91.66666666666666%;
  503. }
  504. @mixin ms-u-xxlPull10 {
  505. right: 83.33333333333334%;
  506. }
  507. @mixin ms-u-xxlPull9 {
  508. right: 75%;
  509. }
  510. @mixin ms-u-xxlPull8 {
  511. right: 66.66666666666666%;
  512. }
  513. @mixin ms-u-xxlPull7 {
  514. right: 58.333333333333336%;
  515. }
  516. @mixin ms-u-xxlPull6 {
  517. right: 50%;
  518. }
  519. @mixin ms-u-xxlPull5 {
  520. right: 41.66666666666667%;
  521. }
  522. @mixin ms-u-xxlPull4 {
  523. right: 33.33333333333333%;
  524. }
  525. @mixin ms-u-xxlPull3 {
  526. right: 25%;
  527. }
  528. @mixin ms-u-xxlPull2 {
  529. right: 16.666666666666664%;
  530. }
  531. @mixin ms-u-xxlPull1 {
  532. right: 8.333333333333332%;
  533. }
  534. @mixin ms-u-xxlPull0 {
  535. right: auto;
  536. }
  537. @mixin ms-u-xxlPush12 {
  538. left: 100%;
  539. }
  540. @mixin ms-u-xxlPush11 {
  541. left: 91.66666666666666%;
  542. }
  543. @mixin ms-u-xxlPush10 {
  544. left: 83.33333333333334%;
  545. }
  546. @mixin ms-u-xxlPush9 {
  547. left: 75%;
  548. }
  549. @mixin ms-u-xxlPush8 {
  550. left: 66.66666666666666%;
  551. }
  552. @mixin ms-u-xxlPush7 {
  553. left: 58.333333333333336%;
  554. }
  555. @mixin ms-u-xxlPush6 {
  556. left: 50%;
  557. }
  558. @mixin ms-u-xxlPush5 {
  559. left: 41.66666666666667%;
  560. }
  561. @mixin ms-u-xxlPush4 {
  562. left: 33.33333333333333%;
  563. }
  564. @mixin ms-u-xxlPush3 {
  565. left: 25%;
  566. }
  567. @mixin ms-u-xxlPush2 {
  568. left: 16.666666666666664%;
  569. }
  570. @mixin ms-u-xxlPush1 {
  571. left: 8.333333333333332%;
  572. }
  573. @mixin ms-u-xxlPush0 {
  574. left: auto;
  575. }
  576. // Extra extra extra large screens
  577. @mixin ms-u-xxxl12 {
  578. width: 100%;
  579. }
  580. @mixin ms-u-xxxl11 {
  581. width: 91.66666666666666%;
  582. }
  583. @mixin ms-u-xxxl10 {
  584. width: 83.33333333333334%;
  585. }
  586. @mixin ms-u-xxxl9 {
  587. width: 75%;
  588. }
  589. @mixin ms-u-xxxl8 {
  590. width: 66.66666666666666%;
  591. }
  592. @mixin ms-u-xxxl7 {
  593. width: 58.333333333333336%;
  594. }
  595. @mixin ms-u-xxxl6 {
  596. width: 50%;
  597. }
  598. @mixin ms-u-xxxl5 {
  599. width: 41.66666666666667%;
  600. }
  601. @mixin ms-u-xxxl4 {
  602. width: 33.33333333333333%;
  603. }
  604. @mixin ms-u-xxxl3 {
  605. width: 25%;
  606. }
  607. @mixin ms-u-xxxl2 {
  608. width: 16.666666666666664%;
  609. }
  610. @mixin ms-u-xxxl1 {
  611. width: 8.333333333333332%;
  612. }
  613. @mixin ms-u-xxxlPull12 {
  614. right: 100%;
  615. }
  616. @mixin ms-u-xxxlPull11 {
  617. right: 91.66666666666666%;
  618. }
  619. @mixin ms-u-xxxlPull10 {
  620. right: 83.33333333333334%;
  621. }
  622. @mixin ms-u-xxxlPull9 {
  623. right: 75%;
  624. }
  625. @mixin ms-u-xxxlPull8 {
  626. right: 66.66666666666666%;
  627. }
  628. @mixin ms-u-xxxlPull7 {
  629. right: 58.333333333333336%;
  630. }
  631. @mixin ms-u-xxxlPull6 {
  632. right: 50%;
  633. }
  634. @mixin ms-u-xxxlPull5 {
  635. right: 41.66666666666667%;
  636. }
  637. @mixin ms-u-xxxlPull4 {
  638. right: 33.33333333333333%;
  639. }
  640. @mixin ms-u-xxxlPull3 {
  641. right: 25%;
  642. }
  643. @mixin ms-u-xxxlPull2 {
  644. right: 16.666666666666664%;
  645. }
  646. @mixin ms-u-xxxlPull1 {
  647. right: 8.333333333333332%;
  648. }
  649. @mixin ms-u-xxxlPull0 {
  650. right: auto;
  651. }
  652. @mixin ms-u-xxxlPush12 {
  653. left: 100%;
  654. }
  655. @mixin ms-u-xxxlPush11 {
  656. left: 91.66666666666666%;
  657. }
  658. @mixin ms-u-xxxlPush10 {
  659. left: 83.33333333333334%;
  660. }
  661. @mixin ms-u-xxxlPush9 {
  662. left: 75%;
  663. }
  664. @mixin ms-u-xxxlPush8 {
  665. left: 66.66666666666666%;
  666. }
  667. @mixin ms-u-xxxlPush7 {
  668. left: 58.333333333333336%;
  669. }
  670. @mixin ms-u-xxxlPush6 {
  671. left: 50%;
  672. }
  673. @mixin ms-u-xxxlPush5 {
  674. left: 41.66666666666667%;
  675. }
  676. @mixin ms-u-xxxlPush4 {
  677. left: 33.33333333333333%;
  678. }
  679. @mixin ms-u-xxxlPush3 {
  680. left: 25%;
  681. }
  682. @mixin ms-u-xxxlPush2 {
  683. left: 16.666666666666664%;
  684. }
  685. @mixin ms-u-xxxlPush1 {
  686. left: 8.333333333333332%;
  687. }
  688. @mixin ms-u-xxxlPush0 {
  689. left: auto;
  690. }