administrate-bootstrap-theme 1.0.6 → 1.1.0

Sign up to get free protection for your applications and to get access to all the features.
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