bootstrap-scss 5.2.3 → 5.3.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.
- package/LICENSE +1 -2
- package/README.md +4 -4
- package/_accordion.scss +9 -0
- package/_alert.scss +8 -11
- package/_button-group.scss +2 -2
- package/_buttons.scss +3 -3
- package/_card.scss +5 -0
- package/_carousel.scss +20 -2
- package/_close.scss +32 -9
- package/_dropdown.scss +1 -0
- package/_functions.scss +1 -1
- package/_grid.scss +6 -0
- package/_helpers.scss +2 -0
- package/_list-group.scss +12 -7
- package/_maps.scss +120 -0
- package/_mixins.scss +1 -2
- package/_nav.scss +42 -17
- package/_navbar.scss +15 -4
- package/_offcanvas.scss +4 -2
- package/_pagination.scss +1 -1
- package/_progress.scss +10 -1
- package/_reboot.scss +7 -7
- package/_root.scss +121 -10
- package/_tables.scss +18 -11
- package/_tooltip.scss +4 -5
- package/_utilities.scss +172 -13
- package/_variables-dark.scss +85 -0
- package/_variables.scss +268 -157
- package/bootstrap-grid.scss +1 -3
- package/bootstrap-reboot.scss +1 -0
- package/bootstrap-utilities.scss +1 -0
- package/bootstrap.scss +1 -0
- package/forms/_floating-labels.scss +23 -3
- package/forms/_form-check.scss +25 -12
- package/forms/_form-control.scss +24 -4
- package/forms/_form-range.scss +3 -3
- package/forms/_form-select.scss +12 -3
- package/forms/_input-group.scss +1 -1
- package/helpers/_color-bg.scss +1 -4
- package/helpers/_colored-links.scss +20 -2
- package/helpers/_focus-ring.scss +5 -0
- package/helpers/_icon-link.scss +25 -0
- package/helpers/_vr.scss +1 -1
- package/mixins/_alert.scss +4 -1
- package/mixins/_banner.scss +2 -4
- package/mixins/_caret.scss +30 -25
- package/mixins/_color-mode.scss +21 -0
- package/mixins/_forms.scss +8 -7
- package/mixins/_list-group.scss +2 -0
- package/mixins/_utilities.scss +1 -1
- package/mixins/_visually-hidden.scss +5 -1
- package/package.json +1 -1
- package/vendor/_rfs.scss +23 -29
package/LICENSE
CHANGED
@@ -1,7 +1,6 @@
|
|
1
1
|
The MIT License (MIT)
|
2
2
|
|
3
|
-
Copyright (c) 2011-
|
4
|
-
Copyright (c) 2011-2022 The Bootstrap Authors
|
3
|
+
Copyright (c) 2011-2023 The Bootstrap Authors
|
5
4
|
|
6
5
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
7
6
|
of this software and associated documentation files (the "Software"), to deal
|
package/README.md
CHANGED
@@ -4,7 +4,7 @@
|
|
4
4
|
|
5
5
|
<p align="center">
|
6
6
|
<a href="https://getbootstrap.com/">
|
7
|
-
<img src="https://getbootstrap.com/docs/5.
|
7
|
+
<img src="https://getbootstrap.com/docs/5.3/assets/brand/bootstrap-logo-shadow.png" alt="Bootstrap logo" width="200" height="165">
|
8
8
|
</a>
|
9
9
|
</p>
|
10
10
|
|
@@ -13,7 +13,7 @@
|
|
13
13
|
<p align="center">
|
14
14
|
Sleek, intuitive, and powerful front-end framework for faster and easier web development.
|
15
15
|
<br>
|
16
|
-
<a href="https://getbootstrap.com/docs/5.
|
16
|
+
<a href="https://getbootstrap.com/docs/5.3/"><strong>Explore Bootstrap docs »</strong></a>
|
17
17
|
<br>
|
18
18
|
<br>
|
19
19
|
<a href="https://github.com/twbs/bootstrap/issues/new?template=bug_report.md">Report bug</a>
|
@@ -43,7 +43,7 @@ Several quick start options are available:
|
|
43
43
|
- Install with [npm](https://www.npmjs.com/): `npm install bootstrap-scss`
|
44
44
|
- Install with [yarn](https://yarnpkg.com/): `yarn add bootstrap-scss`
|
45
45
|
|
46
|
-
Read the [Getting started page](https://getbootstrap.com/docs/5.
|
46
|
+
Read the [Getting started page](https://getbootstrap.com/docs/5.3/getting-started/introduction/) for information on the framework contents, templates and examples, and more.
|
47
47
|
|
48
48
|
## Status
|
49
49
|
|
@@ -77,7 +77,7 @@ For simplicity, this project will use the same version numbers as Bootstrap.
|
|
77
77
|
|
78
78
|
## Changelog
|
79
79
|
|
80
|
-
https://github.com/twbs/bootstrap/releases/tag/v5.
|
80
|
+
https://github.com/twbs/bootstrap/releases/tag/v5.3.1
|
81
81
|
|
82
82
|
## Copyright and license
|
83
83
|
|
package/_accordion.scss
CHANGED
@@ -147,3 +147,12 @@
|
|
147
147
|
}
|
148
148
|
}
|
149
149
|
}
|
150
|
+
|
151
|
+
@if $enable-dark-mode {
|
152
|
+
@include color-mode(dark) {
|
153
|
+
.accordion-button::after {
|
154
|
+
--#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)};
|
155
|
+
--#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-dark)};
|
156
|
+
}
|
157
|
+
}
|
158
|
+
}
|
package/_alert.scss
CHANGED
@@ -12,6 +12,7 @@
|
|
12
12
|
--#{$prefix}alert-border-color: transparent;
|
13
13
|
--#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
|
14
14
|
--#{$prefix}alert-border-radius: #{$alert-border-radius};
|
15
|
+
--#{$prefix}alert-link-color: inherit;
|
15
16
|
// scss-docs-end alert-css-vars
|
16
17
|
|
17
18
|
position: relative;
|
@@ -32,6 +33,7 @@
|
|
32
33
|
// Provide class for links that match alerts
|
33
34
|
.alert-link {
|
34
35
|
font-weight: $alert-link-font-weight;
|
36
|
+
color: var(--#{$prefix}alert-link-color);
|
35
37
|
}
|
36
38
|
|
37
39
|
|
@@ -54,18 +56,13 @@
|
|
54
56
|
|
55
57
|
|
56
58
|
// scss-docs-start alert-modifiers
|
57
|
-
// Generate contextual modifier classes for colorizing the alert
|
58
|
-
|
59
|
-
@each $state, $value in $theme-colors {
|
60
|
-
$alert-background: shift-color($value, $alert-bg-scale);
|
61
|
-
$alert-border: shift-color($value, $alert-border-scale);
|
62
|
-
$alert-color: shift-color($value, $alert-color-scale);
|
63
|
-
|
64
|
-
@if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
|
65
|
-
$alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
|
66
|
-
}
|
59
|
+
// Generate contextual modifier classes for colorizing the alert
|
60
|
+
@each $state in map-keys($theme-colors) {
|
67
61
|
.alert-#{$state} {
|
68
|
-
|
62
|
+
--#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis);
|
63
|
+
--#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle);
|
64
|
+
--#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle);
|
65
|
+
--#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text-emphasis);
|
69
66
|
}
|
70
67
|
}
|
71
68
|
// scss-docs-end alert-modifiers
|
package/_button-group.scss
CHANGED
@@ -39,7 +39,7 @@
|
|
39
39
|
// Prevent double borders when buttons are next to each other
|
40
40
|
> :not(.btn-check:first-child) + .btn,
|
41
41
|
> .btn-group:not(:first-child) {
|
42
|
-
margin-left:
|
42
|
+
margin-left: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list
|
43
43
|
}
|
44
44
|
|
45
45
|
// Reset rounded corners
|
@@ -126,7 +126,7 @@
|
|
126
126
|
|
127
127
|
> .btn:not(:first-child),
|
128
128
|
> .btn-group:not(:first-child) {
|
129
|
-
margin-top:
|
129
|
+
margin-top: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list
|
130
130
|
}
|
131
131
|
|
132
132
|
// Reset rounded corners
|
package/_buttons.scss
CHANGED
@@ -10,7 +10,7 @@
|
|
10
10
|
@include rfs($btn-font-size, --#{$prefix}btn-font-size);
|
11
11
|
--#{$prefix}btn-font-weight: #{$btn-font-weight};
|
12
12
|
--#{$prefix}btn-line-height: #{$btn-line-height};
|
13
|
-
--#{$prefix}btn-color: #{$
|
13
|
+
--#{$prefix}btn-color: #{$btn-color};
|
14
14
|
--#{$prefix}btn-bg: transparent;
|
15
15
|
--#{$prefix}btn-border-width: #{$btn-border-width};
|
16
16
|
--#{$prefix}btn-border-color: transparent;
|
@@ -169,8 +169,8 @@
|
|
169
169
|
--#{$prefix}btn-active-border-color: transparent;
|
170
170
|
--#{$prefix}btn-disabled-color: #{$btn-link-disabled-color};
|
171
171
|
--#{$prefix}btn-disabled-border-color: transparent;
|
172
|
-
--#{$prefix}btn-box-shadow: none
|
173
|
-
--#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix(color-contrast($
|
172
|
+
--#{$prefix}btn-box-shadow: 0 0 0 #000; // Can't use `none` as keyword negates all values when used with multiple shadows
|
173
|
+
--#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix(color-contrast($link-color), $link-color, 15%))};
|
174
174
|
|
175
175
|
text-decoration: $link-decoration;
|
176
176
|
@if $enable-gradients {
|
package/_card.scss
CHANGED
@@ -7,6 +7,8 @@
|
|
7
7
|
--#{$prefix}card-spacer-y: #{$card-spacer-y};
|
8
8
|
--#{$prefix}card-spacer-x: #{$card-spacer-x};
|
9
9
|
--#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
|
10
|
+
--#{$prefix}card-title-color: #{$card-title-color};
|
11
|
+
--#{$prefix}card-subtitle-color: #{$card-subtitle-color};
|
10
12
|
--#{$prefix}card-border-width: #{$card-border-width};
|
11
13
|
--#{$prefix}card-border-color: #{$card-border-color};
|
12
14
|
--#{$prefix}card-border-radius: #{$card-border-radius};
|
@@ -28,6 +30,7 @@
|
|
28
30
|
flex-direction: column;
|
29
31
|
min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
|
30
32
|
height: var(--#{$prefix}card-height);
|
33
|
+
color: var(--#{$prefix}body-color);
|
31
34
|
word-wrap: break-word;
|
32
35
|
background-color: var(--#{$prefix}card-bg);
|
33
36
|
background-clip: border-box;
|
@@ -73,11 +76,13 @@
|
|
73
76
|
|
74
77
|
.card-title {
|
75
78
|
margin-bottom: var(--#{$prefix}card-title-spacer-y);
|
79
|
+
color: var(--#{$prefix}card-title-color);
|
76
80
|
}
|
77
81
|
|
78
82
|
.card-subtitle {
|
79
83
|
margin-top: calc(-.5 * var(--#{$prefix}card-title-spacer-y)); // stylelint-disable-line function-disallowed-list
|
80
84
|
margin-bottom: 0;
|
85
|
+
color: var(--#{$prefix}card-subtitle-color);
|
81
86
|
}
|
82
87
|
|
83
88
|
.card-text:last-child {
|
package/_carousel.scss
CHANGED
@@ -165,7 +165,6 @@
|
|
165
165
|
margin-right: $carousel-control-width;
|
166
166
|
margin-bottom: 1rem;
|
167
167
|
margin-left: $carousel-control-width;
|
168
|
-
list-style: none;
|
169
168
|
|
170
169
|
[data-bs-target] {
|
171
170
|
box-sizing: content-box;
|
@@ -210,7 +209,7 @@
|
|
210
209
|
|
211
210
|
// Dark mode carousel
|
212
211
|
|
213
|
-
|
212
|
+
@mixin carousel-dark() {
|
214
213
|
.carousel-control-prev-icon,
|
215
214
|
.carousel-control-next-icon {
|
216
215
|
filter: $carousel-dark-control-icon-filter;
|
@@ -224,3 +223,22 @@
|
|
224
223
|
color: $carousel-dark-caption-color;
|
225
224
|
}
|
226
225
|
}
|
226
|
+
|
227
|
+
.carousel-dark {
|
228
|
+
@include carousel-dark();
|
229
|
+
}
|
230
|
+
|
231
|
+
@if $enable-dark-mode {
|
232
|
+
@include color-mode(dark) {
|
233
|
+
@if $color-mode-type == "media-query" {
|
234
|
+
.carousel {
|
235
|
+
@include carousel-dark();
|
236
|
+
}
|
237
|
+
} @else {
|
238
|
+
.carousel,
|
239
|
+
&.carousel {
|
240
|
+
@include carousel-dark();
|
241
|
+
}
|
242
|
+
}
|
243
|
+
}
|
244
|
+
}
|
package/_close.scss
CHANGED
@@ -4,37 +4,60 @@
|
|
4
4
|
// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
|
5
5
|
|
6
6
|
.btn-close {
|
7
|
+
// scss-docs-start close-css-vars
|
8
|
+
--#{$prefix}btn-close-color: #{$btn-close-color};
|
9
|
+
--#{$prefix}btn-close-bg: #{ escape-svg($btn-close-bg) };
|
10
|
+
--#{$prefix}btn-close-opacity: #{$btn-close-opacity};
|
11
|
+
--#{$prefix}btn-close-hover-opacity: #{$btn-close-hover-opacity};
|
12
|
+
--#{$prefix}btn-close-focus-shadow: #{$btn-close-focus-shadow};
|
13
|
+
--#{$prefix}btn-close-focus-opacity: #{$btn-close-focus-opacity};
|
14
|
+
--#{$prefix}btn-close-disabled-opacity: #{$btn-close-disabled-opacity};
|
15
|
+
--#{$prefix}btn-close-white-filter: #{$btn-close-white-filter};
|
16
|
+
// scss-docs-end close-css-vars
|
17
|
+
|
7
18
|
box-sizing: content-box;
|
8
19
|
width: $btn-close-width;
|
9
20
|
height: $btn-close-height;
|
10
21
|
padding: $btn-close-padding-y $btn-close-padding-x;
|
11
|
-
color: $btn-close-color;
|
12
|
-
background: transparent
|
22
|
+
color: var(--#{$prefix}btn-close-color);
|
23
|
+
background: transparent var(--#{$prefix}btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements
|
13
24
|
border: 0; // for button elements
|
14
25
|
@include border-radius();
|
15
|
-
opacity: $btn-close-opacity;
|
26
|
+
opacity: var(--#{$prefix}btn-close-opacity);
|
16
27
|
|
17
28
|
// Override <a>'s hover style
|
18
29
|
&:hover {
|
19
|
-
color: $btn-close-color;
|
30
|
+
color: var(--#{$prefix}btn-close-color);
|
20
31
|
text-decoration: none;
|
21
|
-
opacity: $btn-close-hover-opacity;
|
32
|
+
opacity: var(--#{$prefix}btn-close-hover-opacity);
|
22
33
|
}
|
23
34
|
|
24
35
|
&:focus {
|
25
36
|
outline: 0;
|
26
|
-
box-shadow: $btn-close-focus-shadow;
|
27
|
-
opacity: $btn-close-focus-opacity;
|
37
|
+
box-shadow: var(--#{$prefix}btn-close-focus-shadow);
|
38
|
+
opacity: var(--#{$prefix}btn-close-focus-opacity);
|
28
39
|
}
|
29
40
|
|
30
41
|
&:disabled,
|
31
42
|
&.disabled {
|
32
43
|
pointer-events: none;
|
33
44
|
user-select: none;
|
34
|
-
opacity: $btn-close-disabled-opacity;
|
45
|
+
opacity: var(--#{$prefix}btn-close-disabled-opacity);
|
35
46
|
}
|
36
47
|
}
|
37
48
|
|
49
|
+
@mixin btn-close-white() {
|
50
|
+
filter: var(--#{$prefix}btn-close-white-filter);
|
51
|
+
}
|
52
|
+
|
38
53
|
.btn-close-white {
|
39
|
-
|
54
|
+
@include btn-close-white();
|
55
|
+
}
|
56
|
+
|
57
|
+
@if $enable-dark-mode {
|
58
|
+
@include color-mode(dark) {
|
59
|
+
.btn-close {
|
60
|
+
@include btn-close-white();
|
61
|
+
}
|
62
|
+
}
|
40
63
|
}
|
package/_dropdown.scss
CHANGED
@@ -184,6 +184,7 @@
|
|
184
184
|
white-space: nowrap; // prevent links from randomly breaking onto new lines
|
185
185
|
background-color: transparent; // For `<button>`s
|
186
186
|
border: 0; // For `<button>`s
|
187
|
+
@include border-radius(var(--#{$prefix}dropdown-item-border-radius, 0));
|
187
188
|
|
188
189
|
&:hover,
|
189
190
|
&:focus {
|
package/_functions.scss
CHANGED
@@ -188,7 +188,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
|
|
188
188
|
);
|
189
189
|
|
190
190
|
@each $name, $value in $rgb {
|
191
|
-
$value: if(divide($value, 255) < .
|
191
|
+
$value: if(divide($value, 255) < .04045, divide(divide($value, 255), 12.92), nth($_luminance-list, $value + 1));
|
192
192
|
$rgb: map-merge($rgb, ($name: $value));
|
193
193
|
}
|
194
194
|
|
package/_grid.scss
CHANGED
package/_helpers.scss
CHANGED
package/_list-group.scss
CHANGED
@@ -180,13 +180,18 @@
|
|
180
180
|
// Add modifier classes to change text and background color on individual items.
|
181
181
|
// Organizationally, this must come after the `:hover` states.
|
182
182
|
|
183
|
-
@each $state
|
184
|
-
|
185
|
-
|
186
|
-
|
187
|
-
$list-group-
|
183
|
+
@each $state in map-keys($theme-colors) {
|
184
|
+
.list-group-item-#{$state} {
|
185
|
+
--#{$prefix}list-group-color: var(--#{$prefix}#{$state}-text-emphasis);
|
186
|
+
--#{$prefix}list-group-bg: var(--#{$prefix}#{$state}-bg-subtle);
|
187
|
+
--#{$prefix}list-group-border-color: var(--#{$prefix}#{$state}-border-subtle);
|
188
|
+
--#{$prefix}list-group-action-hover-color: var(--#{$prefix}emphasis-color);
|
189
|
+
--#{$prefix}list-group-action-hover-bg: var(--#{$prefix}#{$state}-border-subtle);
|
190
|
+
--#{$prefix}list-group-action-active-color: var(--#{$prefix}emphasis-color);
|
191
|
+
--#{$prefix}list-group-action-active-bg: var(--#{$prefix}#{$state}-border-subtle);
|
192
|
+
--#{$prefix}list-group-active-color: var(--#{$prefix}#{$state}-bg-subtle);
|
193
|
+
--#{$prefix}list-group-active-bg: var(--#{$prefix}#{$state}-text-emphasis);
|
194
|
+
--#{$prefix}list-group-active-border-color: var(--#{$prefix}#{$state}-text-emphasis);
|
188
195
|
}
|
189
|
-
|
190
|
-
@include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
|
191
196
|
}
|
192
197
|
// scss-docs-end list-group-modifiers
|
package/_maps.scss
CHANGED
@@ -6,6 +6,90 @@
|
|
6
6
|
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
|
7
7
|
// scss-docs-end theme-colors-rgb
|
8
8
|
|
9
|
+
// scss-docs-start theme-text-map
|
10
|
+
$theme-colors-text: (
|
11
|
+
"primary": $primary-text-emphasis,
|
12
|
+
"secondary": $secondary-text-emphasis,
|
13
|
+
"success": $success-text-emphasis,
|
14
|
+
"info": $info-text-emphasis,
|
15
|
+
"warning": $warning-text-emphasis,
|
16
|
+
"danger": $danger-text-emphasis,
|
17
|
+
"light": $light-text-emphasis,
|
18
|
+
"dark": $dark-text-emphasis,
|
19
|
+
) !default;
|
20
|
+
// scss-docs-end theme-text-map
|
21
|
+
|
22
|
+
// scss-docs-start theme-bg-subtle-map
|
23
|
+
$theme-colors-bg-subtle: (
|
24
|
+
"primary": $primary-bg-subtle,
|
25
|
+
"secondary": $secondary-bg-subtle,
|
26
|
+
"success": $success-bg-subtle,
|
27
|
+
"info": $info-bg-subtle,
|
28
|
+
"warning": $warning-bg-subtle,
|
29
|
+
"danger": $danger-bg-subtle,
|
30
|
+
"light": $light-bg-subtle,
|
31
|
+
"dark": $dark-bg-subtle,
|
32
|
+
) !default;
|
33
|
+
// scss-docs-end theme-bg-subtle-map
|
34
|
+
|
35
|
+
// scss-docs-start theme-border-subtle-map
|
36
|
+
$theme-colors-border-subtle: (
|
37
|
+
"primary": $primary-border-subtle,
|
38
|
+
"secondary": $secondary-border-subtle,
|
39
|
+
"success": $success-border-subtle,
|
40
|
+
"info": $info-border-subtle,
|
41
|
+
"warning": $warning-border-subtle,
|
42
|
+
"danger": $danger-border-subtle,
|
43
|
+
"light": $light-border-subtle,
|
44
|
+
"dark": $dark-border-subtle,
|
45
|
+
) !default;
|
46
|
+
// scss-docs-end theme-border-subtle-map
|
47
|
+
|
48
|
+
$theme-colors-text-dark: null !default;
|
49
|
+
$theme-colors-bg-subtle-dark: null !default;
|
50
|
+
$theme-colors-border-subtle-dark: null !default;
|
51
|
+
|
52
|
+
@if $enable-dark-mode {
|
53
|
+
// scss-docs-start theme-text-dark-map
|
54
|
+
$theme-colors-text-dark: (
|
55
|
+
"primary": $primary-text-emphasis-dark,
|
56
|
+
"secondary": $secondary-text-emphasis-dark,
|
57
|
+
"success": $success-text-emphasis-dark,
|
58
|
+
"info": $info-text-emphasis-dark,
|
59
|
+
"warning": $warning-text-emphasis-dark,
|
60
|
+
"danger": $danger-text-emphasis-dark,
|
61
|
+
"light": $light-text-emphasis-dark,
|
62
|
+
"dark": $dark-text-emphasis-dark,
|
63
|
+
) !default;
|
64
|
+
// scss-docs-end theme-text-dark-map
|
65
|
+
|
66
|
+
// scss-docs-start theme-bg-subtle-dark-map
|
67
|
+
$theme-colors-bg-subtle-dark: (
|
68
|
+
"primary": $primary-bg-subtle-dark,
|
69
|
+
"secondary": $secondary-bg-subtle-dark,
|
70
|
+
"success": $success-bg-subtle-dark,
|
71
|
+
"info": $info-bg-subtle-dark,
|
72
|
+
"warning": $warning-bg-subtle-dark,
|
73
|
+
"danger": $danger-bg-subtle-dark,
|
74
|
+
"light": $light-bg-subtle-dark,
|
75
|
+
"dark": $dark-bg-subtle-dark,
|
76
|
+
) !default;
|
77
|
+
// scss-docs-end theme-bg-subtle-dark-map
|
78
|
+
|
79
|
+
// scss-docs-start theme-border-subtle-dark-map
|
80
|
+
$theme-colors-border-subtle-dark: (
|
81
|
+
"primary": $primary-border-subtle-dark,
|
82
|
+
"secondary": $secondary-border-subtle-dark,
|
83
|
+
"success": $success-border-subtle-dark,
|
84
|
+
"info": $info-border-subtle-dark,
|
85
|
+
"warning": $warning-border-subtle-dark,
|
86
|
+
"danger": $danger-border-subtle-dark,
|
87
|
+
"light": $light-border-subtle-dark,
|
88
|
+
"dark": $dark-border-subtle-dark,
|
89
|
+
) !default;
|
90
|
+
// scss-docs-end theme-border-subtle-dark-map
|
91
|
+
}
|
92
|
+
|
9
93
|
// Utilities maps
|
10
94
|
//
|
11
95
|
// Extends the default `$theme-colors` maps to help create our utilities.
|
@@ -25,6 +109,17 @@ $utilities-text: map-merge(
|
|
25
109
|
)
|
26
110
|
) !default;
|
27
111
|
$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default;
|
112
|
+
|
113
|
+
$utilities-text-emphasis-colors: (
|
114
|
+
"primary-emphasis": var(--#{$prefix}primary-text-emphasis),
|
115
|
+
"secondary-emphasis": var(--#{$prefix}secondary-text-emphasis),
|
116
|
+
"success-emphasis": var(--#{$prefix}success-text-emphasis),
|
117
|
+
"info-emphasis": var(--#{$prefix}info-text-emphasis),
|
118
|
+
"warning-emphasis": var(--#{$prefix}warning-text-emphasis),
|
119
|
+
"danger-emphasis": var(--#{$prefix}danger-text-emphasis),
|
120
|
+
"light-emphasis": var(--#{$prefix}light-text-emphasis),
|
121
|
+
"dark-emphasis": var(--#{$prefix}dark-text-emphasis)
|
122
|
+
) !default;
|
28
123
|
// scss-docs-end utilities-text-colors
|
29
124
|
|
30
125
|
// scss-docs-start utilities-bg-colors
|
@@ -37,18 +132,43 @@ $utilities-bg: map-merge(
|
|
37
132
|
)
|
38
133
|
) !default;
|
39
134
|
$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg") !default;
|
135
|
+
|
136
|
+
$utilities-bg-subtle: (
|
137
|
+
"primary-subtle": var(--#{$prefix}primary-bg-subtle),
|
138
|
+
"secondary-subtle": var(--#{$prefix}secondary-bg-subtle),
|
139
|
+
"success-subtle": var(--#{$prefix}success-bg-subtle),
|
140
|
+
"info-subtle": var(--#{$prefix}info-bg-subtle),
|
141
|
+
"warning-subtle": var(--#{$prefix}warning-bg-subtle),
|
142
|
+
"danger-subtle": var(--#{$prefix}danger-bg-subtle),
|
143
|
+
"light-subtle": var(--#{$prefix}light-bg-subtle),
|
144
|
+
"dark-subtle": var(--#{$prefix}dark-bg-subtle)
|
145
|
+
) !default;
|
40
146
|
// scss-docs-end utilities-bg-colors
|
41
147
|
|
42
148
|
// scss-docs-start utilities-border-colors
|
43
149
|
$utilities-border: map-merge(
|
44
150
|
$utilities-colors,
|
45
151
|
(
|
152
|
+
"black": to-rgb($black),
|
46
153
|
"white": to-rgb($white)
|
47
154
|
)
|
48
155
|
) !default;
|
49
156
|
$utilities-border-colors: map-loop($utilities-border, rgba-css-var, "$key", "border") !default;
|
157
|
+
|
158
|
+
$utilities-border-subtle: (
|
159
|
+
"primary-subtle": var(--#{$prefix}primary-border-subtle),
|
160
|
+
"secondary-subtle": var(--#{$prefix}secondary-border-subtle),
|
161
|
+
"success-subtle": var(--#{$prefix}success-border-subtle),
|
162
|
+
"info-subtle": var(--#{$prefix}info-border-subtle),
|
163
|
+
"warning-subtle": var(--#{$prefix}warning-border-subtle),
|
164
|
+
"danger-subtle": var(--#{$prefix}danger-border-subtle),
|
165
|
+
"light-subtle": var(--#{$prefix}light-border-subtle),
|
166
|
+
"dark-subtle": var(--#{$prefix}dark-border-subtle)
|
167
|
+
) !default;
|
50
168
|
// scss-docs-end utilities-border-colors
|
51
169
|
|
170
|
+
$utilities-links-underline: map-loop($utilities-colors, rgba-css-var, "$key", "link-underline") !default;
|
171
|
+
|
52
172
|
$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
|
53
173
|
|
54
174
|
$gutters: $spacers !default;
|
package/_mixins.scss
CHANGED
@@ -10,6 +10,7 @@
|
|
10
10
|
|
11
11
|
// Helpers
|
12
12
|
@import "mixins/breakpoints";
|
13
|
+
@import "mixins/color-mode";
|
13
14
|
@import "mixins/color-scheme";
|
14
15
|
@import "mixins/image";
|
15
16
|
@import "mixins/resize";
|
@@ -21,13 +22,11 @@
|
|
21
22
|
@import "mixins/utilities";
|
22
23
|
|
23
24
|
// Components
|
24
|
-
@import "mixins/alert";
|
25
25
|
@import "mixins/backdrop";
|
26
26
|
@import "mixins/buttons";
|
27
27
|
@import "mixins/caret";
|
28
28
|
@import "mixins/pagination";
|
29
29
|
@import "mixins/lists";
|
30
|
-
@import "mixins/list-group";
|
31
30
|
@import "mixins/forms";
|
32
31
|
@import "mixins/table-variants";
|
33
32
|
|
package/_nav.scss
CHANGED
@@ -28,6 +28,8 @@
|
|
28
28
|
font-weight: var(--#{$prefix}nav-link-font-weight);
|
29
29
|
color: var(--#{$prefix}nav-link-color);
|
30
30
|
text-decoration: if($link-decoration == none, null, none);
|
31
|
+
background: none;
|
32
|
+
border: 0;
|
31
33
|
@include transition($nav-link-transition);
|
32
34
|
|
33
35
|
&:hover,
|
@@ -36,8 +38,14 @@
|
|
36
38
|
text-decoration: if($link-hover-decoration == underline, none, null);
|
37
39
|
}
|
38
40
|
|
41
|
+
&:focus-visible {
|
42
|
+
outline: 0;
|
43
|
+
box-shadow: $nav-link-focus-box-shadow;
|
44
|
+
}
|
45
|
+
|
39
46
|
// Disabled state lightens text
|
40
|
-
&.disabled
|
47
|
+
&.disabled,
|
48
|
+
&:disabled {
|
41
49
|
color: var(--#{$prefix}nav-link-disabled-color);
|
42
50
|
pointer-events: none;
|
43
51
|
cursor: default;
|
@@ -63,7 +71,6 @@
|
|
63
71
|
|
64
72
|
.nav-link {
|
65
73
|
margin-bottom: calc(-1 * var(--#{$prefix}nav-tabs-border-width)); // stylelint-disable-line function-disallowed-list
|
66
|
-
background: none;
|
67
74
|
border: var(--#{$prefix}nav-tabs-border-width) solid transparent;
|
68
75
|
@include border-top-radius(var(--#{$prefix}nav-tabs-border-radius));
|
69
76
|
|
@@ -73,13 +80,6 @@
|
|
73
80
|
isolation: isolate;
|
74
81
|
border-color: var(--#{$prefix}nav-tabs-link-hover-border-color);
|
75
82
|
}
|
76
|
-
|
77
|
-
&.disabled,
|
78
|
-
&:disabled {
|
79
|
-
color: var(--#{$prefix}nav-link-disabled-color);
|
80
|
-
background-color: transparent;
|
81
|
-
border-color: transparent;
|
82
|
-
}
|
83
83
|
}
|
84
84
|
|
85
85
|
.nav-link.active,
|
@@ -110,15 +110,7 @@
|
|
110
110
|
// scss-docs-end nav-pills-css-vars
|
111
111
|
|
112
112
|
.nav-link {
|
113
|
-
background: none;
|
114
|
-
border: 0;
|
115
113
|
@include border-radius(var(--#{$prefix}nav-pills-border-radius));
|
116
|
-
|
117
|
-
&:disabled {
|
118
|
-
color: var(--#{$prefix}nav-link-disabled-color);
|
119
|
-
background-color: transparent;
|
120
|
-
border-color: transparent;
|
121
|
-
}
|
122
114
|
}
|
123
115
|
|
124
116
|
.nav-link.active,
|
@@ -129,6 +121,39 @@
|
|
129
121
|
}
|
130
122
|
|
131
123
|
|
124
|
+
//
|
125
|
+
// Underline
|
126
|
+
//
|
127
|
+
|
128
|
+
.nav-underline {
|
129
|
+
// scss-docs-start nav-underline-css-vars
|
130
|
+
--#{$prefix}nav-underline-gap: #{$nav-underline-gap};
|
131
|
+
--#{$prefix}nav-underline-border-width: #{$nav-underline-border-width};
|
132
|
+
--#{$prefix}nav-underline-link-active-color: #{$nav-underline-link-active-color};
|
133
|
+
// scss-docs-end nav-underline-css-vars
|
134
|
+
|
135
|
+
gap: var(--#{$prefix}nav-underline-gap);
|
136
|
+
|
137
|
+
.nav-link {
|
138
|
+
padding-right: 0;
|
139
|
+
padding-left: 0;
|
140
|
+
border-bottom: var(--#{$prefix}nav-underline-border-width) solid transparent;
|
141
|
+
|
142
|
+
&:hover,
|
143
|
+
&:focus {
|
144
|
+
border-bottom-color: currentcolor;
|
145
|
+
}
|
146
|
+
}
|
147
|
+
|
148
|
+
.nav-link.active,
|
149
|
+
.show > .nav-link {
|
150
|
+
font-weight: $font-weight-bold;
|
151
|
+
color: var(--#{$prefix}nav-underline-link-active-color);
|
152
|
+
border-bottom-color: currentcolor;
|
153
|
+
}
|
154
|
+
}
|
155
|
+
|
156
|
+
|
132
157
|
//
|
133
158
|
// Justified variants
|
134
159
|
//
|
package/_navbar.scss
CHANGED
@@ -100,9 +100,11 @@
|
|
100
100
|
margin-bottom: 0;
|
101
101
|
list-style: none;
|
102
102
|
|
103
|
-
.
|
104
|
-
|
105
|
-
|
103
|
+
.nav-link {
|
104
|
+
&.active,
|
105
|
+
&.show {
|
106
|
+
color: var(--#{$prefix}navbar-active-color);
|
107
|
+
}
|
106
108
|
}
|
107
109
|
|
108
110
|
.dropdown-menu {
|
@@ -264,7 +266,8 @@
|
|
264
266
|
@include deprecate("`.navbar-light`", "v5.2.0", "v6.0.0", true);
|
265
267
|
}
|
266
268
|
|
267
|
-
.navbar-dark
|
269
|
+
.navbar-dark,
|
270
|
+
.navbar[data-bs-theme="dark"] {
|
268
271
|
// scss-docs-start navbar-dark-css-vars
|
269
272
|
--#{$prefix}navbar-color: #{$navbar-dark-color};
|
270
273
|
--#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
|
@@ -276,3 +279,11 @@
|
|
276
279
|
--#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
|
277
280
|
// scss-docs-end navbar-dark-css-vars
|
278
281
|
}
|
282
|
+
|
283
|
+
@if $enable-dark-mode {
|
284
|
+
@include color-mode(dark) {
|
285
|
+
.navbar-toggler-icon {
|
286
|
+
--#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
|
287
|
+
}
|
288
|
+
}
|
289
|
+
}
|