Convert background shorthands to separate properties

diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index 5e413cc701cd9e157c2f45fbfb8ed879f9288c21..fb4ed894d3548c9aa662a8c0935f3f5045f929fd 100644 (file)
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -128,7 +128,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/_variables.scss b/scss/_variables.scss
index 7501c3a29bf45b369546de94efb1ea4ace544843..c32c634de2ddbd580e848b2a55cb21da31e45d6e 100644 (file)
--- 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
index 720b7a1c618da4457fb95fab39268ec4f3915958..cd4c1d699da5263cc4d9ce0489550a91dc9c3f64 100644 (file)
--- 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
index 55dcccd5d9cf2c17c0d4409b20adac07ec819397..8a5bca4a901205c829f9120742b7ac8ad5dc213c 100644 (file)
--- 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/_forms.scss b/scss/mixins/_forms.scss
index 769bc3ba9925ea573277de62968c89b4c0dcbf0c..ab612334f439311fd4c0f0003a94711984a658f1 100644 (file)
--- 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/site/assets/scss/_subnav.scss b/site/assets/scss/_subnav.scss
index 58b55d08178fcfd0641d34297b5eb3d96c25f301..3b17008d844d9ceb05b4931f933ed5b6af2b0130 100644 (file)
--- 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) {