Manually backport #32121 (#32141)

Use correct value order

Co-authored-by: Martijn Cuppens <martijn.cuppens@gmail.com>

diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index fb5e9f856aee184b359a26c031a1036beb3e8c63..db30bed8b9e093251df1b50271ea53905951421c 100644 (file)
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -127,7 +127,7 @@
   display: inline-block;
   width: $carousel-control-icon-width;
   height: $carousel-control-icon-width;
-  background: no-repeat 50% / 100% 100%;
+  background: 50% / 100% 100% no-repeat;
 }
 .carousel-control-prev-icon {
   background-image: escape-svg($carousel-control-prev-icon-bg);

diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index 3bf89628ad2a6ef5d020212e772734f0c1d39460..0d68435324d76342cb6be5f028210f13cf55dc6b 100644 (file)
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -104,7 +104,7 @@
     width: $custom-control-indicator-size;
     height: $custom-control-indicator-size;
     content: "";
-    background: no-repeat 50% / #{$custom-control-indicator-bg-size};
+    background: 50% / #{$custom-control-indicator-bg-size} no-repeat;
   }
 }
 

diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index 5f10a62f14491976eba190d266dcaff76e071874..5d4b6cd6b885eb8f1de28e3d8e507a3b7e6a4709 100644 (file)
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -136,8 +136,7 @@
   height: 1.5em;
   vertical-align: middle;
   content: "";
-  background: no-repeat center center;
-  background-size: 100% 100%;
+  background: 50% / 100% 100% no-repeat;
 }
 
 // Generate series of `.navbar-expand-*` responsive classes for configuring

diff --git a/scss/_progress.scss b/scss/_progress.scss
index 1a037045a9b0c5ee6c912951e285e4e911510507..e206474a83304c0cdb13feac7f718444fb07f527 100644 (file)
--- a/scss/_progress.scss
+++ b/scss/_progress.scss
@@ -36,7 +36,7 @@
 
 @if $enable-transitions {
   .progress-bar-animated {
-    animation: progress-bar-stripes $progress-bar-animation-timing;
+    animation: $progress-bar-animation-timing progress-bar-stripes;
 
     @if $enable-prefers-reduced-motion-media-query {
       @media (prefers-reduced-motion: reduce) {

diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index 6f73466d3b75671b13e2e933c15c624853aa2762..87cc9aff00ce020015e19bd651f0366ca5363527 100644 (file)
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -312,8 +312,8 @@ button {
 //
 // Credit: https://github.com/suitcss/base/
 button:focus {
-  outline: 1px dotted;
-  outline: 5px auto -webkit-focus-ring-color;
+  outline: dotted 1px;
+  outline: -webkit-focus-ring-color auto 5px;
 }
 
 input,

diff --git a/scss/_spinners.scss b/scss/_spinners.scss
index 00bb01784f6a9af88fd7132bb652947c915af49d..7d8fba7a11b8c2a2f92e4490b3cd715487f33f5b 100644 (file)
--- a/scss/_spinners.scss
+++ b/scss/_spinners.scss
@@ -15,7 +15,7 @@
   border-right-color: transparent;
   // stylelint-disable-next-line property-disallowed-list
   border-radius: 50%;
-  animation: spinner-border .75s linear infinite;
+  animation: .75s linear infinite spinner-border;
 }
 
 .spinner-border-sm {
@@ -47,7 +47,7 @@
   // stylelint-disable-next-line property-disallowed-list
   border-radius: 50%;
   opacity: 0;
-  animation: spinner-grow .75s linear infinite;
+  animation: .75s linear infinite spinner-grow;
 }
 
 .spinner-grow-sm {

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 2b0b0ef4b50432f63f9a96c9c50bb1767de2b8b8..53457928eae16bbc0dfc6a7cafddfdec8ee85483 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -583,7 +583,7 @@ $custom-select-disabled-bg:         $gray-200 !default;
 $custom-select-bg-size:             8px 10px !default; // In pixels because image dimensions
 $custom-select-indicator-color:     $gray-800 !default;
 $custom-select-indicator:           url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'><path fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>") !default;
-$custom-select-background:          escape-svg($custom-select-indicator) no-repeat right $custom-select-padding-x center / $custom-select-bg-size !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
+$custom-select-background:          escape-svg($custom-select-indicator) right $custom-select-padding-x center / $custom-select-bg-size no-repeat !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
 
 $custom-select-feedback-icon-padding-right: add(1em * .75, (2 * $custom-select-padding-y * .75) + $custom-select-padding-x + $custom-select-indicator-padding) !default;
 $custom-select-feedback-icon-position:      center right ($custom-select-padding-x + $custom-select-indicator-padding) !default;

diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index 6b65ad3f6f821379965efd47bf4e8d9847ae9cbb..a32163049c9439a3285771342037a64418944545 100644 (file)
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -115,7 +115,7 @@
 
       @if $enable-validation-icons {
         padding-right: $custom-select-feedback-icon-padding-right;
-        background: $custom-select-background, escape-svg($icon) $custom-select-bg no-repeat $custom-select-feedback-icon-position / $custom-select-feedback-icon-size;
+        background: $custom-select-background, $custom-select-bg escape-svg($icon) $custom-select-feedback-icon-position / $custom-select-feedback-icon-size no-repeat;
       }
 
       &:focus {