bootstrap-scss 5.1.3 → 5.2.1

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 (61) hide show
  1. package/LICENSE +2 -2
  2. package/README.md +5 -5
  3. package/_accordion.scss +149 -118
  4. package/_alert.scss +18 -4
  5. package/_badge.scss +14 -5
  6. package/_breadcrumb.scss +22 -10
  7. package/_button-group.scss +142 -139
  8. package/_buttons.scss +201 -111
  9. package/_card.scss +55 -37
  10. package/_close.scss +1 -1
  11. package/_containers.scss +1 -1
  12. package/_dropdown.scss +249 -240
  13. package/_functions.scss +302 -302
  14. package/_grid.scss +3 -3
  15. package/_helpers.scss +1 -0
  16. package/_list-group.scss +192 -174
  17. package/_maps.scss +54 -0
  18. package/_modal.scss +237 -209
  19. package/_nav.scss +172 -139
  20. package/_navbar.scss +278 -335
  21. package/_offcanvas.scss +144 -83
  22. package/_pagination.scss +109 -64
  23. package/_placeholders.scss +1 -1
  24. package/_popover.scss +196 -158
  25. package/_progress.scss +20 -9
  26. package/_reboot.scss +25 -40
  27. package/_root.scss +40 -21
  28. package/_spinners.scss +38 -22
  29. package/_tables.scss +32 -23
  30. package/_toasts.scss +71 -51
  31. package/_tooltip.scss +61 -56
  32. package/_type.scss +2 -0
  33. package/_utilities.scss +43 -26
  34. package/_variables.scss +1634 -1641
  35. package/bootstrap-grid.scss +3 -6
  36. package/bootstrap-reboot.scss +3 -7
  37. package/bootstrap-utilities.scss +3 -6
  38. package/bootstrap.scss +4 -6
  39. package/forms/_floating-labels.scss +75 -63
  40. package/forms/_form-check.scss +28 -5
  41. package/forms/_form-control.scss +12 -37
  42. package/forms/_form-select.scss +0 -1
  43. package/forms/_input-group.scss +132 -121
  44. package/helpers/_color-bg.scss +10 -0
  45. package/helpers/_colored-links.scss +2 -2
  46. package/helpers/_position.scss +7 -1
  47. package/helpers/_ratio.scss +2 -2
  48. package/helpers/_vr.scss +1 -1
  49. package/mixins/_alert.scss +7 -3
  50. package/mixins/_banner.scss +9 -0
  51. package/mixins/_breakpoints.scss +8 -8
  52. package/mixins/_buttons.scss +32 -95
  53. package/mixins/_container.scss +4 -2
  54. package/mixins/_forms.scss +152 -144
  55. package/mixins/_gradients.scss +1 -1
  56. package/mixins/_grid.scss +12 -12
  57. package/mixins/_pagination.scss +4 -25
  58. package/mixins/_reset-text.scss +1 -1
  59. package/mixins/_table-variants.scss +12 -9
  60. package/mixins/_utilities.scss +97 -89
  61. package/package.json +1 -1
@@ -0,0 +1,10 @@
1
+ // stylelint-disable function-name-case
2
+
3
+ // All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
4
+ @each $color, $value in $theme-colors {
5
+ $color-rgb: to-rgb($value);
6
+ .text-bg-#{$color} {
7
+ color: color-contrast($value) if($enable-important-utilities, !important, null);
8
+ background-color: RGBA($color-rgb, var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
9
+ }
10
+ }
@@ -1,11 +1,11 @@
1
1
  @each $color, $value in $theme-colors {
2
2
  .link-#{$color} {
3
- color: $value;
3
+ color: $value !important; // stylelint-disable-line declaration-no-important
4
4
 
5
5
  @if $link-shade-percentage != 0 {
6
6
  &:hover,
7
7
  &:focus {
8
- color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
8
+ color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage)) !important; // stylelint-disable-line declaration-no-important
9
9
  }
10
10
  }
11
11
  }
@@ -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
  }
package/helpers/_vr.scss CHANGED
@@ -3,6 +3,6 @@
3
3
  align-self: stretch;
4
4
  width: 1px;
5
5
  min-height: 1em;
6
- background-color: currentColor;
6
+ background-color: currentcolor;
7
7
  opacity: $hr-opacity;
8
8
  }
@@ -1,8 +1,12 @@
1
1
  // scss-docs-start alert-variant-mixin
2
2
  @mixin alert-variant($background, $border, $color) {
3
- color: $color;
4
- @include gradient-bg($background);
5
- border-color: $border;
3
+ --#{$prefix}alert-color: #{$color};
4
+ --#{$prefix}alert-bg: #{$background};
5
+ --#{$prefix}alert-border-color: #{$border};
6
+
7
+ @if $enable-gradients {
8
+ background-image: var(--#{$prefix}gradient);
9
+ }
6
10
 
7
11
  .alert-link {
8
12
  color: shade-color($color, 20%);
@@ -0,0 +1,9 @@
1
+ @mixin bsBanner($file) {
2
+ /*!
3
+ * Bootstrap #{$file} v5.2.1 (https://getbootstrap.com/)
4
+ * Copyright 2011-2022 The Bootstrap Authors
5
+ * Copyright 2011-2022 Twitter, Inc.
6
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
7
+ */
8
+ }
9
+
@@ -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,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
  }
@@ -1,144 +1,152 @@
1
- // This mixin uses an `if()` technique to be compatible with Dart Sass
2
- // See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details
3
-
4
- // scss-docs-start form-validation-mixins
5
- @mixin form-validation-state-selector($state) {
6
- @if ($state == "valid" or $state == "invalid") {
7
- .was-validated #{if(&, "&", "")}:#{$state},
8
- #{if(&, "&", "")}.is-#{$state} {
9
- @content;
10
- }
11
- } @else {
12
- #{if(&, "&", "")}.is-#{$state} {
13
- @content;
14
- }
15
- }
16
- }
17
-
18
- @mixin form-validation-state(
19
- $state,
20
- $color,
21
- $icon,
22
- $tooltip-color: color-contrast($color),
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)
25
- ) {
26
- .#{$state}-feedback {
27
- display: none;
28
- width: 100%;
29
- margin-top: $form-feedback-margin-top;
30
- @include font-size($form-feedback-font-size);
31
- font-style: $form-feedback-font-style;
32
- color: $color;
33
- }
34
-
35
- .#{$state}-tooltip {
36
- position: absolute;
37
- top: 100%;
38
- z-index: 5;
39
- display: none;
40
- max-width: 100%; // Contain to parent when possible
41
- padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
42
- margin-top: .1rem;
43
- @include font-size($form-feedback-tooltip-font-size);
44
- line-height: $form-feedback-tooltip-line-height;
45
- color: $tooltip-color;
46
- background-color: $tooltip-bg-color;
47
- @include border-radius($form-feedback-tooltip-border-radius);
48
- }
49
-
50
- @include form-validation-state-selector($state) {
51
- ~ .#{$state}-feedback,
52
- ~ .#{$state}-tooltip {
53
- display: block;
54
- }
55
- }
56
-
57
- .form-control {
58
- @include form-validation-state-selector($state) {
59
- border-color: $color;
60
-
61
- @if $enable-validation-icons {
62
- padding-right: $input-height-inner;
63
- background-image: escape-svg($icon);
64
- background-repeat: no-repeat;
65
- background-position: right $input-height-inner-quarter center;
66
- background-size: $input-height-inner-half $input-height-inner-half;
67
- }
68
-
69
- &:focus {
70
- border-color: $color;
71
- box-shadow: $focus-box-shadow;
72
- }
73
- }
74
- }
75
-
76
- // stylelint-disable-next-line selector-no-qualifying-type
77
- textarea.form-control {
78
- @include form-validation-state-selector($state) {
79
- @if $enable-validation-icons {
80
- padding-right: $input-height-inner;
81
- background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
82
- }
83
- }
84
- }
85
-
86
- .form-select {
87
- @include form-validation-state-selector($state) {
88
- border-color: $color;
89
-
90
- @if $enable-validation-icons {
91
- &:not([multiple]):not([size]),
92
- &:not([multiple])[size="1"] {
93
- padding-right: $form-select-feedback-icon-padding-end;
94
- background-image: escape-svg($form-select-indicator), escape-svg($icon);
95
- background-position: $form-select-bg-position, $form-select-feedback-icon-position;
96
- background-size: $form-select-bg-size, $form-select-feedback-icon-size;
97
- }
98
- }
99
-
100
- &:focus {
101
- border-color: $color;
102
- box-shadow: $focus-box-shadow;
103
- }
104
- }
105
- }
106
-
107
- .form-check-input {
108
- @include form-validation-state-selector($state) {
109
- border-color: $color;
110
-
111
- &:checked {
112
- background-color: $color;
113
- }
114
-
115
- &:focus {
116
- box-shadow: $focus-box-shadow;
117
- }
118
-
119
- ~ .form-check-label {
120
- color: $color;
121
- }
122
- }
123
- }
124
- .form-check-inline .form-check-input {
125
- ~ .#{$state}-feedback {
126
- margin-left: .5em;
127
- }
128
- }
129
-
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;
140
- }
141
- }
142
- }
143
- }
144
- // scss-docs-end form-validation-mixins
1
+ // This mixin uses an `if()` technique to be compatible with Dart Sass
2
+ // See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details
3
+
4
+ // scss-docs-start form-validation-mixins
5
+ @mixin form-validation-state-selector($state) {
6
+ @if ($state == "valid" or $state == "invalid") {
7
+ .was-validated #{if(&, "&", "")}:#{$state},
8
+ #{if(&, "&", "")}.is-#{$state} {
9
+ @content;
10
+ }
11
+ } @else {
12
+ #{if(&, "&", "")}.is-#{$state} {
13
+ @content;
14
+ }
15
+ }
16
+ }
17
+
18
+ @mixin form-validation-state(
19
+ $state,
20
+ $color,
21
+ $icon,
22
+ $tooltip-color: color-contrast($color),
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)
25
+ ) {
26
+ .#{$state}-feedback {
27
+ display: none;
28
+ width: 100%;
29
+ margin-top: $form-feedback-margin-top;
30
+ @include font-size($form-feedback-font-size);
31
+ font-style: $form-feedback-font-style;
32
+ color: $color;
33
+ }
34
+
35
+ .#{$state}-tooltip {
36
+ position: absolute;
37
+ top: 100%;
38
+ z-index: 5;
39
+ display: none;
40
+ max-width: 100%; // Contain to parent when possible
41
+ padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
42
+ margin-top: .1rem;
43
+ @include font-size($form-feedback-tooltip-font-size);
44
+ line-height: $form-feedback-tooltip-line-height;
45
+ color: $tooltip-color;
46
+ background-color: $tooltip-bg-color;
47
+ @include border-radius($form-feedback-tooltip-border-radius);
48
+ }
49
+
50
+ @include form-validation-state-selector($state) {
51
+ ~ .#{$state}-feedback,
52
+ ~ .#{$state}-tooltip {
53
+ display: block;
54
+ }
55
+ }
56
+
57
+ .form-control {
58
+ @include form-validation-state-selector($state) {
59
+ border-color: $color;
60
+
61
+ @if $enable-validation-icons {
62
+ padding-right: $input-height-inner;
63
+ background-image: escape-svg($icon);
64
+ background-repeat: no-repeat;
65
+ background-position: right $input-height-inner-quarter center;
66
+ background-size: $input-height-inner-half $input-height-inner-half;
67
+ }
68
+
69
+ &:focus {
70
+ border-color: $color;
71
+ box-shadow: $focus-box-shadow;
72
+ }
73
+ }
74
+ }
75
+
76
+ // stylelint-disable-next-line selector-no-qualifying-type
77
+ textarea.form-control {
78
+ @include form-validation-state-selector($state) {
79
+ @if $enable-validation-icons {
80
+ padding-right: $input-height-inner;
81
+ background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
82
+ }
83
+ }
84
+ }
85
+
86
+ .form-select {
87
+ @include form-validation-state-selector($state) {
88
+ border-color: $color;
89
+
90
+ @if $enable-validation-icons {
91
+ &:not([multiple]):not([size]),
92
+ &:not([multiple])[size="1"] {
93
+ padding-right: $form-select-feedback-icon-padding-end;
94
+ background-image: escape-svg($form-select-indicator), escape-svg($icon);
95
+ background-position: $form-select-bg-position, $form-select-feedback-icon-position;
96
+ background-size: $form-select-bg-size, $form-select-feedback-icon-size;
97
+ }
98
+ }
99
+
100
+ &:focus {
101
+ border-color: $color;
102
+ box-shadow: $focus-box-shadow;
103
+ }
104
+ }
105
+ }
106
+
107
+ .form-control-color {
108
+ @include form-validation-state-selector($state) {
109
+ @if $enable-validation-icons {
110
+ width: add($form-color-width, $input-height-inner);
111
+ }
112
+ }
113
+ }
114
+
115
+ .form-check-input {
116
+ @include form-validation-state-selector($state) {
117
+ border-color: $color;
118
+
119
+ &:checked {
120
+ background-color: $color;
121
+ }
122
+
123
+ &:focus {
124
+ box-shadow: $focus-box-shadow;
125
+ }
126
+
127
+ ~ .form-check-label {
128
+ color: $color;
129
+ }
130
+ }
131
+ }
132
+ .form-check-inline .form-check-input {
133
+ ~ .#{$state}-feedback {
134
+ margin-left: .5em;
135
+ }
136
+ }
137
+
138
+ .input-group {
139
+ > .form-control:not(:focus),
140
+ > .form-select:not(:focus),
141
+ > .form-floating:not(:focus-within) {
142
+ @include form-validation-state-selector($state) {
143
+ @if $state == "valid" {
144
+ z-index: 3;
145
+ } @else if $state == "invalid" {
146
+ z-index: 4;
147
+ }
148
+ }
149
+ }
150
+ }
151
+ }
152
+ // scss-docs-end form-validation-mixins
@@ -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