bootstrap-scss 5.1.3 → 5.2.1

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 (61) hide show
  1. package/LICENSE +2 -2
  2. package/README.md +5 -5
  3. package/_accordion.scss +149 -118
  4. package/_alert.scss +18 -4
  5. package/_badge.scss +14 -5
  6. package/_breadcrumb.scss +22 -10
  7. package/_button-group.scss +142 -139
  8. package/_buttons.scss +201 -111
  9. package/_card.scss +55 -37
  10. package/_close.scss +1 -1
  11. package/_containers.scss +1 -1
  12. package/_dropdown.scss +249 -240
  13. package/_functions.scss +302 -302
  14. package/_grid.scss +3 -3
  15. package/_helpers.scss +1 -0
  16. package/_list-group.scss +192 -174
  17. package/_maps.scss +54 -0
  18. package/_modal.scss +237 -209
  19. package/_nav.scss +172 -139
  20. package/_navbar.scss +278 -335
  21. package/_offcanvas.scss +144 -83
  22. package/_pagination.scss +109 -64
  23. package/_placeholders.scss +1 -1
  24. package/_popover.scss +196 -158
  25. package/_progress.scss +20 -9
  26. package/_reboot.scss +25 -40
  27. package/_root.scss +40 -21
  28. package/_spinners.scss +38 -22
  29. package/_tables.scss +32 -23
  30. package/_toasts.scss +71 -51
  31. package/_tooltip.scss +61 -56
  32. package/_type.scss +2 -0
  33. package/_utilities.scss +43 -26
  34. package/_variables.scss +1634 -1641
  35. package/bootstrap-grid.scss +3 -6
  36. package/bootstrap-reboot.scss +3 -7
  37. package/bootstrap-utilities.scss +3 -6
  38. package/bootstrap.scss +4 -6
  39. package/forms/_floating-labels.scss +75 -63
  40. package/forms/_form-check.scss +28 -5
  41. package/forms/_form-control.scss +12 -37
  42. package/forms/_form-select.scss +0 -1
  43. package/forms/_input-group.scss +132 -121
  44. package/helpers/_color-bg.scss +10 -0
  45. package/helpers/_colored-links.scss +2 -2
  46. package/helpers/_position.scss +7 -1
  47. package/helpers/_ratio.scss +2 -2
  48. package/helpers/_vr.scss +1 -1
  49. package/mixins/_alert.scss +7 -3
  50. package/mixins/_banner.scss +9 -0
  51. package/mixins/_breakpoints.scss +8 -8
  52. package/mixins/_buttons.scss +32 -95
  53. package/mixins/_container.scss +4 -2
  54. package/mixins/_forms.scss +152 -144
  55. package/mixins/_gradients.scss +1 -1
  56. package/mixins/_grid.scss +12 -12
  57. package/mixins/_pagination.scss +4 -25
  58. package/mixins/_reset-text.scss +1 -1
  59. package/mixins/_table-variants.scss +12 -9
  60. package/mixins/_utilities.scss +97 -89
  61. package/package.json +1 -1
@@ -1,139 +1,142 @@
1
- // Make the div behave like a button
2
- .btn-group,
3
- .btn-group-vertical {
4
- position: relative;
5
- display: inline-flex;
6
- vertical-align: middle; // match .btn alignment given font-size hack above
7
-
8
- > .btn {
9
- position: relative;
10
- flex: 1 1 auto;
11
- }
12
-
13
- // Bring the hover, focused, and "active" buttons to the front to overlay
14
- // the borders properly
15
- > .btn-check:checked + .btn,
16
- > .btn-check:focus + .btn,
17
- > .btn:hover,
18
- > .btn:focus,
19
- > .btn:active,
20
- > .btn.active {
21
- z-index: 1;
22
- }
23
- }
24
-
25
- // Optional: Group multiple button groups together for a toolbar
26
- .btn-toolbar {
27
- display: flex;
28
- flex-wrap: wrap;
29
- justify-content: flex-start;
30
-
31
- .input-group {
32
- width: auto;
33
- }
34
- }
35
-
36
- .btn-group {
37
- // Prevent double borders when buttons are next to each other
38
- > .btn:not(:first-child),
39
- > .btn-group:not(:first-child) {
40
- margin-left: -$btn-border-width;
41
- }
42
-
43
- // Reset rounded corners
44
- > .btn:not(:last-child):not(.dropdown-toggle),
45
- > .btn-group:not(:last-child) > .btn {
46
- @include border-end-radius(0);
47
- }
48
-
49
- // The left radius should be 0 if the button is:
50
- // - the "third or more" child
51
- // - the second child and the previous element isn't `.btn-check` (making it the first child visually)
52
- // - part of a btn-group which isn't the first child
53
- > .btn:nth-child(n + 3),
54
- > :not(.btn-check) + .btn,
55
- > .btn-group:not(:first-child) > .btn {
56
- @include border-start-radius(0);
57
- }
58
- }
59
-
60
- // Sizing
61
- //
62
- // Remix the default button sizing classes into new ones for easier manipulation.
63
-
64
- .btn-group-sm > .btn { @extend .btn-sm; }
65
- .btn-group-lg > .btn { @extend .btn-lg; }
66
-
67
-
68
- //
69
- // Split button dropdowns
70
- //
71
-
72
- .dropdown-toggle-split {
73
- padding-right: $btn-padding-x * .75;
74
- padding-left: $btn-padding-x * .75;
75
-
76
- &::after,
77
- .dropup &::after,
78
- .dropend &::after {
79
- margin-left: 0;
80
- }
81
-
82
- .dropstart &::before {
83
- margin-right: 0;
84
- }
85
- }
86
-
87
- .btn-sm + .dropdown-toggle-split {
88
- padding-right: $btn-padding-x-sm * .75;
89
- padding-left: $btn-padding-x-sm * .75;
90
- }
91
-
92
- .btn-lg + .dropdown-toggle-split {
93
- padding-right: $btn-padding-x-lg * .75;
94
- padding-left: $btn-padding-x-lg * .75;
95
- }
96
-
97
-
98
- // The clickable button for toggling the menu
99
- // Set the same inset shadow as the :active state
100
- .btn-group.show .dropdown-toggle {
101
- @include box-shadow($btn-active-box-shadow);
102
-
103
- // Show no shadow for `.btn-link` since it has no other button styles.
104
- &.btn-link {
105
- @include box-shadow(none);
106
- }
107
- }
108
-
109
-
110
- //
111
- // Vertical button groups
112
- //
113
-
114
- .btn-group-vertical {
115
- flex-direction: column;
116
- align-items: flex-start;
117
- justify-content: center;
118
-
119
- > .btn,
120
- > .btn-group {
121
- width: 100%;
122
- }
123
-
124
- > .btn:not(:first-child),
125
- > .btn-group:not(:first-child) {
126
- margin-top: -$btn-border-width;
127
- }
128
-
129
- // Reset rounded corners
130
- > .btn:not(:last-child):not(.dropdown-toggle),
131
- > .btn-group:not(:last-child) > .btn {
132
- @include border-bottom-radius(0);
133
- }
134
-
135
- > .btn ~ .btn,
136
- > .btn-group:not(:first-child) > .btn {
137
- @include border-top-radius(0);
138
- }
139
- }
1
+ // Make the div behave like a button
2
+ .btn-group,
3
+ .btn-group-vertical {
4
+ position: relative;
5
+ display: inline-flex;
6
+ vertical-align: middle; // match .btn alignment given font-size hack above
7
+
8
+ > .btn {
9
+ position: relative;
10
+ flex: 1 1 auto;
11
+ }
12
+
13
+ // Bring the hover, focused, and "active" buttons to the front to overlay
14
+ // the borders properly
15
+ > .btn-check:checked + .btn,
16
+ > .btn-check:focus + .btn,
17
+ > .btn:hover,
18
+ > .btn:focus,
19
+ > .btn:active,
20
+ > .btn.active {
21
+ z-index: 1;
22
+ }
23
+ }
24
+
25
+ // Optional: Group multiple button groups together for a toolbar
26
+ .btn-toolbar {
27
+ display: flex;
28
+ flex-wrap: wrap;
29
+ justify-content: flex-start;
30
+
31
+ .input-group {
32
+ width: auto;
33
+ }
34
+ }
35
+
36
+ .btn-group {
37
+ @include border-radius($btn-border-radius);
38
+
39
+ // Prevent double borders when buttons are next to each other
40
+ > :not(.btn-check:first-child) + .btn,
41
+ > .btn-group:not(:first-child) {
42
+ margin-left: -$btn-border-width;
43
+ }
44
+
45
+ // Reset rounded corners
46
+ > .btn:not(:last-child):not(.dropdown-toggle),
47
+ > .btn.dropdown-toggle-split:first-child,
48
+ > .btn-group:not(:last-child) > .btn {
49
+ @include border-end-radius(0);
50
+ }
51
+
52
+ // The left radius should be 0 if the button is:
53
+ // - the "third or more" child
54
+ // - the second child and the previous element isn't `.btn-check` (making it the first child visually)
55
+ // - part of a btn-group which isn't the first child
56
+ > .btn:nth-child(n + 3),
57
+ > :not(.btn-check) + .btn,
58
+ > .btn-group:not(:first-child) > .btn {
59
+ @include border-start-radius(0);
60
+ }
61
+ }
62
+
63
+ // Sizing
64
+ //
65
+ // Remix the default button sizing classes into new ones for easier manipulation.
66
+
67
+ .btn-group-sm > .btn { @extend .btn-sm; }
68
+ .btn-group-lg > .btn { @extend .btn-lg; }
69
+
70
+
71
+ //
72
+ // Split button dropdowns
73
+ //
74
+
75
+ .dropdown-toggle-split {
76
+ padding-right: $btn-padding-x * .75;
77
+ padding-left: $btn-padding-x * .75;
78
+
79
+ &::after,
80
+ .dropup &::after,
81
+ .dropend &::after {
82
+ margin-left: 0;
83
+ }
84
+
85
+ .dropstart &::before {
86
+ margin-right: 0;
87
+ }
88
+ }
89
+
90
+ .btn-sm + .dropdown-toggle-split {
91
+ padding-right: $btn-padding-x-sm * .75;
92
+ padding-left: $btn-padding-x-sm * .75;
93
+ }
94
+
95
+ .btn-lg + .dropdown-toggle-split {
96
+ padding-right: $btn-padding-x-lg * .75;
97
+ padding-left: $btn-padding-x-lg * .75;
98
+ }
99
+
100
+
101
+ // The clickable button for toggling the menu
102
+ // Set the same inset shadow as the :active state
103
+ .btn-group.show .dropdown-toggle {
104
+ @include box-shadow($btn-active-box-shadow);
105
+
106
+ // Show no shadow for `.btn-link` since it has no other button styles.
107
+ &.btn-link {
108
+ @include box-shadow(none);
109
+ }
110
+ }
111
+
112
+
113
+ //
114
+ // Vertical button groups
115
+ //
116
+
117
+ .btn-group-vertical {
118
+ flex-direction: column;
119
+ align-items: flex-start;
120
+ justify-content: center;
121
+
122
+ > .btn,
123
+ > .btn-group {
124
+ width: 100%;
125
+ }
126
+
127
+ > .btn:not(:first-child),
128
+ > .btn-group:not(:first-child) {
129
+ margin-top: -$btn-border-width;
130
+ }
131
+
132
+ // Reset rounded corners
133
+ > .btn:not(:last-child):not(.dropdown-toggle),
134
+ > .btn-group:not(:last-child) > .btn {
135
+ @include border-bottom-radius(0);
136
+ }
137
+
138
+ > .btn ~ .btn,
139
+ > .btn-group:not(:first-child) > .btn {
140
+ @include border-top-radius(0);
141
+ }
142
+ }
package/_buttons.scss CHANGED
@@ -1,111 +1,201 @@
1
- //
2
- // Base styles
3
- //
4
-
5
- .btn {
6
- display: inline-block;
7
- font-family: $btn-font-family;
8
- font-weight: $btn-font-weight;
9
- line-height: $btn-line-height;
10
- color: $body-color;
11
- text-align: center;
12
- text-decoration: if($link-decoration == none, null, none);
13
- white-space: $btn-white-space;
14
- vertical-align: middle;
15
- cursor: if($enable-button-pointers, pointer, null);
16
- user-select: none;
17
- background-color: transparent;
18
- border: $btn-border-width solid transparent;
19
- @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-border-radius);
20
- @include transition($btn-transition);
21
-
22
- &:hover {
23
- color: $body-color;
24
- text-decoration: if($link-hover-decoration == underline, none, null);
25
- }
26
-
27
- .btn-check:focus + &,
28
- &:focus {
29
- outline: 0;
30
- box-shadow: $btn-focus-box-shadow;
31
- }
32
-
33
- .btn-check:checked + &,
34
- .btn-check:active + &,
35
- &:active,
36
- &.active {
37
- @include box-shadow($btn-active-box-shadow);
38
-
39
- &:focus {
40
- @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
41
- }
42
- }
43
-
44
- &:disabled,
45
- &.disabled,
46
- fieldset:disabled & {
47
- pointer-events: none;
48
- opacity: $btn-disabled-opacity;
49
- @include box-shadow(none);
50
- }
51
- }
52
-
53
-
54
- //
55
- // Alternate buttons
56
- //
57
-
58
- // scss-docs-start btn-variant-loops
59
- @each $color, $value in $theme-colors {
60
- .btn-#{$color} {
61
- @include button-variant($value, $value);
62
- }
63
- }
64
-
65
- @each $color, $value in $theme-colors {
66
- .btn-outline-#{$color} {
67
- @include button-outline-variant($value);
68
- }
69
- }
70
- // scss-docs-end btn-variant-loops
71
-
72
-
73
- //
74
- // Link buttons
75
- //
76
-
77
- // Make a button look and behave like a link
78
- .btn-link {
79
- font-weight: $font-weight-normal;
80
- color: $btn-link-color;
81
- text-decoration: $link-decoration;
82
-
83
- &:hover {
84
- color: $btn-link-hover-color;
85
- text-decoration: $link-hover-decoration;
86
- }
87
-
88
- &:focus {
89
- text-decoration: $link-hover-decoration;
90
- }
91
-
92
- &:disabled,
93
- &.disabled {
94
- color: $btn-link-disabled-color;
95
- }
96
-
97
- // No need for an active state here
98
- }
99
-
100
-
101
- //
102
- // Button Sizes
103
- //
104
-
105
- .btn-lg {
106
- @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg);
107
- }
108
-
109
- .btn-sm {
110
- @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);
111
- }
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
+ }