_utilities.scss 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561
  1. @use 'sass:map';
  2. @use './variables';
  3. @use '../tools/functions' as *;
  4. $utilities: () !default;
  5. @if ($utilities != false) {
  6. $utilities: map-deep-merge(
  7. (
  8. // Display utilities
  9. "overflow": (
  10. property: overflow,
  11. values: auto hidden visible,
  12. ),
  13. "overflow-x": (
  14. property: overflow-x,
  15. values: auto hidden
  16. ),
  17. "overflow-y": (
  18. property: overflow-y,
  19. values: auto hidden
  20. ),
  21. "display": (
  22. responsive: true,
  23. print: true,
  24. property: display,
  25. class: d,
  26. values: none inline inline-block block table table-row table-cell flex inline-flex
  27. ),
  28. "float": (
  29. responsive: true,
  30. print: true,
  31. property: float,
  32. class: float,
  33. values: none left right
  34. ),
  35. "float:rtl": (
  36. responsive: true,
  37. print: true,
  38. property: float,
  39. class: float,
  40. values: (
  41. end: left,
  42. start: right,
  43. )
  44. ),
  45. "float:ltr": (
  46. responsive: true,
  47. print: true,
  48. property: float,
  49. class: float,
  50. values: (
  51. end: right,
  52. start: left,
  53. )
  54. ),
  55. // Flex utilities
  56. "flex": (
  57. responsive: true,
  58. property: flex,
  59. values: (
  60. fill: 1 1 auto,
  61. '1-1': 1 1 auto,
  62. '1-0': 1 0 auto,
  63. '0-1': 0 1 auto,
  64. '0-0': 0 0 auto,
  65. '1-1-100': 1 1 100%,
  66. '1-0-100': 1 0 100%,
  67. '0-1-100': 0 1 100%,
  68. '0-0-100': 0 0 100%
  69. )
  70. ),
  71. "flex-direction": (
  72. responsive: true,
  73. property: flex-direction,
  74. class: flex,
  75. values: row column row-reverse column-reverse
  76. ),
  77. "flex-grow": (
  78. responsive: true,
  79. property: flex-grow,
  80. class: flex,
  81. values: (
  82. grow-0: 0,
  83. grow-1: 1,
  84. )
  85. ),
  86. "flex-shrink": (
  87. responsive: true,
  88. property: flex-shrink,
  89. class: flex,
  90. values: (
  91. shrink-0: 0,
  92. shrink-1: 1,
  93. )
  94. ),
  95. "flex-wrap": (
  96. responsive: true,
  97. property: flex-wrap,
  98. class: flex,
  99. values: wrap nowrap wrap-reverse
  100. ),
  101. "justify-content": (
  102. responsive: true,
  103. property: justify-content,
  104. class: justify,
  105. values: (
  106. start: flex-start,
  107. end: flex-end,
  108. center: center,
  109. space-between: space-between,
  110. space-around: space-around,
  111. space-evenly: space-evenly,
  112. )
  113. ),
  114. "align-items": (
  115. responsive: true,
  116. property: align-items,
  117. class: align,
  118. values: (
  119. start: flex-start,
  120. end: flex-end,
  121. center: center,
  122. baseline: baseline,
  123. stretch: stretch,
  124. )
  125. ),
  126. "align-content": (
  127. responsive: true,
  128. property: align-content,
  129. values: (
  130. start: flex-start,
  131. end: flex-end,
  132. center: center,
  133. space-between: space-between,
  134. space-around: space-around,
  135. space-evenly: space-evenly,
  136. stretch: stretch,
  137. )
  138. ),
  139. "align-self": (
  140. responsive: true,
  141. property: align-self,
  142. values: (
  143. auto: auto,
  144. start: flex-start,
  145. end: flex-end,
  146. center: center,
  147. baseline: baseline,
  148. stretch: stretch,
  149. )
  150. ),
  151. "order": (
  152. responsive: true,
  153. property: order,
  154. values: (
  155. first: -1,
  156. 0: 0,
  157. 1: 1,
  158. 2: 2,
  159. 3: 3,
  160. 4: 4,
  161. 5: 5,
  162. 6: 6,
  163. 7: 7,
  164. 8: 8,
  165. 9: 9,
  166. 10: 10,
  167. 11: 11,
  168. 12: 12,
  169. last: 13,
  170. ),
  171. ),
  172. // Margin utilities
  173. "margin": (
  174. responsive: true,
  175. property: margin,
  176. class: ma,
  177. values: map.merge(variables.$spacers, (auto: auto))
  178. ),
  179. "margin-x": (
  180. responsive: true,
  181. property: margin-right margin-left,
  182. class: mx,
  183. values: map.merge(variables.$spacers, (auto: auto))
  184. ),
  185. "margin-y": (
  186. responsive: true,
  187. property: margin-top margin-bottom,
  188. class: my,
  189. values: map.merge(variables.$spacers, (auto: auto))
  190. ),
  191. "margin-top": (
  192. responsive: true,
  193. property: margin-top,
  194. class: mt,
  195. values: map.merge(variables.$spacers, (auto: auto))
  196. ),
  197. "margin-right": (
  198. responsive: true,
  199. property: margin-right,
  200. class: mr,
  201. values: map.merge(variables.$spacers, (auto: auto))
  202. ),
  203. "margin-bottom": (
  204. responsive: true,
  205. property: margin-bottom,
  206. class: mb,
  207. values: map.merge(variables.$spacers, (auto: auto))
  208. ),
  209. "margin-left": (
  210. responsive: true,
  211. property: margin-left,
  212. class: ml,
  213. values: map.merge(variables.$spacers, (auto: auto))
  214. ),
  215. "margin-start": (
  216. responsive: true,
  217. property: margin-inline-start,
  218. class: ms,
  219. values: map.merge(variables.$spacers, (auto: auto))
  220. ),
  221. "margin-end": (
  222. responsive: true,
  223. property: margin-inline-end,
  224. class: me,
  225. values: map.merge(variables.$spacers, (auto: auto))
  226. ),
  227. // Negative margin utilities
  228. "negative-margin": (
  229. responsive: true,
  230. property: margin,
  231. class: ma,
  232. values: variables.$negative-spacers
  233. ),
  234. "negative-margin-x": (
  235. responsive: true,
  236. property: margin-right margin-left,
  237. class: mx,
  238. values: variables.$negative-spacers
  239. ),
  240. "negative-margin-y": (
  241. responsive: true,
  242. property: margin-top margin-bottom,
  243. class: my,
  244. values: variables.$negative-spacers
  245. ),
  246. "negative-margin-top": (
  247. responsive: true,
  248. property: margin-top,
  249. class: mt,
  250. values: variables.$negative-spacers
  251. ),
  252. "negative-margin-right": (
  253. responsive: true,
  254. property: margin-right,
  255. class: mr,
  256. values: variables.$negative-spacers
  257. ),
  258. "negative-margin-bottom": (
  259. responsive: true,
  260. property: margin-bottom,
  261. class: mb,
  262. values: variables.$negative-spacers
  263. ),
  264. "negative-margin-left": (
  265. responsive: true,
  266. property: margin-left,
  267. class: ml,
  268. values: variables.$negative-spacers
  269. ),
  270. "negative-margin-start": (
  271. responsive: true,
  272. property: margin-inline-start,
  273. class: ms,
  274. values: variables.$negative-spacers
  275. ),
  276. "negative-margin-end": (
  277. responsive: true,
  278. property: margin-inline-end,
  279. class: me,
  280. values: variables.$negative-spacers
  281. ),
  282. // Padding utilities
  283. "padding": (
  284. responsive: true,
  285. property: padding,
  286. class: pa,
  287. values: variables.$spacers
  288. ),
  289. "padding-x": (
  290. responsive: true,
  291. property: padding-right padding-left,
  292. class: px,
  293. values: variables.$spacers
  294. ),
  295. "padding-y": (
  296. responsive: true,
  297. property: padding-top padding-bottom,
  298. class: py,
  299. values: variables.$spacers
  300. ),
  301. "padding-top": (
  302. responsive: true,
  303. property: padding-top,
  304. class: pt,
  305. values: variables.$spacers
  306. ),
  307. "padding-right": (
  308. responsive: true,
  309. property: padding-right,
  310. class: pr,
  311. values: variables.$spacers
  312. ),
  313. "padding-bottom": (
  314. responsive: true,
  315. property: padding-bottom,
  316. class: pb,
  317. values: variables.$spacers
  318. ),
  319. "padding-left": (
  320. responsive: true,
  321. property: padding-left,
  322. class: pl,
  323. values: variables.$spacers
  324. ),
  325. "padding-start": (
  326. responsive: true,
  327. property: padding-inline-start,
  328. class: ps,
  329. values: variables.$spacers
  330. ),
  331. "padding-end": (
  332. responsive: true,
  333. property: padding-inline-end,
  334. class: pe,
  335. values: variables.$spacers
  336. ),
  337. // Border radius
  338. "rounded": (
  339. property: border-radius,
  340. class: rounded,
  341. values: variables.$rounded
  342. ),
  343. "rounded-top": (
  344. property: border-top-left-radius border-top-right-radius,
  345. class: rounded-t,
  346. values: variables.$rounded
  347. ),
  348. "rounded-end": (
  349. property: (ltr: border-top-right-radius border-bottom-right-radius, rtl: border-top-left-radius border-bottom-left-radius),
  350. class: rounded-e,
  351. values: variables.$rounded
  352. ),
  353. "rounded-bottom": (
  354. property: border-bottom-left-radius border-bottom-right-radius,
  355. class: rounded-b,
  356. values: variables.$rounded
  357. ),
  358. "rounded-start": (
  359. property: (ltr: border-top-left-radius border-bottom-left-radius, rtl: border-top-right-radius border-bottom-right-radius),
  360. class: rounded-s,
  361. values: variables.$rounded
  362. ),
  363. "rounded-top-start": (
  364. property: (ltr: border-top-left-radius, rtl: border-top-right-radius),
  365. class: rounded-ts,
  366. values: variables.$rounded
  367. ),
  368. "rounded-top-end": (
  369. property: (ltr: border-top-right-radius, rtl: border-top-left-radius),
  370. class: rounded-te,
  371. values: variables.$rounded
  372. ),
  373. "rounded-bottom-end": (
  374. property: (ltr: border-bottom-right-radius, rtl: border-bottom-left-radius),
  375. class: rounded-be,
  376. values: variables.$rounded
  377. ),
  378. "rounded-bottom-start": (
  379. property: (ltr: border-bottom-left-radius, rtl: border-bottom-right-radius),
  380. class: rounded-bs,
  381. values: variables.$rounded
  382. ),
  383. // Border
  384. "border": (
  385. property: border-width border-style border-color,
  386. class: border,
  387. values: variables.$borders
  388. ),
  389. "border-opacity": (
  390. property: --v-border-opacity,
  391. class: border-opacity,
  392. values: variables.$border-opacities
  393. ),
  394. "border-top": (
  395. property: border-block-start-width border-block-start-style border-block-start-color,
  396. class: border-t,
  397. values: variables.$borders
  398. ),
  399. "border-end": (
  400. property: border-inline-end-width border-inline-end-style border-inline-end-color,
  401. class: border-e,
  402. values: variables.$borders
  403. ),
  404. "border-bottom": (
  405. property: border-block-end-width border-block-end-style border-block-end-color,
  406. class: border-b,
  407. values: variables.$borders
  408. ),
  409. "border-start": (
  410. property: border-inline-start-width border-inline-start-style border-inline-start-color,
  411. class: border-s,
  412. values: variables.$borders
  413. ),
  414. "border-style": (
  415. property: border-style,
  416. class: border,
  417. values: solid dashed dotted double none
  418. ),
  419. // Text
  420. "text-align": (
  421. responsive: true,
  422. property: text-align,
  423. class: text,
  424. values: left right center justify start end
  425. ),
  426. "text-decoration": (
  427. property: text-decoration,
  428. class: text-decoration,
  429. values: line-through none overline underline
  430. ),
  431. "white-space": (
  432. property: white-space,
  433. class: text,
  434. values: (
  435. wrap: normal,
  436. no-wrap: nowrap,
  437. pre: pre,
  438. pre-line: pre-line,
  439. pre-wrap: pre-wrap,
  440. )
  441. ),
  442. "overflow-wrap": (
  443. property: overflow-wrap word-break, // word-break for IE & < Edge 18
  444. class: text,
  445. values: (break: break-word)
  446. ),
  447. "text-opacity": (
  448. property: color,
  449. class: text,
  450. values: (
  451. high-emphasis: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)),
  452. medium-emphasis: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity)),
  453. disabled: rgba(var(--v-theme-on-background), var(--v-disabled-opacity)),
  454. )
  455. ),
  456. "text-overflow": (
  457. property: white-space overflow text-overflow,
  458. class: text,
  459. values: (truncate: nowrap hidden ellipsis)
  460. ),
  461. "typography": (
  462. responsive: true,
  463. property: (
  464. font-size,
  465. font-weight,
  466. line-height,
  467. letter-spacing,
  468. font-family,
  469. text-transform
  470. ),
  471. class: text,
  472. unimportant: (
  473. font-weight,
  474. line-height
  475. ),
  476. values: variables.$flat-typography
  477. ),
  478. "text-transform": (
  479. property: text-transform,
  480. class: text,
  481. values: none capitalize lowercase uppercase
  482. ),
  483. "font-weight": (
  484. property: font-weight,
  485. class: font-weight,
  486. values: variables.$font-weights
  487. ),
  488. "font-italic": (
  489. property: font-style,
  490. class: font,
  491. values: italic
  492. ),
  493. "text-mono": (
  494. property: font-family,
  495. class: text,
  496. values: (
  497. mono: monospace
  498. )
  499. ),
  500. // Position
  501. "position": (
  502. property: position,
  503. class: position,
  504. values: static relative fixed absolute sticky
  505. ),
  506. // Sizing
  507. "fill-height": (
  508. property: height,
  509. class: fill,
  510. values: (
  511. height: 100%
  512. )
  513. ),
  514. "height": (
  515. property: height,
  516. class: h,
  517. values: (
  518. auto: auto,
  519. screen: 100vh,
  520. 0: 0,
  521. 25: 25%,
  522. 50: 50%,
  523. 75: 75%,
  524. 100: 100%
  525. )
  526. ),
  527. "height-screen": (
  528. property: height,
  529. class: h,
  530. values: (
  531. screen: 100dvh
  532. )
  533. ),
  534. "width": (
  535. property: width,
  536. class: w,
  537. values: (
  538. auto: auto,
  539. 0: 0,
  540. 25: 25%,
  541. 33: 33%,
  542. 50: 50%,
  543. 66: 66%,
  544. 75: 75%,
  545. 100: 100%
  546. )
  547. )
  548. ),
  549. $utilities
  550. );
  551. } @else {
  552. $utilities: ();
  553. }