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
@@ -27,7 +27,7 @@
27
27
 
28
28
  :root {
29
29
  @if $font-size-root != null {
30
- font-size: var(--#{$variable-prefix}-root-font-size);
30
+ @include font-size(var(--#{$prefix}root-font-size));
31
31
  }
32
32
 
33
33
  @if $enable-smooth-scroll {
@@ -48,13 +48,13 @@
48
48
  // scss-docs-start reboot-body-rules
49
49
  body {
50
50
  margin: 0; // 1
51
- font-family: var(--#{$variable-prefix}body-font-family);
52
- @include font-size(var(--#{$variable-prefix}body-font-size));
53
- font-weight: var(--#{$variable-prefix}body-font-weight);
54
- line-height: var(--#{$variable-prefix}body-line-height);
55
- color: var(--#{$variable-prefix}body-color);
56
- text-align: var(--#{$variable-prefix}body-text-align);
57
- background-color: var(--#{$variable-prefix}body-bg); // 2
51
+ font-family: var(--#{$prefix}body-font-family);
52
+ @include font-size(var(--#{$prefix}body-font-size));
53
+ font-weight: var(--#{$prefix}body-font-weight);
54
+ line-height: var(--#{$prefix}body-line-height);
55
+ color: var(--#{$prefix}body-color);
56
+ text-align: var(--#{$prefix}body-text-align);
57
+ background-color: var(--#{$prefix}body-bg); // 2
58
58
  -webkit-text-size-adjust: 100%; // 3
59
59
  -webkit-tap-highlight-color: rgba($black, 0); // 4
60
60
  }
@@ -64,20 +64,15 @@ body {
64
64
  // Content grouping
65
65
  //
66
66
  // 1. Reset Firefox's gray color
67
- // 2. Set correct height and prevent the `size` attribute to make the `hr` look like an input field
68
67
 
69
68
  hr {
70
69
  margin: $hr-margin-y 0;
71
70
  color: $hr-color; // 1
72
- background-color: currentColor;
73
71
  border: 0;
72
+ border-top: $hr-border-width solid $hr-border-color;
74
73
  opacity: $hr-opacity;
75
74
  }
76
75
 
77
- hr:not([size]) {
78
- height: $hr-height; // 2
79
- }
80
-
81
76
 
82
77
  // Typography
83
78
  //
@@ -92,7 +87,7 @@ hr:not([size]) {
92
87
  font-style: $headings-font-style;
93
88
  font-weight: $headings-font-weight;
94
89
  line-height: $headings-line-height;
95
- color: $headings-color;
90
+ color: var(--#{$prefix}heading-color);
96
91
  }
97
92
 
98
93
  h1 {
@@ -139,16 +134,14 @@ p {
139
134
 
140
135
  // Abbreviations
141
136
  //
142
- // 1. Duplicate behavior to the data-bs-* attribute for our tooltip plugin
143
- // 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
144
- // 3. Add explicit cursor to indicate changed behavior.
145
- // 4. Prevent the text-decoration to be skipped.
137
+ // 1. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
138
+ // 2. Add explicit cursor to indicate changed behavior.
139
+ // 3. Prevent the text-decoration to be skipped.
146
140
 
147
- abbr[title],
148
- abbr[data-bs-original-title] { // 1
149
- text-decoration: underline dotted; // 2
150
- cursor: help; // 3
151
- text-decoration-skip-ink: none; // 4
141
+ abbr[title] {
142
+ text-decoration: underline dotted; // 1
143
+ cursor: help; // 2
144
+ text-decoration-skip-ink: none; // 3
152
145
  }
153
146
 
154
147
 
@@ -224,7 +217,8 @@ small {
224
217
 
225
218
  mark {
226
219
  padding: $mark-padding;
227
- background-color: $mark-bg;
220
+ color: var(--#{$prefix}highlight-color);
221
+ background-color: var(--#{$prefix}highlight-bg);
228
222
  }
229
223
 
230
224
 
@@ -248,11 +242,11 @@ sup { top: -.5em; }
248
242
  // Links
249
243
 
250
244
  a {
251
- color: $link-color;
245
+ color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, 1));
252
246
  text-decoration: $link-decoration;
253
247
 
254
248
  &:hover {
255
- color: $link-hover-color;
249
+ --#{$prefix}link-color-rgb: var(--#{$prefix}link-hover-color-rgb);
256
250
  text-decoration: $link-hover-decoration;
257
251
  }
258
252
  }
@@ -279,8 +273,6 @@ kbd,
279
273
  samp {
280
274
  font-family: $font-family-code;
281
275
  @include font-size(1em); // Correct the odd `em` font sizing in all browsers.
282
- direction: ltr #{"/* rtl:ignore */"};
283
- unicode-bidi: bidi-override;
284
276
  }
285
277
 
286
278
  // 1. Remove browser default top margin
@@ -305,7 +297,7 @@ pre {
305
297
 
306
298
  code {
307
299
  @include font-size($code-font-size);
308
- color: $code-color;
300
+ color: var(--#{$prefix}code-color);
309
301
  word-wrap: break-word;
310
302
 
311
303
  // Streamline the style when inside anchors to avoid broken underline and more
@@ -445,11 +437,11 @@ select {
445
437
  }
446
438
  }
447
439
 
448
- // Remove the dropdown arrow in Chrome from inputs built with datalists.
440
+ // Remove the dropdown arrow only from text type inputs built with datalists in Chrome.
449
441
  // See https://stackoverflow.com/a/54997118
450
442
 
451
- [list]::-webkit-calendar-picker-indicator {
452
- display: none;
443
+ [list]:not([type="date"]):not([type="datetime-local"]):not([type="month"]):not([type="week"]):not([type="time"])::-webkit-calendar-picker-indicator {
444
+ display: none !important;
453
445
  }
454
446
 
455
447
  // 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
@@ -533,15 +525,15 @@ legend {
533
525
  height: auto;
534
526
  }
535
527
 
536
- // 1. Correct the outline style in Safari.
537
- // 2. This overrides the extra rounded corners on search inputs in iOS so that our
528
+ // 1. This overrides the extra rounded corners on search inputs in iOS so that our
538
529
  // `.form-control` class can properly style them. Note that this cannot simply
539
530
  // be added to `.form-control` as it's not specific enough. For details, see
540
531
  // https://github.com/twbs/bootstrap/issues/11586.
532
+ // 2. Correct the outline style in Safari.
541
533
 
542
534
  [type="search"] {
543
- outline-offset: -2px; // 1
544
- -webkit-appearance: textfield; // 2
535
+ -webkit-appearance: textfield; // 1
536
+ outline-offset: -2px; // 2
545
537
  }
546
538
 
547
539
  // 1. A few input types should stay LTR
@@ -571,16 +563,10 @@ legend {
571
563
  }
572
564
 
573
565
 
574
- // Inherit font family and line height for file input buttons
575
-
576
- ::file-selector-button {
577
- font: inherit;
578
- }
579
-
580
- // 1. Change font properties to `inherit`
566
+ // 1. Inherit font family and line height for file input buttons
581
567
  // 2. Correct the inability to style clickable types in iOS and Safari.
582
568
 
583
- ::-webkit-file-upload-button {
569
+ ::file-selector-button {
584
570
  font: inherit; // 1
585
571
  -webkit-appearance: button; // 2
586
572
  }
@@ -1,4 +1,5 @@
1
- :root {
1
+ :root,
2
+ [data-bs-theme="light"] {
2
3
  // Note: Custom variable values only support SassScript inside `#{}`.
3
4
 
4
5
  // Colors
@@ -6,48 +7,181 @@
6
7
  // Generate palettes for full colors, grays, and theme colors.
7
8
 
8
9
  @each $color, $value in $colors {
9
- --#{$variable-prefix}#{$color}: #{$value};
10
+ --#{$prefix}#{$color}: #{$value};
10
11
  }
11
12
 
12
13
  @each $color, $value in $grays {
13
- --#{$variable-prefix}gray-#{$color}: #{$value};
14
+ --#{$prefix}gray-#{$color}: #{$value};
14
15
  }
15
16
 
16
17
  @each $color, $value in $theme-colors {
17
- --#{$variable-prefix}#{$color}: #{$value};
18
+ --#{$prefix}#{$color}: #{$value};
18
19
  }
19
20
 
20
21
  @each $color, $value in $theme-colors-rgb {
21
- --#{$variable-prefix}#{$color}-rgb: #{$value};
22
+ --#{$prefix}#{$color}-rgb: #{$value};
22
23
  }
23
24
 
24
- --#{$variable-prefix}white-rgb: #{to-rgb($white)};
25
- --#{$variable-prefix}black-rgb: #{to-rgb($black)};
26
- --#{$variable-prefix}body-rgb: #{to-rgb($body-color)};
25
+ @each $color, $value in $theme-colors-text {
26
+ --#{$prefix}#{$color}-text-emphasis: #{$value};
27
+ }
28
+
29
+ @each $color, $value in $theme-colors-bg-subtle {
30
+ --#{$prefix}#{$color}-bg-subtle: #{$value};
31
+ }
32
+
33
+ @each $color, $value in $theme-colors-border-subtle {
34
+ --#{$prefix}#{$color}-border-subtle: #{$value};
35
+ }
36
+
37
+ --#{$prefix}white-rgb: #{to-rgb($white)};
38
+ --#{$prefix}black-rgb: #{to-rgb($black)};
27
39
 
28
40
  // Fonts
29
41
 
30
42
  // Note: Use `inspect` for lists so that quoted items keep the quotes.
31
43
  // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
32
- --#{$variable-prefix}font-sans-serif: #{inspect($font-family-sans-serif)};
33
- --#{$variable-prefix}font-monospace: #{inspect($font-family-monospace)};
34
- --#{$variable-prefix}gradient: #{$gradient};
44
+ --#{$prefix}font-sans-serif: #{inspect($font-family-sans-serif)};
45
+ --#{$prefix}font-monospace: #{inspect($font-family-monospace)};
46
+ --#{$prefix}gradient: #{$gradient};
35
47
 
36
48
  // Root and body
37
- // stylelint-disable custom-property-empty-line-before
38
49
  // scss-docs-start root-body-variables
39
50
  @if $font-size-root != null {
40
- --#{$variable-prefix}root-font-size: #{$font-size-root};
51
+ --#{$prefix}root-font-size: #{$font-size-root};
41
52
  }
42
- --#{$variable-prefix}body-font-family: #{$font-family-base};
43
- --#{$variable-prefix}body-font-size: #{$font-size-base};
44
- --#{$variable-prefix}body-font-weight: #{$font-weight-base};
45
- --#{$variable-prefix}body-line-height: #{$line-height-base};
46
- --#{$variable-prefix}body-color: #{$body-color};
53
+ --#{$prefix}body-font-family: #{inspect($font-family-base)};
54
+ @include rfs($font-size-base, --#{$prefix}body-font-size);
55
+ --#{$prefix}body-font-weight: #{$font-weight-base};
56
+ --#{$prefix}body-line-height: #{$line-height-base};
47
57
  @if $body-text-align != null {
48
- --#{$variable-prefix}body-text-align: #{$body-text-align};
58
+ --#{$prefix}body-text-align: #{$body-text-align};
49
59
  }
50
- --#{$variable-prefix}body-bg: #{$body-bg};
60
+
61
+ --#{$prefix}body-color: #{$body-color};
62
+ --#{$prefix}body-color-rgb: #{to-rgb($body-color)};
63
+ --#{$prefix}body-bg: #{$body-bg};
64
+ --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};
65
+
66
+ --#{$prefix}emphasis-color: #{$body-emphasis-color};
67
+ --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color)};
68
+
69
+ --#{$prefix}secondary-color: #{$body-secondary-color};
70
+ --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color)};
71
+ --#{$prefix}secondary-bg: #{$body-secondary-bg};
72
+ --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg)};
73
+
74
+ --#{$prefix}tertiary-color: #{$body-tertiary-color};
75
+ --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
76
+ --#{$prefix}tertiary-bg: #{$body-tertiary-bg};
77
+ --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};
51
78
  // scss-docs-end root-body-variables
52
- // stylelint-enable custom-property-empty-line-before
79
+
80
+ --#{$prefix}heading-color: #{$headings-color};
81
+
82
+ --#{$prefix}link-color: #{$link-color};
83
+ --#{$prefix}link-color-rgb: #{to-rgb($link-color)};
84
+ --#{$prefix}link-decoration: #{$link-decoration};
85
+
86
+ --#{$prefix}link-hover-color: #{$link-hover-color};
87
+ --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color)};
88
+
89
+ @if $link-hover-decoration != null {
90
+ --#{$prefix}link-hover-decoration: #{$link-hover-decoration};
91
+ }
92
+
93
+ --#{$prefix}code-color: #{$code-color};
94
+ --#{$prefix}highlight-color: #{$mark-color};
95
+ --#{$prefix}highlight-bg: #{$mark-bg};
96
+
97
+ // scss-docs-start root-border-var
98
+ --#{$prefix}border-width: #{$border-width};
99
+ --#{$prefix}border-style: #{$border-style};
100
+ --#{$prefix}border-color: #{$border-color};
101
+ --#{$prefix}border-color-translucent: #{$border-color-translucent};
102
+
103
+ --#{$prefix}border-radius: #{$border-radius};
104
+ --#{$prefix}border-radius-sm: #{$border-radius-sm};
105
+ --#{$prefix}border-radius-lg: #{$border-radius-lg};
106
+ --#{$prefix}border-radius-xl: #{$border-radius-xl};
107
+ --#{$prefix}border-radius-xxl: #{$border-radius-xxl};
108
+ --#{$prefix}border-radius-2xl: var(--#{$prefix}border-radius-xxl); // Deprecated in v5.3.0 for consistency
109
+ --#{$prefix}border-radius-pill: #{$border-radius-pill};
110
+ // scss-docs-end root-border-var
111
+
112
+ --#{$prefix}box-shadow: #{$box-shadow};
113
+ --#{$prefix}box-shadow-sm: #{$box-shadow-sm};
114
+ --#{$prefix}box-shadow-lg: #{$box-shadow-lg};
115
+ --#{$prefix}box-shadow-inset: #{$box-shadow-inset};
116
+
117
+ // Focus styles
118
+ // scss-docs-start root-focus-variables
119
+ --#{$prefix}focus-ring-width: #{$focus-ring-width};
120
+ --#{$prefix}focus-ring-opacity: #{$focus-ring-opacity};
121
+ --#{$prefix}focus-ring-color: #{$focus-ring-color};
122
+ // scss-docs-end root-focus-variables
123
+
124
+ // scss-docs-start root-form-validation-variables
125
+ --#{$prefix}form-valid-color: #{$form-valid-color};
126
+ --#{$prefix}form-valid-border-color: #{$form-valid-border-color};
127
+ --#{$prefix}form-invalid-color: #{$form-invalid-color};
128
+ --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color};
129
+ // scss-docs-end root-form-validation-variables
130
+ }
131
+
132
+ @if $enable-dark-mode {
133
+ @include color-mode(dark, true) {
134
+ color-scheme: dark;
135
+
136
+ // scss-docs-start root-dark-mode-vars
137
+ --#{$prefix}body-color: #{$body-color-dark};
138
+ --#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)};
139
+ --#{$prefix}body-bg: #{$body-bg-dark};
140
+ --#{$prefix}body-bg-rgb: #{to-rgb($body-bg-dark)};
141
+
142
+ --#{$prefix}emphasis-color: #{$body-emphasis-color-dark};
143
+ --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)};
144
+
145
+ --#{$prefix}secondary-color: #{$body-secondary-color-dark};
146
+ --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color-dark)};
147
+ --#{$prefix}secondary-bg: #{$body-secondary-bg-dark};
148
+ --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg-dark)};
149
+
150
+ --#{$prefix}tertiary-color: #{$body-tertiary-color-dark};
151
+ --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)};
152
+ --#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
153
+ --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
154
+
155
+ @each $color, $value in $theme-colors-text-dark {
156
+ --#{$prefix}#{$color}-text-emphasis: #{$value};
157
+ }
158
+
159
+ @each $color, $value in $theme-colors-bg-subtle-dark {
160
+ --#{$prefix}#{$color}-bg-subtle: #{$value};
161
+ }
162
+
163
+ @each $color, $value in $theme-colors-border-subtle-dark {
164
+ --#{$prefix}#{$color}-border-subtle: #{$value};
165
+ }
166
+
167
+ --#{$prefix}heading-color: #{$headings-color-dark};
168
+
169
+ --#{$prefix}link-color: #{$link-color-dark};
170
+ --#{$prefix}link-hover-color: #{$link-hover-color-dark};
171
+ --#{$prefix}link-color-rgb: #{to-rgb($link-color-dark)};
172
+ --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)};
173
+
174
+ --#{$prefix}code-color: #{$code-color-dark};
175
+ --#{$prefix}highlight-color: #{$mark-color-dark};
176
+ --#{$prefix}highlight-bg: #{$mark-bg-dark};
177
+
178
+ --#{$prefix}border-color: #{$border-color-dark};
179
+ --#{$prefix}border-color-translucent: #{$border-color-translucent-dark};
180
+
181
+ --#{$prefix}form-valid-color: #{$form-valid-color-dark};
182
+ --#{$prefix}form-valid-border-color: #{$form-valid-border-color-dark};
183
+ --#{$prefix}form-invalid-color: #{$form-invalid-color-dark};
184
+ --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color-dark};
185
+ // scss-docs-end root-dark-mode-vars
186
+ }
53
187
  }
@@ -2,6 +2,17 @@
2
2
  // Rotating border
3
3
  //
4
4
 
5
+ .spinner-grow,
6
+ .spinner-border {
7
+ display: inline-block;
8
+ width: var(--#{$prefix}spinner-width);
9
+ height: var(--#{$prefix}spinner-height);
10
+ vertical-align: var(--#{$prefix}spinner-vertical-align);
11
+ // stylelint-disable-next-line property-disallowed-list
12
+ border-radius: 50%;
13
+ animation: var(--#{$prefix}spinner-animation-speed) linear infinite var(--#{$prefix}spinner-animation-name);
14
+ }
15
+
5
16
  // scss-docs-start spinner-border-keyframes
6
17
  @keyframes spinner-border {
7
18
  to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
@@ -9,21 +20,25 @@
9
20
  // scss-docs-end spinner-border-keyframes
10
21
 
11
22
  .spinner-border {
12
- display: inline-block;
13
- width: $spinner-width;
14
- height: $spinner-height;
15
- vertical-align: $spinner-vertical-align;
16
- border: $spinner-border-width solid currentColor;
23
+ // scss-docs-start spinner-border-css-vars
24
+ --#{$prefix}spinner-width: #{$spinner-width};
25
+ --#{$prefix}spinner-height: #{$spinner-height};
26
+ --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
27
+ --#{$prefix}spinner-border-width: #{$spinner-border-width};
28
+ --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
29
+ --#{$prefix}spinner-animation-name: spinner-border;
30
+ // scss-docs-end spinner-border-css-vars
31
+
32
+ border: var(--#{$prefix}spinner-border-width) solid currentcolor;
17
33
  border-right-color: transparent;
18
- // stylelint-disable-next-line property-disallowed-list
19
- border-radius: 50%;
20
- animation: $spinner-animation-speed linear infinite spinner-border;
21
34
  }
22
35
 
23
36
  .spinner-border-sm {
24
- width: $spinner-width-sm;
25
- height: $spinner-height-sm;
26
- border-width: $spinner-border-width-sm;
37
+ // scss-docs-start spinner-border-sm-css-vars
38
+ --#{$prefix}spinner-width: #{$spinner-width-sm};
39
+ --#{$prefix}spinner-height: #{$spinner-height-sm};
40
+ --#{$prefix}spinner-border-width: #{$spinner-border-width-sm};
41
+ // scss-docs-end spinner-border-sm-css-vars
27
42
  }
28
43
 
29
44
  //
@@ -43,27 +58,28 @@
43
58
  // scss-docs-end spinner-grow-keyframes
44
59
 
45
60
  .spinner-grow {
46
- display: inline-block;
47
- width: $spinner-width;
48
- height: $spinner-height;
49
- vertical-align: $spinner-vertical-align;
50
- background-color: currentColor;
51
- // stylelint-disable-next-line property-disallowed-list
52
- border-radius: 50%;
61
+ // scss-docs-start spinner-grow-css-vars
62
+ --#{$prefix}spinner-width: #{$spinner-width};
63
+ --#{$prefix}spinner-height: #{$spinner-height};
64
+ --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
65
+ --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
66
+ --#{$prefix}spinner-animation-name: spinner-grow;
67
+ // scss-docs-end spinner-grow-css-vars
68
+
69
+ background-color: currentcolor;
53
70
  opacity: 0;
54
- animation: $spinner-animation-speed linear infinite spinner-grow;
55
71
  }
56
72
 
57
73
  .spinner-grow-sm {
58
- width: $spinner-width-sm;
59
- height: $spinner-height-sm;
74
+ --#{$prefix}spinner-width: #{$spinner-width-sm};
75
+ --#{$prefix}spinner-height: #{$spinner-height-sm};
60
76
  }
61
77
 
62
78
  @if $enable-reduced-motion {
63
79
  @media (prefers-reduced-motion: reduce) {
64
80
  .spinner-border,
65
81
  .spinner-grow {
66
- animation-duration: $spinner-animation-speed * 2;
82
+ --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed * 2};
67
83
  }
68
84
  }
69
85
  }
@@ -3,20 +3,27 @@
3
3
  //
4
4
 
5
5
  .table {
6
- --#{$variable-prefix}table-bg: #{$table-bg};
7
- --#{$variable-prefix}table-accent-bg: #{$table-accent-bg};
8
- --#{$variable-prefix}table-striped-color: #{$table-striped-color};
9
- --#{$variable-prefix}table-striped-bg: #{$table-striped-bg};
10
- --#{$variable-prefix}table-active-color: #{$table-active-color};
11
- --#{$variable-prefix}table-active-bg: #{$table-active-bg};
12
- --#{$variable-prefix}table-hover-color: #{$table-hover-color};
13
- --#{$variable-prefix}table-hover-bg: #{$table-hover-bg};
6
+ // Reset needed for nesting tables
7
+ --#{$prefix}table-color-type: initial;
8
+ --#{$prefix}table-bg-type: initial;
9
+ --#{$prefix}table-color-state: initial;
10
+ --#{$prefix}table-bg-state: initial;
11
+ // End of reset
12
+ --#{$prefix}table-color: #{$table-color};
13
+ --#{$prefix}table-bg: #{$table-bg};
14
+ --#{$prefix}table-border-color: #{$table-border-color};
15
+ --#{$prefix}table-accent-bg: #{$table-accent-bg};
16
+ --#{$prefix}table-striped-color: #{$table-striped-color};
17
+ --#{$prefix}table-striped-bg: #{$table-striped-bg};
18
+ --#{$prefix}table-active-color: #{$table-active-color};
19
+ --#{$prefix}table-active-bg: #{$table-active-bg};
20
+ --#{$prefix}table-hover-color: #{$table-hover-color};
21
+ --#{$prefix}table-hover-bg: #{$table-hover-bg};
14
22
 
15
23
  width: 100%;
16
24
  margin-bottom: $spacer;
17
- color: $table-color;
18
25
  vertical-align: $table-cell-vertical-align;
19
- border-color: $table-border-color;
26
+ border-color: var(--#{$prefix}table-border-color);
20
27
 
21
28
  // Target th & td
22
29
  // We need the child combinator to prevent styles leaking to nested tables which doesn't have a `.table` class.
@@ -25,9 +32,11 @@
25
32
  // stylelint-disable-next-line selector-max-universal
26
33
  > :not(caption) > * > * {
27
34
  padding: $table-cell-padding-y $table-cell-padding-x;
28
- background-color: var(--#{$variable-prefix}table-bg);
35
+ // Following the precept of cascades: https://codepen.io/miriamsuzanne/full/vYNgodb
36
+ color: var(--#{$prefix}table-color-state, var(--#{$prefix}table-color-type, var(--#{$prefix}table-color)));
37
+ background-color: var(--#{$prefix}table-bg);
29
38
  border-bottom-width: $table-border-width;
30
- box-shadow: inset 0 0 0 9999px var(--#{$variable-prefix}table-accent-bg);
39
+ box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-bg-state, var(--#{$prefix}table-bg-type, var(--#{$prefix}table-accent-bg)));
31
40
  }
32
41
 
33
42
  > tbody {
@@ -37,13 +46,11 @@
37
46
  > thead {
38
47
  vertical-align: bottom;
39
48
  }
40
-
41
- // Highlight border color between thead, tbody and tfoot.
42
- > :not(:last-child) > :last-child > * {
43
- border-bottom-color: $table-group-separator-color;
44
- }
45
49
  }
46
50
 
51
+ .table-group-divider {
52
+ border-top: calc(#{$table-border-width} * 2) solid $table-group-separator-color; // stylelint-disable-line function-disallowed-list
53
+ }
47
54
 
48
55
  //
49
56
  // Change placement of captions with a class
@@ -72,7 +79,7 @@
72
79
  //
73
80
  // When borders are added on all sides of the cells, the corners can render odd when
74
81
  // these borders do not have the same color or if they are semi-transparent.
75
- // Therefor we add top and border bottoms to the `tr`s and left and right borders
82
+ // Therefore we add top and border bottoms to the `tr`s and left and right borders
76
83
  // to the `td`s or `th`s
77
84
 
78
85
  .table-bordered {
@@ -91,16 +98,29 @@
91
98
  > :not(caption) > * > * {
92
99
  border-bottom-width: 0;
93
100
  }
101
+
102
+ > :not(:first-child) {
103
+ border-top-width: 0;
104
+ }
94
105
  }
95
106
 
96
107
  // Zebra-striping
97
108
  //
98
109
  // Default zebra-stripe styles (alternating gray and transparent backgrounds)
99
110
 
111
+ // For rows
100
112
  .table-striped {
101
- > tbody > tr:nth-of-type(#{$table-striped-order}) {
102
- --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-striped-bg);
103
- color: var(--#{$variable-prefix}table-striped-color);
113
+ > tbody > tr:nth-of-type(#{$table-striped-order}) > * {
114
+ --#{$prefix}table-color-type: var(--#{$prefix}table-striped-color);
115
+ --#{$prefix}table-bg-type: var(--#{$prefix}table-striped-bg);
116
+ }
117
+ }
118
+
119
+ // For columns
120
+ .table-striped-columns {
121
+ > :not(caption) > tr > :nth-child(#{$table-striped-columns-order}) {
122
+ --#{$prefix}table-color-type: var(--#{$prefix}table-striped-color);
123
+ --#{$prefix}table-bg-type: var(--#{$prefix}table-striped-bg);
104
124
  }
105
125
  }
106
126
 
@@ -109,8 +129,8 @@
109
129
  // The `.table-active` class can be added to highlight rows or cells
110
130
 
111
131
  .table-active {
112
- --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-active-bg);
113
- color: var(--#{$variable-prefix}table-active-color);
132
+ --#{$prefix}table-color-state: var(--#{$prefix}table-active-color);
133
+ --#{$prefix}table-bg-state: var(--#{$prefix}table-active-bg);
114
134
  }
115
135
 
116
136
  // Hover effect
@@ -118,9 +138,9 @@
118
138
  // Placed here since it has to come after the potential zebra striping
119
139
 
120
140
  .table-hover {
121
- > tbody > tr:hover {
122
- --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-hover-bg);
123
- color: var(--#{$variable-prefix}table-hover-color);
141
+ > tbody > tr:hover > * {
142
+ --#{$prefix}table-color-state: var(--#{$prefix}table-hover-color);
143
+ --#{$prefix}table-bg-state: var(--#{$prefix}table-hover-bg);
124
144
  }
125
145
  }
126
146