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.
Files changed (77) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/javascripts/administrate-bootstrap-theme/bootstrap.bundle.js +2503 -3001
  3. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_accordion.scss +73 -33
  4. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_alert.scss +25 -14
  5. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_badge.scss +14 -5
  6. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_breadcrumb.scss +22 -10
  7. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_button-group.scss +6 -3
  8. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_buttons.scss +133 -28
  9. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_card.scss +60 -37
  10. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_carousel.scss +22 -15
  11. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_close.scss +33 -10
  12. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_containers.scss +1 -1
  13. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_dropdown.scss +86 -76
  14. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_functions.scss +10 -10
  15. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_grid.scss +9 -3
  16. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_helpers.scss +3 -0
  17. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_list-group.scss +60 -37
  18. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_maps.scss +174 -0
  19. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_mixins.scss +1 -2
  20. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_modal.scss +71 -44
  21. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_nav.scss +86 -28
  22. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_navbar.scss +101 -147
  23. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_offcanvas.scss +121 -61
  24. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_pagination.scss +66 -21
  25. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_placeholders.scss +1 -1
  26. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_popover.scss +90 -52
  27. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_progress.scss +30 -10
  28. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_reboot.scss +31 -45
  29. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_root.scss +155 -22
  30. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_spinners.scss +38 -22
  31. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_tables.scss +40 -24
  32. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_toasts.scss +38 -16
  33. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_tooltip.scss +60 -56
  34. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_type.scss +2 -0
  35. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_utilities.scss +209 -33
  36. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_variables-dark.scss +87 -0
  37. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_variables.scss +404 -294
  38. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/bootstrap-grid.scss +4 -9
  39. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/bootstrap-reboot.scss +4 -7
  40. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/bootstrap-utilities.scss +7 -6
  41. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/bootstrap.scss +5 -6
  42. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/forms/_floating-labels.scss +37 -5
  43. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/forms/_form-check.scss +51 -14
  44. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/forms/_form-control.scss +36 -41
  45. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/forms/_form-range.scss +3 -3
  46. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/forms/_form-select.scss +12 -4
  47. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/forms/_input-group.scss +20 -9
  48. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/helpers/_color-bg.scss +7 -0
  49. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/helpers/_colored-links.scss +20 -2
  50. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/helpers/_focus-ring.scss +5 -0
  51. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/helpers/_icon-link.scss +25 -0
  52. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/helpers/_position.scss +7 -1
  53. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/helpers/_ratio.scss +2 -2
  54. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/helpers/_vr.scss +2 -2
  55. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_alert.scss +11 -4
  56. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_banner.scss +7 -0
  57. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_breakpoints.scss +8 -8
  58. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_buttons.scss +32 -95
  59. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_caret.scss +30 -25
  60. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_color-mode.scss +21 -0
  61. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_container.scss +4 -2
  62. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_forms.scss +38 -19
  63. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_gradients.scss +1 -1
  64. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_grid.scss +14 -14
  65. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_list-group.scss +2 -0
  66. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_pagination.scss +4 -25
  67. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_reset-text.scss +1 -1
  68. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_table-variants.scss +12 -9
  69. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_utilities.scss +14 -6
  70. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_visually-hidden.scss +5 -1
  71. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/vendor/_rfs.scss +23 -29
  72. data/app/assets/stylesheets/administrate-bootstrap-theme/components/_content_body.scss +21 -7
  73. data/app/assets/stylesheets/administrate-bootstrap-theme/components/_navigation.scss +4 -0
  74. data/app/assets/stylesheets/administrate-bootstrap-theme/components/_pagination.scss +11 -3
  75. data/lib/administrate-bootstrap-theme/version.rb +2 -2
  76. data/package.json +2 -2
  77. 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
  }
@@ -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(--#{$variable-prefix}#{$identifier}-bg-rgb), var(--#{$variable-prefix}#{$target}-opacity));
43
+ @return rgba(var(--#{$prefix}#{$identifier}-bg-rgb), var(--#{$prefix}#{$target}-opacity));
44
44
  } @if $identifier == "body" and $target == "text" {
45
- @return rgba(var(--#{$variable-prefix}#{$identifier}-color-rgb), var(--#{$variable-prefix}#{$target}-opacity));
45
+ @return rgba(var(--#{$prefix}#{$identifier}-color-rgb), var(--#{$prefix}#{$target}-opacity));
46
46
  } @else {
47
- @return rgba(var(--#{$variable-prefix}#{$identifier}-rgb), var(--#{$variable-prefix}#{$target}-opacity));
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(--#{$variable-prefix}#{$entry}), space);
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 Hugo Giraudel
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.0 relative luminance
181
- // See https://www.w3.org/WAI/GL/wiki/Relative_luminance
182
- // 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
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) < .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));
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