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
@@ -0,0 +1,25 @@
1
+ .icon-link {
2
+ display: inline-flex;
3
+ gap: $icon-link-gap;
4
+ align-items: center;
5
+ text-decoration-color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, .5));
6
+ text-underline-offset: $icon-link-underline-offset;
7
+ backface-visibility: hidden;
8
+
9
+ > .bi {
10
+ flex-shrink: 0;
11
+ width: $icon-link-icon-size;
12
+ height: $icon-link-icon-size;
13
+ fill: currentcolor;
14
+ @include transition($icon-link-icon-transition);
15
+ }
16
+ }
17
+
18
+ .icon-link-hover {
19
+ &:hover,
20
+ &:focus-visible {
21
+ > .bi {
22
+ transform: var(--#{$prefix}icon-link-transform, $icon-link-icon-transform);
23
+ }
24
+ }
25
+ }
@@ -16,7 +16,7 @@
16
16
  z-index: $zindex-fixed;
17
17
  }
18
18
 
19
- // Responsive sticky top
19
+ // Responsive sticky top and bottom
20
20
  @each $breakpoint in map-keys($grid-breakpoints) {
21
21
  @include media-breakpoint-up($breakpoint) {
22
22
  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
@@ -26,5 +26,11 @@
26
26
  top: 0;
27
27
  z-index: $zindex-sticky;
28
28
  }
29
+
30
+ .sticky#{$infix}-bottom {
31
+ position: sticky;
32
+ bottom: 0;
33
+ z-index: $zindex-sticky;
34
+ }
29
35
  }
30
36
  }
@@ -6,7 +6,7 @@
6
6
 
7
7
  &::before {
8
8
  display: block;
9
- padding-top: var(--#{$variable-prefix}aspect-ratio);
9
+ padding-top: var(--#{$prefix}aspect-ratio);
10
10
  content: "";
11
11
  }
12
12
 
@@ -21,6 +21,6 @@
21
21
 
22
22
  @each $key, $ratio in $aspect-ratios {
23
23
  .ratio-#{$key} {
24
- --#{$variable-prefix}aspect-ratio: #{$ratio};
24
+ --#{$prefix}aspect-ratio: #{$ratio};
25
25
  }
26
26
  }
@@ -1,8 +1,8 @@
1
1
  .vr {
2
2
  display: inline-block;
3
3
  align-self: stretch;
4
- width: 1px;
4
+ width: $vr-border-width;
5
5
  min-height: 1em;
6
- background-color: currentColor;
6
+ background-color: currentcolor;
7
7
  opacity: $hr-opacity;
8
8
  }
@@ -1,11 +1,18 @@
1
+ @include deprecate("`alert-variant()`", "v5.3.0", "v6.0.0");
2
+
1
3
  // scss-docs-start alert-variant-mixin
2
4
  @mixin alert-variant($background, $border, $color) {
3
- color: $color;
4
- @include gradient-bg($background);
5
- border-color: $border;
5
+ --#{$prefix}alert-color: #{$color};
6
+ --#{$prefix}alert-bg: #{$background};
7
+ --#{$prefix}alert-border-color: #{$border};
8
+ --#{$prefix}alert-link-color: #{shade-color($color, 20%)};
9
+
10
+ @if $enable-gradients {
11
+ background-image: var(--#{$prefix}gradient);
12
+ }
6
13
 
7
14
  .alert-link {
8
- color: shade-color($color, 20%);
15
+ color: var(--#{$prefix}alert-link-color);
9
16
  }
10
17
  }
11
18
  // scss-docs-end alert-variant-mixin
@@ -0,0 +1,7 @@
1
+ @mixin bsBanner($file) {
2
+ /*!
3
+ * Bootstrap #{$file} v5.3.3 (https://getbootstrap.com/)
4
+ * Copyright 2011-2024 The Bootstrap Authors
5
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
6
+ */
7
+ }
@@ -2,7 +2,7 @@
2
2
  //
3
3
  // Breakpoints are defined as a map of (name: minimum width), order from small to large:
4
4
  //
5
- // (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
5
+ // (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px)
6
6
  //
7
7
  // The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
8
8
 
@@ -10,9 +10,9 @@
10
10
  //
11
11
  // >> breakpoint-next(sm)
12
12
  // md
13
- // >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
13
+ // >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
14
14
  // md
15
- // >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
15
+ // >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl xxl))
16
16
  // md
17
17
  @function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
18
18
  $n: index($breakpoint-names, $name);
@@ -24,7 +24,7 @@
24
24
 
25
25
  // Minimum breakpoint width. Null for the smallest (first) breakpoint.
26
26
  //
27
- // >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
27
+ // >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
28
28
  // 576px
29
29
  @function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
30
30
  $min: map-get($breakpoints, $name);
@@ -38,7 +38,7 @@
38
38
  // Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
39
39
  // See https://bugs.webkit.org/show_bug.cgi?id=178261
40
40
  //
41
- // >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
41
+ // >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
42
42
  // 767.98px
43
43
  @function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
44
44
  $max: map-get($breakpoints, $name);
@@ -48,9 +48,9 @@
48
48
  // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
49
49
  // Useful for making responsive utilities.
50
50
  //
51
- // >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
51
+ // >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
52
52
  // "" (Returns a blank string)
53
- // >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
53
+ // >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
54
54
  // "-sm"
55
55
  @function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
56
56
  @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
@@ -109,7 +109,7 @@
109
109
  @mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
110
110
  $min: breakpoint-min($name, $breakpoints);
111
111
  $next: breakpoint-next($name, $breakpoints);
112
- $max: breakpoint-max($next);
112
+ $max: breakpoint-max($next, $breakpoints);
113
113
 
114
114
  @if $min != null and $max != null {
115
115
  @media (min-width: $min) and (max-width: $max) {
@@ -18,59 +18,20 @@
18
18
  $disabled-border: $border,
19
19
  $disabled-color: color-contrast($disabled-background)
20
20
  ) {
21
- color: $color;
22
- @include gradient-bg($background);
23
- border-color: $border;
24
- @include box-shadow($btn-box-shadow);
25
-
26
- &:hover {
27
- color: $hover-color;
28
- @include gradient-bg($hover-background);
29
- border-color: $hover-border;
30
- }
31
-
32
- .btn-check:focus + &,
33
- &:focus {
34
- color: $hover-color;
35
- @include gradient-bg($hover-background);
36
- border-color: $hover-border;
37
- @if $enable-shadows {
38
- @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
39
- } @else {
40
- // Avoid using mixin so we can pass custom focus shadow properly
41
- box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
42
- }
43
- }
44
-
45
- .btn-check:checked + &,
46
- .btn-check:active + &,
47
- &:active,
48
- &.active,
49
- .show > &.dropdown-toggle {
50
- color: $active-color;
51
- background-color: $active-background;
52
- // Remove CSS gradients if they're enabled
53
- background-image: if($enable-gradients, none, null);
54
- border-color: $active-border;
55
-
56
- &:focus {
57
- @if $enable-shadows {
58
- @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
59
- } @else {
60
- // Avoid using mixin so we can pass custom focus shadow properly
61
- box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
62
- }
63
- }
64
- }
65
-
66
- &:disabled,
67
- &.disabled {
68
- color: $disabled-color;
69
- background-color: $disabled-background;
70
- // Remove CSS gradients if they're enabled
71
- background-image: if($enable-gradients, none, null);
72
- border-color: $disabled-border;
73
- }
21
+ --#{$prefix}btn-color: #{$color};
22
+ --#{$prefix}btn-bg: #{$background};
23
+ --#{$prefix}btn-border-color: #{$border};
24
+ --#{$prefix}btn-hover-color: #{$hover-color};
25
+ --#{$prefix}btn-hover-bg: #{$hover-background};
26
+ --#{$prefix}btn-hover-border-color: #{$hover-border};
27
+ --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
28
+ --#{$prefix}btn-active-color: #{$active-color};
29
+ --#{$prefix}btn-active-bg: #{$active-background};
30
+ --#{$prefix}btn-active-border-color: #{$active-border};
31
+ --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
32
+ --#{$prefix}btn-disabled-color: #{$disabled-color};
33
+ --#{$prefix}btn-disabled-bg: #{$disabled-background};
34
+ --#{$prefix}btn-disabled-border-color: #{$disabled-border};
74
35
  }
75
36
  // scss-docs-end btn-variant-mixin
76
37
 
@@ -82,52 +43,28 @@
82
43
  $active-border: $color,
83
44
  $active-color: color-contrast($active-background)
84
45
  ) {
85
- color: $color;
86
- border-color: $color;
87
-
88
- &:hover {
89
- color: $color-hover;
90
- background-color: $active-background;
91
- border-color: $active-border;
92
- }
93
-
94
- .btn-check:focus + &,
95
- &:focus {
96
- box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
97
- }
98
-
99
- .btn-check:checked + &,
100
- .btn-check:active + &,
101
- &:active,
102
- &.active,
103
- &.dropdown-toggle.show {
104
- color: $active-color;
105
- background-color: $active-background;
106
- border-color: $active-border;
107
-
108
- &:focus {
109
- @if $enable-shadows {
110
- @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5));
111
- } @else {
112
- // Avoid using mixin so we can pass custom focus shadow properly
113
- box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
114
- }
115
- }
116
- }
117
-
118
- &:disabled,
119
- &.disabled {
120
- color: $color;
121
- background-color: transparent;
122
- }
46
+ --#{$prefix}btn-color: #{$color};
47
+ --#{$prefix}btn-border-color: #{$color};
48
+ --#{$prefix}btn-hover-color: #{$color-hover};
49
+ --#{$prefix}btn-hover-bg: #{$active-background};
50
+ --#{$prefix}btn-hover-border-color: #{$active-border};
51
+ --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
52
+ --#{$prefix}btn-active-color: #{$active-color};
53
+ --#{$prefix}btn-active-bg: #{$active-background};
54
+ --#{$prefix}btn-active-border-color: #{$active-border};
55
+ --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
56
+ --#{$prefix}btn-disabled-color: #{$color};
57
+ --#{$prefix}btn-disabled-bg: transparent;
58
+ --#{$prefix}btn-disabled-border-color: #{$color};
59
+ --#{$prefix}gradient: none;
123
60
  }
124
61
  // scss-docs-end btn-outline-variant-mixin
125
62
 
126
63
  // scss-docs-start btn-size-mixin
127
64
  @mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
128
- padding: $padding-y $padding-x;
129
- @include font-size($font-size);
130
- // Manually declare to provide an override to the browser default
131
- @include border-radius($border-radius, 0);
65
+ --#{$prefix}btn-padding-y: #{$padding-y};
66
+ --#{$prefix}btn-padding-x: #{$padding-x};
67
+ @include rfs($font-size, --#{$prefix}btn-font-size);
68
+ --#{$prefix}btn-border-radius: #{$border-radius};
132
69
  }
133
70
  // scss-docs-end btn-size-mixin
@@ -1,44 +1,49 @@
1
1
  // scss-docs-start caret-mixins
2
- @mixin caret-down {
3
- border-top: $caret-width solid;
4
- border-right: $caret-width solid transparent;
2
+ @mixin caret-down($width: $caret-width) {
3
+ border-top: $width solid;
4
+ border-right: $width solid transparent;
5
5
  border-bottom: 0;
6
- border-left: $caret-width solid transparent;
6
+ border-left: $width solid transparent;
7
7
  }
8
8
 
9
- @mixin caret-up {
9
+ @mixin caret-up($width: $caret-width) {
10
10
  border-top: 0;
11
- border-right: $caret-width solid transparent;
12
- border-bottom: $caret-width solid;
13
- border-left: $caret-width solid transparent;
11
+ border-right: $width solid transparent;
12
+ border-bottom: $width solid;
13
+ border-left: $width solid transparent;
14
14
  }
15
15
 
16
- @mixin caret-end {
17
- border-top: $caret-width solid transparent;
16
+ @mixin caret-end($width: $caret-width) {
17
+ border-top: $width solid transparent;
18
18
  border-right: 0;
19
- border-bottom: $caret-width solid transparent;
20
- border-left: $caret-width solid;
19
+ border-bottom: $width solid transparent;
20
+ border-left: $width solid;
21
21
  }
22
22
 
23
- @mixin caret-start {
24
- border-top: $caret-width solid transparent;
25
- border-right: $caret-width solid;
26
- border-bottom: $caret-width solid transparent;
23
+ @mixin caret-start($width: $caret-width) {
24
+ border-top: $width solid transparent;
25
+ border-right: $width solid;
26
+ border-bottom: $width solid transparent;
27
27
  }
28
28
 
29
- @mixin caret($direction: down) {
29
+ @mixin caret(
30
+ $direction: down,
31
+ $width: $caret-width,
32
+ $spacing: $caret-spacing,
33
+ $vertical-align: $caret-vertical-align
34
+ ) {
30
35
  @if $enable-caret {
31
36
  &::after {
32
37
  display: inline-block;
33
- margin-left: $caret-spacing;
34
- vertical-align: $caret-vertical-align;
38
+ margin-left: $spacing;
39
+ vertical-align: $vertical-align;
35
40
  content: "";
36
41
  @if $direction == down {
37
- @include caret-down();
42
+ @include caret-down($width);
38
43
  } @else if $direction == up {
39
- @include caret-up();
44
+ @include caret-up($width);
40
45
  } @else if $direction == end {
41
- @include caret-end();
46
+ @include caret-end($width);
42
47
  }
43
48
  }
44
49
 
@@ -49,10 +54,10 @@
49
54
 
50
55
  &::before {
51
56
  display: inline-block;
52
- margin-right: $caret-spacing;
53
- vertical-align: $caret-vertical-align;
57
+ margin-right: $spacing;
58
+ vertical-align: $vertical-align;
54
59
  content: "";
55
- @include caret-start();
60
+ @include caret-start($width);
56
61
  }
57
62
  }
58
63
 
@@ -0,0 +1,21 @@
1
+ // scss-docs-start color-mode-mixin
2
+ @mixin color-mode($mode: light, $root: false) {
3
+ @if $color-mode-type == "media-query" {
4
+ @if $root == true {
5
+ @media (prefers-color-scheme: $mode) {
6
+ :root {
7
+ @content;
8
+ }
9
+ }
10
+ } @else {
11
+ @media (prefers-color-scheme: $mode) {
12
+ @content;
13
+ }
14
+ }
15
+ } @else {
16
+ [data-bs-theme="#{$mode}"] {
17
+ @content;
18
+ }
19
+ }
20
+ }
21
+ // scss-docs-end color-mode-mixin
@@ -1,9 +1,11 @@
1
1
  // Container mixins
2
2
 
3
3
  @mixin make-container($gutter: $container-padding-x) {
4
+ --#{$prefix}gutter-x: #{$gutter};
5
+ --#{$prefix}gutter-y: 0;
4
6
  width: 100%;
5
- padding-right: var(--#{$variable-prefix}gutter-x, #{$gutter});
6
- padding-left: var(--#{$variable-prefix}gutter-x, #{$gutter});
7
+ padding-right: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
8
+ padding-left: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
7
9
  margin-right: auto;
8
10
  margin-left: auto;
9
11
  }
@@ -21,7 +21,8 @@
21
21
  $icon,
22
22
  $tooltip-color: color-contrast($color),
23
23
  $tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
24
- $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity)
24
+ $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity),
25
+ $border-color: $color
25
26
  ) {
26
27
  .#{$state}-feedback {
27
28
  display: none;
@@ -56,7 +57,7 @@
56
57
 
57
58
  .form-control {
58
59
  @include form-validation-state-selector($state) {
59
- border-color: $color;
60
+ border-color: $border-color;
60
61
 
61
62
  @if $enable-validation-icons {
62
63
  padding-right: $input-height-inner;
@@ -67,8 +68,13 @@
67
68
  }
68
69
 
69
70
  &:focus {
70
- border-color: $color;
71
- box-shadow: $focus-box-shadow;
71
+ border-color: $border-color;
72
+ @if $enable-shadows {
73
+ @include box-shadow($input-box-shadow, $focus-box-shadow);
74
+ } @else {
75
+ // Avoid using mixin so we can pass custom focus shadow properly
76
+ box-shadow: $focus-box-shadow;
77
+ }
72
78
  }
73
79
  }
74
80
  }
@@ -85,28 +91,41 @@
85
91
 
86
92
  .form-select {
87
93
  @include form-validation-state-selector($state) {
88
- border-color: $color;
94
+ border-color: $border-color;
89
95
 
90
96
  @if $enable-validation-icons {
91
97
  &:not([multiple]):not([size]),
92
98
  &:not([multiple])[size="1"] {
99
+ --#{$prefix}form-select-bg-icon: #{escape-svg($icon)};
93
100
  padding-right: $form-select-feedback-icon-padding-end;
94
- background-image: escape-svg($form-select-indicator), escape-svg($icon);
95
101
  background-position: $form-select-bg-position, $form-select-feedback-icon-position;
96
102
  background-size: $form-select-bg-size, $form-select-feedback-icon-size;
97
103
  }
98
104
  }
99
105
 
100
106
  &:focus {
101
- border-color: $color;
102
- box-shadow: $focus-box-shadow;
107
+ border-color: $border-color;
108
+ @if $enable-shadows {
109
+ @include box-shadow($form-select-box-shadow, $focus-box-shadow);
110
+ } @else {
111
+ // Avoid using mixin so we can pass custom focus shadow properly
112
+ box-shadow: $focus-box-shadow;
113
+ }
114
+ }
115
+ }
116
+ }
117
+
118
+ .form-control-color {
119
+ @include form-validation-state-selector($state) {
120
+ @if $enable-validation-icons {
121
+ width: add($form-color-width, $input-height-inner);
103
122
  }
104
123
  }
105
124
  }
106
125
 
107
126
  .form-check-input {
108
127
  @include form-validation-state-selector($state) {
109
- border-color: $color;
128
+ border-color: $border-color;
110
129
 
111
130
  &:checked {
112
131
  background-color: $color;
@@ -127,16 +146,16 @@
127
146
  }
128
147
  }
129
148
 
130
- .input-group .form-control,
131
- .input-group .form-select {
132
- @include form-validation-state-selector($state) {
133
- @if $state == "valid" {
134
- z-index: 1;
135
- } @else if $state == "invalid" {
136
- z-index: 2;
137
- }
138
- &:focus {
139
- z-index: 3;
149
+ .input-group {
150
+ > .form-control:not(:focus),
151
+ > .form-select:not(:focus),
152
+ > .form-floating:not(:focus-within) {
153
+ @include form-validation-state-selector($state) {
154
+ @if $state == "valid" {
155
+ z-index: 3;
156
+ } @else if $state == "invalid" {
157
+ z-index: 4;
158
+ }
140
159
  }
141
160
  }
142
161
  }
@@ -5,7 +5,7 @@
5
5
  background-color: $color;
6
6
 
7
7
  @if $enable-gradients {
8
- background-image: var(--#{$variable-prefix}gradient);
8
+ background-image: var(--#{$prefix}gradient);
9
9
  }
10
10
  }
11
11
  // scss-docs-end gradient-bg-mixin
@@ -3,17 +3,17 @@
3
3
  // Generate semantic grid columns with these mixins.
4
4
 
5
5
  @mixin make-row($gutter: $grid-gutter-width) {
6
- --#{$variable-prefix}gutter-x: #{$gutter};
7
- --#{$variable-prefix}gutter-y: 0;
6
+ --#{$prefix}gutter-x: #{$gutter};
7
+ --#{$prefix}gutter-y: 0;
8
8
  display: flex;
9
9
  flex-wrap: wrap;
10
10
  // TODO: Revisit calc order after https://github.com/react-bootstrap/react-bootstrap/issues/6039 is fixed
11
- margin-top: calc(-1 * var(--#{$variable-prefix}gutter-y)); // stylelint-disable-line function-disallowed-list
12
- margin-right: calc(-.5 * var(--#{$variable-prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
13
- margin-left: calc(-.5 * var(--#{$variable-prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
11
+ margin-top: calc(-1 * var(--#{$prefix}gutter-y)); // stylelint-disable-line function-disallowed-list
12
+ margin-right: calc(-.5 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
13
+ margin-left: calc(-.5 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
14
14
  }
15
15
 
16
- @mixin make-col-ready($gutter: $grid-gutter-width) {
16
+ @mixin make-col-ready() {
17
17
  // Add box sizing if only the grid is loaded
18
18
  box-sizing: if(variable-exists(include-column-box-sizing) and $include-column-box-sizing, border-box, null);
19
19
  // Prevent columns from becoming too narrow when at smaller grid tiers by
@@ -22,9 +22,9 @@
22
22
  flex-shrink: 0;
23
23
  width: 100%;
24
24
  max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
25
- padding-right: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
26
- padding-left: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
27
- margin-top: var(--#{$variable-prefix}gutter-y);
25
+ padding-right: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
26
+ padding-left: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
27
+ margin-top: var(--#{$prefix}gutter-y);
28
28
  }
29
29
 
30
30
  @mixin make-col($size: false, $columns: $grid-columns) {
@@ -51,12 +51,12 @@
51
51
  // Row columns
52
52
  //
53
53
  // Specify on a parent element(e.g., .row) to force immediate children into NN
54
- // numberof columns. Supports wrapping to new lines, but does not do a Masonry
54
+ // number of columns. Supports wrapping to new lines, but does not do a Masonry
55
55
  // style grid.
56
56
  @mixin row-cols($count) {
57
57
  > * {
58
58
  flex: 0 0 auto;
59
- width: divide(100%, $count);
59
+ width: percentage(divide(1, $count));
60
60
  }
61
61
  }
62
62
 
@@ -114,12 +114,12 @@
114
114
  @each $key, $value in $gutters {
115
115
  .g#{$infix}-#{$key},
116
116
  .gx#{$infix}-#{$key} {
117
- --#{$variable-prefix}gutter-x: #{$value};
117
+ --#{$prefix}gutter-x: #{$value};
118
118
  }
119
119
 
120
120
  .g#{$infix}-#{$key},
121
121
  .gy#{$infix}-#{$key} {
122
- --#{$variable-prefix}gutter-y: #{$value};
122
+ --#{$prefix}gutter-y: #{$value};
123
123
  }
124
124
  }
125
125
  }
@@ -138,7 +138,7 @@
138
138
  }
139
139
  }
140
140
 
141
- // Start with `1` because `0` is and invalid value.
141
+ // Start with `1` because `0` is an invalid value.
142
142
  // Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.
143
143
  @for $i from 1 through ($columns - 1) {
144
144
  .g-start#{$infix}-#{$i} {
@@ -1,3 +1,5 @@
1
+ @include deprecate("`list-group-item-variant()`", "v5.3.0", "v6.0.0");
2
+
1
3
  // List Groups
2
4
 
3
5
  // scss-docs-start list-group-mixin
@@ -2,30 +2,9 @@
2
2
 
3
3
  // scss-docs-start pagination-mixin
4
4
  @mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
5
- .page-link {
6
- padding: $padding-y $padding-x;
7
- @include font-size($font-size);
8
- }
9
-
10
- .page-item {
11
- @if $pagination-margin-start == (-$pagination-border-width) {
12
- &:first-child {
13
- .page-link {
14
- @include border-start-radius($border-radius);
15
- }
16
- }
17
-
18
- &:last-child {
19
- .page-link {
20
- @include border-end-radius($border-radius);
21
- }
22
- }
23
- } @else {
24
- //Add border-radius to all pageLinks in case they have left margin
25
- .page-link {
26
- @include border-radius($border-radius);
27
- }
28
- }
29
- }
5
+ --#{$prefix}pagination-padding-x: #{$padding-x};
6
+ --#{$prefix}pagination-padding-y: #{$padding-y};
7
+ @include rfs($font-size, --#{$prefix}pagination-font-size);
8
+ --#{$prefix}pagination-border-radius: #{$border-radius};
30
9
  }
31
10
  // scss-docs-end pagination-mixin