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