Merge branch 'master' into master-ysds-valid-radius

twbs · Feb 12, 2020 · 25cbd01 · 25cbd01
2 parents dbf311d + ba72645
commit 25cbd01
Show file tree

Hide file tree

Showing 10 changed files with 31 additions and 35 deletions.
diff --git a/scss/_carousel.scss b/scss/_carousel.scss
@@ -111,15 +111,11 @@
 }
 .carousel-control-prev {
   left: 0;
-  @if $enable-gradients {
-    background-image: linear-gradient(90deg, rgba($black, .25), rgba($black, .001));
-  }
+  background-image: if($enable-gradients, linear-gradient(90deg, rgba($black, .25), rgba($black, .001)), null);
 }
 .carousel-control-next {
   right: 0;
-  @if $enable-gradients {
-    background-image: linear-gradient(270deg, rgba($black, .25), rgba($black, .001));
-  }
+  background-image: if($enable-gradients, linear-gradient(270deg, rgba($black, .25), rgba($black, .001)), null);
 }
 
 // Icons for within
@@ -128,7 +124,9 @@
   display: inline-block;
   width: $carousel-control-icon-width;
   height: $carousel-control-icon-width;
-  background: no-repeat 50% / 100% 100%;
+  background-repeat: no-repeat;
+  background-position: 50%;
+  background-size: 100% 100%;
 }
 .carousel-control-prev-icon {
   background-image: escape-svg($carousel-control-prev-icon-bg);

diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
@@ -166,9 +166,7 @@
     pointer-events: none;
     background-color: transparent;
     // Remove CSS gradients if they're enabled
-    @if $enable-gradients {
-      background-image: none;
-    }
+    background-image: if($enable-gradients, none, null);
   }
 }
 

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -704,12 +704,11 @@ $form-select-disabled-color:        $gray-600 !default;
 $form-select-bg:                    $input-bg !default;
 $form-select-disabled-bg:           $gray-200 !default;
 $form-select-disabled-border-color: $input-disabled-border-color !default;
+$form-select-bg-position:           right $form-select-padding-x center !default;
 $form-select-bg-size:               16px 12px !default; // In pixels because image dimensions
 $form-select-indicator-color:       $gray-800 !default;
 $form-select-indicator:             url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>") !default;
 
-$form-select-background:            no-repeat right $form-select-padding-x center / $form-select-bg-size !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
-
 $form-select-feedback-icon-padding-right: add(1em * .75, (2 * $form-select-padding-y * .75) + $form-select-padding-x + $form-select-indicator-padding) !default;
 $form-select-feedback-icon-position:      center right ($form-select-padding-x + $form-select-indicator-padding) !default;
 $form-select-feedback-icon-size:          $input-height-inner-half $input-height-inner-half !default;

diff --git a/scss/forms/_form-select.scss b/scss/forms/_form-select.scss
@@ -14,7 +14,11 @@
   line-height: $form-select-line-height;
   color: $form-select-color;
   vertical-align: middle;
-  background: $form-select-bg escape-svg($form-select-indicator) $form-select-background;
+  background-color: $form-select-bg;
+  background-image: escape-svg($form-select-indicator);
+  background-repeat: no-repeat;
+  background-position: $form-select-bg-position;
+  background-size: $form-select-bg-size;
   border: $form-select-border-width solid $form-select-border-color;
   @include border-radius($form-select-border-radius, 0);
   @include box-shadow($form-select-box-shadow);

diff --git a/scss/mixins/_background-variant.scss b/scss/mixins/_background-variant.scss
@@ -2,6 +2,6 @@
 
 @mixin bg-gradient-variant($parent, $color) {
   #{$parent} {
-    background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important;
+    background-image: linear-gradient(180deg, mix($body-bg, $color, 15%), $color) !important;
   }
 }
diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
@@ -43,9 +43,8 @@
   .show > &.dropdown-toggle {
     color: $active-color;
     background-color: $active-background;
-    @if $enable-gradients {
-      background-image: none; // Remove the gradient for the pressed/active state
-    }
+    // Remove CSS gradients if they're enabled
+    background-image: if($enable-gradients, none, null);
     border-color: $active-border;
 
     &:focus {
@@ -62,11 +61,9 @@
   &.disabled {
     color: $color;
     background-color: $background;
-    border-color: $border;
     // Remove CSS gradients if they're enabled
-    @if $enable-gradients {
-      background-image: none;
-    }
+    background-image: if($enable-gradients, none, null);
+    border-color: $border;
   }
 }
 

diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
@@ -79,7 +79,9 @@
 
       @if $enable-validation-icons {
         padding-right: $form-select-feedback-icon-padding-right;
-        background: escape-svg($form-select-indicator) $form-select-background, escape-svg($icon) $form-select-bg no-repeat $form-select-feedback-icon-position / $form-select-feedback-icon-size;
+        background-image: escape-svg($form-select-indicator), escape-svg($icon);
+        background-position: $form-select-bg-position, $form-select-feedback-icon-position;
+        background-size: $form-select-bg-size, $form-select-feedback-icon-size;
       }
 
       &:focus {

diff --git a/scss/mixins/_gradients.scss b/scss/mixins/_gradients.scss
@@ -3,12 +3,9 @@
 @mixin gradient-bg($color, $foreground: null) {
   @if $enable-gradients {
     @if $foreground {
-      background-color: $color;
       background-image: $foreground, linear-gradient(180deg, mix($body-bg, $color, 15%), $color);
-      background-repeat: no-repeat;
-      background-size: 1em, auto;
     } @else {
-      background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x;
+      background-image: linear-gradient(180deg, mix($body-bg, $color, 15%), $color);
     }
   } @else {
     background-color: $color;
@@ -20,33 +17,31 @@
 // Creates two color stops, start and end, by specifying a color and position for each color stop.
 @mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {
   background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
-  background-repeat: repeat-x;
 }
 
 // Vertical gradient, from top to bottom
 //
 // Creates two color stops, start and end, by specifying a color and position for each color stop.
-@mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {
+@mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: null, $end-percent: null) {
   background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
-  background-repeat: repeat-x;
 }
 
 @mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) {
   background-image: linear-gradient($deg, $start-color, $end-color);
-  background-repeat: repeat-x;
 }
+
 @mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
   background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
-  background-repeat: no-repeat;
 }
+
 @mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
   background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
-  background-repeat: no-repeat;
 }
+
 @mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) {
   background-image: radial-gradient(circle, $inner-color, $outer-color);
-  background-repeat: no-repeat;
 }
+
 @mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) {
   background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
 }
diff --git a/site/assets/scss/_subnav.scss b/site/assets/scss/_subnav.scss
@@ -14,7 +14,10 @@
   .dropdown-item.active {
     font-weight: 600;
     color: $gray-900;
-    background: escape-svg($dropdown-active-icon) no-repeat .4rem .6rem/.75rem .75rem;
+    background-image: escape-svg($dropdown-active-icon);
+    background-repeat: no-repeat;
+    background-position: .4rem .6rem;
+    background-size: .75rem .75rem;
   }
 
   @include media-breakpoint-up(md) {

diff --git a/site/content/docs/4.3/content/reboot.md b/site/content/docs/4.3/content/reboot.md
@@ -427,7 +427,7 @@ The default `cursor` on summary is `text`, so we reset that to `pointer` to conv
 
 ## HTML5 `[hidden]` attribute
 
-HTML5 adds [a new global attribute named `[hidden]`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden), which is styled as `display: none` by default. Borrowing an idea from [PureCSS](https://purecss.io/), we improve upon this default by making `[hidden] { display: none !important; }` to help prevent its `display` from getting accidentally overridden. While `[hidden]` isn't natively supported by IE10, the explicit declaration in our CSS gets around that problem.
+HTML5 adds [a new global attribute named `[hidden]`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden), which is styled as `display: none` by default. Borrowing an idea from [PureCSS](https://purecss.io/), we improve upon this default by making `[hidden] { display: none !important; }` to help prevent its `display` from getting accidentally overridden.
 
 {{< highlight html >}}
 <input type="text" hidden>