bootstrap-scss 5.2.1 → 5.2.3

Sign up to get free protection for your applications and to get access to all the features.
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