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.
- package/LICENSE +2 -2
- package/README.md +5 -5
- package/_accordion.scss +149 -118
- package/_alert.scss +18 -4
- package/_badge.scss +14 -5
- package/_breadcrumb.scss +22 -10
- package/_button-group.scss +142 -139
- package/_buttons.scss +201 -111
- package/_card.scss +55 -37
- package/_close.scss +1 -1
- package/_containers.scss +1 -1
- package/_dropdown.scss +249 -240
- package/_functions.scss +302 -302
- package/_grid.scss +3 -3
- package/_helpers.scss +1 -0
- package/_list-group.scss +192 -174
- package/_maps.scss +54 -0
- package/_modal.scss +237 -209
- package/_nav.scss +172 -139
- package/_navbar.scss +278 -335
- package/_offcanvas.scss +144 -83
- package/_pagination.scss +109 -64
- package/_placeholders.scss +1 -1
- package/_popover.scss +196 -158
- package/_progress.scss +20 -9
- package/_reboot.scss +25 -40
- package/_root.scss +40 -21
- package/_spinners.scss +38 -22
- package/_tables.scss +32 -23
- package/_toasts.scss +71 -51
- package/_tooltip.scss +61 -56
- package/_type.scss +2 -0
- package/_utilities.scss +43 -26
- package/_variables.scss +1634 -1641
- package/bootstrap-grid.scss +3 -6
- package/bootstrap-reboot.scss +3 -7
- package/bootstrap-utilities.scss +3 -6
- package/bootstrap.scss +4 -6
- package/forms/_floating-labels.scss +75 -63
- package/forms/_form-check.scss +28 -5
- package/forms/_form-control.scss +12 -37
- package/forms/_form-select.scss +0 -1
- package/forms/_input-group.scss +132 -121
- package/helpers/_color-bg.scss +10 -0
- package/helpers/_colored-links.scss +2 -2
- package/helpers/_position.scss +7 -1
- package/helpers/_ratio.scss +2 -2
- package/helpers/_vr.scss +1 -1
- package/mixins/_alert.scss +7 -3
- package/mixins/_banner.scss +9 -0
- package/mixins/_breakpoints.scss +8 -8
- package/mixins/_buttons.scss +32 -95
- package/mixins/_container.scss +4 -2
- package/mixins/_forms.scss +152 -144
- package/mixins/_gradients.scss +1 -1
- package/mixins/_grid.scss +12 -12
- package/mixins/_pagination.scss +4 -25
- package/mixins/_reset-text.scss +1 -1
- package/mixins/_table-variants.scss +12 -9
- package/mixins/_utilities.scss +97 -89
- 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
|
}
|
package/helpers/_position.scss
CHANGED
@@ -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
|
}
|
package/helpers/_ratio.scss
CHANGED
@@ -6,7 +6,7 @@
|
|
6
6
|
|
7
7
|
&::before {
|
8
8
|
display: block;
|
9
|
-
padding-top: var(--#{$
|
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
|
-
--#{$
|
24
|
+
--#{$prefix}aspect-ratio: #{$ratio};
|
25
25
|
}
|
26
26
|
}
|
package/helpers/_vr.scss
CHANGED
package/mixins/_alert.scss
CHANGED
@@ -1,8 +1,12 @@
|
|
1
1
|
// scss-docs-start alert-variant-mixin
|
2
2
|
@mixin alert-variant($background, $border, $color) {
|
3
|
-
color: $color;
|
4
|
-
|
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%);
|
package/mixins/_breakpoints.scss
CHANGED
@@ -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) {
|
package/mixins/_buttons.scss
CHANGED
@@ -18,59 +18,20 @@
|
|
18
18
|
$disabled-border: $border,
|
19
19
|
$disabled-color: color-contrast($disabled-background)
|
20
20
|
) {
|
21
|
-
color: $color;
|
22
|
-
|
23
|
-
border-color: $border;
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
}
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
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
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
}
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
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
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
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
|
package/mixins/_container.scss
CHANGED
@@ -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(--#{$
|
6
|
-
padding-left: var(--#{$
|
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
|
}
|
package/mixins/_forms.scss
CHANGED
@@ -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-
|
108
|
-
@include form-validation-state-selector($state) {
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
color: $color;
|
121
|
-
}
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
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
|