administrate-bootstrap-theme 1.0.6 → 1.1.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.
- checksums.yaml +4 -4
- data/app/assets/javascripts/administrate-bootstrap-theme/bootstrap.bundle.js +2503 -3001
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_accordion.scss +73 -33
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_alert.scss +25 -14
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_badge.scss +14 -5
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_breadcrumb.scss +22 -10
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_button-group.scss +6 -3
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_buttons.scss +133 -28
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_card.scss +60 -37
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_carousel.scss +22 -15
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_close.scss +33 -10
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_containers.scss +1 -1
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_dropdown.scss +86 -76
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_functions.scss +10 -10
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_grid.scss +9 -3
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_helpers.scss +3 -0
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_list-group.scss +60 -37
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_maps.scss +174 -0
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_mixins.scss +1 -2
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_modal.scss +71 -44
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_nav.scss +86 -28
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_navbar.scss +101 -147
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_offcanvas.scss +121 -61
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_pagination.scss +66 -21
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_placeholders.scss +1 -1
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_popover.scss +90 -52
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_progress.scss +30 -10
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_reboot.scss +31 -45
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_root.scss +155 -22
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_spinners.scss +38 -22
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_tables.scss +40 -24
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_toasts.scss +38 -16
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_tooltip.scss +60 -56
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_type.scss +2 -0
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_utilities.scss +209 -33
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_variables-dark.scss +87 -0
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_variables.scss +404 -294
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/bootstrap-grid.scss +4 -9
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/bootstrap-reboot.scss +4 -7
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/bootstrap-utilities.scss +7 -6
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/bootstrap.scss +5 -6
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/forms/_floating-labels.scss +37 -5
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/forms/_form-check.scss +51 -14
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/forms/_form-control.scss +36 -41
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/forms/_form-range.scss +3 -3
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/forms/_form-select.scss +12 -4
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/forms/_input-group.scss +20 -9
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/helpers/_color-bg.scss +7 -0
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/helpers/_colored-links.scss +20 -2
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/helpers/_focus-ring.scss +5 -0
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/helpers/_icon-link.scss +25 -0
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/helpers/_position.scss +7 -1
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/helpers/_ratio.scss +2 -2
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/helpers/_vr.scss +2 -2
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_alert.scss +11 -4
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_banner.scss +7 -0
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_breakpoints.scss +8 -8
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_buttons.scss +32 -95
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_caret.scss +30 -25
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_color-mode.scss +21 -0
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_container.scss +4 -2
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_forms.scss +38 -19
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_gradients.scss +1 -1
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_grid.scss +14 -14
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_list-group.scss +2 -0
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_pagination.scss +4 -25
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_reset-text.scss +1 -1
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_table-variants.scss +12 -9
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_utilities.scss +14 -6
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_visually-hidden.scss +5 -1
- data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/vendor/_rfs.scss +23 -29
- data/app/assets/stylesheets/administrate-bootstrap-theme/components/_content_body.scss +21 -7
- data/app/assets/stylesheets/administrate-bootstrap-theme/components/_navigation.scss +4 -0
- data/app/assets/stylesheets/administrate-bootstrap-theme/components/_pagination.scss +11 -3
- data/lib/administrate-bootstrap-theme/version.rb +2 -2
- data/package.json +2 -2
- metadata +24 -3
@@ -3,17 +3,40 @@
|
|
3
3
|
//
|
4
4
|
|
5
5
|
.card {
|
6
|
+
// scss-docs-start card-css-vars
|
7
|
+
--#{$prefix}card-spacer-y: #{$card-spacer-y};
|
8
|
+
--#{$prefix}card-spacer-x: #{$card-spacer-x};
|
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};
|
12
|
+
--#{$prefix}card-border-width: #{$card-border-width};
|
13
|
+
--#{$prefix}card-border-color: #{$card-border-color};
|
14
|
+
--#{$prefix}card-border-radius: #{$card-border-radius};
|
15
|
+
--#{$prefix}card-box-shadow: #{$card-box-shadow};
|
16
|
+
--#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
|
17
|
+
--#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
|
18
|
+
--#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
|
19
|
+
--#{$prefix}card-cap-bg: #{$card-cap-bg};
|
20
|
+
--#{$prefix}card-cap-color: #{$card-cap-color};
|
21
|
+
--#{$prefix}card-height: #{$card-height};
|
22
|
+
--#{$prefix}card-color: #{$card-color};
|
23
|
+
--#{$prefix}card-bg: #{$card-bg};
|
24
|
+
--#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
|
25
|
+
--#{$prefix}card-group-margin: #{$card-group-margin};
|
26
|
+
// scss-docs-end card-css-vars
|
27
|
+
|
6
28
|
position: relative;
|
7
29
|
display: flex;
|
8
30
|
flex-direction: column;
|
9
31
|
min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
|
10
|
-
height: $card-height;
|
32
|
+
height: var(--#{$prefix}card-height);
|
33
|
+
color: var(--#{$prefix}body-color);
|
11
34
|
word-wrap: break-word;
|
12
|
-
background-color: $card-bg;
|
35
|
+
background-color: var(--#{$prefix}card-bg);
|
13
36
|
background-clip: border-box;
|
14
|
-
border: $card-border-width solid $card-border-color;
|
15
|
-
@include border-radius($card-border-radius);
|
16
|
-
@include box-shadow($card-box-shadow);
|
37
|
+
border: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
|
38
|
+
@include border-radius(var(--#{$prefix}card-border-radius));
|
39
|
+
@include box-shadow(var(--#{$prefix}card-box-shadow));
|
17
40
|
|
18
41
|
> hr {
|
19
42
|
margin-right: 0;
|
@@ -26,12 +49,12 @@
|
|
26
49
|
|
27
50
|
&:first-child {
|
28
51
|
border-top-width: 0;
|
29
|
-
@include border-top-radius($card-inner-border-radius);
|
52
|
+
@include border-top-radius(var(--#{$prefix}card-inner-border-radius));
|
30
53
|
}
|
31
54
|
|
32
55
|
&:last-child {
|
33
56
|
border-bottom-width: 0;
|
34
|
-
@include border-bottom-radius($card-inner-border-radius);
|
57
|
+
@include border-bottom-radius(var(--#{$prefix}card-inner-border-radius));
|
35
58
|
}
|
36
59
|
}
|
37
60
|
|
@@ -47,17 +70,19 @@
|
|
47
70
|
// Enable `flex-grow: 1` for decks and groups so that card blocks take up
|
48
71
|
// as much space as possible, ensuring footers are aligned to the bottom.
|
49
72
|
flex: 1 1 auto;
|
50
|
-
padding: $card-spacer-y $card-spacer-x;
|
51
|
-
color: $card-color;
|
73
|
+
padding: var(--#{$prefix}card-spacer-y) var(--#{$prefix}card-spacer-x);
|
74
|
+
color: var(--#{$prefix}card-color);
|
52
75
|
}
|
53
76
|
|
54
77
|
.card-title {
|
55
|
-
margin-bottom: $card-title-spacer-y;
|
78
|
+
margin-bottom: var(--#{$prefix}card-title-spacer-y);
|
79
|
+
color: var(--#{$prefix}card-title-color);
|
56
80
|
}
|
57
81
|
|
58
82
|
.card-subtitle {
|
59
|
-
margin-top:
|
83
|
+
margin-top: calc(-.5 * var(--#{$prefix}card-title-spacer-y)); // stylelint-disable-line function-disallowed-list
|
60
84
|
margin-bottom: 0;
|
85
|
+
color: var(--#{$prefix}card-subtitle-color);
|
61
86
|
}
|
62
87
|
|
63
88
|
.card-text:last-child {
|
@@ -70,7 +95,7 @@
|
|
70
95
|
}
|
71
96
|
|
72
97
|
+ .card-link {
|
73
|
-
margin-left: $card-spacer-x;
|
98
|
+
margin-left: var(--#{$prefix}card-spacer-x);
|
74
99
|
}
|
75
100
|
}
|
76
101
|
|
@@ -79,25 +104,25 @@
|
|
79
104
|
//
|
80
105
|
|
81
106
|
.card-header {
|
82
|
-
padding: $card-cap-padding-y $card-cap-padding-x;
|
107
|
+
padding: var(--#{$prefix}card-cap-padding-y) var(--#{$prefix}card-cap-padding-x);
|
83
108
|
margin-bottom: 0; // Removes the default margin-bottom of <hN>
|
84
|
-
color: $card-cap-color;
|
85
|
-
background-color: $card-cap-bg;
|
86
|
-
border-bottom: $card-border-width solid $card-border-color;
|
109
|
+
color: var(--#{$prefix}card-cap-color);
|
110
|
+
background-color: var(--#{$prefix}card-cap-bg);
|
111
|
+
border-bottom: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
|
87
112
|
|
88
113
|
&:first-child {
|
89
|
-
@include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
|
114
|
+
@include border-radius(var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius) 0 0);
|
90
115
|
}
|
91
116
|
}
|
92
117
|
|
93
118
|
.card-footer {
|
94
|
-
padding: $card-cap-padding-y $card-cap-padding-x;
|
95
|
-
color: $card-cap-color;
|
96
|
-
background-color: $card-cap-bg;
|
97
|
-
border-top: $card-border-width solid $card-border-color;
|
119
|
+
padding: var(--#{$prefix}card-cap-padding-y) var(--#{$prefix}card-cap-padding-x);
|
120
|
+
color: var(--#{$prefix}card-cap-color);
|
121
|
+
background-color: var(--#{$prefix}card-cap-bg);
|
122
|
+
border-top: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
|
98
123
|
|
99
124
|
&:last-child {
|
100
|
-
@include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius);
|
125
|
+
@include border-radius(0 0 var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius));
|
101
126
|
}
|
102
127
|
}
|
103
128
|
|
@@ -107,22 +132,20 @@
|
|
107
132
|
//
|
108
133
|
|
109
134
|
.card-header-tabs {
|
110
|
-
margin-right:
|
111
|
-
margin-bottom:
|
112
|
-
margin-left:
|
135
|
+
margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
|
136
|
+
margin-bottom: calc(-1 * var(--#{$prefix}card-cap-padding-y)); // stylelint-disable-line function-disallowed-list
|
137
|
+
margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
|
113
138
|
border-bottom: 0;
|
114
139
|
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
border-bottom-color: $card-bg;
|
119
|
-
}
|
140
|
+
.nav-link.active {
|
141
|
+
background-color: var(--#{$prefix}card-bg);
|
142
|
+
border-bottom-color: var(--#{$prefix}card-bg);
|
120
143
|
}
|
121
144
|
}
|
122
145
|
|
123
146
|
.card-header-pills {
|
124
|
-
margin-right:
|
125
|
-
margin-left:
|
147
|
+
margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
|
148
|
+
margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
|
126
149
|
}
|
127
150
|
|
128
151
|
// Card image
|
@@ -132,8 +155,8 @@
|
|
132
155
|
right: 0;
|
133
156
|
bottom: 0;
|
134
157
|
left: 0;
|
135
|
-
padding: $card-img-overlay-padding;
|
136
|
-
@include border-radius($card-inner-border-radius);
|
158
|
+
padding: var(--#{$prefix}card-img-overlay-padding);
|
159
|
+
@include border-radius(var(--#{$prefix}card-inner-border-radius));
|
137
160
|
}
|
138
161
|
|
139
162
|
.card-img,
|
@@ -144,12 +167,12 @@
|
|
144
167
|
|
145
168
|
.card-img,
|
146
169
|
.card-img-top {
|
147
|
-
@include border-top-radius($card-inner-border-radius);
|
170
|
+
@include border-top-radius(var(--#{$prefix}card-inner-border-radius));
|
148
171
|
}
|
149
172
|
|
150
173
|
.card-img,
|
151
174
|
.card-img-bottom {
|
152
|
-
@include border-bottom-radius($card-inner-border-radius);
|
175
|
+
@include border-bottom-radius(var(--#{$prefix}card-inner-border-radius));
|
153
176
|
}
|
154
177
|
|
155
178
|
|
@@ -161,7 +184,7 @@
|
|
161
184
|
// The child selector allows nested `.card` within `.card-group`
|
162
185
|
// to display properly.
|
163
186
|
> .card {
|
164
|
-
margin-bottom: $card-group-margin;
|
187
|
+
margin-bottom: var(--#{$prefix}card-group-margin);
|
165
188
|
}
|
166
189
|
|
167
190
|
@include media-breakpoint-up(sm) {
|
@@ -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
|
@@ -135,19 +132,11 @@
|
|
135
132
|
background-size: 100% 100%;
|
136
133
|
}
|
137
134
|
|
138
|
-
/* rtl:options: {
|
139
|
-
"autoRename": true,
|
140
|
-
"stringMap":[ {
|
141
|
-
"name" : "prev-next",
|
142
|
-
"search" : "prev",
|
143
|
-
"replace" : "next"
|
144
|
-
} ]
|
145
|
-
} */
|
146
135
|
.carousel-control-prev-icon {
|
147
|
-
background-image: escape-svg($carousel-control-prev-icon-bg);
|
136
|
+
background-image: escape-svg($carousel-control-prev-icon-bg) #{"/*rtl:" + escape-svg($carousel-control-next-icon-bg) + "*/"};
|
148
137
|
}
|
149
138
|
.carousel-control-next-icon {
|
150
|
-
background-image: escape-svg($carousel-control-next-icon-bg);
|
139
|
+
background-image: escape-svg($carousel-control-next-icon-bg) #{"/*rtl:" + escape-svg($carousel-control-prev-icon-bg) + "*/"};
|
151
140
|
}
|
152
141
|
|
153
142
|
// Optional indicator pips/controls
|
@@ -168,7 +157,6 @@
|
|
168
157
|
margin-right: $carousel-control-width;
|
169
158
|
margin-bottom: 1rem;
|
170
159
|
margin-left: $carousel-control-width;
|
171
|
-
list-style: none;
|
172
160
|
|
173
161
|
[data-bs-target] {
|
174
162
|
box-sizing: content-box;
|
@@ -213,7 +201,7 @@
|
|
213
201
|
|
214
202
|
// Dark mode carousel
|
215
203
|
|
216
|
-
|
204
|
+
@mixin carousel-dark() {
|
217
205
|
.carousel-control-prev-icon,
|
218
206
|
.carousel-control-next-icon {
|
219
207
|
filter: $carousel-dark-control-icon-filter;
|
@@ -227,3 +215,22 @@
|
|
227
215
|
color: $carousel-dark-caption-color;
|
228
216
|
}
|
229
217
|
}
|
218
|
+
|
219
|
+
.carousel-dark {
|
220
|
+
@include carousel-dark();
|
221
|
+
}
|
222
|
+
|
223
|
+
@if $enable-dark-mode {
|
224
|
+
@include color-mode(dark) {
|
225
|
+
@if $color-mode-type == "media-query" {
|
226
|
+
.carousel {
|
227
|
+
@include carousel-dark();
|
228
|
+
}
|
229
|
+
} @else {
|
230
|
+
.carousel,
|
231
|
+
&.carousel {
|
232
|
+
@include carousel-dark();
|
233
|
+
}
|
234
|
+
}
|
235
|
+
}
|
236
|
+
}
|
@@ -1,40 +1,63 @@
|
|
1
|
-
//
|
1
|
+
// Transparent background and border properties included for button version.
|
2
2
|
// iOS requires the button element instead of an anchor tag.
|
3
3
|
// If you want the anchor version, it requires `href="#"`.
|
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
|
}
|
@@ -2,7 +2,9 @@
|
|
2
2
|
.dropup,
|
3
3
|
.dropend,
|
4
4
|
.dropdown,
|
5
|
-
.dropstart
|
5
|
+
.dropstart,
|
6
|
+
.dropup-center,
|
7
|
+
.dropdown-center {
|
6
8
|
position: relative;
|
7
9
|
}
|
8
10
|
|
@@ -15,26 +17,67 @@
|
|
15
17
|
|
16
18
|
// The dropdown menu
|
17
19
|
.dropdown-menu {
|
20
|
+
// scss-docs-start dropdown-css-vars
|
21
|
+
--#{$prefix}dropdown-zindex: #{$zindex-dropdown};
|
22
|
+
--#{$prefix}dropdown-min-width: #{$dropdown-min-width};
|
23
|
+
--#{$prefix}dropdown-padding-x: #{$dropdown-padding-x};
|
24
|
+
--#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};
|
25
|
+
--#{$prefix}dropdown-spacer: #{$dropdown-spacer};
|
26
|
+
@include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size);
|
27
|
+
--#{$prefix}dropdown-color: #{$dropdown-color};
|
28
|
+
--#{$prefix}dropdown-bg: #{$dropdown-bg};
|
29
|
+
--#{$prefix}dropdown-border-color: #{$dropdown-border-color};
|
30
|
+
--#{$prefix}dropdown-border-radius: #{$dropdown-border-radius};
|
31
|
+
--#{$prefix}dropdown-border-width: #{$dropdown-border-width};
|
32
|
+
--#{$prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
|
33
|
+
--#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
|
34
|
+
--#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
|
35
|
+
--#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
|
36
|
+
--#{$prefix}dropdown-link-color: #{$dropdown-link-color};
|
37
|
+
--#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
|
38
|
+
--#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
|
39
|
+
--#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
|
40
|
+
--#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
|
41
|
+
--#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
|
42
|
+
--#{$prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
|
43
|
+
--#{$prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
|
44
|
+
--#{$prefix}dropdown-header-color: #{$dropdown-header-color};
|
45
|
+
--#{$prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x};
|
46
|
+
--#{$prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y};
|
47
|
+
// scss-docs-end dropdown-css-vars
|
48
|
+
|
18
49
|
position: absolute;
|
19
|
-
z-index: $zindex
|
50
|
+
z-index: var(--#{$prefix}dropdown-zindex);
|
20
51
|
display: none; // none by default, but block on "open" of the menu
|
21
|
-
min-width: $dropdown-min-width;
|
22
|
-
padding: $dropdown-padding-y $dropdown-padding-x;
|
52
|
+
min-width: var(--#{$prefix}dropdown-min-width);
|
53
|
+
padding: var(--#{$prefix}dropdown-padding-y) var(--#{$prefix}dropdown-padding-x);
|
23
54
|
margin: 0; // Override default margin of ul
|
24
|
-
@include font-size($dropdown-font-size);
|
25
|
-
color: $dropdown-color;
|
55
|
+
@include font-size(var(--#{$prefix}dropdown-font-size));
|
56
|
+
color: var(--#{$prefix}dropdown-color);
|
26
57
|
text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
|
27
58
|
list-style: none;
|
28
|
-
background-color: $dropdown-bg;
|
59
|
+
background-color: var(--#{$prefix}dropdown-bg);
|
29
60
|
background-clip: padding-box;
|
30
|
-
border: $dropdown-border-width solid $dropdown-border-color;
|
31
|
-
@include border-radius($dropdown-border-radius);
|
32
|
-
@include box-shadow($dropdown-box-shadow);
|
61
|
+
border: var(--#{$prefix}dropdown-border-width) solid var(--#{$prefix}dropdown-border-color);
|
62
|
+
@include border-radius(var(--#{$prefix}dropdown-border-radius));
|
63
|
+
@include box-shadow(var(--#{$prefix}dropdown-box-shadow));
|
33
64
|
|
34
65
|
&[data-bs-popper] {
|
35
66
|
top: 100%;
|
36
67
|
left: 0;
|
37
|
-
margin-top: $dropdown-spacer;
|
68
|
+
margin-top: var(--#{$prefix}dropdown-spacer);
|
69
|
+
}
|
70
|
+
|
71
|
+
@if $dropdown-padding-y == 0 {
|
72
|
+
> .dropdown-item:first-child,
|
73
|
+
> li:first-child .dropdown-item {
|
74
|
+
@include border-top-radius(var(--#{$prefix}dropdown-inner-border-radius));
|
75
|
+
}
|
76
|
+
> .dropdown-item:last-child,
|
77
|
+
> li:last-child .dropdown-item {
|
78
|
+
@include border-bottom-radius(var(--#{$prefix}dropdown-inner-border-radius));
|
79
|
+
}
|
80
|
+
|
38
81
|
}
|
39
82
|
}
|
40
83
|
|
@@ -74,7 +117,7 @@
|
|
74
117
|
top: auto;
|
75
118
|
bottom: 100%;
|
76
119
|
margin-top: 0;
|
77
|
-
margin-bottom: $dropdown-spacer;
|
120
|
+
margin-bottom: var(--#{$prefix}dropdown-spacer);
|
78
121
|
}
|
79
122
|
|
80
123
|
.dropdown-toggle {
|
@@ -88,7 +131,7 @@
|
|
88
131
|
right: auto;
|
89
132
|
left: 100%;
|
90
133
|
margin-top: 0;
|
91
|
-
margin-left: $dropdown-spacer;
|
134
|
+
margin-left: var(--#{$prefix}dropdown-spacer);
|
92
135
|
}
|
93
136
|
|
94
137
|
.dropdown-toggle {
|
@@ -105,7 +148,7 @@
|
|
105
148
|
right: 100%;
|
106
149
|
left: auto;
|
107
150
|
margin-top: 0;
|
108
|
-
margin-right: $dropdown-spacer;
|
151
|
+
margin-right: var(--#{$prefix}dropdown-spacer);
|
109
152
|
}
|
110
153
|
|
111
154
|
.dropdown-toggle {
|
@@ -120,9 +163,10 @@
|
|
120
163
|
// Dividers (basically an `<hr>`) within the dropdown
|
121
164
|
.dropdown-divider {
|
122
165
|
height: 0;
|
123
|
-
margin: $dropdown-divider-margin-y 0;
|
166
|
+
margin: var(--#{$prefix}dropdown-divider-margin-y) 0;
|
124
167
|
overflow: hidden;
|
125
|
-
border-top: 1px solid $dropdown-divider-bg;
|
168
|
+
border-top: 1px solid var(--#{$prefix}dropdown-divider-bg);
|
169
|
+
opacity: 1; // Revisit in v6 to de-dupe styles that conflict with <hr> element
|
126
170
|
}
|
127
171
|
|
128
172
|
// Links, buttons, and more within the dropdown menu
|
@@ -131,45 +175,34 @@
|
|
131
175
|
.dropdown-item {
|
132
176
|
display: block;
|
133
177
|
width: 100%; // For `<button>`s
|
134
|
-
padding: $dropdown-item-padding-y $dropdown-item-padding-x;
|
178
|
+
padding: var(--#{$prefix}dropdown-item-padding-y) var(--#{$prefix}dropdown-item-padding-x);
|
135
179
|
clear: both;
|
136
180
|
font-weight: $font-weight-normal;
|
137
|
-
color: $dropdown-link-color;
|
181
|
+
color: var(--#{$prefix}dropdown-link-color);
|
138
182
|
text-align: inherit; // For `<button>`s
|
139
183
|
text-decoration: if($link-decoration == none, null, none);
|
140
184
|
white-space: nowrap; // prevent links from randomly breaking onto new lines
|
141
185
|
background-color: transparent; // For `<button>`s
|
142
186
|
border: 0; // For `<button>`s
|
143
|
-
|
144
|
-
// Prevent dropdown overflow if there's no padding
|
145
|
-
// See https://github.com/twbs/bootstrap/pull/27703
|
146
|
-
@if $dropdown-padding-y == 0 {
|
147
|
-
&:first-child {
|
148
|
-
@include border-top-radius($dropdown-inner-border-radius);
|
149
|
-
}
|
150
|
-
|
151
|
-
&:last-child {
|
152
|
-
@include border-bottom-radius($dropdown-inner-border-radius);
|
153
|
-
}
|
154
|
-
}
|
187
|
+
@include border-radius(var(--#{$prefix}dropdown-item-border-radius, 0));
|
155
188
|
|
156
189
|
&:hover,
|
157
190
|
&:focus {
|
158
|
-
color: $dropdown-link-hover-color;
|
191
|
+
color: var(--#{$prefix}dropdown-link-hover-color);
|
159
192
|
text-decoration: if($link-hover-decoration == underline, none, null);
|
160
|
-
@include gradient-bg($dropdown-link-hover-bg);
|
193
|
+
@include gradient-bg(var(--#{$prefix}dropdown-link-hover-bg));
|
161
194
|
}
|
162
195
|
|
163
196
|
&.active,
|
164
197
|
&:active {
|
165
|
-
color: $dropdown-link-active-color;
|
198
|
+
color: var(--#{$prefix}dropdown-link-active-color);
|
166
199
|
text-decoration: none;
|
167
|
-
@include gradient-bg($dropdown-link-active-bg);
|
200
|
+
@include gradient-bg(var(--#{$prefix}dropdown-link-active-bg));
|
168
201
|
}
|
169
202
|
|
170
203
|
&.disabled,
|
171
204
|
&:disabled {
|
172
|
-
color: $dropdown-link-disabled-color;
|
205
|
+
color: var(--#{$prefix}dropdown-link-disabled-color);
|
173
206
|
pointer-events: none;
|
174
207
|
background-color: transparent;
|
175
208
|
// Remove CSS gradients if they're enabled
|
@@ -184,57 +217,34 @@
|
|
184
217
|
// Dropdown section headers
|
185
218
|
.dropdown-header {
|
186
219
|
display: block;
|
187
|
-
padding: $dropdown-header-padding;
|
220
|
+
padding: var(--#{$prefix}dropdown-header-padding-y) var(--#{$prefix}dropdown-header-padding-x);
|
188
221
|
margin-bottom: 0; // for use with heading elements
|
189
222
|
@include font-size($font-size-sm);
|
190
|
-
color: $dropdown-header-color;
|
223
|
+
color: var(--#{$prefix}dropdown-header-color);
|
191
224
|
white-space: nowrap; // as with > li > a
|
192
225
|
}
|
193
226
|
|
194
227
|
// Dropdown text
|
195
228
|
.dropdown-item-text {
|
196
229
|
display: block;
|
197
|
-
padding: $dropdown-item-padding-y $dropdown-item-padding-x;
|
198
|
-
color: $dropdown-link-color;
|
230
|
+
padding: var(--#{$prefix}dropdown-item-padding-y) var(--#{$prefix}dropdown-item-padding-x);
|
231
|
+
color: var(--#{$prefix}dropdown-link-color);
|
199
232
|
}
|
200
233
|
|
201
234
|
// Dark dropdowns
|
202
235
|
.dropdown-menu-dark {
|
203
|
-
|
204
|
-
|
205
|
-
|
206
|
-
|
207
|
-
|
208
|
-
|
209
|
-
|
210
|
-
|
211
|
-
|
212
|
-
|
213
|
-
|
214
|
-
|
215
|
-
|
216
|
-
|
217
|
-
&.active,
|
218
|
-
&:active {
|
219
|
-
color: $dropdown-dark-link-active-color;
|
220
|
-
@include gradient-bg($dropdown-dark-link-active-bg);
|
221
|
-
}
|
222
|
-
|
223
|
-
&.disabled,
|
224
|
-
&:disabled {
|
225
|
-
color: $dropdown-dark-link-disabled-color;
|
226
|
-
}
|
227
|
-
}
|
228
|
-
|
229
|
-
.dropdown-divider {
|
230
|
-
border-color: $dropdown-dark-divider-bg;
|
231
|
-
}
|
232
|
-
|
233
|
-
.dropdown-item-text {
|
234
|
-
color: $dropdown-dark-link-color;
|
235
|
-
}
|
236
|
-
|
237
|
-
.dropdown-header {
|
238
|
-
color: $dropdown-dark-header-color;
|
239
|
-
}
|
236
|
+
// scss-docs-start dropdown-dark-css-vars
|
237
|
+
--#{$prefix}dropdown-color: #{$dropdown-dark-color};
|
238
|
+
--#{$prefix}dropdown-bg: #{$dropdown-dark-bg};
|
239
|
+
--#{$prefix}dropdown-border-color: #{$dropdown-dark-border-color};
|
240
|
+
--#{$prefix}dropdown-box-shadow: #{$dropdown-dark-box-shadow};
|
241
|
+
--#{$prefix}dropdown-link-color: #{$dropdown-dark-link-color};
|
242
|
+
--#{$prefix}dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
|
243
|
+
--#{$prefix}dropdown-divider-bg: #{$dropdown-dark-divider-bg};
|
244
|
+
--#{$prefix}dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
|
245
|
+
--#{$prefix}dropdown-link-active-color: #{$dropdown-dark-link-active-color};
|
246
|
+
--#{$prefix}dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
|
247
|
+
--#{$prefix}dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
|
248
|
+
--#{$prefix}dropdown-header-color: #{$dropdown-dark-header-color};
|
249
|
+
// scss-docs-end dropdown-dark-css-vars
|
240
250
|
}
|
@@ -40,11 +40,11 @@
|
|
40
40
|
// stylelint-disable scss/dollar-variable-pattern
|
41
41
|
@function rgba-css-var($identifier, $target) {
|
42
42
|
@if $identifier == "body" and $target == "bg" {
|
43
|
-
@return rgba(var(--#{$
|
43
|
+
@return rgba(var(--#{$prefix}#{$identifier}-bg-rgb), var(--#{$prefix}#{$target}-opacity));
|
44
44
|
} @if $identifier == "body" and $target == "text" {
|
45
|
-
@return rgba(var(--#{$
|
45
|
+
@return rgba(var(--#{$prefix}#{$identifier}-color-rgb), var(--#{$prefix}#{$target}-opacity));
|
46
46
|
} @else {
|
47
|
-
@return rgba(var(--#{$
|
47
|
+
@return rgba(var(--#{$prefix}#{$identifier}-rgb), var(--#{$prefix}#{$target}-opacity));
|
48
48
|
}
|
49
49
|
}
|
50
50
|
|
@@ -68,7 +68,7 @@
|
|
68
68
|
@function varify($list) {
|
69
69
|
$result: null;
|
70
70
|
@each $entry in $list {
|
71
|
-
$result: append($result, var(--#{$
|
71
|
+
$result: append($result, var(--#{$prefix}#{$entry}), space);
|
72
72
|
}
|
73
73
|
@return $result;
|
74
74
|
}
|
@@ -109,7 +109,7 @@
|
|
109
109
|
// Replace `$search` with `$replace` in `$string`
|
110
110
|
// Used on our SVG icon backgrounds for custom forms.
|
111
111
|
//
|
112
|
-
// @author
|
112
|
+
// @author Kitty Giraudel
|
113
113
|
// @param {String} $string - Initial string
|
114
114
|
// @param {String} $search - Substring to replace
|
115
115
|
// @param {String} $replace ('') - New value
|
@@ -177,9 +177,9 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
|
|
177
177
|
@return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05));
|
178
178
|
}
|
179
179
|
|
180
|
-
// Return WCAG2.
|
181
|
-
// See https://www.w3.org/
|
182
|
-
// See https://www.w3.org/TR/
|
180
|
+
// Return WCAG2.1 relative luminance
|
181
|
+
// See https://www.w3.org/TR/WCAG/#dfn-relative-luminance
|
182
|
+
// See https://www.w3.org/TR/WCAG/#dfn-contrast-ratio
|
183
183
|
@function luminance($color) {
|
184
184
|
$rgb: (
|
185
185
|
"r": red($color),
|
@@ -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
|