bootstrap-scss 5.1.1 → 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 -151
  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 -1639
  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 -70
  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 -150
  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
@@ -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
+ > .btn:not(:first-child),
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,186 @@
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-box-shadow: #{$btn-box-shadow};
19
+ --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
20
+ --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);
21
+ // scss-docs-end btn-css-vars
22
+
23
+ display: inline-block;
24
+ padding: var(--#{$prefix}btn-padding-y) var(--#{$prefix}btn-padding-x);
25
+ font-family: var(--#{$prefix}btn-font-family);
26
+ @include font-size(var(--#{$prefix}btn-font-size));
27
+ font-weight: var(--#{$prefix}btn-font-weight);
28
+ line-height: var(--#{$prefix}btn-line-height);
29
+ color: var(--#{$prefix}btn-color);
30
+ text-align: center;
31
+ text-decoration: if($link-decoration == none, null, none);
32
+ white-space: $btn-white-space;
33
+ vertical-align: middle;
34
+ cursor: if($enable-button-pointers, pointer, null);
35
+ user-select: none;
36
+ border: var(--#{$prefix}btn-border-width) solid var(--#{$prefix}btn-border-color);
37
+ @include border-radius(var(--#{$prefix}btn-border-radius));
38
+ @include gradient-bg(var(--#{$prefix}btn-bg));
39
+ @include box-shadow(var(--#{$prefix}btn-box-shadow));
40
+ @include transition($btn-transition);
41
+
42
+ &:hover {
43
+ color: var(--#{$prefix}btn-hover-color);
44
+ text-decoration: if($link-hover-decoration == underline, none, null);
45
+ background-color: var(--#{$prefix}btn-hover-bg);
46
+ border-color: var(--#{$prefix}btn-hover-border-color);
47
+ }
48
+
49
+ .btn-check:focus + &,
50
+ &:focus {
51
+ color: var(--#{$prefix}btn-hover-color);
52
+ @include gradient-bg(var(--#{$prefix}btn-hover-bg));
53
+ border-color: var(--#{$prefix}btn-hover-border-color);
54
+ outline: 0;
55
+ // Avoid using mixin so we can pass custom focus shadow properly
56
+ @if $enable-shadows {
57
+ box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow);
58
+ } @else {
59
+ box-shadow: var(--#{$prefix}btn-focus-box-shadow);
60
+ }
61
+ }
62
+
63
+ .btn-check:checked + &,
64
+ .btn-check:active + &,
65
+ &:active,
66
+ &.active,
67
+ &.show {
68
+ color: var(--#{$prefix}btn-active-color);
69
+ background-color: var(--#{$prefix}btn-active-bg);
70
+ // Remove CSS gradients if they're enabled
71
+ background-image: if($enable-gradients, none, null);
72
+ border-color: var(--#{$prefix}btn-active-border-color);
73
+ @include box-shadow(var(--#{$prefix}btn-active-shadow));
74
+
75
+ &:focus {
76
+ // Avoid using mixin so we can pass custom focus shadow properly
77
+ @if $enable-shadows {
78
+ box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow);
79
+ } @else {
80
+ box-shadow: var(--#{$prefix}btn-focus-box-shadow);
81
+ }
82
+ }
83
+ }
84
+
85
+ &:disabled,
86
+ &.disabled,
87
+ fieldset:disabled & {
88
+ color: var(--#{$prefix}btn-disabled-color);
89
+ pointer-events: none;
90
+ background-color: var(--#{$prefix}btn-disabled-bg);
91
+ background-image: if($enable-gradients, none, null);
92
+ border-color: var(--#{$prefix}btn-disabled-border-color);
93
+ opacity: var(--#{$prefix}btn-disabled-opacity);
94
+ @include box-shadow(none);
95
+ }
96
+ }
97
+
98
+
99
+ //
100
+ // Alternate buttons
101
+ //
102
+
103
+ // scss-docs-start btn-variant-loops
104
+ @each $color, $value in $theme-colors {
105
+ .btn-#{$color} {
106
+ @if $color == "light" {
107
+ @include button-variant(
108
+ $value,
109
+ $value,
110
+ $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
111
+ $hover-border: shade-color($value, $btn-hover-border-shade-amount),
112
+ $active-background: shade-color($value, $btn-active-bg-shade-amount),
113
+ $active-border: shade-color($value, $btn-active-border-shade-amount)
114
+ );
115
+ } @else if $color == "dark" {
116
+ @include button-variant(
117
+ $value,
118
+ $value,
119
+ $hover-background: tint-color($value, $btn-hover-bg-tint-amount),
120
+ $hover-border: tint-color($value, $btn-hover-border-tint-amount),
121
+ $active-background: tint-color($value, $btn-active-bg-tint-amount),
122
+ $active-border: tint-color($value, $btn-active-border-tint-amount)
123
+ );
124
+ } @else {
125
+ @include button-variant($value, $value);
126
+ }
127
+ }
128
+ }
129
+
130
+ @each $color, $value in $theme-colors {
131
+ .btn-outline-#{$color} {
132
+ @include button-outline-variant($value);
133
+ }
134
+ }
135
+ // scss-docs-end btn-variant-loops
136
+
137
+
138
+ //
139
+ // Link buttons
140
+ //
141
+
142
+ // Make a button look and behave like a link
143
+ .btn-link {
144
+ --#{$prefix}btn-font-weight: #{$font-weight-normal};
145
+ --#{$prefix}btn-color: #{$btn-link-color};
146
+ --#{$prefix}btn-bg: transparent;
147
+ --#{$prefix}btn-border-color: transparent;
148
+ --#{$prefix}btn-hover-color: #{$btn-link-hover-color};
149
+ --#{$prefix}btn-hover-border-color: transparent;
150
+ --#{$prefix}btn-active-color: #{$btn-link-hover-color};
151
+ --#{$prefix}btn-active-border-color: transparent;
152
+ --#{$prefix}btn-disabled-color: #{$btn-link-disabled-color};
153
+ --#{$prefix}btn-disabled-border-color: transparent;
154
+ --#{$prefix}btn-box-shadow: none;
155
+ --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix(color-contrast($primary), $primary, 15%))};
156
+
157
+ text-decoration: $link-decoration;
158
+
159
+ &:hover,
160
+ &:focus {
161
+ text-decoration: $link-hover-decoration;
162
+ }
163
+
164
+ &:focus {
165
+ color: var(--#{$prefix}btn-color);
166
+ }
167
+
168
+ &:hover {
169
+ color: var(--#{$prefix}btn-hover-color);
170
+ }
171
+
172
+ // No need for an active state here
173
+ }
174
+
175
+
176
+ //
177
+ // Button Sizes
178
+ //
179
+
180
+ .btn-lg {
181
+ @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg);
182
+ }
183
+
184
+ .btn-sm {
185
+ @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);
186
+ }