Manually backport #32121 (#32141)

Use correct value order

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

8 files changed, 10 insertions, 11 deletions

diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index fb5e9f856a..db30bed8b9 100644
--- 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 3bf89628ad..0d68435324 100644
--- 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 5f10a62f14..5d4b6cd6b8 100644
--- 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 1a037045a9..e206474a83 100644
--- 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 6f73466d3b..87cc9aff00 100644
--- 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 00bb01784f..7d8fba7a11 100644
--- 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 2b0b0ef4b5..53457928ea 100644
--- 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 6b65ad3f6f..a32163049c 100644
--- 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 {