bootstrap-scss 5.2.0 → 5.2.2

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 (86) hide show
  1. package/README.md +1 -1
  2. package/_accordion.scss +149 -146
  3. package/_alert.scss +71 -71
  4. package/_badge.scss +38 -38
  5. package/_breadcrumb.scss +40 -40
  6. package/_button-group.scss +142 -142
  7. package/_buttons.scss +207 -186
  8. package/_card.scss +234 -234
  9. package/_carousel.scss +229 -229
  10. package/_close.scss +40 -40
  11. package/_containers.scss +41 -41
  12. package/_dropdown.scss +249 -248
  13. package/_forms.scss +9 -9
  14. package/_functions.scss +302 -302
  15. package/_grid.scss +33 -33
  16. package/_helpers.scss +10 -10
  17. package/_list-group.scss +192 -191
  18. package/_maps.scss +54 -54
  19. package/_mixins.scss +43 -43
  20. package/_modal.scss +237 -237
  21. package/_nav.scss +172 -172
  22. package/_navbar.scss +278 -276
  23. package/_offcanvas.scss +144 -143
  24. package/_pagination.scss +109 -109
  25. package/_placeholders.scss +51 -51
  26. package/_popover.scss +196 -196
  27. package/_progress.scss +59 -59
  28. package/_reboot.scss +610 -610
  29. package/_root.scss +73 -73
  30. package/_spinners.scss +85 -85
  31. package/_tables.scss +164 -164
  32. package/_toasts.scss +73 -70
  33. package/_tooltip.scss +120 -120
  34. package/_transitions.scss +27 -27
  35. package/_type.scss +106 -106
  36. package/_utilities.scss +647 -647
  37. package/_variables.scss +1634 -1633
  38. package/bootstrap-grid.scss +64 -64
  39. package/bootstrap-reboot.scss +9 -9
  40. package/bootstrap-utilities.scss +15 -15
  41. package/bootstrap.scss +51 -51
  42. package/forms/_floating-labels.scss +75 -74
  43. package/forms/_form-check.scss +175 -175
  44. package/forms/_form-control.scss +194 -194
  45. package/forms/_form-range.scss +91 -91
  46. package/forms/_form-select.scss +71 -71
  47. package/forms/_form-text.scss +11 -11
  48. package/forms/_input-group.scss +132 -129
  49. package/forms/_labels.scss +36 -36
  50. package/forms/_validation.scss +12 -12
  51. package/helpers/_clearfix.scss +3 -3
  52. package/helpers/_color-bg.scss +10 -10
  53. package/helpers/_colored-links.scss +12 -12
  54. package/helpers/_position.scss +36 -36
  55. package/helpers/_ratio.scss +26 -26
  56. package/helpers/_stacks.scss +15 -15
  57. package/helpers/_stretched-link.scss +15 -15
  58. package/helpers/_text-truncation.scss +7 -7
  59. package/helpers/_visually-hidden.scss +8 -8
  60. package/helpers/_vr.scss +8 -8
  61. package/mixins/_alert.scss +15 -15
  62. package/mixins/_backdrop.scss +14 -14
  63. package/mixins/_banner.scss +9 -9
  64. package/mixins/_border-radius.scss +78 -78
  65. package/mixins/_box-shadow.scss +18 -18
  66. package/mixins/_breakpoints.scss +127 -127
  67. package/mixins/_buttons.scss +70 -70
  68. package/mixins/_caret.scss +64 -64
  69. package/mixins/_clearfix.scss +9 -9
  70. package/mixins/_color-scheme.scss +7 -7
  71. package/mixins/_container.scss +11 -11
  72. package/mixins/_forms.scss +152 -152
  73. package/mixins/_gradients.scss +47 -47
  74. package/mixins/_grid.scss +151 -151
  75. package/mixins/_image.scss +16 -16
  76. package/mixins/_list-group.scss +24 -24
  77. package/mixins/_lists.scss +7 -7
  78. package/mixins/_pagination.scss +10 -10
  79. package/mixins/_reset-text.scss +17 -17
  80. package/mixins/_table-variants.scss +24 -24
  81. package/mixins/_transition.scss +26 -26
  82. package/mixins/_utilities.scss +97 -97
  83. package/mixins/_visually-hidden.scss +29 -29
  84. package/package.json +1 -1
  85. package/utilities/_api.scss +47 -47
  86. package/vendor/_rfs.scss +354 -354
@@ -1,152 +1,152 @@
1
- // This mixin uses an `if()` technique to be compatible with Dart Sass
2
- // See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details
3
-
4
- // scss-docs-start form-validation-mixins
5
- @mixin form-validation-state-selector($state) {
6
- @if ($state == "valid" or $state == "invalid") {
7
- .was-validated #{if(&, "&", "")}:#{$state},
8
- #{if(&, "&", "")}.is-#{$state} {
9
- @content;
10
- }
11
- } @else {
12
- #{if(&, "&", "")}.is-#{$state} {
13
- @content;
14
- }
15
- }
16
- }
17
-
18
- @mixin form-validation-state(
19
- $state,
20
- $color,
21
- $icon,
22
- $tooltip-color: color-contrast($color),
23
- $tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
24
- $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity)
25
- ) {
26
- .#{$state}-feedback {
27
- display: none;
28
- width: 100%;
29
- margin-top: $form-feedback-margin-top;
30
- @include font-size($form-feedback-font-size);
31
- font-style: $form-feedback-font-style;
32
- color: $color;
33
- }
34
-
35
- .#{$state}-tooltip {
36
- position: absolute;
37
- top: 100%;
38
- z-index: 5;
39
- display: none;
40
- max-width: 100%; // Contain to parent when possible
41
- padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
42
- margin-top: .1rem;
43
- @include font-size($form-feedback-tooltip-font-size);
44
- line-height: $form-feedback-tooltip-line-height;
45
- color: $tooltip-color;
46
- background-color: $tooltip-bg-color;
47
- @include border-radius($form-feedback-tooltip-border-radius);
48
- }
49
-
50
- @include form-validation-state-selector($state) {
51
- ~ .#{$state}-feedback,
52
- ~ .#{$state}-tooltip {
53
- display: block;
54
- }
55
- }
56
-
57
- .form-control {
58
- @include form-validation-state-selector($state) {
59
- border-color: $color;
60
-
61
- @if $enable-validation-icons {
62
- padding-right: $input-height-inner;
63
- background-image: escape-svg($icon);
64
- background-repeat: no-repeat;
65
- background-position: right $input-height-inner-quarter center;
66
- background-size: $input-height-inner-half $input-height-inner-half;
67
- }
68
-
69
- &:focus {
70
- border-color: $color;
71
- box-shadow: $focus-box-shadow;
72
- }
73
- }
74
- }
75
-
76
- // stylelint-disable-next-line selector-no-qualifying-type
77
- textarea.form-control {
78
- @include form-validation-state-selector($state) {
79
- @if $enable-validation-icons {
80
- padding-right: $input-height-inner;
81
- background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
82
- }
83
- }
84
- }
85
-
86
- .form-select {
87
- @include form-validation-state-selector($state) {
88
- border-color: $color;
89
-
90
- @if $enable-validation-icons {
91
- &:not([multiple]):not([size]),
92
- &:not([multiple])[size="1"] {
93
- padding-right: $form-select-feedback-icon-padding-end;
94
- background-image: escape-svg($form-select-indicator), escape-svg($icon);
95
- background-position: $form-select-bg-position, $form-select-feedback-icon-position;
96
- background-size: $form-select-bg-size, $form-select-feedback-icon-size;
97
- }
98
- }
99
-
100
- &:focus {
101
- border-color: $color;
102
- box-shadow: $focus-box-shadow;
103
- }
104
- }
105
- }
106
-
107
- .form-control-color {
108
- @include form-validation-state-selector($state) {
109
- @if $enable-validation-icons {
110
- width: add($form-color-width, $input-height-inner);
111
- }
112
- }
113
- }
114
-
115
- .form-check-input {
116
- @include form-validation-state-selector($state) {
117
- border-color: $color;
118
-
119
- &:checked {
120
- background-color: $color;
121
- }
122
-
123
- &:focus {
124
- box-shadow: $focus-box-shadow;
125
- }
126
-
127
- ~ .form-check-label {
128
- color: $color;
129
- }
130
- }
131
- }
132
- .form-check-inline .form-check-input {
133
- ~ .#{$state}-feedback {
134
- margin-left: .5em;
135
- }
136
- }
137
-
138
- .input-group .form-control,
139
- .input-group .form-select {
140
- @include form-validation-state-selector($state) {
141
- @if $state == "valid" {
142
- z-index: 1;
143
- } @else if $state == "invalid" {
144
- z-index: 2;
145
- }
146
- &:focus {
147
- z-index: 3;
148
- }
149
- }
150
- }
151
- }
152
- // scss-docs-end form-validation-mixins
1
+ // This mixin uses an `if()` technique to be compatible with Dart Sass
2
+ // See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details
3
+
4
+ // scss-docs-start form-validation-mixins
5
+ @mixin form-validation-state-selector($state) {
6
+ @if ($state == "valid" or $state == "invalid") {
7
+ .was-validated #{if(&, "&", "")}:#{$state},
8
+ #{if(&, "&", "")}.is-#{$state} {
9
+ @content;
10
+ }
11
+ } @else {
12
+ #{if(&, "&", "")}.is-#{$state} {
13
+ @content;
14
+ }
15
+ }
16
+ }
17
+
18
+ @mixin form-validation-state(
19
+ $state,
20
+ $color,
21
+ $icon,
22
+ $tooltip-color: color-contrast($color),
23
+ $tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
24
+ $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity)
25
+ ) {
26
+ .#{$state}-feedback {
27
+ display: none;
28
+ width: 100%;
29
+ margin-top: $form-feedback-margin-top;
30
+ @include font-size($form-feedback-font-size);
31
+ font-style: $form-feedback-font-style;
32
+ color: $color;
33
+ }
34
+
35
+ .#{$state}-tooltip {
36
+ position: absolute;
37
+ top: 100%;
38
+ z-index: 5;
39
+ display: none;
40
+ max-width: 100%; // Contain to parent when possible
41
+ padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
42
+ margin-top: .1rem;
43
+ @include font-size($form-feedback-tooltip-font-size);
44
+ line-height: $form-feedback-tooltip-line-height;
45
+ color: $tooltip-color;
46
+ background-color: $tooltip-bg-color;
47
+ @include border-radius($form-feedback-tooltip-border-radius);
48
+ }
49
+
50
+ @include form-validation-state-selector($state) {
51
+ ~ .#{$state}-feedback,
52
+ ~ .#{$state}-tooltip {
53
+ display: block;
54
+ }
55
+ }
56
+
57
+ .form-control {
58
+ @include form-validation-state-selector($state) {
59
+ border-color: $color;
60
+
61
+ @if $enable-validation-icons {
62
+ padding-right: $input-height-inner;
63
+ background-image: escape-svg($icon);
64
+ background-repeat: no-repeat;
65
+ background-position: right $input-height-inner-quarter center;
66
+ background-size: $input-height-inner-half $input-height-inner-half;
67
+ }
68
+
69
+ &:focus {
70
+ border-color: $color;
71
+ box-shadow: $focus-box-shadow;
72
+ }
73
+ }
74
+ }
75
+
76
+ // stylelint-disable-next-line selector-no-qualifying-type
77
+ textarea.form-control {
78
+ @include form-validation-state-selector($state) {
79
+ @if $enable-validation-icons {
80
+ padding-right: $input-height-inner;
81
+ background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
82
+ }
83
+ }
84
+ }
85
+
86
+ .form-select {
87
+ @include form-validation-state-selector($state) {
88
+ border-color: $color;
89
+
90
+ @if $enable-validation-icons {
91
+ &:not([multiple]):not([size]),
92
+ &:not([multiple])[size="1"] {
93
+ padding-right: $form-select-feedback-icon-padding-end;
94
+ background-image: escape-svg($form-select-indicator), escape-svg($icon);
95
+ background-position: $form-select-bg-position, $form-select-feedback-icon-position;
96
+ background-size: $form-select-bg-size, $form-select-feedback-icon-size;
97
+ }
98
+ }
99
+
100
+ &:focus {
101
+ border-color: $color;
102
+ box-shadow: $focus-box-shadow;
103
+ }
104
+ }
105
+ }
106
+
107
+ .form-control-color {
108
+ @include form-validation-state-selector($state) {
109
+ @if $enable-validation-icons {
110
+ width: add($form-color-width, $input-height-inner);
111
+ }
112
+ }
113
+ }
114
+
115
+ .form-check-input {
116
+ @include form-validation-state-selector($state) {
117
+ border-color: $color;
118
+
119
+ &:checked {
120
+ background-color: $color;
121
+ }
122
+
123
+ &:focus {
124
+ box-shadow: $focus-box-shadow;
125
+ }
126
+
127
+ ~ .form-check-label {
128
+ color: $color;
129
+ }
130
+ }
131
+ }
132
+ .form-check-inline .form-check-input {
133
+ ~ .#{$state}-feedback {
134
+ margin-left: .5em;
135
+ }
136
+ }
137
+
138
+ .input-group {
139
+ > .form-control:not(:focus),
140
+ > .form-select:not(:focus),
141
+ > .form-floating:not(:focus-within) {
142
+ @include form-validation-state-selector($state) {
143
+ @if $state == "valid" {
144
+ z-index: 3;
145
+ } @else if $state == "invalid" {
146
+ z-index: 4;
147
+ }
148
+ }
149
+ }
150
+ }
151
+ }
152
+ // scss-docs-end form-validation-mixins
@@ -1,47 +1,47 @@
1
- // Gradients
2
-
3
- // scss-docs-start gradient-bg-mixin
4
- @mixin gradient-bg($color: null) {
5
- background-color: $color;
6
-
7
- @if $enable-gradients {
8
- background-image: var(--#{$prefix}gradient);
9
- }
10
- }
11
- // scss-docs-end gradient-bg-mixin
12
-
13
- // scss-docs-start gradient-mixins
14
- // Horizontal gradient, from left to right
15
- //
16
- // Creates two color stops, start and end, by specifying a color and position for each color stop.
17
- @mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {
18
- background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
19
- }
20
-
21
- // Vertical gradient, from top to bottom
22
- //
23
- // Creates two color stops, start and end, by specifying a color and position for each color stop.
24
- @mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: null, $end-percent: null) {
25
- background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
26
- }
27
-
28
- @mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) {
29
- background-image: linear-gradient($deg, $start-color, $end-color);
30
- }
31
-
32
- @mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
33
- background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
34
- }
35
-
36
- @mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
37
- background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
38
- }
39
-
40
- @mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) {
41
- background-image: radial-gradient(circle, $inner-color, $outer-color);
42
- }
43
-
44
- @mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) {
45
- background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
46
- }
47
- // scss-docs-end gradient-mixins
1
+ // Gradients
2
+
3
+ // scss-docs-start gradient-bg-mixin
4
+ @mixin gradient-bg($color: null) {
5
+ background-color: $color;
6
+
7
+ @if $enable-gradients {
8
+ background-image: var(--#{$prefix}gradient);
9
+ }
10
+ }
11
+ // scss-docs-end gradient-bg-mixin
12
+
13
+ // scss-docs-start gradient-mixins
14
+ // Horizontal gradient, from left to right
15
+ //
16
+ // Creates two color stops, start and end, by specifying a color and position for each color stop.
17
+ @mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {
18
+ background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
19
+ }
20
+
21
+ // Vertical gradient, from top to bottom
22
+ //
23
+ // Creates two color stops, start and end, by specifying a color and position for each color stop.
24
+ @mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: null, $end-percent: null) {
25
+ background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
26
+ }
27
+
28
+ @mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) {
29
+ background-image: linear-gradient($deg, $start-color, $end-color);
30
+ }
31
+
32
+ @mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
33
+ background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
34
+ }
35
+
36
+ @mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
37
+ background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
38
+ }
39
+
40
+ @mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) {
41
+ background-image: radial-gradient(circle, $inner-color, $outer-color);
42
+ }
43
+
44
+ @mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) {
45
+ background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
46
+ }
47
+ // scss-docs-end gradient-mixins