bootstrap 5.0.0.alpha2 → 5.0.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/.travis.yml +1 -0
- data/README.md +7 -4
- data/assets/javascripts/bootstrap-global-this-define.js +6 -0
- data/assets/javascripts/bootstrap-global-this-undefine.js +2 -0
- data/assets/javascripts/bootstrap-sprockets.js +10 -7
- data/assets/javascripts/bootstrap.js +2554 -2564
- data/assets/javascripts/bootstrap.min.js +3 -3
- data/assets/javascripts/bootstrap/alert.js +119 -115
- data/assets/javascripts/bootstrap/base-component.js +63 -0
- data/assets/javascripts/bootstrap/button.js +67 -69
- data/assets/javascripts/bootstrap/carousel.js +340 -331
- data/assets/javascripts/bootstrap/collapse.js +214 -209
- data/assets/javascripts/bootstrap/dom/data.js +35 -48
- data/assets/javascripts/bootstrap/dom/event-handler.js +105 -98
- data/assets/javascripts/bootstrap/dom/manipulator.js +26 -34
- data/assets/javascripts/bootstrap/dom/selector-engine.js +28 -41
- data/assets/javascripts/bootstrap/dropdown.js +392 -325
- data/assets/javascripts/bootstrap/modal.js +492 -434
- data/assets/javascripts/bootstrap/offcanvas.js +671 -0
- data/assets/javascripts/bootstrap/popover.js +114 -132
- data/assets/javascripts/bootstrap/scrollspy.js +172 -180
- data/assets/javascripts/bootstrap/tab.js +168 -144
- data/assets/javascripts/bootstrap/toast.js +141 -150
- data/assets/javascripts/bootstrap/tooltip.js +466 -452
- data/assets/stylesheets/_bootstrap-grid.scss +9 -9
- data/assets/stylesheets/_bootstrap-reboot.scss +3 -3
- data/assets/stylesheets/_bootstrap.scss +5 -3
- data/assets/stylesheets/bootstrap/_accordion.scss +118 -0
- data/assets/stylesheets/bootstrap/_alert.scss +10 -3
- data/assets/stylesheets/bootstrap/_breadcrumb.scss +2 -4
- data/assets/stylesheets/bootstrap/_button-group.scss +5 -7
- data/assets/stylesheets/bootstrap/_buttons.scss +2 -15
- data/assets/stylesheets/bootstrap/_card.scss +2 -29
- data/assets/stylesheets/bootstrap/_carousel.scss +35 -18
- data/assets/stylesheets/bootstrap/_close.scss +2 -3
- data/assets/stylesheets/bootstrap/_dropdown.scss +33 -29
- data/assets/stylesheets/bootstrap/_forms.scss +1 -1
- data/assets/stylesheets/bootstrap/_functions.scss +11 -12
- data/assets/stylesheets/bootstrap/_list-group.scss +23 -6
- data/assets/stylesheets/bootstrap/_mixins.scss +1 -0
- data/assets/stylesheets/bootstrap/_modal.scss +2 -9
- data/assets/stylesheets/bootstrap/_nav.scss +12 -0
- data/assets/stylesheets/bootstrap/_navbar.scss +15 -2
- data/assets/stylesheets/bootstrap/_offcanvas.scss +77 -0
- data/assets/stylesheets/bootstrap/_pagination.scss +3 -3
- data/assets/stylesheets/bootstrap/_popover.scss +10 -22
- data/assets/stylesheets/bootstrap/_progress.scss +4 -1
- data/assets/stylesheets/bootstrap/_reboot.scss +48 -44
- data/assets/stylesheets/bootstrap/_root.scss +5 -5
- data/assets/stylesheets/bootstrap/_spinners.scss +18 -5
- data/assets/stylesheets/bootstrap/_tables.scss +15 -16
- data/assets/stylesheets/bootstrap/_toasts.scss +15 -12
- data/assets/stylesheets/bootstrap/_tooltip.scss +12 -12
- data/assets/stylesheets/bootstrap/_transitions.scss +2 -0
- data/assets/stylesheets/bootstrap/_utilities.scss +133 -70
- data/assets/stylesheets/bootstrap/_variables.scss +363 -207
- data/assets/stylesheets/bootstrap/bootstrap-utilities.scss +5 -5
- data/assets/stylesheets/bootstrap/forms/_floating-labels.scss +61 -0
- data/assets/stylesheets/bootstrap/forms/_form-check.scss +21 -11
- data/assets/stylesheets/bootstrap/forms/_form-control.scss +112 -9
- data/assets/stylesheets/bootstrap/forms/_form-range.scss +1 -46
- data/assets/stylesheets/bootstrap/forms/_form-select.scss +1 -16
- data/assets/stylesheets/bootstrap/forms/_input-group.scss +21 -40
- data/assets/stylesheets/bootstrap/forms/_validation.scss +1 -1
- data/assets/stylesheets/bootstrap/helpers/_colored-links.scss +2 -2
- data/assets/stylesheets/bootstrap/helpers/_ratio.scss +2 -2
- data/assets/stylesheets/bootstrap/helpers/_visually-hidden.scss +1 -1
- data/assets/stylesheets/bootstrap/mixins/_alert.scss +3 -1
- data/assets/stylesheets/bootstrap/mixins/_border-radius.scss +8 -6
- data/assets/stylesheets/bootstrap/mixins/_buttons.scss +10 -5
- data/assets/stylesheets/bootstrap/mixins/_caret.scss +8 -6
- data/assets/stylesheets/bootstrap/mixins/_color-scheme.scss +7 -0
- data/assets/stylesheets/bootstrap/mixins/_container.scss +2 -4
- data/assets/stylesheets/bootstrap/mixins/_forms.scss +26 -22
- data/assets/stylesheets/bootstrap/mixins/_gradients.scss +5 -1
- data/assets/stylesheets/bootstrap/mixins/_grid.scss +18 -13
- data/assets/stylesheets/bootstrap/mixins/_list-group.scss +3 -1
- data/assets/stylesheets/bootstrap/mixins/_pagination.scss +5 -3
- data/assets/stylesheets/bootstrap/mixins/_table-variants.scss +7 -7
- data/assets/stylesheets/bootstrap/mixins/_utilities.scss +19 -0
- data/assets/stylesheets/bootstrap/mixins/_visually-hidden.scss +3 -2
- data/assets/stylesheets/bootstrap/utilities/_api.scss +1 -1
- data/bootstrap.gemspec +1 -3
- data/lib/bootstrap/version.rb +2 -2
- data/tasks/updater/js.rb +20 -5
- data/tasks/updater/network.rb +7 -1
- data/test/dummy_rails/app/assets/javascripts/application.js +4 -3
- data/test/dummy_rails/app/views/layouts/application.html.erb +3 -1
- data/test/dummy_rails/app/views/pages/root.html +89 -0
- data/test/dummy_rails/config/application.rb +0 -3
- data/test/gemfiles/rails_6_1.gemfile +7 -0
- metadata +20 -40
- data/assets/javascripts/bootstrap/dom/polyfill.js +0 -110
- data/assets/stylesheets/bootstrap/forms/_form-file.scss +0 -91
- data/test/dummy_rails/app/views/pages/root.html.slim +0 -58
@@ -1,7 +1,7 @@
|
|
1
1
|
/*!
|
2
|
-
* Bootstrap Grid v5.0.0
|
3
|
-
* Copyright 2011-
|
4
|
-
* Copyright 2011-
|
2
|
+
* Bootstrap Grid v5.0.0 (https://getbootstrap.com/)
|
3
|
+
* Copyright 2011-2021 The Bootstrap Authors
|
4
|
+
* Copyright 2011-2021 Twitter, Inc.
|
5
5
|
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
6
6
|
*/
|
7
7
|
|
@@ -42,23 +42,23 @@ $utilities: map-get-multiple(
|
|
42
42
|
"bootstrap/margin-x",
|
43
43
|
"bootstrap/margin-y",
|
44
44
|
"bootstrap/margin-top",
|
45
|
-
"bootstrap/margin-
|
45
|
+
"bootstrap/margin-end",
|
46
46
|
"bootstrap/margin-bottom",
|
47
|
-
"bootstrap/margin-
|
47
|
+
"bootstrap/margin-start",
|
48
48
|
"bootstrap/negative-margin",
|
49
49
|
"bootstrap/negative-margin-x",
|
50
50
|
"bootstrap/negative-margin-y",
|
51
51
|
"bootstrap/negative-margin-top",
|
52
|
-
"bootstrap/negative-margin-
|
52
|
+
"bootstrap/negative-margin-end",
|
53
53
|
"bootstrap/negative-margin-bottom",
|
54
|
-
"bootstrap/negative-margin-
|
54
|
+
"bootstrap/negative-margin-start",
|
55
55
|
"bootstrap/padding",
|
56
56
|
"bootstrap/padding-x",
|
57
57
|
"bootstrap/padding-y",
|
58
58
|
"bootstrap/padding-top",
|
59
|
-
"bootstrap/padding-
|
59
|
+
"bootstrap/padding-end",
|
60
60
|
"bootstrap/padding-bottom",
|
61
|
-
"bootstrap/padding-
|
61
|
+
"bootstrap/padding-start",
|
62
62
|
)
|
63
63
|
);
|
64
64
|
|
@@ -1,7 +1,7 @@
|
|
1
1
|
/*!
|
2
|
-
* Bootstrap Reboot v5.0.0
|
3
|
-
* Copyright 2011-
|
4
|
-
* Copyright 2011-
|
2
|
+
* Bootstrap Reboot v5.0.0 (https://getbootstrap.com/)
|
3
|
+
* Copyright 2011-2021 The Bootstrap Authors
|
4
|
+
* Copyright 2011-2021 Twitter, Inc.
|
5
5
|
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
6
6
|
* Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
|
7
7
|
*/
|
@@ -1,7 +1,7 @@
|
|
1
1
|
/*!
|
2
|
-
* Bootstrap v5.0.0
|
3
|
-
* Copyright 2011-
|
4
|
-
* Copyright 2011-
|
2
|
+
* Bootstrap v5.0.0 (https://getbootstrap.com/)
|
3
|
+
* Copyright 2011-2021 The Bootstrap Authors
|
4
|
+
* Copyright 2011-2021 Twitter, Inc.
|
5
5
|
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
6
6
|
*/
|
7
7
|
|
@@ -28,6 +28,7 @@
|
|
28
28
|
@import "bootstrap/nav";
|
29
29
|
@import "bootstrap/navbar";
|
30
30
|
@import "bootstrap/card";
|
31
|
+
@import "bootstrap/accordion";
|
31
32
|
@import "bootstrap/breadcrumb";
|
32
33
|
@import "bootstrap/pagination";
|
33
34
|
@import "bootstrap/badge";
|
@@ -41,6 +42,7 @@
|
|
41
42
|
@import "bootstrap/popover";
|
42
43
|
@import "bootstrap/carousel";
|
43
44
|
@import "bootstrap/spinners";
|
45
|
+
@import "bootstrap/offcanvas";
|
44
46
|
|
45
47
|
// Helpers
|
46
48
|
@import "bootstrap/helpers";
|
@@ -0,0 +1,118 @@
|
|
1
|
+
//
|
2
|
+
// Base styles
|
3
|
+
//
|
4
|
+
|
5
|
+
.accordion-button {
|
6
|
+
position: relative;
|
7
|
+
display: flex;
|
8
|
+
align-items: center;
|
9
|
+
width: 100%;
|
10
|
+
padding: $accordion-button-padding-y $accordion-button-padding-x;
|
11
|
+
@include font-size($font-size-base);
|
12
|
+
color: $accordion-button-color;
|
13
|
+
text-align: left; // Reset button style
|
14
|
+
background-color: $accordion-button-bg;
|
15
|
+
border: 0;
|
16
|
+
@include border-radius(0);
|
17
|
+
overflow-anchor: none;
|
18
|
+
@include transition($accordion-transition);
|
19
|
+
|
20
|
+
&:not(.collapsed) {
|
21
|
+
color: $accordion-button-active-color;
|
22
|
+
background-color: $accordion-button-active-bg;
|
23
|
+
box-shadow: inset 0 ($accordion-border-width * -1) 0 $accordion-border-color;
|
24
|
+
|
25
|
+
&::after {
|
26
|
+
background-image: escape-svg($accordion-button-active-icon);
|
27
|
+
transform: $accordion-icon-transform;
|
28
|
+
}
|
29
|
+
}
|
30
|
+
|
31
|
+
// Accordion icon
|
32
|
+
&::after {
|
33
|
+
flex-shrink: 0;
|
34
|
+
width: $accordion-icon-width;
|
35
|
+
height: $accordion-icon-width;
|
36
|
+
margin-left: auto;
|
37
|
+
content: "";
|
38
|
+
background-image: escape-svg($accordion-button-icon);
|
39
|
+
background-repeat: no-repeat;
|
40
|
+
background-size: $accordion-icon-width;
|
41
|
+
@include transition($accordion-icon-transition);
|
42
|
+
}
|
43
|
+
|
44
|
+
&:hover {
|
45
|
+
z-index: 2;
|
46
|
+
}
|
47
|
+
|
48
|
+
&:focus {
|
49
|
+
z-index: 3;
|
50
|
+
border-color: $accordion-button-focus-border-color;
|
51
|
+
outline: 0;
|
52
|
+
box-shadow: $accordion-button-focus-box-shadow;
|
53
|
+
}
|
54
|
+
}
|
55
|
+
|
56
|
+
.accordion-header {
|
57
|
+
margin-bottom: 0;
|
58
|
+
}
|
59
|
+
|
60
|
+
.accordion-item {
|
61
|
+
background-color: $accordion-bg;
|
62
|
+
border: $accordion-border-width solid $accordion-border-color;
|
63
|
+
|
64
|
+
&:first-of-type {
|
65
|
+
@include border-top-radius($accordion-border-radius);
|
66
|
+
|
67
|
+
.accordion-button {
|
68
|
+
@include border-top-radius($accordion-inner-border-radius);
|
69
|
+
}
|
70
|
+
}
|
71
|
+
|
72
|
+
&:not(:first-of-type) {
|
73
|
+
border-top: 0;
|
74
|
+
}
|
75
|
+
|
76
|
+
// Only set a border-radius on the last item if the accordion is collapsed
|
77
|
+
&:last-of-type {
|
78
|
+
@include border-bottom-radius($accordion-border-radius);
|
79
|
+
|
80
|
+
.accordion-button {
|
81
|
+
&.collapsed {
|
82
|
+
@include border-bottom-radius($accordion-inner-border-radius);
|
83
|
+
}
|
84
|
+
}
|
85
|
+
|
86
|
+
.accordion-collapse {
|
87
|
+
@include border-bottom-radius($accordion-border-radius);
|
88
|
+
}
|
89
|
+
}
|
90
|
+
}
|
91
|
+
|
92
|
+
.accordion-body {
|
93
|
+
padding: $accordion-body-padding-y $accordion-body-padding-x;
|
94
|
+
}
|
95
|
+
|
96
|
+
|
97
|
+
// Flush accordion items
|
98
|
+
//
|
99
|
+
// Remove borders and border-radius to keep accordion items edge-to-edge.
|
100
|
+
|
101
|
+
.accordion-flush {
|
102
|
+
.accordion-collapse {
|
103
|
+
border-width: 0;
|
104
|
+
}
|
105
|
+
|
106
|
+
.accordion-item {
|
107
|
+
border-right: 0;
|
108
|
+
border-left: 0;
|
109
|
+
@include border-radius(0);
|
110
|
+
|
111
|
+
&:first-child { border-top: 0; }
|
112
|
+
&:last-child { border-bottom: 0; }
|
113
|
+
|
114
|
+
.accordion-button {
|
115
|
+
@include border-radius(0);
|
116
|
+
}
|
117
|
+
}
|
118
|
+
}
|
@@ -34,6 +34,7 @@
|
|
34
34
|
position: absolute;
|
35
35
|
top: 0;
|
36
36
|
right: 0;
|
37
|
+
z-index: $stretched-link-z-index + 1;
|
37
38
|
padding: $alert-padding-y * 1.25 $alert-padding-x;
|
38
39
|
}
|
39
40
|
}
|
@@ -42,9 +43,15 @@
|
|
42
43
|
// scss-docs-start alert-modifiers
|
43
44
|
// Generate contextual modifier classes for colorizing the alert.
|
44
45
|
|
45
|
-
@each $
|
46
|
-
|
47
|
-
|
46
|
+
@each $state, $value in $theme-colors {
|
47
|
+
$alert-background: shift-color($value, $alert-bg-scale);
|
48
|
+
$alert-border: shift-color($value, $alert-border-scale);
|
49
|
+
$alert-color: shift-color($value, $alert-color-scale);
|
50
|
+
@if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
|
51
|
+
$alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
|
52
|
+
}
|
53
|
+
.alert-#{$state} {
|
54
|
+
@include alert-variant($alert-background, $alert-border, $alert-color);
|
48
55
|
}
|
49
56
|
}
|
50
57
|
// scss-docs-end alert-modifiers
|
@@ -10,17 +10,15 @@
|
|
10
10
|
}
|
11
11
|
|
12
12
|
.breadcrumb-item {
|
13
|
-
display: flex;
|
14
|
-
|
15
13
|
// The separator between breadcrumbs (by default, a forward-slash: "/")
|
16
14
|
+ .breadcrumb-item {
|
17
15
|
padding-left: $breadcrumb-item-padding-x;
|
18
16
|
|
19
17
|
&::before {
|
20
|
-
|
18
|
+
float: left; // Suppress inline spacings and underlining of the separator
|
21
19
|
padding-right: $breadcrumb-item-padding-x;
|
22
20
|
color: $breadcrumb-divider-color;
|
23
|
-
content: escape-svg($breadcrumb-divider);
|
21
|
+
content: var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"};
|
24
22
|
}
|
25
23
|
}
|
26
24
|
|
@@ -1,5 +1,3 @@
|
|
1
|
-
// stylelint-disable selector-no-qualifying-type
|
2
|
-
|
3
1
|
// Make the div behave like a button
|
4
2
|
.btn-group,
|
5
3
|
.btn-group-vertical {
|
@@ -45,7 +43,7 @@
|
|
45
43
|
// Reset rounded corners
|
46
44
|
> .btn:not(:last-child):not(.dropdown-toggle),
|
47
45
|
> .btn-group:not(:last-child) > .btn {
|
48
|
-
@include border-
|
46
|
+
@include border-end-radius(0);
|
49
47
|
}
|
50
48
|
|
51
49
|
// The left radius should be 0 if the button is:
|
@@ -55,7 +53,7 @@
|
|
55
53
|
> .btn:nth-child(n + 3),
|
56
54
|
> :not(.btn-check) + .btn,
|
57
55
|
> .btn-group:not(:first-child) > .btn {
|
58
|
-
@include border-
|
56
|
+
@include border-start-radius(0);
|
59
57
|
}
|
60
58
|
}
|
61
59
|
|
@@ -77,11 +75,11 @@
|
|
77
75
|
|
78
76
|
&::after,
|
79
77
|
.dropup &::after,
|
80
|
-
.
|
78
|
+
.dropend &::after {
|
81
79
|
margin-left: 0;
|
82
80
|
}
|
83
81
|
|
84
|
-
.
|
82
|
+
.dropstart &::before {
|
85
83
|
margin-right: 0;
|
86
84
|
}
|
87
85
|
}
|
@@ -134,7 +132,7 @@
|
|
134
132
|
@include border-bottom-radius(0);
|
135
133
|
}
|
136
134
|
|
137
|
-
> .btn
|
135
|
+
> .btn ~ .btn,
|
138
136
|
> .btn-group:not(:first-child) > .btn {
|
139
137
|
@include border-top-radius(0);
|
140
138
|
}
|
@@ -55,6 +55,7 @@
|
|
55
55
|
// Alternate buttons
|
56
56
|
//
|
57
57
|
|
58
|
+
// scss-docs-start btn-variant-loops
|
58
59
|
@each $color, $value in $theme-colors {
|
59
60
|
.btn-#{$color} {
|
60
61
|
@include button-variant($value, $value);
|
@@ -66,6 +67,7 @@
|
|
66
67
|
@include button-outline-variant($value);
|
67
68
|
}
|
68
69
|
}
|
70
|
+
// scss-docs-end btn-variant-loops
|
69
71
|
|
70
72
|
|
71
73
|
//
|
@@ -107,18 +109,3 @@
|
|
107
109
|
.btn-sm {
|
108
110
|
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);
|
109
111
|
}
|
110
|
-
|
111
|
-
|
112
|
-
//
|
113
|
-
// Block button
|
114
|
-
//
|
115
|
-
|
116
|
-
.btn-block {
|
117
|
-
display: block;
|
118
|
-
width: 100%;
|
119
|
-
|
120
|
-
// Vertically space out multiple block buttons
|
121
|
-
+ .btn-block {
|
122
|
-
margin-top: $btn-block-spacing-y;
|
123
|
-
}
|
124
|
-
}
|
@@ -181,7 +181,7 @@
|
|
181
181
|
// Handle rounded corners
|
182
182
|
@if $enable-rounded {
|
183
183
|
&:not(:last-child) {
|
184
|
-
@include border-
|
184
|
+
@include border-end-radius(0);
|
185
185
|
|
186
186
|
.card-img-top,
|
187
187
|
.card-header {
|
@@ -196,7 +196,7 @@
|
|
196
196
|
}
|
197
197
|
|
198
198
|
&:not(:first-child) {
|
199
|
-
@include border-
|
199
|
+
@include border-start-radius(0);
|
200
200
|
|
201
201
|
.card-img-top,
|
202
202
|
.card-header {
|
@@ -213,30 +213,3 @@
|
|
213
213
|
}
|
214
214
|
}
|
215
215
|
}
|
216
|
-
|
217
|
-
|
218
|
-
//
|
219
|
-
// Accordion
|
220
|
-
//
|
221
|
-
|
222
|
-
.accordion {
|
223
|
-
overflow-anchor: none;
|
224
|
-
|
225
|
-
> .card {
|
226
|
-
overflow: hidden;
|
227
|
-
|
228
|
-
&:not(:last-of-type) {
|
229
|
-
border-bottom: 0;
|
230
|
-
@include border-bottom-radius(0);
|
231
|
-
}
|
232
|
-
|
233
|
-
&:not(:first-of-type) {
|
234
|
-
@include border-top-radius(0);
|
235
|
-
}
|
236
|
-
|
237
|
-
> .card-header {
|
238
|
-
@include border-radius(0);
|
239
|
-
margin-bottom: -$card-border-width;
|
240
|
-
}
|
241
|
-
}
|
242
|
-
}
|
@@ -3,12 +3,12 @@
|
|
3
3
|
// 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically)
|
4
4
|
// even when their scroll action started on a carousel, but for compatibility (with Firefox)
|
5
5
|
// we're preventing all actions instead
|
6
|
-
// 2. The .carousel-item-
|
6
|
+
// 2. The .carousel-item-start and .carousel-item-end is used to indicate where
|
7
7
|
// the active slide is heading.
|
8
8
|
// 3. .active.carousel-item is the current slide.
|
9
|
-
// 4. .active.carousel-item-
|
9
|
+
// 4. .active.carousel-item-start and .active.carousel-item-end is the current
|
10
10
|
// slide in its in-transition state. Only one of these occurs at a time.
|
11
|
-
// 5. .carousel-item-next.carousel-item-
|
11
|
+
// 5. .carousel-item-next.carousel-item-start and .carousel-item-prev.carousel-item-end
|
12
12
|
// is the upcoming slide in transition.
|
13
13
|
|
14
14
|
.carousel {
|
@@ -42,16 +42,19 @@
|
|
42
42
|
display: block;
|
43
43
|
}
|
44
44
|
|
45
|
-
|
46
|
-
.
|
45
|
+
/* rtl:begin:ignore */
|
46
|
+
.carousel-item-next:not(.carousel-item-start),
|
47
|
+
.active.carousel-item-end {
|
47
48
|
transform: translateX(100%);
|
48
49
|
}
|
49
50
|
|
50
|
-
.carousel-item-prev:not(.carousel-item-
|
51
|
-
.active.carousel-item-
|
51
|
+
.carousel-item-prev:not(.carousel-item-end),
|
52
|
+
.active.carousel-item-start {
|
52
53
|
transform: translateX(-100%);
|
53
54
|
}
|
54
55
|
|
56
|
+
/* rtl:end:ignore */
|
57
|
+
|
55
58
|
|
56
59
|
//
|
57
60
|
// Alternate transitions
|
@@ -65,14 +68,14 @@
|
|
65
68
|
}
|
66
69
|
|
67
70
|
.carousel-item.active,
|
68
|
-
.carousel-item-next.carousel-item-
|
69
|
-
.carousel-item-prev.carousel-item-
|
71
|
+
.carousel-item-next.carousel-item-start,
|
72
|
+
.carousel-item-prev.carousel-item-end {
|
70
73
|
z-index: 1;
|
71
74
|
opacity: 1;
|
72
75
|
}
|
73
76
|
|
74
|
-
.active.carousel-item-
|
75
|
-
.active.carousel-item-
|
77
|
+
.active.carousel-item-start,
|
78
|
+
.active.carousel-item-end {
|
76
79
|
z-index: 0;
|
77
80
|
opacity: 0;
|
78
81
|
@include transition(opacity 0s $carousel-transition-duration);
|
@@ -95,8 +98,11 @@
|
|
95
98
|
align-items: center; // 2. vertically center contents
|
96
99
|
justify-content: center; // 3. horizontally center contents
|
97
100
|
width: $carousel-control-width;
|
101
|
+
padding: 0;
|
98
102
|
color: $carousel-control-color;
|
99
103
|
text-align: center;
|
104
|
+
background: none;
|
105
|
+
border: 0;
|
100
106
|
opacity: $carousel-control-opacity;
|
101
107
|
@include transition($carousel-control-transition);
|
102
108
|
|
@@ -128,6 +134,15 @@
|
|
128
134
|
background-position: 50%;
|
129
135
|
background-size: 100% 100%;
|
130
136
|
}
|
137
|
+
|
138
|
+
/* rtl:options: {
|
139
|
+
"autoRename": true,
|
140
|
+
"stringMap":[ {
|
141
|
+
"name" : "prev-next",
|
142
|
+
"search" : "prev",
|
143
|
+
"replace" : "next"
|
144
|
+
} ]
|
145
|
+
} */
|
131
146
|
.carousel-control-prev-icon {
|
132
147
|
background-image: escape-svg($carousel-control-prev-icon-bg);
|
133
148
|
}
|
@@ -135,11 +150,10 @@
|
|
135
150
|
background-image: escape-svg($carousel-control-next-icon-bg);
|
136
151
|
}
|
137
152
|
|
138
|
-
|
139
|
-
// Optional indicator pips
|
153
|
+
// Optional indicator pips/controls
|
140
154
|
//
|
141
|
-
// Add
|
142
|
-
// slide your carousel holds.
|
155
|
+
// Add a container (such as a list) with the following class and add an item (ideally a focusable control,
|
156
|
+
// like a button) with data-bs-target for each slide your carousel holds.
|
143
157
|
|
144
158
|
.carousel-indicators {
|
145
159
|
position: absolute;
|
@@ -149,23 +163,26 @@
|
|
149
163
|
z-index: 2;
|
150
164
|
display: flex;
|
151
165
|
justify-content: center;
|
152
|
-
padding
|
166
|
+
padding: 0;
|
153
167
|
// Use the .carousel-control's width as margin so we don't overlay those
|
154
168
|
margin-right: $carousel-control-width;
|
169
|
+
margin-bottom: 1rem;
|
155
170
|
margin-left: $carousel-control-width;
|
156
171
|
list-style: none;
|
157
172
|
|
158
|
-
|
173
|
+
[data-bs-target] {
|
159
174
|
box-sizing: content-box;
|
160
175
|
flex: 0 1 auto;
|
161
176
|
width: $carousel-indicator-width;
|
162
177
|
height: $carousel-indicator-height;
|
178
|
+
padding: 0;
|
163
179
|
margin-right: $carousel-indicator-spacer;
|
164
180
|
margin-left: $carousel-indicator-spacer;
|
165
181
|
text-indent: -999px;
|
166
182
|
cursor: pointer;
|
167
183
|
background-color: $carousel-indicator-active-bg;
|
168
184
|
background-clip: padding-box;
|
185
|
+
border: 0;
|
169
186
|
// Use transparent borders to increase the hit area by 10px on top and bottom.
|
170
187
|
border-top: $carousel-indicator-hit-area-height solid transparent;
|
171
188
|
border-bottom: $carousel-indicator-hit-area-height solid transparent;
|
@@ -202,7 +219,7 @@
|
|
202
219
|
filter: $carousel-dark-control-icon-filter;
|
203
220
|
}
|
204
221
|
|
205
|
-
.carousel-indicators
|
222
|
+
.carousel-indicators [data-bs-target] {
|
206
223
|
background-color: $carousel-dark-indicator-active-bg;
|
207
224
|
}
|
208
225
|
|