bootstrap-scss 5.2.2 → 5.3.0
Sign up to get free protection for your applications and to get access to all the features.
- package/LICENSE +21 -22
- package/README.md +84 -84
- 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 -5
- package/_close.scss +32 -9
- package/_dropdown.scss +1 -0
- package/_functions.scss +2 -2
- 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 +40 -3
- package/_navbar.scss +15 -4
- package/_offcanvas.scss +4 -2
- package/_pagination.scss +1 -1
- package/_progress.scss +10 -1
- package/_reboot.scss +3 -3
- 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 +262 -153
- package/bootstrap-grid.scss +1 -3
- package/bootstrap-reboot.scss +1 -0
- package/bootstrap-utilities.scss +4 -0
- package/bootstrap.scss +1 -0
- package/forms/_floating-labels.scss +22 -3
- package/forms/_form-check.scss +24 -11
- package/forms/_form-control.scss +23 -3
- package/forms/_form-select.scss +11 -2
- package/forms/_input-group.scss +1 -1
- package/helpers/_color-bg.scss +0 -2
- package/helpers/_colored-links.scss +20 -2
- package/helpers/_focus-ring.scss +5 -0
- package/helpers/_icon-link.scss +25 -0
- 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 +26 -26
- package/vendor/_rfs.scss +23 -29
package/LICENSE
CHANGED
@@ -1,22 +1,21 @@
|
|
1
|
-
The MIT License (MIT)
|
2
|
-
|
3
|
-
Copyright (c) 2011-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
THE SOFTWARE.
|
1
|
+
The MIT License (MIT)
|
2
|
+
|
3
|
+
Copyright (c) 2011-2023 The Bootstrap Authors
|
4
|
+
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
7
|
+
in the Software without restriction, including without limitation the rights
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
10
|
+
furnished to do so, subject to the following conditions:
|
11
|
+
|
12
|
+
The above copyright notice and this permission notice shall be included in
|
13
|
+
all copies or substantial portions of the Software.
|
14
|
+
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
21
|
+
THE SOFTWARE.
|
package/README.md
CHANGED
@@ -1,84 +1,84 @@
|
|
1
|
-
# Bootstrap SCSS
|
2
|
-
|
3
|
-
> Bootstrap's SCSS files (only)
|
4
|
-
|
5
|
-
<p align="center">
|
6
|
-
<a href="https://getbootstrap.com/">
|
7
|
-
<img src="https://getbootstrap.com/docs/5.
|
8
|
-
</a>
|
9
|
-
</p>
|
10
|
-
|
11
|
-
<h3 align="center">Bootstrap</h3>
|
12
|
-
|
13
|
-
<p align="center">
|
14
|
-
Sleek, intuitive, and powerful front-end framework for faster and easier web development.
|
15
|
-
<br>
|
16
|
-
<a href="https://getbootstrap.com/docs/5.
|
17
|
-
<br>
|
18
|
-
<br>
|
19
|
-
<a href="https://github.com/twbs/bootstrap/issues/new?template=bug_report.md">Report bug</a>
|
20
|
-
·
|
21
|
-
<a href="https://github.com/twbs/bootstrap/issues/new?template=feature_request.md">Request feature</a>
|
22
|
-
·
|
23
|
-
<a href="https://themes.getbootstrap.com/">Themes</a>
|
24
|
-
·
|
25
|
-
<a href="https://blog.getbootstrap.com/">Blog</a>
|
26
|
-
</p>
|
27
|
-
|
28
|
-
<br>
|
29
|
-
|
30
|
-
## Table of contents
|
31
|
-
|
32
|
-
- [Quick start](#quick-start)
|
33
|
-
- [Status](#status)
|
34
|
-
- [What's included](#whats-included)
|
35
|
-
- [Documentation](#documentation)
|
36
|
-
- [Versioning](#versioning)
|
37
|
-
- [Copyright and license](#copyright-and-license)
|
38
|
-
|
39
|
-
## Quick start
|
40
|
-
|
41
|
-
Several quick start options are available:
|
42
|
-
|
43
|
-
- Install with [npm](https://www.npmjs.com/): `npm install bootstrap-scss`
|
44
|
-
- Install with [yarn](https://yarnpkg.com/): `yarn add bootstrap-scss`
|
45
|
-
|
46
|
-
Read the [Getting started page](https://getbootstrap.com/docs/5.
|
47
|
-
|
48
|
-
## Status
|
49
|
-
|
50
|
-
[![npm version](https://img.shields.io/npm/v/bootstrap-scss.svg)](https://www.npmjs.com/package/bootstrap-scss)
|
51
|
-
|
52
|
-
## What's included
|
53
|
-
|
54
|
-
Within this package you'll find the following directories and files, logically grouping common assets and providing only SCSS variations. You'll see something like this:
|
55
|
-
|
56
|
-
```
|
57
|
-
bootstrap-scss/
|
58
|
-
├── bootstrap.scss
|
59
|
-
├── bootstrap-grid.scss
|
60
|
-
├── bootstrap-reboot.scss
|
61
|
-
├── bootstrap-utilities.css
|
62
|
-
├── mixins/
|
63
|
-
│ └─ ...
|
64
|
-
└── utilities/
|
65
|
-
└─ ...
|
66
|
-
└── vendor/
|
67
|
-
└─ ...
|
68
|
-
```
|
69
|
-
|
70
|
-
## Documentation
|
71
|
-
|
72
|
-
[Bootstrap's official documentation](https://getbootstrap.com/) powered by [Algolia's DocSearch](https://community.algolia.com/docsearch/).
|
73
|
-
|
74
|
-
## Versioning
|
75
|
-
|
76
|
-
For simplicity, this project will use the same version numbers as Bootstrap.
|
77
|
-
|
78
|
-
## Changelog
|
79
|
-
|
80
|
-
https://github.com/twbs/bootstrap/releases/tag/v5.
|
81
|
-
|
82
|
-
## Copyright and license
|
83
|
-
|
84
|
-
Code and documentation copyright 2011-2022 the [Bootstrap Authors](https://github.com/twbs/bootstrap/graphs/contributors) and [Twitter, Inc.](https://twitter.com) Code released under the [MIT License](https://github.com/twbs/bootstrap/blob/main/LICENSE).
|
1
|
+
# Bootstrap SCSS
|
2
|
+
|
3
|
+
> Bootstrap's SCSS files (only)
|
4
|
+
|
5
|
+
<p align="center">
|
6
|
+
<a href="https://getbootstrap.com/">
|
7
|
+
<img src="https://getbootstrap.com/docs/5.3/assets/brand/bootstrap-logo-shadow.png" alt="Bootstrap logo" width="200" height="165">
|
8
|
+
</a>
|
9
|
+
</p>
|
10
|
+
|
11
|
+
<h3 align="center">Bootstrap</h3>
|
12
|
+
|
13
|
+
<p align="center">
|
14
|
+
Sleek, intuitive, and powerful front-end framework for faster and easier web development.
|
15
|
+
<br>
|
16
|
+
<a href="https://getbootstrap.com/docs/5.3/"><strong>Explore Bootstrap docs »</strong></a>
|
17
|
+
<br>
|
18
|
+
<br>
|
19
|
+
<a href="https://github.com/twbs/bootstrap/issues/new?template=bug_report.md">Report bug</a>
|
20
|
+
·
|
21
|
+
<a href="https://github.com/twbs/bootstrap/issues/new?template=feature_request.md">Request feature</a>
|
22
|
+
·
|
23
|
+
<a href="https://themes.getbootstrap.com/">Themes</a>
|
24
|
+
·
|
25
|
+
<a href="https://blog.getbootstrap.com/">Blog</a>
|
26
|
+
</p>
|
27
|
+
|
28
|
+
<br>
|
29
|
+
|
30
|
+
## Table of contents
|
31
|
+
|
32
|
+
- [Quick start](#quick-start)
|
33
|
+
- [Status](#status)
|
34
|
+
- [What's included](#whats-included)
|
35
|
+
- [Documentation](#documentation)
|
36
|
+
- [Versioning](#versioning)
|
37
|
+
- [Copyright and license](#copyright-and-license)
|
38
|
+
|
39
|
+
## Quick start
|
40
|
+
|
41
|
+
Several quick start options are available:
|
42
|
+
|
43
|
+
- Install with [npm](https://www.npmjs.com/): `npm install bootstrap-scss`
|
44
|
+
- Install with [yarn](https://yarnpkg.com/): `yarn add bootstrap-scss`
|
45
|
+
|
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
|
+
|
48
|
+
## Status
|
49
|
+
|
50
|
+
[![npm version](https://img.shields.io/npm/v/bootstrap-scss.svg)](https://www.npmjs.com/package/bootstrap-scss)
|
51
|
+
|
52
|
+
## What's included
|
53
|
+
|
54
|
+
Within this package you'll find the following directories and files, logically grouping common assets and providing only SCSS variations. You'll see something like this:
|
55
|
+
|
56
|
+
```
|
57
|
+
bootstrap-scss/
|
58
|
+
├── bootstrap.scss
|
59
|
+
├── bootstrap-grid.scss
|
60
|
+
├── bootstrap-reboot.scss
|
61
|
+
├── bootstrap-utilities.css
|
62
|
+
├── mixins/
|
63
|
+
│ └─ ...
|
64
|
+
└── utilities/
|
65
|
+
└─ ...
|
66
|
+
└── vendor/
|
67
|
+
└─ ...
|
68
|
+
```
|
69
|
+
|
70
|
+
## Documentation
|
71
|
+
|
72
|
+
[Bootstrap's official documentation](https://getbootstrap.com/) powered by [Algolia's DocSearch](https://community.algolia.com/docsearch/).
|
73
|
+
|
74
|
+
## Versioning
|
75
|
+
|
76
|
+
For simplicity, this project will use the same version numbers as Bootstrap.
|
77
|
+
|
78
|
+
## Changelog
|
79
|
+
|
80
|
+
https://github.com/twbs/bootstrap/releases/tag/v5.3.0
|
81
|
+
|
82
|
+
## Copyright and license
|
83
|
+
|
84
|
+
Code and documentation copyright 2011-2022 the [Bootstrap Authors](https://github.com/twbs/bootstrap/graphs/contributors) and [Twitter, Inc.](https://twitter.com) Code released under the [MIT License](https://github.com/twbs/bootstrap/blob/main/LICENSE).
|
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
@@ -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
|
@@ -168,7 +165,6 @@
|
|
168
165
|
margin-right: $carousel-control-width;
|
169
166
|
margin-bottom: 1rem;
|
170
167
|
margin-left: $carousel-control-width;
|
171
|
-
list-style: none;
|
172
168
|
|
173
169
|
[data-bs-target] {
|
174
170
|
box-sizing: content-box;
|
@@ -213,7 +209,7 @@
|
|
213
209
|
|
214
210
|
// Dark mode carousel
|
215
211
|
|
216
|
-
|
212
|
+
@mixin carousel-dark() {
|
217
213
|
.carousel-control-prev-icon,
|
218
214
|
.carousel-control-next-icon {
|
219
215
|
filter: $carousel-dark-control-icon-filter;
|
@@ -227,3 +223,22 @@
|
|
227
223
|
color: $carousel-dark-caption-color;
|
228
224
|
}
|
229
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
|
|
@@ -198,7 +198,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
|
|
198
198
|
// Return opaque color
|
199
199
|
// opaque(#fff, rgba(0, 0, 0, .5)) => #808080
|
200
200
|
@function opaque($background, $foreground) {
|
201
|
-
@return mix(rgba($foreground, 1), $background, opacity($foreground) * 100);
|
201
|
+
@return mix(rgba($foreground, 1), $background, opacity($foreground) * 100%);
|
202
202
|
}
|
203
203
|
|
204
204
|
// scss-docs-start color-functions
|
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
|