feat(progress-bar): more buffer bar styles

Author: thetaPC

core/src/components/progress-bar/progress-bar.scss

@@ -1,7 +1,7 @@
 @use "../../themes/mixins" as mixins;
 
 // Progress Bar
-// ------------------------------------------------------------------------
+// ---------------------------------------------
 
 :host {
   /**
@@ -49,7 +49,7 @@
 }
 
 // Determinate progress bar
-// --------------------------------------------------
+// ---------------------------------------------
 
 .progress,
 .progress-buffer-bar,
@@ -60,75 +60,42 @@
   transition: transform 150ms linear;
 }
 
-// Progress and background bar
-// --------------------------------------------------
+// Progress Bar: progress, buffer bar, and circles
+// ---------------------------------------------
 
 .progress,
 .progress-indeterminate {
   z-index: 2;
 }
 
-.progress {
-  background: var(--ion-progress-bar-determinate-progress-default-background);
-}
-
-.progress-indeterminate {
-  background: var(--ion-progress-bar-indeterminate-progress-default-background);
-}
-
 .progress-buffer-bar {
   z-index: 1;
 }
 
-:host(.progress-bar-determinate) .progress-buffer-bar {
-  background: var(--ion-progress-bar-determinate-buffer-bar-default-background);
-}
-
-:host(.progress-bar-indeterminate) .progress-buffer-bar {
-  background: var(--ion-progress-bar-indeterminate-buffer-bar-default-background);
-}
-
 .buffer-circles-container {
   overflow: hidden;
 }
 
-// Indeterminate Animation
-// --------------------------------------------------
-
-.indeterminate-bar-primary {
-  /* stylelint-disable property-disallowed-list */
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: -145.166611%;
-  /* stylelint-enable property-disallowed-list */
-
-  animation: primary-indeterminate-translate 2s infinite linear;
-
-  .progress-indeterminate {
-    animation: primary-indeterminate-scale 2s infinite linear;
-    animation-play-state: inherit;
-  }
+// Determinate
+.progress {
+  background: var(--ion-progress-bar-determinate-progress-default-background);
 }
 
-.indeterminate-bar-secondary {
-  /* stylelint-disable property-disallowed-list */
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: -54.888891%;
-  /* stylelint-enable property-disallowed-list */
+:host(.progress-bar-determinate) .progress-buffer-bar {
+  background: var(--ion-progress-bar-determinate-buffer-bar-default-background);
+}
 
-  animation: secondary-indeterminate-translate 2s infinite linear;
+// Indeterminate
+.progress-indeterminate {
+  background: var(--ion-progress-bar-indeterminate-progress-default-background);
+}
 
-  .progress-indeterminate {
-    animation: secondary-indeterminate-scale 2s infinite linear;
-    animation-play-state: inherit;
-  }
+:host(.progress-bar-indeterminate) .progress-buffer-bar {
+  background: var(--ion-progress-bar-indeterminate-buffer-bar-default-background);
 }
 
 // Progress Bar: Buffer Circles
-// ------------------------------------------------------------------------
+// ---------------------------------------------
 
 .buffer-circles {
   background-image: radial-gradient(
@@ -149,7 +116,7 @@
 }
 
 // Progress Bar: Shape Variants
-// -------------------------------------------------------------------------------
+// ---------------------------------------------
 
 :host(.progress-bar-shape-round) {
   @include mixins.border-radius(var(--ion-progress-bar-shape-round-border-radius));
@@ -160,19 +127,21 @@
 }
 
 // Progress Bar: Solid (buffer = 1)
-// -------------------------------------------------------------------------------
+// ---------------------------------------------
 
-:host(.progress-bar-solid.progress-bar-determinate) .progress-buffer-bar {
+// Indeterminate
+:host(.progress-bar-solid.progress-bar-indeterminate) .progress-buffer-bar {
   background: var(
-    --ion-progress-bar-determinate-buffer-bar-solid-default-background,
-    var(--ion-progress-bar-determinate-buffer-bar-default-background)
+    --ion-progress-bar-indeterminate-buffer-bar-solid-default-background,
+    var(--ion-progress-bar-indeterminate-buffer-bar-default-background)
   );
 }
 
-:host(.progress-bar-solid.progress-bar-indeterminate) .progress-buffer-bar {
+// Determinate
+:host(.progress-bar-solid.progress-bar-determinate) .progress-buffer-bar {
   background: var(
-    --ion-progress-bar-indeterminate-buffer-bar-solid-default-background,
-    var(--ion-progress-bar-indeterminate-buffer-bar-default-background)
+    --ion-progress-bar-determinate-buffer-bar-solid-default-background,
+    var(--ion-progress-bar-determinate-buffer-bar-default-background)
   );
 }
 
@@ -186,13 +155,17 @@
 }
 
 // Progress Bar: Color
-// ------------------------------------------------------------------------
+// ---------------------------------------------
 
 // Indeterminate
 :host(.ion-color) .progress-indeterminate {
   background: var(--ion-progress-bar-indeterminate-progress-semantic-default-background);
 }
 
+:host(.ion-color.progress-bar-indeterminate) .progress-buffer-bar {
+  background: var(--ion-progress-bar-indeterminate-buffer-bar-semantic-default-background);
+}
+
 // Determinate
 :host(.ion-color) .progress {
   background: var(--ion-progress-bar-determinate-progress-semantic-default-background);
@@ -202,10 +175,6 @@
   background: var(--ion-progress-bar-determinate-buffer-bar-semantic-default-background);
 }
 
-:host(.ion-color.progress-bar-indeterminate) .progress-buffer-bar {
-  background: var(--ion-progress-bar-indeterminate-buffer-bar-semantic-default-background);
-}
-
 :host(.ion-color) .buffer-circles {
   background-image: radial-gradient(
     ellipse at center,
@@ -215,18 +184,16 @@
   );
 }
 
-// Progress Bar: Reversed
-// ------------------------------------------------------------------------
-// If reversed is set to true, the animation will be reversed
-// and the bar will start at the top right
+// Progress Bar: States
+// ---------------------------------------------
 
+// Reversed: if set to true, the animation will be reversed
+// and the bar will start at the top right
 :host(.progress-bar-reversed) {
   transform: scaleX(-1);
 }
 
-// Progress Bar: Paused
-// ------------------------------------------------------------------------
-
+// Paused
 :host(.progress-paused) {
   .indeterminate-bar-secondary,
   .indeterminate-bar-primary,
@@ -235,8 +202,43 @@
   }
 }
 
+// Indeterminate Animation
+// ---------------------------------------------
+
+.indeterminate-bar-primary {
+  /* stylelint-disable property-disallowed-list */
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: -145.166611%;
+  /* stylelint-enable property-disallowed-list */
+
+  animation: primary-indeterminate-translate 2s infinite linear;
+
+  .progress-indeterminate {
+    animation: primary-indeterminate-scale 2s infinite linear;
+    animation-play-state: inherit;
+  }
+}
+
+.indeterminate-bar-secondary {
+  /* stylelint-disable property-disallowed-list */
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: -54.888891%;
+  /* stylelint-enable property-disallowed-list */
+
+  animation: secondary-indeterminate-translate 2s infinite linear;
+
+  .progress-indeterminate {
+    animation: secondary-indeterminate-scale 2s infinite linear;
+    animation-play-state: inherit;
+  }
+}
+
 // Progress Bar: Animation Keyframes
-// ------------------------------------------------------------------------
+// ---------------------------------------------
 // Source: https://github.com/material-components/material-components-web/blob/master/packages/mdc-linear-progress/_keyframes.scss
 
 @keyframes primary-indeterminate-translate {