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