bootstrap 4.2.1 → 4.5.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (101) hide show
  1. checksums.yaml +4 -4
  2. data/.travis.yml +15 -1
  3. data/CHANGELOG.md +2 -14
  4. data/README.md +1 -1
  5. data/assets/javascripts/bootstrap-sprockets.js +7 -7
  6. data/assets/javascripts/bootstrap.js +1054 -893
  7. data/assets/javascripts/bootstrap.min.js +4 -4
  8. data/assets/javascripts/bootstrap/alert.js +35 -57
  9. data/assets/javascripts/bootstrap/button.js +95 -69
  10. data/assets/javascripts/bootstrap/carousel.js +109 -165
  11. data/assets/javascripts/bootstrap/collapse.js +58 -114
  12. data/assets/javascripts/bootstrap/dropdown.js +138 -191
  13. data/assets/javascripts/bootstrap/modal.js +170 -176
  14. data/assets/javascripts/bootstrap/popover.js +31 -87
  15. data/assets/javascripts/bootstrap/scrollspy.js +54 -114
  16. data/assets/javascripts/bootstrap/tab.js +62 -81
  17. data/assets/javascripts/bootstrap/toast.js +80 -117
  18. data/assets/javascripts/bootstrap/tooltip.js +269 -157
  19. data/assets/javascripts/bootstrap/util.js +34 -9
  20. data/assets/stylesheets/_bootstrap-grid.scss +4 -4
  21. data/assets/stylesheets/_bootstrap-reboot.scss +4 -4
  22. data/assets/stylesheets/_bootstrap.scss +4 -4
  23. data/assets/stylesheets/bootstrap/_badge.scss +3 -2
  24. data/assets/stylesheets/bootstrap/_breadcrumb.scss +4 -1
  25. data/assets/stylesheets/bootstrap/_button-group.scss +1 -1
  26. data/assets/stylesheets/bootstrap/_buttons.scss +13 -11
  27. data/assets/stylesheets/bootstrap/_card.scss +49 -73
  28. data/assets/stylesheets/bootstrap/_carousel.scss +7 -8
  29. data/assets/stylesheets/bootstrap/_close.scss +3 -7
  30. data/assets/stylesheets/bootstrap/_code.scss +6 -6
  31. data/assets/stylesheets/bootstrap/_custom-forms.scss +40 -24
  32. data/assets/stylesheets/bootstrap/_dropdown.scss +24 -23
  33. data/assets/stylesheets/bootstrap/_forms.scss +38 -25
  34. data/assets/stylesheets/bootstrap/_functions.scss +62 -7
  35. data/assets/stylesheets/bootstrap/_grid.scss +32 -11
  36. data/assets/stylesheets/bootstrap/_images.scss +3 -3
  37. data/assets/stylesheets/bootstrap/_input-group.scss +4 -5
  38. data/assets/stylesheets/bootstrap/_jumbotron.scss +1 -0
  39. data/assets/stylesheets/bootstrap/_list-group.scss +62 -29
  40. data/assets/stylesheets/bootstrap/_mixins.scss +9 -3
  41. data/assets/stylesheets/bootstrap/_modal.scss +65 -11
  42. data/assets/stylesheets/bootstrap/_nav.scss +6 -3
  43. data/assets/stylesheets/bootstrap/_navbar.scss +48 -23
  44. data/assets/stylesheets/bootstrap/_pagination.scss +3 -7
  45. data/assets/stylesheets/bootstrap/_popover.scss +54 -67
  46. data/assets/stylesheets/bootstrap/_print.scss +3 -3
  47. data/assets/stylesheets/bootstrap/_progress.scss +19 -6
  48. data/assets/stylesheets/bootstrap/_reboot.scss +51 -33
  49. data/assets/stylesheets/bootstrap/_root.scss +1 -0
  50. data/assets/stylesheets/bootstrap/_spinners.scss +3 -0
  51. data/assets/stylesheets/bootstrap/_tables.scss +6 -8
  52. data/assets/stylesheets/bootstrap/_toasts.scss +7 -4
  53. data/assets/stylesheets/bootstrap/_tooltip.scss +1 -1
  54. data/assets/stylesheets/bootstrap/_transitions.scss +0 -2
  55. data/assets/stylesheets/bootstrap/_type.scss +17 -17
  56. data/assets/stylesheets/bootstrap/_utilities.scss +2 -0
  57. data/assets/stylesheets/bootstrap/_variables.scss +168 -119
  58. data/assets/stylesheets/bootstrap/mixins/_background-variant.scss +5 -3
  59. data/assets/stylesheets/bootstrap/mixins/_badge.scss +7 -1
  60. data/assets/stylesheets/bootstrap/mixins/_border-radius.scss +51 -10
  61. data/assets/stylesheets/bootstrap/mixins/_box-shadow.scss +16 -1
  62. data/assets/stylesheets/bootstrap/mixins/_buttons.scss +14 -15
  63. data/assets/stylesheets/bootstrap/mixins/_caret.scss +12 -12
  64. data/assets/stylesheets/bootstrap/mixins/_deprecate.scss +10 -0
  65. data/assets/stylesheets/bootstrap/mixins/_float.scss +6 -3
  66. data/assets/stylesheets/bootstrap/mixins/_forms.scss +40 -60
  67. data/assets/stylesheets/bootstrap/mixins/_grid-framework.scss +29 -15
  68. data/assets/stylesheets/bootstrap/mixins/_grid.scss +25 -7
  69. data/assets/stylesheets/bootstrap/mixins/_hover.scss +4 -4
  70. data/assets/stylesheets/bootstrap/mixins/_image.scss +3 -3
  71. data/assets/stylesheets/bootstrap/mixins/_list-group.scss +1 -1
  72. data/assets/stylesheets/bootstrap/mixins/_lists.scss +1 -1
  73. data/assets/stylesheets/bootstrap/mixins/_nav-divider.scss +2 -1
  74. data/assets/stylesheets/bootstrap/mixins/_pagination.scss +1 -1
  75. data/assets/stylesheets/bootstrap/mixins/_reset-text.scss +2 -2
  76. data/assets/stylesheets/bootstrap/mixins/_screen-reader.scss +3 -2
  77. data/assets/stylesheets/bootstrap/mixins/_size.scss +1 -0
  78. data/assets/stylesheets/bootstrap/mixins/_table-row.scss +1 -1
  79. data/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss +7 -4
  80. data/assets/stylesheets/bootstrap/mixins/_text-hide.scss +1 -3
  81. data/assets/stylesheets/bootstrap/mixins/_transition.scss +17 -7
  82. data/assets/stylesheets/bootstrap/mixins/_visibility.scss +1 -0
  83. data/assets/stylesheets/bootstrap/utilities/_background.scss +2 -2
  84. data/assets/stylesheets/bootstrap/utilities/_borders.scss +13 -1
  85. data/assets/stylesheets/bootstrap/utilities/_display.scss +6 -18
  86. data/assets/stylesheets/bootstrap/utilities/_float.scss +5 -3
  87. data/assets/stylesheets/bootstrap/utilities/_interactions.scss +5 -0
  88. data/assets/stylesheets/bootstrap/utilities/_stretched-link.scss +19 -0
  89. data/assets/stylesheets/bootstrap/utilities/_text.scss +8 -3
  90. data/assets/stylesheets/bootstrap/utilities/_visibility.scss +4 -2
  91. data/assets/stylesheets/bootstrap/vendor/_rfs.scss +204 -0
  92. data/bootstrap.gemspec +1 -1
  93. data/lib/bootstrap/version.rb +2 -2
  94. data/tasks/updater/js.rb +1 -1
  95. data/tasks/updater/network.rb +2 -2
  96. data/test/dummy_rails/app/assets/config/manifest.js +3 -0
  97. data/test/dummy_rails/app/assets/stylesheets/.browserslistrc +1 -0
  98. data/test/gemfiles/rails_6_0.gemfile +7 -0
  99. data/test/support/dummy_rails_integration.rb +3 -1
  100. data/test/test_helper.rb +18 -13
  101. metadata +14 -5
@@ -2,20 +2,22 @@
2
2
 
3
3
  // Contextual backgrounds
4
4
 
5
- @mixin bg-variant($parent, $color) {
5
+ @mixin bg-variant($parent, $color, $ignore-warning: false) {
6
6
  #{$parent} {
7
7
  background-color: $color !important;
8
8
  }
9
9
  a#{$parent},
10
10
  button#{$parent} {
11
- @include hover-focus {
11
+ @include hover-focus() {
12
12
  background-color: darken($color, 10%) !important;
13
13
  }
14
14
  }
15
+ @include deprecate("The `bg-variant` mixin", "v4.4.0", "v5", $ignore-warning);
15
16
  }
16
17
 
17
- @mixin bg-gradient-variant($parent, $color) {
18
+ @mixin bg-gradient-variant($parent, $color, $ignore-warning: false) {
18
19
  #{$parent} {
19
20
  background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important;
20
21
  }
22
+ @include deprecate("The `bg-gradient-variant` mixin", "v4.5.0", "v5", $ignore-warning);
21
23
  }
@@ -3,9 +3,15 @@
3
3
  background-color: $bg;
4
4
 
5
5
  @at-root a#{&} {
6
- @include hover-focus {
6
+ @include hover-focus() {
7
7
  color: color-yiq($bg);
8
8
  background-color: darken($bg, 10%);
9
9
  }
10
+
11
+ &:focus,
12
+ &.focus {
13
+ outline: 0;
14
+ box-shadow: 0 0 0 $badge-focus-width rgba($bg, .5);
15
+ }
10
16
  }
11
17
  }
@@ -1,35 +1,76 @@
1
+ // stylelint-disable property-blacklist
1
2
  // Single side border-radius
2
3
 
3
- @mixin border-radius($radius: $border-radius) {
4
+ // Helper function to replace negative values with 0
5
+ @function valid-radius($radius) {
6
+ $return: ();
7
+ @each $value in $radius {
8
+ @if type-of($value) == number {
9
+ $return: append($return, max($value, 0));
10
+ } @else {
11
+ $return: append($return, $value);
12
+ }
13
+ }
14
+ @return $return;
15
+ }
16
+
17
+ @mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {
4
18
  @if $enable-rounded {
5
- border-radius: $radius;
19
+ border-radius: valid-radius($radius);
20
+ }
21
+ @else if $fallback-border-radius != false {
22
+ border-radius: $fallback-border-radius;
6
23
  }
7
24
  }
8
25
 
9
26
  @mixin border-top-radius($radius) {
10
27
  @if $enable-rounded {
11
- border-top-left-radius: $radius;
12
- border-top-right-radius: $radius;
28
+ border-top-left-radius: valid-radius($radius);
29
+ border-top-right-radius: valid-radius($radius);
13
30
  }
14
31
  }
15
32
 
16
33
  @mixin border-right-radius($radius) {
17
34
  @if $enable-rounded {
18
- border-top-right-radius: $radius;
19
- border-bottom-right-radius: $radius;
35
+ border-top-right-radius: valid-radius($radius);
36
+ border-bottom-right-radius: valid-radius($radius);
20
37
  }
21
38
  }
22
39
 
23
40
  @mixin border-bottom-radius($radius) {
24
41
  @if $enable-rounded {
25
- border-bottom-right-radius: $radius;
26
- border-bottom-left-radius: $radius;
42
+ border-bottom-right-radius: valid-radius($radius);
43
+ border-bottom-left-radius: valid-radius($radius);
27
44
  }
28
45
  }
29
46
 
30
47
  @mixin border-left-radius($radius) {
31
48
  @if $enable-rounded {
32
- border-top-left-radius: $radius;
33
- border-bottom-left-radius: $radius;
49
+ border-top-left-radius: valid-radius($radius);
50
+ border-bottom-left-radius: valid-radius($radius);
51
+ }
52
+ }
53
+
54
+ @mixin border-top-left-radius($radius) {
55
+ @if $enable-rounded {
56
+ border-top-left-radius: valid-radius($radius);
57
+ }
58
+ }
59
+
60
+ @mixin border-top-right-radius($radius) {
61
+ @if $enable-rounded {
62
+ border-top-right-radius: valid-radius($radius);
63
+ }
64
+ }
65
+
66
+ @mixin border-bottom-right-radius($radius) {
67
+ @if $enable-rounded {
68
+ border-bottom-right-radius: valid-radius($radius);
69
+ }
70
+ }
71
+
72
+ @mixin border-bottom-left-radius($radius) {
73
+ @if $enable-rounded {
74
+ border-bottom-left-radius: valid-radius($radius);
34
75
  }
35
76
  }
@@ -1,5 +1,20 @@
1
1
  @mixin box-shadow($shadow...) {
2
2
  @if $enable-shadows {
3
- box-shadow: $shadow;
3
+ $result: ();
4
+
5
+ @if (length($shadow) == 1) {
6
+ // We can pass `@include box-shadow(none);`
7
+ $result: $shadow;
8
+ } @else {
9
+ // Filter to avoid invalid properties for example `box-shadow: none, 1px 1px black;`
10
+ @for $i from 1 through length($shadow) {
11
+ @if nth($shadow, $i) != "none" {
12
+ $result: append($result, nth($shadow, $i), "comma");
13
+ }
14
+ }
15
+ }
16
+ @if (length($result) > 0) {
17
+ box-shadow: $result;
18
+ }
4
19
  }
5
20
  }
@@ -9,7 +9,7 @@
9
9
  border-color: $border;
10
10
  @include box-shadow($btn-box-shadow);
11
11
 
12
- @include hover {
12
+ @include hover() {
13
13
  color: color-yiq($hover-background);
14
14
  @include gradient-bg($hover-background);
15
15
  border-color: $hover-border;
@@ -17,10 +17,13 @@
17
17
 
18
18
  &:focus,
19
19
  &.focus {
20
- // Avoid using mixin so we can pass custom focus shadow properly
20
+ color: color-yiq($hover-background);
21
+ @include gradient-bg($hover-background);
22
+ border-color: $hover-border;
21
23
  @if $enable-shadows {
22
- box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
24
+ @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5));
23
25
  } @else {
26
+ // Avoid using mixin so we can pass custom focus shadow properly
24
27
  box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
25
28
  }
26
29
  }
@@ -48,10 +51,10 @@
48
51
  border-color: $active-border;
49
52
 
50
53
  &:focus {
51
- // Avoid using mixin so we can pass custom focus shadow properly
52
- @if $enable-shadows {
53
- box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
54
+ @if $enable-shadows and $btn-active-box-shadow != none {
55
+ @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5));
54
56
  } @else {
57
+ // Avoid using mixin so we can pass custom focus shadow properly
55
58
  box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
56
59
  }
57
60
  }
@@ -62,7 +65,7 @@
62
65
  color: $color;
63
66
  border-color: $color;
64
67
 
65
- @include hover {
68
+ @include hover() {
66
69
  color: $color-hover;
67
70
  background-color: $active-background;
68
71
  border-color: $active-border;
@@ -87,10 +90,10 @@
87
90
  border-color: $active-border;
88
91
 
89
92
  &:focus {
90
- // Avoid using mixin so we can pass custom focus shadow properly
91
93
  @if $enable-shadows and $btn-active-box-shadow != none {
92
- box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5);
94
+ @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5));
93
95
  } @else {
96
+ // Avoid using mixin so we can pass custom focus shadow properly
94
97
  box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
95
98
  }
96
99
  }
@@ -100,12 +103,8 @@
100
103
  // Button sizes
101
104
  @mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
102
105
  padding: $padding-y $padding-x;
103
- font-size: $font-size;
106
+ @include font-size($font-size);
104
107
  line-height: $line-height;
105
108
  // Manually declare to provide an override to the browser default
106
- @if $enable-rounded {
107
- border-radius: $border-radius;
108
- } @else {
109
- border-radius: 0;
110
- }
109
+ @include border-radius($border-radius, 0);
111
110
  }
@@ -1,25 +1,25 @@
1
- @mixin caret-down {
1
+ @mixin caret-down() {
2
2
  border-top: $caret-width solid;
3
3
  border-right: $caret-width solid transparent;
4
4
  border-bottom: 0;
5
5
  border-left: $caret-width solid transparent;
6
6
  }
7
7
 
8
- @mixin caret-up {
8
+ @mixin caret-up() {
9
9
  border-top: 0;
10
10
  border-right: $caret-width solid transparent;
11
11
  border-bottom: $caret-width solid;
12
12
  border-left: $caret-width solid transparent;
13
13
  }
14
14
 
15
- @mixin caret-right {
15
+ @mixin caret-right() {
16
16
  border-top: $caret-width solid transparent;
17
17
  border-right: 0;
18
18
  border-bottom: $caret-width solid transparent;
19
19
  border-left: $caret-width solid;
20
20
  }
21
21
 
22
- @mixin caret-left {
22
+ @mixin caret-left() {
23
23
  border-top: $caret-width solid transparent;
24
24
  border-right: $caret-width solid;
25
25
  border-bottom: $caret-width solid transparent;
@@ -29,15 +29,15 @@
29
29
  @if $enable-caret {
30
30
  &::after {
31
31
  display: inline-block;
32
- margin-left: $caret-width * .85;
33
- vertical-align: $caret-width * .85;
32
+ margin-left: $caret-spacing;
33
+ vertical-align: $caret-vertical-align;
34
34
  content: "";
35
35
  @if $direction == down {
36
- @include caret-down;
36
+ @include caret-down();
37
37
  } @else if $direction == up {
38
- @include caret-up;
38
+ @include caret-up();
39
39
  } @else if $direction == right {
40
- @include caret-right;
40
+ @include caret-right();
41
41
  }
42
42
  }
43
43
 
@@ -48,10 +48,10 @@
48
48
 
49
49
  &::before {
50
50
  display: inline-block;
51
- margin-right: $caret-width * .85;
52
- vertical-align: $caret-width * .85;
51
+ margin-right: $caret-spacing;
52
+ vertical-align: $caret-vertical-align;
53
53
  content: "";
54
- @include caret-left;
54
+ @include caret-left();
55
55
  }
56
56
  }
57
57
 
@@ -0,0 +1,10 @@
1
+ // Deprecate mixin
2
+ //
3
+ // This mixin can be used to deprecate mixins or functions.
4
+ // `$enable-deprecation-messages` is a global variable, `$ignore-warning` is a variable that can be passed to
5
+ // some deprecated mixins to suppress the warning (for example if the mixin is still be used in the current version of Bootstrap)
6
+ @mixin deprecate($name, $deprecate-version, $remove-version, $ignore-warning: false) {
7
+ @if ($enable-deprecation-messages != false and $ignore-warning != true) {
8
+ @warn "#{$name} has been deprecated as of #{$deprecate-version}. It will be removed entirely in #{$remove-version}.";
9
+ }
10
+ }
@@ -1,11 +1,14 @@
1
1
  // stylelint-disable declaration-no-important
2
2
 
3
- @mixin float-left {
3
+ @mixin float-left() {
4
4
  float: left !important;
5
+ @include deprecate("The `float-left` mixin", "v4.3.0", "v5");
5
6
  }
6
- @mixin float-right {
7
+ @mixin float-right() {
7
8
  float: right !important;
9
+ @include deprecate("The `float-right` mixin", "v4.3.0", "v5");
8
10
  }
9
- @mixin float-none {
11
+ @mixin float-none() {
10
12
  float: none !important;
13
+ @include deprecate("The `float-none` mixin", "v4.3.0", "v5");
11
14
  }
@@ -10,124 +10,116 @@
10
10
  //
11
11
  // Example usage: change the default blue border and shadow to white for better
12
12
  // contrast against a dark gray background.
13
- @mixin form-control-focus() {
13
+ @mixin form-control-focus($ignore-warning: false) {
14
14
  &:focus {
15
15
  color: $input-focus-color;
16
16
  background-color: $input-focus-bg;
17
17
  border-color: $input-focus-border-color;
18
18
  outline: 0;
19
- // Avoid using mixin so we can pass custom focus shadow properly
20
19
  @if $enable-shadows {
21
- box-shadow: $input-box-shadow, $input-focus-box-shadow;
20
+ @include box-shadow($input-box-shadow, $input-focus-box-shadow);
22
21
  } @else {
22
+ // Avoid using mixin so we can pass custom focus shadow properly
23
23
  box-shadow: $input-focus-box-shadow;
24
24
  }
25
25
  }
26
+ @include deprecate("The `form-control-focus()` mixin", "v4.4.0", "v5", $ignore-warning);
26
27
  }
27
28
 
29
+ // This mixin uses an `if()` technique to be compatible with Dart Sass
30
+ // See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details
31
+ @mixin form-validation-state-selector($state) {
32
+ @if ($state == "valid" or $state == "invalid") {
33
+ .was-validated #{if(&, "&", "")}:#{$state},
34
+ #{if(&, "&", "")}.is-#{$state} {
35
+ @content;
36
+ }
37
+ } @else {
38
+ #{if(&, "&", "")}.is-#{$state} {
39
+ @content;
40
+ }
41
+ }
42
+ }
28
43
 
29
- @mixin form-validation-state($state, $color) {
44
+ @mixin form-validation-state($state, $color, $icon) {
30
45
  .#{$state}-feedback {
31
46
  display: none;
32
47
  width: 100%;
33
48
  margin-top: $form-feedback-margin-top;
34
- font-size: $form-feedback-font-size;
49
+ @include font-size($form-feedback-font-size);
35
50
  color: $color;
36
51
  }
37
52
 
38
53
  .#{$state}-tooltip {
39
54
  position: absolute;
40
55
  top: 100%;
56
+ left: 0;
41
57
  z-index: 5;
42
58
  display: none;
43
59
  max-width: 100%; // Contain to parent when possible
44
60
  padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
45
61
  margin-top: .1rem;
46
- font-size: $form-feedback-tooltip-font-size;
62
+ @include font-size($form-feedback-tooltip-font-size);
47
63
  line-height: $form-feedback-tooltip-line-height;
48
64
  color: color-yiq($color);
49
65
  background-color: rgba($color, $form-feedback-tooltip-opacity);
50
66
  @include border-radius($form-feedback-tooltip-border-radius);
51
67
  }
52
68
 
69
+ @include form-validation-state-selector($state) {
70
+ ~ .#{$state}-feedback,
71
+ ~ .#{$state}-tooltip {
72
+ display: block;
73
+ }
74
+ }
75
+
53
76
  .form-control {
54
- .was-validated &:#{$state},
55
- &.is-#{$state} {
77
+ @include form-validation-state-selector($state) {
56
78
  border-color: $color;
57
79
 
58
80
  @if $enable-validation-icons {
59
81
  padding-right: $input-height-inner;
82
+ background-image: escape-svg($icon);
60
83
  background-repeat: no-repeat;
61
- background-position: center right calc(#{$input-height-inner} / 4);
62
- background-size: calc(#{$input-height-inner} / 2) calc(#{$input-height-inner} / 2);
63
-
64
- @if $state == "valid" {
65
- background-image: $form-feedback-icon-valid;
66
- } @else {
67
- background-image: $form-feedback-icon-invalid;
68
- }
84
+ background-position: right $input-height-inner-quarter center;
85
+ background-size: $input-height-inner-half $input-height-inner-half;
69
86
  }
70
87
 
71
88
  &:focus {
72
89
  border-color: $color;
73
90
  box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
74
91
  }
75
-
76
- ~ .#{$state}-feedback,
77
- ~ .#{$state}-tooltip {
78
- display: block;
79
- }
80
92
  }
81
93
  }
82
94
 
83
95
  // stylelint-disable-next-line selector-no-qualifying-type
84
96
  textarea.form-control {
85
- .was-validated &:#{$state},
86
- &.is-#{$state} {
97
+ @include form-validation-state-selector($state) {
87
98
  @if $enable-validation-icons {
88
99
  padding-right: $input-height-inner;
89
- background-position: top calc(#{$input-height-inner} / 4) right calc(#{$input-height-inner} / 4);
100
+ background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
90
101
  }
91
102
  }
92
103
  }
93
104
 
94
105
  .custom-select {
95
- .was-validated &:#{$state},
96
- &.is-#{$state} {
106
+ @include form-validation-state-selector($state) {
97
107
  border-color: $color;
98
108
 
99
109
  @if $enable-validation-icons {
100
- $form-feedback-icon: if($state == "valid", $form-feedback-icon-valid, $form-feedback-icon-invalid);
101
110
  padding-right: $custom-select-feedback-icon-padding-right;
102
- background: $custom-select-background, $form-feedback-icon no-repeat $custom-select-feedback-icon-position / $custom-select-feedback-icon-size;
111
+ background: $custom-select-background, escape-svg($icon) $custom-select-bg no-repeat $custom-select-feedback-icon-position / $custom-select-feedback-icon-size;
103
112
  }
104
113
 
105
114
  &:focus {
106
115
  border-color: $color;
107
116
  box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
108
117
  }
109
-
110
- ~ .#{$state}-feedback,
111
- ~ .#{$state}-tooltip {
112
- display: block;
113
- }
114
- }
115
- }
116
-
117
-
118
- .form-control-file {
119
- .was-validated &:#{$state},
120
- &.is-#{$state} {
121
- ~ .#{$state}-feedback,
122
- ~ .#{$state}-tooltip {
123
- display: block;
124
- }
125
118
  }
126
119
  }
127
120
 
128
121
  .form-check-input {
129
- .was-validated &:#{$state},
130
- &.is-#{$state} {
122
+ @include form-validation-state-selector($state) {
131
123
  ~ .form-check-label {
132
124
  color: $color;
133
125
  }
@@ -140,8 +132,7 @@
140
132
  }
141
133
 
142
134
  .custom-control-input {
143
- .was-validated &:#{$state},
144
- &.is-#{$state} {
135
+ @include form-validation-state-selector($state) {
145
136
  ~ .custom-control-label {
146
137
  color: $color;
147
138
 
@@ -150,11 +141,6 @@
150
141
  }
151
142
  }
152
143
 
153
- ~ .#{$state}-feedback,
154
- ~ .#{$state}-tooltip {
155
- display: block;
156
- }
157
-
158
144
  &:checked {
159
145
  ~ .custom-control-label::before {
160
146
  border-color: lighten($color, 10%);
@@ -176,17 +162,11 @@
176
162
 
177
163
  // custom file
178
164
  .custom-file-input {
179
- .was-validated &:#{$state},
180
- &.is-#{$state} {
165
+ @include form-validation-state-selector($state) {
181
166
  ~ .custom-file-label {
182
167
  border-color: $color;
183
168
  }
184
169
 
185
- ~ .#{$state}-feedback,
186
- ~ .#{$state}-tooltip {
187
- display: block;
188
- }
189
-
190
170
  &:focus {
191
171
  ~ .custom-file-label {
192
172
  border-color: $color;