administrate-bootstrap-theme 1.0.4 → 1.1.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (78) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +1 -0
  3. data/app/assets/javascripts/administrate-bootstrap-theme/bootstrap.bundle.js +2514 -2980
  4. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_accordion.scss +73 -33
  5. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_alert.scss +25 -14
  6. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_badge.scss +14 -5
  7. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_breadcrumb.scss +22 -10
  8. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_button-group.scss +6 -3
  9. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_buttons.scss +133 -28
  10. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_card.scss +60 -37
  11. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_carousel.scss +22 -15
  12. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_close.scss +33 -10
  13. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_containers.scss +1 -1
  14. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_dropdown.scss +86 -76
  15. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_functions.scss +15 -9
  16. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_grid.scss +9 -3
  17. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_helpers.scss +3 -0
  18. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_list-group.scss +60 -37
  19. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_maps.scss +174 -0
  20. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_mixins.scss +1 -2
  21. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_modal.scss +71 -44
  22. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_nav.scss +86 -28
  23. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_navbar.scss +101 -147
  24. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_offcanvas.scss +121 -61
  25. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_pagination.scss +66 -21
  26. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_placeholders.scss +1 -1
  27. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_popover.scss +90 -52
  28. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_progress.scss +30 -10
  29. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_reboot.scss +31 -45
  30. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_root.scss +155 -21
  31. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_spinners.scss +38 -22
  32. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_tables.scss +46 -26
  33. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_toasts.scss +38 -16
  34. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_tooltip.scss +60 -56
  35. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_type.scss +2 -0
  36. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_utilities.scss +209 -33
  37. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_variables-dark.scss +87 -0
  38. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_variables.scss +406 -284
  39. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/bootstrap-grid.scss +4 -7
  40. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/bootstrap-reboot.scss +5 -10
  41. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/bootstrap-utilities.scss +7 -6
  42. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/bootstrap.scss +5 -6
  43. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/forms/_floating-labels.scss +37 -5
  44. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/forms/_form-check.scss +51 -14
  45. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/forms/_form-control.scss +36 -41
  46. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/forms/_form-range.scss +3 -3
  47. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/forms/_form-select.scss +14 -4
  48. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/forms/_input-group.scss +20 -9
  49. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/helpers/_color-bg.scss +7 -0
  50. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/helpers/_colored-links.scss +20 -2
  51. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/helpers/_focus-ring.scss +5 -0
  52. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/helpers/_icon-link.scss +25 -0
  53. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/helpers/_position.scss +7 -1
  54. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/helpers/_ratio.scss +2 -2
  55. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/helpers/_vr.scss +2 -2
  56. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_alert.scss +11 -4
  57. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_banner.scss +7 -0
  58. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_breakpoints.scss +8 -8
  59. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_buttons.scss +32 -95
  60. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_caret.scss +30 -25
  61. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_color-mode.scss +21 -0
  62. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_container.scss +4 -2
  63. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_forms.scss +38 -19
  64. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_gradients.scss +1 -1
  65. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_grid.scss +15 -14
  66. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_list-group.scss +2 -0
  67. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_pagination.scss +4 -25
  68. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_reset-text.scss +1 -1
  69. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_table-variants.scss +12 -9
  70. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_utilities.scss +14 -6
  71. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_visually-hidden.scss +6 -2
  72. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/vendor/_rfs.scss +23 -29
  73. data/app/assets/stylesheets/administrate-bootstrap-theme/components/_content_body.scss +21 -7
  74. data/app/assets/stylesheets/administrate-bootstrap-theme/components/_navigation.scss +4 -0
  75. data/app/assets/stylesheets/administrate-bootstrap-theme/components/_pagination.scss +11 -3
  76. data/lib/administrate-bootstrap-theme/version.rb +3 -2
  77. data/package.json +2 -2
  78. 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: -$card-title-spacer-y * .5;
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: -$card-cap-padding-x * .5;
111
- margin-bottom: -$card-cap-padding-y;
112
- margin-left: -$card-cap-padding-x * .5;
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
- @if $nav-tabs-link-active-bg != $card-bg {
116
- .nav-link.active {
117
- background-color: $card-bg;
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: -$card-cap-padding-x * .5;
125
- margin-left: -$card-cap-padding-x * .5;
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
- .carousel-dark {
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
- // transparent background and border properties included for button version.
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 escape-svg($btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements
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
- filter: $btn-close-white-filter;
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,7 @@
2
2
  //
3
3
  // Set the container width, and override it for fixed navbars in media queries.
4
4
 
5
- @if $enable-grid-classes {
5
+ @if $enable-container-classes {
6
6
  // Single container class with breakpoint max-widths
7
7
  .container,
8
8
  // 100% wide container at all breakpoints
@@ -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-dropdown;
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
- color: $dropdown-dark-color;
204
- background-color: $dropdown-dark-bg;
205
- border-color: $dropdown-dark-border-color;
206
- @include box-shadow($dropdown-dark-box-shadow);
207
-
208
- .dropdown-item {
209
- color: $dropdown-dark-link-color;
210
-
211
- &:hover,
212
- &:focus {
213
- color: $dropdown-dark-link-hover-color;
214
- @include gradient-bg($dropdown-dark-link-hover-bg);
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
  }
@@ -37,11 +37,17 @@
37
37
  @return red($value), green($value), blue($value);
38
38
  }
39
39
 
40
+ // stylelint-disable scss/dollar-variable-pattern
40
41
  @function rgba-css-var($identifier, $target) {
41
- @return rgba(var(--#{$variable-prefix}#{$identifier}-rgb), var(--#{$variable-prefix}#{$target}-opacity));
42
+ @if $identifier == "body" and $target == "bg" {
43
+ @return rgba(var(--#{$prefix}#{$identifier}-bg-rgb), var(--#{$prefix}#{$target}-opacity));
44
+ } @if $identifier == "body" and $target == "text" {
45
+ @return rgba(var(--#{$prefix}#{$identifier}-color-rgb), var(--#{$prefix}#{$target}-opacity));
46
+ } @else {
47
+ @return rgba(var(--#{$prefix}#{$identifier}-rgb), var(--#{$prefix}#{$target}-opacity));
48
+ }
42
49
  }
43
50
 
44
- // stylelint-disable scss/dollar-variable-pattern
45
51
  @function map-loop($map, $func, $args...) {
46
52
  $_map: ();
47
53
 
@@ -62,7 +68,7 @@
62
68
  @function varify($list) {
63
69
  $result: null;
64
70
  @each $entry in $list {
65
- $result: append($result, var(--#{$variable-prefix}#{$entry}), space);
71
+ $result: append($result, var(--#{$prefix}#{$entry}), space);
66
72
  }
67
73
  @return $result;
68
74
  }
@@ -103,7 +109,7 @@
103
109
  // Replace `$search` with `$replace` in `$string`
104
110
  // Used on our SVG icon backgrounds for custom forms.
105
111
  //
106
- // @author Hugo Giraudel
112
+ // @author Kitty Giraudel
107
113
  // @param {String} $string - Initial string
108
114
  // @param {String} $search - Substring to replace
109
115
  // @param {String} $replace ('') - New value
@@ -171,9 +177,9 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
171
177
  @return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05));
172
178
  }
173
179
 
174
- // Return WCAG2.0 relative luminance
175
- // See https://www.w3.org/WAI/GL/wiki/Relative_luminance
176
- // See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
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
177
183
  @function luminance($color) {
178
184
  $rgb: (
179
185
  "r": red($color),
@@ -182,7 +188,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
182
188
  );
183
189
 
184
190
  @each $name, $value in $rgb {
185
- $value: if(divide($value, 255) < .03928, divide(divide($value, 255), 12.92), nth($_luminance-list, $value + 1));
191
+ $value: if(divide($value, 255) < .04045, divide(divide($value, 255), 12.92), nth($_luminance-list, $value + 1));
186
192
  $rgb: map-merge($rgb, ($name: $value));
187
193
  }
188
194
 
@@ -192,7 +198,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
192
198
  // Return opaque color
193
199
  // opaque(#fff, rgba(0, 0, 0, .5)) => #808080
194
200
  @function opaque($background, $foreground) {
195
- @return mix(rgba($foreground, 1), $background, opacity($foreground) * 100);
201
+ @return mix(rgba($foreground, 1), $background, opacity($foreground) * 100%);
196
202
  }
197
203
 
198
204
  // scss-docs-start color-functions