feat(progress): support right aligned progress bar

This PR allows to display the progress bar aligned to the right growing to the left
fomantic · Oct 12, 2020 · 8bbda5f · 8bbda5f
1 parent 998c222
commit 8bbda5f
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 8 deletions.
diff --git a/src/definitions/modules/progress.less b/src/definitions/modules/progress.less
@@ -24,7 +24,7 @@
 
 .ui.progress {
   position: relative;
-  display: block;
+  display: flex;
   max-width: 100%;
   border: @border;
   margin: @margin;
@@ -87,6 +87,16 @@
   text-align: @progressTextAlign;
 }
 
+& when (@variationProgressRightAligned) {
+  .ui.right.aligned.progress {
+    justify-content: flex-end;
+    & .bar > .progress {
+      left: @progressRightAlignedLeft;
+      right: @progressRightAlignedRight;
+    }
+  }
+}
+
 /* Label */
 .ui.progress > .label {
   position: absolute;
@@ -229,12 +239,6 @@
   }
 }
 
-& when (@variationProgressMultiple) {
-  /* Multiple */
-  .ui.multiple.progress {
-    display: flex;
-  }
-}
 
 /*******************************
              States
@@ -316,6 +320,12 @@
     animation: progress-active @activePulseDuration @defaultEasing infinite;
     transform-origin: left;
   }
+  & when (@variationProgressRightAligned) {
+    .ui.active.right.aligned.progress .bar::after {
+      transform-origin: right;
+    }
+  }
+
   @keyframes progress-active {
     0% {
       opacity: @activePulseMaxOpacity;
@@ -396,7 +406,6 @@
   }
   .ui.progress.attached,
   .ui.progress.attached .bar {
-    display: block;
     height: @attachedHeight;
     padding: 0;
     overflow: hidden;

diff --git a/src/themes/default/globals/variation.variables b/src/themes/default/globals/variation.variables
@@ -464,6 +464,7 @@
 @variationProgressActive: true;
 @variationProgressAttached: true;
 @variationProgressSpeeds: true;
+@variationProgressRightAligned: true;
 @variationProgressSizes: @variationAllSizes;
 
 /* Rating */

diff --git a/src/themes/default/modules/progress.variables b/src/themes/default/modules/progress.variables
@@ -44,6 +44,8 @@
 @progressTextShadow: none;
 @progressFontWeight: @bold;
 @progressTextAlign: left;
+@progressRightAlignedRight: @progressLeft;
+@progressRightAlignedLeft: @progressRight;
 
 /* Label */
 @labelWidth: 100%;