bootstrap 4.3.1 → 4.4.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.
Potentially problematic release.
This version of bootstrap might be problematic. Click here for more details.
- checksums.yaml +4 -4
- data/.travis.yml +4 -0
- data/CHANGELOG.md +2 -14
- data/README.md +1 -1
- data/assets/javascripts/bootstrap-sprockets.js +7 -7
- data/assets/javascripts/bootstrap.js +376 -290
- data/assets/javascripts/bootstrap.min.js +2 -2
- data/assets/javascripts/bootstrap/alert.js +9 -10
- data/assets/javascripts/bootstrap/button.js +72 -25
- data/assets/javascripts/bootstrap/carousel.js +40 -27
- data/assets/javascripts/bootstrap/collapse.js +36 -22
- data/assets/javascripts/bootstrap/dropdown.js +75 -54
- data/assets/javascripts/bootstrap/modal.js +94 -59
- data/assets/javascripts/bootstrap/popover.js +36 -22
- data/assets/javascripts/bootstrap/scrollspy.js +35 -21
- data/assets/javascripts/bootstrap/tab.js +9 -10
- data/assets/javascripts/bootstrap/toast.js +58 -38
- data/assets/javascripts/bootstrap/tooltip.js +98 -76
- data/assets/javascripts/bootstrap/util.js +21 -4
- data/assets/stylesheets/_bootstrap-grid.scss +1 -1
- data/assets/stylesheets/_bootstrap-reboot.scss +1 -1
- data/assets/stylesheets/_bootstrap.scss +1 -1
- data/assets/stylesheets/bootstrap/_badge.scss +1 -1
- data/assets/stylesheets/bootstrap/_breadcrumb.scss +2 -1
- data/assets/stylesheets/bootstrap/_button-group.scss +1 -1
- data/assets/stylesheets/bootstrap/_buttons.scss +4 -2
- data/assets/stylesheets/bootstrap/_card.scss +17 -28
- data/assets/stylesheets/bootstrap/_carousel.scss +6 -6
- data/assets/stylesheets/bootstrap/_close.scss +2 -2
- data/assets/stylesheets/bootstrap/_code.scss +1 -1
- data/assets/stylesheets/bootstrap/_custom-forms.scss +22 -8
- data/assets/stylesheets/bootstrap/_dropdown.scss +3 -3
- data/assets/stylesheets/bootstrap/_forms.scss +17 -9
- data/assets/stylesheets/bootstrap/_functions.scss +49 -1
- data/assets/stylesheets/bootstrap/_grid.scss +25 -8
- data/assets/stylesheets/bootstrap/_images.scss +2 -2
- data/assets/stylesheets/bootstrap/_input-group.scss +2 -4
- data/assets/stylesheets/bootstrap/_list-group.scss +31 -22
- data/assets/stylesheets/bootstrap/_mixins.scss +3 -3
- data/assets/stylesheets/bootstrap/_modal.scss +26 -16
- data/assets/stylesheets/bootstrap/_nav.scss +3 -3
- data/assets/stylesheets/bootstrap/_navbar.scss +45 -15
- data/assets/stylesheets/bootstrap/_pagination.scss +2 -2
- data/assets/stylesheets/bootstrap/_popover.scss +8 -9
- data/assets/stylesheets/bootstrap/_print.scss +2 -2
- data/assets/stylesheets/bootstrap/_progress.scss +5 -2
- data/assets/stylesheets/bootstrap/_reboot.scss +14 -15
- data/assets/stylesheets/bootstrap/_root.scss +1 -0
- data/assets/stylesheets/bootstrap/_tables.scss +3 -3
- data/assets/stylesheets/bootstrap/_type.scss +2 -2
- data/assets/stylesheets/bootstrap/_variables.scss +42 -22
- data/assets/stylesheets/bootstrap/mixins/_background-variant.scss +3 -2
- data/assets/stylesheets/bootstrap/mixins/_badge.scss +1 -1
- data/assets/stylesheets/bootstrap/mixins/_buttons.scss +5 -2
- data/assets/stylesheets/bootstrap/mixins/_caret.scss +8 -8
- data/assets/stylesheets/bootstrap/mixins/_float.scss +3 -3
- data/assets/stylesheets/bootstrap/mixins/_forms.scss +32 -47
- data/assets/stylesheets/bootstrap/mixins/_grid-framework.scss +8 -3
- data/assets/stylesheets/bootstrap/mixins/_grid.scss +18 -0
- data/assets/stylesheets/bootstrap/mixins/_hover.scss +4 -4
- data/assets/stylesheets/bootstrap/mixins/_image.scss +1 -1
- data/assets/stylesheets/bootstrap/mixins/_list-group.scss +1 -1
- data/assets/stylesheets/bootstrap/mixins/_lists.scss +1 -1
- data/assets/stylesheets/bootstrap/mixins/_nav-divider.scss +2 -1
- data/assets/stylesheets/bootstrap/mixins/_reset-text.scss +1 -1
- data/assets/stylesheets/bootstrap/mixins/_screen-reader.scss +3 -2
- data/assets/stylesheets/bootstrap/mixins/_table-row.scss +1 -1
- data/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss +3 -2
- data/assets/stylesheets/bootstrap/utilities/_background.scss +1 -1
- data/assets/stylesheets/bootstrap/utilities/_text.scss +2 -2
- data/bootstrap.gemspec +1 -1
- data/lib/bootstrap/version.rb +2 -2
- data/test/dummy_rails/app/assets/config/manifest.js +3 -0
- data/test/dummy_rails/app/assets/stylesheets/.browserslistrc +1 -0
- data/test/support/dummy_rails_integration.rb +3 -1
- data/test/test_helper.rb +18 -13
- metadata +8 -5
@@ -1,7 +1,7 @@
|
|
1
1
|
// Base class
|
2
2
|
//
|
3
3
|
// Kickstart any navigation component with a set of style resets. Works with
|
4
|
-
// `<nav>`s or `<
|
4
|
+
// `<nav>`s, `<ul>`s or `<ol>`s.
|
5
5
|
|
6
6
|
.nav {
|
7
7
|
display: flex;
|
@@ -15,7 +15,7 @@
|
|
15
15
|
display: block;
|
16
16
|
padding: $nav-link-padding-y $nav-link-padding-x;
|
17
17
|
|
18
|
-
@include hover-focus {
|
18
|
+
@include hover-focus() {
|
19
19
|
text-decoration: none;
|
20
20
|
}
|
21
21
|
|
@@ -42,7 +42,7 @@
|
|
42
42
|
border: $nav-tabs-border-width solid transparent;
|
43
43
|
@include border-top-radius($nav-tabs-border-radius);
|
44
44
|
|
45
|
-
@include hover-focus {
|
45
|
+
@include hover-focus() {
|
46
46
|
border-color: $nav-tabs-link-hover-border-color;
|
47
47
|
}
|
48
48
|
|
@@ -25,13 +25,23 @@
|
|
25
25
|
|
26
26
|
// Because flex properties aren't inherited, we need to redeclare these first
|
27
27
|
// few properties so that content nested within behave properly.
|
28
|
-
|
29
|
-
> .container-fluid {
|
28
|
+
%container-flex-properties {
|
30
29
|
display: flex;
|
31
30
|
flex-wrap: wrap;
|
32
31
|
align-items: center;
|
33
32
|
justify-content: space-between;
|
34
33
|
}
|
34
|
+
|
35
|
+
.container,
|
36
|
+
.container-fluid {
|
37
|
+
@extend %container-flex-properties;
|
38
|
+
}
|
39
|
+
|
40
|
+
@each $breakpoint, $container-max-width in $container-max-widths {
|
41
|
+
> .container#{breakpoint-infix($breakpoint, $container-max-widths)} {
|
42
|
+
@extend %container-flex-properties;
|
43
|
+
}
|
44
|
+
}
|
35
45
|
}
|
36
46
|
|
37
47
|
|
@@ -48,7 +58,7 @@
|
|
48
58
|
line-height: inherit;
|
49
59
|
white-space: nowrap;
|
50
60
|
|
51
|
-
@include hover-focus {
|
61
|
+
@include hover-focus() {
|
52
62
|
text-decoration: none;
|
53
63
|
}
|
54
64
|
}
|
@@ -113,7 +123,7 @@
|
|
113
123
|
border: $border-width solid transparent; // remove default button style
|
114
124
|
@include border-radius($navbar-toggler-border-radius);
|
115
125
|
|
116
|
-
@include hover-focus {
|
126
|
+
@include hover-focus() {
|
117
127
|
text-decoration: none;
|
118
128
|
}
|
119
129
|
}
|
@@ -139,11 +149,21 @@
|
|
139
149
|
|
140
150
|
&#{$infix} {
|
141
151
|
@include media-breakpoint-down($breakpoint) {
|
142
|
-
|
143
|
-
> .container-fluid {
|
152
|
+
%container-navbar-expand-#{$breakpoint} {
|
144
153
|
padding-right: 0;
|
145
154
|
padding-left: 0;
|
146
155
|
}
|
156
|
+
|
157
|
+
> .container,
|
158
|
+
> .container-fluid {
|
159
|
+
@extend %container-navbar-expand-#{$breakpoint};
|
160
|
+
}
|
161
|
+
|
162
|
+
@each $size, $container-max-width in $container-max-widths {
|
163
|
+
> .container#{breakpoint-infix($size, $container-max-widths)} {
|
164
|
+
@extend %container-navbar-expand-#{$breakpoint};
|
165
|
+
}
|
166
|
+
}
|
147
167
|
}
|
148
168
|
|
149
169
|
@include media-breakpoint-up($next) {
|
@@ -164,9 +184,19 @@
|
|
164
184
|
}
|
165
185
|
|
166
186
|
// For nesting containers, have to redeclare for alignment purposes
|
187
|
+
%container-nesting-#{$breakpoint} {
|
188
|
+
flex-wrap: nowrap;
|
189
|
+
}
|
190
|
+
|
167
191
|
> .container,
|
168
192
|
> .container-fluid {
|
169
|
-
|
193
|
+
@extend %container-nesting-#{$breakpoint};
|
194
|
+
}
|
195
|
+
|
196
|
+
@each $size, $container-max-width in $container-max-widths {
|
197
|
+
> .container#{breakpoint-infix($size, $container-max-widths)} {
|
198
|
+
@extend %container-nesting-#{$breakpoint};
|
199
|
+
}
|
170
200
|
}
|
171
201
|
|
172
202
|
.navbar-collapse {
|
@@ -194,7 +224,7 @@
|
|
194
224
|
.navbar-brand {
|
195
225
|
color: $navbar-light-brand-color;
|
196
226
|
|
197
|
-
@include hover-focus {
|
227
|
+
@include hover-focus() {
|
198
228
|
color: $navbar-light-brand-hover-color;
|
199
229
|
}
|
200
230
|
}
|
@@ -203,7 +233,7 @@
|
|
203
233
|
.nav-link {
|
204
234
|
color: $navbar-light-color;
|
205
235
|
|
206
|
-
@include hover-focus {
|
236
|
+
@include hover-focus() {
|
207
237
|
color: $navbar-light-hover-color;
|
208
238
|
}
|
209
239
|
|
@@ -226,7 +256,7 @@
|
|
226
256
|
}
|
227
257
|
|
228
258
|
.navbar-toggler-icon {
|
229
|
-
background-image: $navbar-light-toggler-icon-bg;
|
259
|
+
background-image: escape-svg($navbar-light-toggler-icon-bg);
|
230
260
|
}
|
231
261
|
|
232
262
|
.navbar-text {
|
@@ -234,7 +264,7 @@
|
|
234
264
|
a {
|
235
265
|
color: $navbar-light-active-color;
|
236
266
|
|
237
|
-
@include hover-focus {
|
267
|
+
@include hover-focus() {
|
238
268
|
color: $navbar-light-active-color;
|
239
269
|
}
|
240
270
|
}
|
@@ -246,7 +276,7 @@
|
|
246
276
|
.navbar-brand {
|
247
277
|
color: $navbar-dark-brand-color;
|
248
278
|
|
249
|
-
@include hover-focus {
|
279
|
+
@include hover-focus() {
|
250
280
|
color: $navbar-dark-brand-hover-color;
|
251
281
|
}
|
252
282
|
}
|
@@ -255,7 +285,7 @@
|
|
255
285
|
.nav-link {
|
256
286
|
color: $navbar-dark-color;
|
257
287
|
|
258
|
-
@include hover-focus {
|
288
|
+
@include hover-focus() {
|
259
289
|
color: $navbar-dark-hover-color;
|
260
290
|
}
|
261
291
|
|
@@ -278,7 +308,7 @@
|
|
278
308
|
}
|
279
309
|
|
280
310
|
.navbar-toggler-icon {
|
281
|
-
background-image: $navbar-dark-toggler-icon-bg;
|
311
|
+
background-image: escape-svg($navbar-dark-toggler-icon-bg);
|
282
312
|
}
|
283
313
|
|
284
314
|
.navbar-text {
|
@@ -286,7 +316,7 @@
|
|
286
316
|
a {
|
287
317
|
color: $navbar-dark-active-color;
|
288
318
|
|
289
|
-
@include hover-focus {
|
319
|
+
@include hover-focus() {
|
290
320
|
color: $navbar-dark-active-color;
|
291
321
|
}
|
292
322
|
}
|
@@ -23,7 +23,7 @@
|
|
23
23
|
}
|
24
24
|
|
25
25
|
&:focus {
|
26
|
-
z-index:
|
26
|
+
z-index: 3;
|
27
27
|
outline: $pagination-focus-outline;
|
28
28
|
box-shadow: $pagination-focus-box-shadow;
|
29
29
|
}
|
@@ -43,7 +43,7 @@
|
|
43
43
|
}
|
44
44
|
|
45
45
|
&.active .page-link {
|
46
|
-
z-index:
|
46
|
+
z-index: 3;
|
47
47
|
color: $pagination-active-color;
|
48
48
|
background-color: $pagination-active-bg;
|
49
49
|
border-color: $pagination-active-border-color;
|
@@ -22,7 +22,7 @@
|
|
22
22
|
display: block;
|
23
23
|
width: $popover-arrow-width;
|
24
24
|
height: $popover-arrow-height;
|
25
|
-
margin: 0 $border-radius
|
25
|
+
margin: 0 $popover-border-radius;
|
26
26
|
|
27
27
|
&::before,
|
28
28
|
&::after {
|
@@ -39,7 +39,7 @@
|
|
39
39
|
margin-bottom: $popover-arrow-height;
|
40
40
|
|
41
41
|
> .arrow {
|
42
|
-
bottom:
|
42
|
+
bottom: subtract(-$popover-arrow-height, $popover-border-width);
|
43
43
|
|
44
44
|
&::before {
|
45
45
|
bottom: 0;
|
@@ -59,10 +59,10 @@
|
|
59
59
|
margin-left: $popover-arrow-height;
|
60
60
|
|
61
61
|
> .arrow {
|
62
|
-
left:
|
62
|
+
left: subtract(-$popover-arrow-height, $popover-border-width);
|
63
63
|
width: $popover-arrow-height;
|
64
64
|
height: $popover-arrow-width;
|
65
|
-
margin: $border-radius
|
65
|
+
margin: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners
|
66
66
|
|
67
67
|
&::before {
|
68
68
|
left: 0;
|
@@ -82,7 +82,7 @@
|
|
82
82
|
margin-top: $popover-arrow-height;
|
83
83
|
|
84
84
|
> .arrow {
|
85
|
-
top:
|
85
|
+
top: subtract(-$popover-arrow-height, $popover-border-width);
|
86
86
|
|
87
87
|
&::before {
|
88
88
|
top: 0;
|
@@ -114,10 +114,10 @@
|
|
114
114
|
margin-right: $popover-arrow-height;
|
115
115
|
|
116
116
|
> .arrow {
|
117
|
-
right:
|
117
|
+
right: subtract(-$popover-arrow-height, $popover-border-width);
|
118
118
|
width: $popover-arrow-height;
|
119
119
|
height: $popover-arrow-width;
|
120
|
-
margin: $border-radius
|
120
|
+
margin: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners
|
121
121
|
|
122
122
|
&::before {
|
123
123
|
right: 0;
|
@@ -157,8 +157,7 @@
|
|
157
157
|
color: $popover-header-color;
|
158
158
|
background-color: $popover-header-bg;
|
159
159
|
border-bottom: $popover-border-width solid darken($popover-header-bg, 5%);
|
160
|
-
|
161
|
-
@include border-top-radius($offset-border-width);
|
160
|
+
@include border-top-radius($popover-inner-border-radius);
|
162
161
|
|
163
162
|
&:empty {
|
164
163
|
display: none;
|
@@ -1,6 +1,6 @@
|
|
1
1
|
// stylelint-disable declaration-no-important, selector-no-qualifying-type
|
2
2
|
|
3
|
-
// Source: https://github.com/h5bp/
|
3
|
+
// Source: https://github.com/h5bp/main.css/blob/master/src/_print.css
|
4
4
|
|
5
5
|
// ==========================================================================
|
6
6
|
// Print styles.
|
@@ -57,7 +57,7 @@
|
|
57
57
|
|
58
58
|
//
|
59
59
|
// Printing Tables:
|
60
|
-
// http://css-discuss.incutio.com/wiki/Printing_Tables
|
60
|
+
// https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
|
61
61
|
//
|
62
62
|
|
63
63
|
thead {
|
@@ -20,6 +20,7 @@
|
|
20
20
|
display: flex;
|
21
21
|
flex-direction: column;
|
22
22
|
justify-content: center;
|
23
|
+
overflow: hidden;
|
23
24
|
color: $progress-bar-color;
|
24
25
|
text-align: center;
|
25
26
|
white-space: nowrap;
|
@@ -36,8 +37,10 @@
|
|
36
37
|
.progress-bar-animated {
|
37
38
|
animation: progress-bar-stripes $progress-bar-animation-timing;
|
38
39
|
|
39
|
-
@
|
40
|
-
|
40
|
+
@if $enable-prefers-reduced-motion-media-query {
|
41
|
+
@media (prefers-reduced-motion: reduce) {
|
42
|
+
animation: none;
|
43
|
+
}
|
41
44
|
}
|
42
45
|
}
|
43
46
|
}
|
@@ -54,12 +54,16 @@ body {
|
|
54
54
|
background-color: $body-bg; // 2
|
55
55
|
}
|
56
56
|
|
57
|
-
//
|
58
|
-
//
|
59
|
-
//
|
60
|
-
//
|
61
|
-
//
|
62
|
-
|
57
|
+
// Future-proof rule: in browsers that support :focus-visible, suppress the focus outline
|
58
|
+
// on elements that programmatically receive focus but wouldn't normally show a visible
|
59
|
+
// focus outline. In general, this would mean that the outline is only applied if the
|
60
|
+
// interaction that led to the element receiving programmatic focus was a keyboard interaction,
|
61
|
+
// or the browser has somehow determined that the user is primarily a keyboard user and/or
|
62
|
+
// wants focus outlines to always be presented.
|
63
|
+
//
|
64
|
+
// See https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
|
65
|
+
// and https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
|
66
|
+
[tabindex="-1"]:focus:not(:focus-visible) {
|
63
67
|
outline: 0 !important;
|
64
68
|
}
|
65
69
|
|
@@ -184,30 +188,25 @@ a {
|
|
184
188
|
text-decoration: $link-decoration;
|
185
189
|
background-color: transparent; // Remove the gray background on active links in IE 10.
|
186
190
|
|
187
|
-
@include hover {
|
191
|
+
@include hover() {
|
188
192
|
color: $link-hover-color;
|
189
193
|
text-decoration: $link-hover-decoration;
|
190
194
|
}
|
191
195
|
}
|
192
196
|
|
193
|
-
// And undo these styles for placeholder links/named anchors (without href)
|
194
|
-
// which have not been made explicitly keyboard-focusable (without tabindex).
|
197
|
+
// And undo these styles for placeholder links/named anchors (without href).
|
195
198
|
// It would be more straightforward to just use a[href] in previous block, but that
|
196
199
|
// causes specificity issues in many other styles that are too complex to fix.
|
197
200
|
// See https://github.com/twbs/bootstrap/issues/19402
|
198
201
|
|
199
|
-
a:not([href])
|
202
|
+
a:not([href]) {
|
200
203
|
color: inherit;
|
201
204
|
text-decoration: none;
|
202
205
|
|
203
|
-
@include hover
|
206
|
+
@include hover() {
|
204
207
|
color: inherit;
|
205
208
|
text-decoration: none;
|
206
209
|
}
|
207
|
-
|
208
|
-
&:focus {
|
209
|
-
outline: 0;
|
210
|
-
}
|
211
210
|
}
|
212
211
|
|
213
212
|
|
@@ -84,7 +84,7 @@
|
|
84
84
|
|
85
85
|
.table-hover {
|
86
86
|
tbody tr {
|
87
|
-
@include hover {
|
87
|
+
@include hover() {
|
88
88
|
color: $table-hover-color;
|
89
89
|
background-color: $table-hover-bg;
|
90
90
|
}
|
@@ -142,14 +142,14 @@
|
|
142
142
|
}
|
143
143
|
|
144
144
|
&.table-striped {
|
145
|
-
tbody tr:nth-of-type(
|
145
|
+
tbody tr:nth-of-type(#{$table-striped-order}) {
|
146
146
|
background-color: $table-dark-accent-bg;
|
147
147
|
}
|
148
148
|
}
|
149
149
|
|
150
150
|
&.table-hover {
|
151
151
|
tbody tr {
|
152
|
-
@include hover {
|
152
|
+
@include hover() {
|
153
153
|
color: $table-dark-hover-color;
|
154
154
|
background-color: $table-dark-hover-bg;
|
155
155
|
}
|
@@ -82,12 +82,12 @@ mark,
|
|
82
82
|
//
|
83
83
|
|
84
84
|
.list-unstyled {
|
85
|
-
@include list-unstyled;
|
85
|
+
@include list-unstyled();
|
86
86
|
}
|
87
87
|
|
88
88
|
// Inline turns list items into inline-block
|
89
89
|
.list-inline {
|
90
|
-
@include list-unstyled;
|
90
|
+
@include list-unstyled();
|
91
91
|
}
|
92
92
|
.list-inline-item {
|
93
93
|
display: inline-block;
|
@@ -101,6 +101,13 @@ $yiq-contrasted-threshold: 150 !default;
|
|
101
101
|
$yiq-text-dark: $gray-900 !default;
|
102
102
|
$yiq-text-light: $white !default;
|
103
103
|
|
104
|
+
// Characters which are escaped by the escape-svg function
|
105
|
+
$escaped-characters: (
|
106
|
+
("<","%3c"),
|
107
|
+
(">","%3e"),
|
108
|
+
("#","%23"),
|
109
|
+
) !default;
|
110
|
+
|
104
111
|
|
105
112
|
// Options
|
106
113
|
//
|
@@ -220,6 +227,7 @@ $container-max-widths: (
|
|
220
227
|
|
221
228
|
$grid-columns: 12 !default;
|
222
229
|
$grid-gutter-width: 30px !default;
|
230
|
+
$grid-row-columns: 6 !default;
|
223
231
|
|
224
232
|
|
225
233
|
// Components
|
@@ -366,7 +374,6 @@ $table-dark-accent-bg: rgba($white, .05) !default;
|
|
366
374
|
$table-dark-hover-color: $table-dark-color !default;
|
367
375
|
$table-dark-hover-bg: rgba($white, .075) !default;
|
368
376
|
$table-dark-border-color: lighten($table-dark-bg, 7.5%) !default;
|
369
|
-
$table-dark-color: $white !default;
|
370
377
|
|
371
378
|
$table-striped-order: odd !default;
|
372
379
|
|
@@ -412,6 +419,7 @@ $btn-padding-x: $input-btn-padding-x !default;
|
|
412
419
|
$btn-font-family: $input-btn-font-family !default;
|
413
420
|
$btn-font-size: $input-btn-font-size !default;
|
414
421
|
$btn-line-height: $input-btn-line-height !default;
|
422
|
+
$btn-white-space: null !default; // Set to `nowrap` to prevent text wrapping
|
415
423
|
|
416
424
|
$btn-padding-y-sm: $input-btn-padding-y-sm !default;
|
417
425
|
$btn-padding-x-sm: $input-btn-padding-x-sm !default;
|
@@ -488,13 +496,13 @@ $input-plaintext-color: $body-color !default;
|
|
488
496
|
|
489
497
|
$input-height-border: $input-border-width * 2 !default;
|
490
498
|
|
491
|
-
$input-height-inner:
|
492
|
-
$input-height-inner-half:
|
493
|
-
$input-height-inner-quarter:
|
499
|
+
$input-height-inner: add($input-line-height * 1em, $input-padding-y * 2) !default;
|
500
|
+
$input-height-inner-half: add($input-line-height * .5em, $input-padding-y) !default;
|
501
|
+
$input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y / 2) !default;
|
494
502
|
|
495
|
-
$input-height:
|
496
|
-
$input-height-sm:
|
497
|
-
$input-height-lg:
|
503
|
+
$input-height: add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;
|
504
|
+
$input-height-sm: add($input-line-height-sm * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;
|
505
|
+
$input-height-lg: add($input-line-height-lg * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;
|
498
506
|
|
499
507
|
$input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
|
500
508
|
|
@@ -518,6 +526,7 @@ $custom-forms-transition: background-color .15s ease-in-out, borde
|
|
518
526
|
|
519
527
|
$custom-control-gutter: .5rem !default;
|
520
528
|
$custom-control-spacer-x: 1rem !default;
|
529
|
+
$custom-control-cursor: null !default;
|
521
530
|
|
522
531
|
$custom-control-indicator-size: 1rem !default;
|
523
532
|
$custom-control-indicator-bg: $input-bg !default;
|
@@ -527,6 +536,8 @@ $custom-control-indicator-box-shadow: $input-box-shadow !default;
|
|
527
536
|
$custom-control-indicator-border-color: $gray-500 !default;
|
528
537
|
$custom-control-indicator-border-width: $input-border-width !default;
|
529
538
|
|
539
|
+
$custom-control-label-color: null !default;
|
540
|
+
|
530
541
|
$custom-control-indicator-disabled-bg: $input-disabled-bg !default;
|
531
542
|
$custom-control-label-disabled-color: $gray-600 !default;
|
532
543
|
|
@@ -545,20 +556,20 @@ $custom-control-indicator-active-box-shadow: none !default;
|
|
545
556
|
$custom-control-indicator-active-border-color: $custom-control-indicator-active-bg !default;
|
546
557
|
|
547
558
|
$custom-checkbox-indicator-border-radius: $border-radius !default;
|
548
|
-
$custom-checkbox-indicator-icon-checked:
|
559
|
+
$custom-checkbox-indicator-icon-checked: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/></svg>") !default;
|
549
560
|
|
550
561
|
$custom-checkbox-indicator-indeterminate-bg: $component-active-bg !default;
|
551
562
|
$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default;
|
552
|
-
$custom-checkbox-indicator-icon-indeterminate:
|
563
|
+
$custom-checkbox-indicator-icon-indeterminate: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'><path stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/></svg>") !default;
|
553
564
|
$custom-checkbox-indicator-indeterminate-box-shadow: none !default;
|
554
565
|
$custom-checkbox-indicator-indeterminate-border-color: $custom-checkbox-indicator-indeterminate-bg !default;
|
555
566
|
|
556
567
|
$custom-radio-indicator-border-radius: 50% !default;
|
557
|
-
$custom-radio-indicator-icon-checked:
|
568
|
+
$custom-radio-indicator-icon-checked: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'><circle r='3' fill='#{$custom-control-indicator-checked-color}'/></svg>") !default;
|
558
569
|
|
559
570
|
$custom-switch-width: $custom-control-indicator-size * 1.75 !default;
|
560
571
|
$custom-switch-indicator-border-radius: $custom-control-indicator-size / 2 !default;
|
561
|
-
$custom-switch-indicator-size:
|
572
|
+
$custom-switch-indicator-size: subtract($custom-control-indicator-size, $custom-control-indicator-border-width * 4) !default;
|
562
573
|
|
563
574
|
$custom-select-padding-y: $input-padding-y !default;
|
564
575
|
$custom-select-padding-x: $input-padding-x !default;
|
@@ -574,10 +585,10 @@ $custom-select-bg: $input-bg !default;
|
|
574
585
|
$custom-select-disabled-bg: $gray-200 !default;
|
575
586
|
$custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions
|
576
587
|
$custom-select-indicator-color: $gray-800 !default;
|
577
|
-
$custom-select-indicator:
|
578
|
-
$custom-select-background: $custom-select-indicator no-repeat right $custom-select-padding-x center / $custom-select-bg-size !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
|
588
|
+
$custom-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'><path fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>") !default;
|
589
|
+
$custom-select-background: escape-svg($custom-select-indicator) no-repeat right $custom-select-padding-x center / $custom-select-bg-size !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
|
579
590
|
|
580
|
-
$custom-select-feedback-icon-padding-right:
|
591
|
+
$custom-select-feedback-icon-padding-right: add(1em * .75, (2 * $custom-select-padding-y * .75) + $custom-select-padding-x + $custom-select-indicator-padding) !default;
|
581
592
|
$custom-select-feedback-icon-position: center right ($custom-select-padding-x + $custom-select-indicator-padding) !default;
|
582
593
|
$custom-select-feedback-icon-size: $input-height-inner-half $input-height-inner-half !default;
|
583
594
|
|
@@ -650,9 +661,9 @@ $form-feedback-valid-color: theme-color("success") !default;
|
|
650
661
|
$form-feedback-invalid-color: theme-color("danger") !default;
|
651
662
|
|
652
663
|
$form-feedback-icon-valid-color: $form-feedback-valid-color !default;
|
653
|
-
$form-feedback-icon-valid:
|
664
|
+
$form-feedback-icon-valid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>") !default;
|
654
665
|
$form-feedback-icon-invalid-color: $form-feedback-invalid-color !default;
|
655
|
-
$form-feedback-icon-invalid:
|
666
|
+
$form-feedback-icon-invalid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !default;
|
656
667
|
|
657
668
|
$form-validation-states: () !default;
|
658
669
|
// stylelint-disable-next-line scss/dollar-variable-default
|
@@ -728,14 +739,14 @@ $navbar-dark-color: rgba($white, .5) !default;
|
|
728
739
|
$navbar-dark-hover-color: rgba($white, .75) !default;
|
729
740
|
$navbar-dark-active-color: $white !default;
|
730
741
|
$navbar-dark-disabled-color: rgba($white, .25) !default;
|
731
|
-
$navbar-dark-toggler-icon-bg:
|
742
|
+
$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
|
732
743
|
$navbar-dark-toggler-border-color: rgba($white, .1) !default;
|
733
744
|
|
734
745
|
$navbar-light-color: rgba($black, .5) !default;
|
735
746
|
$navbar-light-hover-color: rgba($black, .7) !default;
|
736
747
|
$navbar-light-active-color: rgba($black, .9) !default;
|
737
748
|
$navbar-light-disabled-color: rgba($black, .3) !default;
|
738
|
-
$navbar-light-toggler-icon-bg:
|
749
|
+
$navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
|
739
750
|
$navbar-light-toggler-border-color: rgba($black, .1) !default;
|
740
751
|
|
741
752
|
$navbar-light-brand-color: $navbar-light-active-color !default;
|
@@ -757,7 +768,7 @@ $dropdown-bg: $white !default;
|
|
757
768
|
$dropdown-border-color: rgba($black, .15) !default;
|
758
769
|
$dropdown-border-radius: $border-radius !default;
|
759
770
|
$dropdown-border-width: $border-width !default;
|
760
|
-
$dropdown-inner-border-radius:
|
771
|
+
$dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width) !default;
|
761
772
|
$dropdown-divider-bg: $gray-200 !default;
|
762
773
|
$dropdown-divider-margin-y: $nav-divider-margin-y !default;
|
763
774
|
$dropdown-box-shadow: 0 .5rem 1rem rgba($black, .175) !default;
|
@@ -822,9 +833,10 @@ $card-spacer-x: 1.25rem !default;
|
|
822
833
|
$card-border-width: $border-width !default;
|
823
834
|
$card-border-radius: $border-radius !default;
|
824
835
|
$card-border-color: rgba($black, .125) !default;
|
825
|
-
$card-inner-border-radius:
|
836
|
+
$card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;
|
826
837
|
$card-cap-bg: rgba($black, .03) !default;
|
827
838
|
$card-cap-color: null !default;
|
839
|
+
$card-height: null !default;
|
828
840
|
$card-color: null !default;
|
829
841
|
$card-bg: $white !default;
|
830
842
|
|
@@ -871,6 +883,7 @@ $popover-max-width: 276px !default;
|
|
871
883
|
$popover-border-width: $border-width !default;
|
872
884
|
$popover-border-color: rgba($black, .2) !default;
|
873
885
|
$popover-border-radius: $border-radius-lg !default;
|
886
|
+
$popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width) !default;
|
874
887
|
$popover-box-shadow: 0 .25rem .5rem rgba($black, .2) !default;
|
875
888
|
|
876
889
|
$popover-header-bg: darken($popover-bg, 3%) !default;
|
@@ -929,6 +942,9 @@ $badge-pill-border-radius: 10rem !default;
|
|
929
942
|
// Padding applied to the modal body
|
930
943
|
$modal-inner-padding: 1rem !default;
|
931
944
|
|
945
|
+
// Margin between elements in footer, must be lower than or equal to 2 * $modal-inner-padding
|
946
|
+
$modal-footer-margin-between: .5rem !default;
|
947
|
+
|
932
948
|
$modal-dialog-margin: .5rem !default;
|
933
949
|
$modal-dialog-margin-y-sm-up: 1.75rem !default;
|
934
950
|
|
@@ -939,6 +955,7 @@ $modal-content-bg: $white !default;
|
|
939
955
|
$modal-content-border-color: rgba($black, .2) !default;
|
940
956
|
$modal-content-border-width: $border-width !default;
|
941
957
|
$modal-content-border-radius: $border-radius-lg !default;
|
958
|
+
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
|
942
959
|
$modal-content-box-shadow-xs: 0 .25rem .5rem rgba($black, .5) !default;
|
943
960
|
$modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba($black, .5) !default;
|
944
961
|
|
@@ -960,6 +977,7 @@ $modal-sm: 300px !default;
|
|
960
977
|
$modal-fade-transform: translate(0, -50px) !default;
|
961
978
|
$modal-show-transform: none !default;
|
962
979
|
$modal-transition: transform .3s ease-out !default;
|
980
|
+
$modal-scale-transform: scale(1.02) !default;
|
963
981
|
|
964
982
|
|
965
983
|
// Alerts
|
@@ -1035,6 +1053,8 @@ $figure-caption-color: $gray-600 !default;
|
|
1035
1053
|
|
1036
1054
|
// Breadcrumbs
|
1037
1055
|
|
1056
|
+
$breadcrumb-font-size: null !default;
|
1057
|
+
|
1038
1058
|
$breadcrumb-padding-y: .75rem !default;
|
1039
1059
|
$breadcrumb-padding-x: 1rem !default;
|
1040
1060
|
$breadcrumb-item-padding: .5rem !default;
|
@@ -1069,8 +1089,8 @@ $carousel-caption-color: $white !default;
|
|
1069
1089
|
|
1070
1090
|
$carousel-control-icon-width: 20px !default;
|
1071
1091
|
|
1072
|
-
$carousel-control-prev-icon-bg:
|
1073
|
-
$carousel-control-next-icon-bg:
|
1092
|
+
$carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' width='8' height='8' viewBox='0 0 8 8'><path d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/></svg>") !default;
|
1093
|
+
$carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' width='8' height='8' viewBox='0 0 8 8'><path d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/></svg>") !default;
|
1074
1094
|
|
1075
1095
|
$carousel-transition-duration: .6s !default;
|
1076
1096
|
$carousel-transition: transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
|