bootstrap-scss 5.2.1 → 5.2.3

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 (25) hide show
  1. package/LICENSE +22 -22
  2. package/README.md +84 -84
  3. package/_accordion.scss +149 -149
  4. package/_button-group.scss +142 -142
  5. package/_buttons.scss +207 -201
  6. package/_carousel.scss +0 -3
  7. package/_dropdown.scss +249 -249
  8. package/_functions.scss +302 -302
  9. package/_list-group.scss +192 -192
  10. package/_modal.scss +237 -237
  11. package/_nav.scss +172 -172
  12. package/_navbar.scss +278 -278
  13. package/_offcanvas.scss +144 -144
  14. package/_pagination.scss +109 -109
  15. package/_popover.scss +196 -196
  16. package/_toasts.scss +73 -71
  17. package/_variables.scss +1634 -1634
  18. package/bootstrap-utilities.scss +3 -0
  19. package/forms/_floating-labels.scss +75 -75
  20. package/forms/_input-group.scss +132 -132
  21. package/mixins/_banner.scss +9 -9
  22. package/mixins/_forms.scss +152 -152
  23. package/mixins/_table-variants.scss +2 -2
  24. package/mixins/_utilities.scss +97 -97
  25. package/package.json +26 -26
package/_buttons.scss CHANGED
@@ -1,201 +1,207 @@
1
- //
2
- // Base styles
3
- //
4
-
5
- .btn {
6
- // scss-docs-start btn-css-vars
7
- --#{$prefix}btn-padding-x: #{$btn-padding-x};
8
- --#{$prefix}btn-padding-y: #{$btn-padding-y};
9
- --#{$prefix}btn-font-family: #{$btn-font-family};
10
- @include rfs($btn-font-size, --#{$prefix}btn-font-size);
11
- --#{$prefix}btn-font-weight: #{$btn-font-weight};
12
- --#{$prefix}btn-line-height: #{$btn-line-height};
13
- --#{$prefix}btn-color: #{$body-color};
14
- --#{$prefix}btn-bg: transparent;
15
- --#{$prefix}btn-border-width: #{$btn-border-width};
16
- --#{$prefix}btn-border-color: transparent;
17
- --#{$prefix}btn-border-radius: #{$btn-border-radius};
18
- --#{$prefix}btn-hover-border-color: transparent;
19
- --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
20
- --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
21
- --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);
22
- // scss-docs-end btn-css-vars
23
-
24
- display: inline-block;
25
- padding: var(--#{$prefix}btn-padding-y) var(--#{$prefix}btn-padding-x);
26
- font-family: var(--#{$prefix}btn-font-family);
27
- @include font-size(var(--#{$prefix}btn-font-size));
28
- font-weight: var(--#{$prefix}btn-font-weight);
29
- line-height: var(--#{$prefix}btn-line-height);
30
- color: var(--#{$prefix}btn-color);
31
- text-align: center;
32
- text-decoration: if($link-decoration == none, null, none);
33
- white-space: $btn-white-space;
34
- vertical-align: middle;
35
- cursor: if($enable-button-pointers, pointer, null);
36
- user-select: none;
37
- border: var(--#{$prefix}btn-border-width) solid var(--#{$prefix}btn-border-color);
38
- @include border-radius(var(--#{$prefix}btn-border-radius));
39
- @include gradient-bg(var(--#{$prefix}btn-bg));
40
- @include box-shadow(var(--#{$prefix}btn-box-shadow));
41
- @include transition($btn-transition);
42
-
43
- :not(.btn-check) + &:hover,
44
- &:first-child:hover {
45
- color: var(--#{$prefix}btn-hover-color);
46
- text-decoration: if($link-hover-decoration == underline, none, null);
47
- background-color: var(--#{$prefix}btn-hover-bg);
48
- border-color: var(--#{$prefix}btn-hover-border-color);
49
- }
50
-
51
- &:focus-visible {
52
- color: var(--#{$prefix}btn-hover-color);
53
- @include gradient-bg(var(--#{$prefix}btn-hover-bg));
54
- border-color: var(--#{$prefix}btn-hover-border-color);
55
- outline: 0;
56
- // Avoid using mixin so we can pass custom focus shadow properly
57
- @if $enable-shadows {
58
- box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow);
59
- } @else {
60
- box-shadow: var(--#{$prefix}btn-focus-box-shadow);
61
- }
62
- }
63
-
64
- .btn-check:focus-visible + & {
65
- border-color: var(--#{$prefix}btn-hover-border-color);
66
- outline: 0;
67
- // Avoid using mixin so we can pass custom focus shadow properly
68
- @if $enable-shadows {
69
- box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow);
70
- } @else {
71
- box-shadow: var(--#{$prefix}btn-focus-box-shadow);
72
- }
73
- }
74
-
75
- .btn-check:checked + &,
76
- :not(.btn-check) + &:active,
77
- &:first-child:active,
78
- &.active,
79
- &.show {
80
- color: var(--#{$prefix}btn-active-color);
81
- background-color: var(--#{$prefix}btn-active-bg);
82
- // Remove CSS gradients if they're enabled
83
- background-image: if($enable-gradients, none, null);
84
- border-color: var(--#{$prefix}btn-active-border-color);
85
- @include box-shadow(var(--#{$prefix}btn-active-shadow));
86
-
87
- &:focus-visible {
88
- // Avoid using mixin so we can pass custom focus shadow properly
89
- @if $enable-shadows {
90
- box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow);
91
- } @else {
92
- box-shadow: var(--#{$prefix}btn-focus-box-shadow);
93
- }
94
- }
95
- }
96
-
97
- &:disabled,
98
- &.disabled,
99
- fieldset:disabled & {
100
- color: var(--#{$prefix}btn-disabled-color);
101
- pointer-events: none;
102
- background-color: var(--#{$prefix}btn-disabled-bg);
103
- background-image: if($enable-gradients, none, null);
104
- border-color: var(--#{$prefix}btn-disabled-border-color);
105
- opacity: var(--#{$prefix}btn-disabled-opacity);
106
- @include box-shadow(none);
107
- }
108
- }
109
-
110
-
111
- //
112
- // Alternate buttons
113
- //
114
-
115
- // scss-docs-start btn-variant-loops
116
- @each $color, $value in $theme-colors {
117
- .btn-#{$color} {
118
- @if $color == "light" {
119
- @include button-variant(
120
- $value,
121
- $value,
122
- $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
123
- $hover-border: shade-color($value, $btn-hover-border-shade-amount),
124
- $active-background: shade-color($value, $btn-active-bg-shade-amount),
125
- $active-border: shade-color($value, $btn-active-border-shade-amount)
126
- );
127
- } @else if $color == "dark" {
128
- @include button-variant(
129
- $value,
130
- $value,
131
- $hover-background: tint-color($value, $btn-hover-bg-tint-amount),
132
- $hover-border: tint-color($value, $btn-hover-border-tint-amount),
133
- $active-background: tint-color($value, $btn-active-bg-tint-amount),
134
- $active-border: tint-color($value, $btn-active-border-tint-amount)
135
- );
136
- } @else {
137
- @include button-variant($value, $value);
138
- }
139
- }
140
- }
141
-
142
- @each $color, $value in $theme-colors {
143
- .btn-outline-#{$color} {
144
- @include button-outline-variant($value);
145
- }
146
- }
147
- // scss-docs-end btn-variant-loops
148
-
149
-
150
- //
151
- // Link buttons
152
- //
153
-
154
- // Make a button look and behave like a link
155
- .btn-link {
156
- --#{$prefix}btn-font-weight: #{$font-weight-normal};
157
- --#{$prefix}btn-color: #{$btn-link-color};
158
- --#{$prefix}btn-bg: transparent;
159
- --#{$prefix}btn-border-color: transparent;
160
- --#{$prefix}btn-hover-color: #{$btn-link-hover-color};
161
- --#{$prefix}btn-hover-border-color: transparent;
162
- --#{$prefix}btn-active-color: #{$btn-link-hover-color};
163
- --#{$prefix}btn-active-border-color: transparent;
164
- --#{$prefix}btn-disabled-color: #{$btn-link-disabled-color};
165
- --#{$prefix}btn-disabled-border-color: transparent;
166
- --#{$prefix}btn-box-shadow: none;
167
- --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix(color-contrast($primary), $primary, 15%))};
168
-
169
- text-decoration: $link-decoration;
170
- @if $enable-gradients {
171
- background-image: none;
172
- }
173
-
174
- &:hover,
175
- &:focus-visible {
176
- text-decoration: $link-hover-decoration;
177
- }
178
-
179
- &:focus-visible {
180
- color: var(--#{$prefix}btn-color);
181
- }
182
-
183
- &:hover {
184
- color: var(--#{$prefix}btn-hover-color);
185
- }
186
-
187
- // No need for an active state here
188
- }
189
-
190
-
191
- //
192
- // Button Sizes
193
- //
194
-
195
- .btn-lg {
196
- @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg);
197
- }
198
-
199
- .btn-sm {
200
- @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);
201
- }
1
+ //
2
+ // Base styles
3
+ //
4
+
5
+ .btn {
6
+ // scss-docs-start btn-css-vars
7
+ --#{$prefix}btn-padding-x: #{$btn-padding-x};
8
+ --#{$prefix}btn-padding-y: #{$btn-padding-y};
9
+ --#{$prefix}btn-font-family: #{$btn-font-family};
10
+ @include rfs($btn-font-size, --#{$prefix}btn-font-size);
11
+ --#{$prefix}btn-font-weight: #{$btn-font-weight};
12
+ --#{$prefix}btn-line-height: #{$btn-line-height};
13
+ --#{$prefix}btn-color: #{$body-color};
14
+ --#{$prefix}btn-bg: transparent;
15
+ --#{$prefix}btn-border-width: #{$btn-border-width};
16
+ --#{$prefix}btn-border-color: transparent;
17
+ --#{$prefix}btn-border-radius: #{$btn-border-radius};
18
+ --#{$prefix}btn-hover-border-color: transparent;
19
+ --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
20
+ --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
21
+ --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);
22
+ // scss-docs-end btn-css-vars
23
+
24
+ display: inline-block;
25
+ padding: var(--#{$prefix}btn-padding-y) var(--#{$prefix}btn-padding-x);
26
+ font-family: var(--#{$prefix}btn-font-family);
27
+ @include font-size(var(--#{$prefix}btn-font-size));
28
+ font-weight: var(--#{$prefix}btn-font-weight);
29
+ line-height: var(--#{$prefix}btn-line-height);
30
+ color: var(--#{$prefix}btn-color);
31
+ text-align: center;
32
+ text-decoration: if($link-decoration == none, null, none);
33
+ white-space: $btn-white-space;
34
+ vertical-align: middle;
35
+ cursor: if($enable-button-pointers, pointer, null);
36
+ user-select: none;
37
+ border: var(--#{$prefix}btn-border-width) solid var(--#{$prefix}btn-border-color);
38
+ @include border-radius(var(--#{$prefix}btn-border-radius));
39
+ @include gradient-bg(var(--#{$prefix}btn-bg));
40
+ @include box-shadow(var(--#{$prefix}btn-box-shadow));
41
+ @include transition($btn-transition);
42
+
43
+ &:hover {
44
+ color: var(--#{$prefix}btn-hover-color);
45
+ text-decoration: if($link-hover-decoration == underline, none, null);
46
+ background-color: var(--#{$prefix}btn-hover-bg);
47
+ border-color: var(--#{$prefix}btn-hover-border-color);
48
+ }
49
+
50
+ .btn-check + &:hover {
51
+ // override for the checkbox/radio buttons
52
+ color: var(--#{$prefix}btn-color);
53
+ background-color: var(--#{$prefix}btn-bg);
54
+ border-color: var(--#{$prefix}btn-border-color);
55
+ }
56
+
57
+ &:focus-visible {
58
+ color: var(--#{$prefix}btn-hover-color);
59
+ @include gradient-bg(var(--#{$prefix}btn-hover-bg));
60
+ border-color: var(--#{$prefix}btn-hover-border-color);
61
+ outline: 0;
62
+ // Avoid using mixin so we can pass custom focus shadow properly
63
+ @if $enable-shadows {
64
+ box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow);
65
+ } @else {
66
+ box-shadow: var(--#{$prefix}btn-focus-box-shadow);
67
+ }
68
+ }
69
+
70
+ .btn-check:focus-visible + & {
71
+ border-color: var(--#{$prefix}btn-hover-border-color);
72
+ outline: 0;
73
+ // Avoid using mixin so we can pass custom focus shadow properly
74
+ @if $enable-shadows {
75
+ box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow);
76
+ } @else {
77
+ box-shadow: var(--#{$prefix}btn-focus-box-shadow);
78
+ }
79
+ }
80
+
81
+ .btn-check:checked + &,
82
+ :not(.btn-check) + &:active,
83
+ &:first-child:active,
84
+ &.active,
85
+ &.show {
86
+ color: var(--#{$prefix}btn-active-color);
87
+ background-color: var(--#{$prefix}btn-active-bg);
88
+ // Remove CSS gradients if they're enabled
89
+ background-image: if($enable-gradients, none, null);
90
+ border-color: var(--#{$prefix}btn-active-border-color);
91
+ @include box-shadow(var(--#{$prefix}btn-active-shadow));
92
+
93
+ &:focus-visible {
94
+ // Avoid using mixin so we can pass custom focus shadow properly
95
+ @if $enable-shadows {
96
+ box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow);
97
+ } @else {
98
+ box-shadow: var(--#{$prefix}btn-focus-box-shadow);
99
+ }
100
+ }
101
+ }
102
+
103
+ &:disabled,
104
+ &.disabled,
105
+ fieldset:disabled & {
106
+ color: var(--#{$prefix}btn-disabled-color);
107
+ pointer-events: none;
108
+ background-color: var(--#{$prefix}btn-disabled-bg);
109
+ background-image: if($enable-gradients, none, null);
110
+ border-color: var(--#{$prefix}btn-disabled-border-color);
111
+ opacity: var(--#{$prefix}btn-disabled-opacity);
112
+ @include box-shadow(none);
113
+ }
114
+ }
115
+
116
+
117
+ //
118
+ // Alternate buttons
119
+ //
120
+
121
+ // scss-docs-start btn-variant-loops
122
+ @each $color, $value in $theme-colors {
123
+ .btn-#{$color} {
124
+ @if $color == "light" {
125
+ @include button-variant(
126
+ $value,
127
+ $value,
128
+ $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
129
+ $hover-border: shade-color($value, $btn-hover-border-shade-amount),
130
+ $active-background: shade-color($value, $btn-active-bg-shade-amount),
131
+ $active-border: shade-color($value, $btn-active-border-shade-amount)
132
+ );
133
+ } @else if $color == "dark" {
134
+ @include button-variant(
135
+ $value,
136
+ $value,
137
+ $hover-background: tint-color($value, $btn-hover-bg-tint-amount),
138
+ $hover-border: tint-color($value, $btn-hover-border-tint-amount),
139
+ $active-background: tint-color($value, $btn-active-bg-tint-amount),
140
+ $active-border: tint-color($value, $btn-active-border-tint-amount)
141
+ );
142
+ } @else {
143
+ @include button-variant($value, $value);
144
+ }
145
+ }
146
+ }
147
+
148
+ @each $color, $value in $theme-colors {
149
+ .btn-outline-#{$color} {
150
+ @include button-outline-variant($value);
151
+ }
152
+ }
153
+ // scss-docs-end btn-variant-loops
154
+
155
+
156
+ //
157
+ // Link buttons
158
+ //
159
+
160
+ // Make a button look and behave like a link
161
+ .btn-link {
162
+ --#{$prefix}btn-font-weight: #{$font-weight-normal};
163
+ --#{$prefix}btn-color: #{$btn-link-color};
164
+ --#{$prefix}btn-bg: transparent;
165
+ --#{$prefix}btn-border-color: transparent;
166
+ --#{$prefix}btn-hover-color: #{$btn-link-hover-color};
167
+ --#{$prefix}btn-hover-border-color: transparent;
168
+ --#{$prefix}btn-active-color: #{$btn-link-hover-color};
169
+ --#{$prefix}btn-active-border-color: transparent;
170
+ --#{$prefix}btn-disabled-color: #{$btn-link-disabled-color};
171
+ --#{$prefix}btn-disabled-border-color: transparent;
172
+ --#{$prefix}btn-box-shadow: none;
173
+ --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix(color-contrast($primary), $primary, 15%))};
174
+
175
+ text-decoration: $link-decoration;
176
+ @if $enable-gradients {
177
+ background-image: none;
178
+ }
179
+
180
+ &:hover,
181
+ &:focus-visible {
182
+ text-decoration: $link-hover-decoration;
183
+ }
184
+
185
+ &:focus-visible {
186
+ color: var(--#{$prefix}btn-color);
187
+ }
188
+
189
+ &:hover {
190
+ color: var(--#{$prefix}btn-hover-color);
191
+ }
192
+
193
+ // No need for an active state here
194
+ }
195
+
196
+
197
+ //
198
+ // Button Sizes
199
+ //
200
+
201
+ .btn-lg {
202
+ @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg);
203
+ }
204
+
205
+ .btn-sm {
206
+ @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);
207
+ }
package/_carousel.scss CHANGED
@@ -42,7 +42,6 @@
42
42
  display: block;
43
43
  }
44
44
 
45
- /* rtl:begin:ignore */
46
45
  .carousel-item-next:not(.carousel-item-start),
47
46
  .active.carousel-item-end {
48
47
  transform: translateX(100%);
@@ -53,8 +52,6 @@
53
52
  transform: translateX(-100%);
54
53
  }
55
54
 
56
- /* rtl:end:ignore */
57
-
58
55
 
59
56
  //
60
57
  // Alternate transitions