fomantic-ui 2.9.1-beta.2 → 2.9.1-beta.21

package/src/definitions/modules/progress.less

@@ -8,12 +8,11 @@
  *
  */
 
-
 /*******************************
             Theme
 *******************************/
 
-@type    : 'module';
+@type : 'module';
 @element : 'progress';
 
 @import (multiple) '../../theme.config';
@@ -23,22 +22,22 @@
 *******************************/
 
 .ui.progress {
-  position: relative;
-  display: flex;
-  max-width: 100%;
-  border: @border;
-  margin: @margin;
-  box-shadow: @boxShadow;
-  background: @background;
-  padding: @padding;
-  border-radius: @borderRadius;
+    position: relative;
+    display: flex;
+    max-width: 100%;
+    border: @border;
+    margin: @margin;
+    box-shadow: @boxShadow;
+    background: @background;
+    padding: @padding;
+    border-radius: @borderRadius;
 }
 
 .ui.progress:first-child {
-  margin: @firstMargin;
+    margin: @firstMargin;
 }
 .ui.progress:last-child {
-  margin: @lastMargin;
+    margin: @lastMargin;
 }
 
 /*******************************
@@ -47,583 +46,608 @@
 
 /* Activity Bar */
 .ui.progress .bar {
-  display: block;
-  line-height: 1;
-  position: @barPosition;
-  width: @barInitialWidth;
-  min-width: @barMinWidth;
-  background: @barBackground;
-  border-radius: @barBorderRadius;
-  transition: @barTransition;
-  overflow: hidden;
+    display: block;
+    line-height: 1;
+    position: @barPosition;
+    width: @barInitialWidth;
+    min-width: @barMinWidth;
+    background: @barBackground;
+    border-radius: @barBorderRadius;
+    transition: @barTransition;
+    overflow: hidden;
 }
 .ui.ui.ui.progress:not([data-percent]):not(.indeterminate) .bar,
 .ui.ui.ui.progress[data-percent="0"]:not(.indeterminate) .bar {
-  background:transparent;
+    background: transparent;
 }
 .ui.progress[data-percent="0"] .bar .progress {
-  color: @textColor;
+    color: @textColor;
 }
 & when (@variationProgressInverted) {
-  .ui.inverted.progress[data-percent="0"] .bar .progress {
-    color: @invertedTextColor;
-  }
+    .ui.inverted.progress[data-percent="0"] .bar .progress {
+        color: @invertedTextColor;
+    }
 }
 
 /* Percent Complete */
 .ui.progress .bar > .progress {
-  white-space: nowrap;
-  position: @progressPosition;
-  width: @progressWidth;
-  font-size: @progressSize;
-  top: @progressTop;
-  right: @progressRight;
-  left: @progressLeft;
-  bottom: @progressBottom;
-  color: @progressColor;
-  text-shadow: @progressTextShadow;
-  margin-top: @progressOffset;
-  font-weight: @progressFontWeight;
-  text-align: @progressTextAlign;
+    white-space: nowrap;
+    position: @progressPosition;
+    width: @progressWidth;
+    font-size: @progressSize;
+    top: @progressTop;
+    right: @progressRight;
+    left: @progressLeft;
+    bottom: @progressBottom;
+    color: @progressColor;
+    text-shadow: @progressTextShadow;
+    margin-top: @progressOffset;
+    font-weight: @progressFontWeight;
+    text-align: @progressTextAlign;
 }
 
 & when (@variationProgressRightAligned) {
-  .ui.right.aligned.progress {
-    justify-content: flex-end;
-    & .bar > .progress {
-      left: @progressRightAlignedLeft;
-      right: @progressRightAlignedRight;
+    .ui.right.aligned.progress {
+        justify-content: flex-end;
+        & .bar > .progress {
+            left: @progressRightAlignedLeft;
+            right: @progressRightAlignedRight;
+        }
     }
-  }
 }
 
 /* Label */
 .ui.progress > .label {
-  position: absolute;
-  width: @labelWidth;
-  font-size: @labelSize;
-  top: @labelTop;
-  right: @labelRight;
-  left: @labelLeft;
-  bottom: @labelBottom;
-  color: @labelColor;
-  font-weight: @labelFontWeight;
-  text-shadow: @labelTextShadow;
-  margin-top: @labelOffset;
-  text-align: @labelTextAlign;
-  transition: @labelTransition;
+    position: absolute;
+    width: @labelWidth;
+    font-size: @labelSize;
+    top: @labelTop;
+    right: @labelRight;
+    left: @labelLeft;
+    bottom: @labelBottom;
+    color: @labelColor;
+    font-weight: @labelFontWeight;
+    text-shadow: @labelTextShadow;
+    margin-top: @labelOffset;
+    text-align: @labelTextAlign;
+    transition: @labelTransition;
 }
 
-
 /*******************************
             Types
 *******************************/
 
 & when (@variationProgressIndicating) {
-  /* Indicating */
-  .ui.indicating.progress[data-percent^="1"] .bar,
-  .ui.indicating.progress[data-percent^="2"] .bar {
-    background-color: @indicatingFirstColor;
-  }
-  .ui.indicating.progress[data-percent^="3"] .bar {
-    background-color: @indicatingSecondColor;
-  }
-  .ui.indicating.progress[data-percent^="4"] .bar,
-  .ui.indicating.progress[data-percent^="5"] .bar {
-    background-color: @indicatingThirdColor;
-  }
-  .ui.indicating.progress[data-percent^="6"] .bar {
-    background-color: @indicatingFourthColor;
-  }
-  .ui.indicating.progress[data-percent^="7"] .bar,
-  .ui.indicating.progress[data-percent^="8"] .bar {
-    background-color: @indicatingFifthColor;
-  }
-  .ui.indicating.progress[data-percent^="9"] .bar,
-  .ui.indicating.progress[data-percent^="100"] .bar {
-    background-color: @indicatingSixthColor;
-  }
-
-  /* Indicating Label */
-  .ui.indicating.progress[data-percent^="1"] .label,
-  .ui.indicating.progress[data-percent^="2"] .label {
-    color: @indicatingFirstLabelColor;
-  }
-  .ui.indicating.progress[data-percent^="3"] .label {
-    color: @indicatingSecondLabelColor;
-  }
-  .ui.indicating.progress[data-percent^="4"] .label,
-  .ui.indicating.progress[data-percent^="5"] .label {
-    color: @indicatingThirdLabelColor;
-  }
-  .ui.indicating.progress[data-percent^="6"] .label {
-    color: @indicatingFourthLabelColor;
-  }
-  .ui.indicating.progress[data-percent^="7"] .label,
-  .ui.indicating.progress[data-percent^="8"] .label {
-    color: @indicatingFifthLabelColor;
-  }
-  .ui.indicating.progress[data-percent^="9"] .label,
-  .ui.indicating.progress[data-percent^="100"] .label {
-    color: @indicatingSixthLabelColor;
-  }
-
-  & when (@variationProgressInverted) {
-    /* Inverted Indicating Label */
-    .ui.inverted.indicating.progress[data-percent^="1"] .label,
-    .ui.inverted.indicating.progress[data-percent^="2"] .label {
-      color: @invertedIndicatingFirstLabelColor;
-    }
-    .ui.inverted.indicating.progress[data-percent^="3"] .label {
-      color: @invertedIndicatingSecondLabelColor;
-    }
-    .ui.inverted.indicating.progress[data-percent^="4"] .label,
-    .ui.inverted.indicating.progress[data-percent^="5"] .label {
-      color: @invertedIndicatingThirdLabelColor;
-    }
-    .ui.inverted.indicating.progress[data-percent^="6"] .label {
-      color: @invertedIndicatingFourthLabelColor;
-    }
-    .ui.inverted.indicating.progress[data-percent^="7"] .label,
-    .ui.inverted.indicating.progress[data-percent^="8"] .label {
-      color: @invertedIndicatingFifthLabelColor;
-    }
-    .ui.inverted.indicating.progress[data-percent^="9"] .label,
-    .ui.inverted.indicating.progress[data-percent^="100"] .label {
-      color: @invertedIndicatingSixthLabelColor;
-    }
-  }
-
-  /* Single Digits */
-  .ui.indicating.progress[data-percent="1"] .bar, .ui.indicating.progress[data-percent^="1."] .bar,
-  .ui.indicating.progress[data-percent="2"] .bar, .ui.indicating.progress[data-percent^="2."] .bar,
-  .ui.indicating.progress[data-percent="3"] .bar, .ui.indicating.progress[data-percent^="3."] .bar,
-  .ui.indicating.progress[data-percent="4"] .bar, .ui.indicating.progress[data-percent^="4."] .bar,
-  .ui.indicating.progress[data-percent="5"] .bar, .ui.indicating.progress[data-percent^="5."] .bar,
-  .ui.indicating.progress[data-percent="6"] .bar, .ui.indicating.progress[data-percent^="6."] .bar,
-  .ui.indicating.progress[data-percent="7"] .bar, .ui.indicating.progress[data-percent^="7."] .bar,
-  .ui.indicating.progress[data-percent="8"] .bar, .ui.indicating.progress[data-percent^="8."] .bar,
-  .ui.indicating.progress[data-percent="9"] .bar, .ui.indicating.progress[data-percent^="9."] .bar {
-    background-color: @indicatingFirstColor;
-  }
-  .ui.indicating.progress[data-percent="0"] .label, .ui.indicating.progress[data-percent^="0."] .label,
-  .ui.indicating.progress[data-percent="1"] .label, .ui.indicating.progress[data-percent^="1."] .label,
-  .ui.indicating.progress[data-percent="2"] .label, .ui.indicating.progress[data-percent^="2."] .label,
-  .ui.indicating.progress[data-percent="3"] .label, .ui.indicating.progress[data-percent^="3."] .label,
-  .ui.indicating.progress[data-percent="4"] .label, .ui.indicating.progress[data-percent^="4."] .label,
-  .ui.indicating.progress[data-percent="5"] .label, .ui.indicating.progress[data-percent^="5."] .label,
-  .ui.indicating.progress[data-percent="6"] .label, .ui.indicating.progress[data-percent^="6."] .label,
-  .ui.indicating.progress[data-percent="7"] .label, .ui.indicating.progress[data-percent^="7."] .label,
-  .ui.indicating.progress[data-percent="8"] .label, .ui.indicating.progress[data-percent^="8."] .label,
-  .ui.indicating.progress[data-percent="9"] .label, .ui.indicating.progress[data-percent^="9."] .label {
-    color: @indicatingFirstLabelColor;
-  }
-  & when (@variationProgressInverted) {
-    .ui.inverted.indicating.progress[data-percent="0"] .label, .ui.inverted.indicating.progress[data-percent^="0."] .label,
-    .ui.inverted.indicating.progress[data-percent="1"] .label, .ui.inverted.indicating.progress[data-percent^="1."] .label,
-    .ui.inverted.indicating.progress[data-percent="2"] .label, .ui.inverted.indicating.progress[data-percent^="2."] .label,
-    .ui.inverted.indicating.progress[data-percent="3"] .label, .ui.inverted.indicating.progress[data-percent^="3."] .label,
-    .ui.inverted.indicating.progress[data-percent="4"] .label, .ui.inverted.indicating.progress[data-percent^="4."] .label,
-    .ui.inverted.indicating.progress[data-percent="5"] .label, .ui.inverted.indicating.progress[data-percent^="5."] .label,
-    .ui.inverted.indicating.progress[data-percent="6"] .label, .ui.inverted.indicating.progress[data-percent^="6."] .label,
-    .ui.inverted.indicating.progress[data-percent="7"] .label, .ui.inverted.indicating.progress[data-percent^="7."] .label,
-    .ui.inverted.indicating.progress[data-percent="8"] .label, .ui.inverted.indicating.progress[data-percent^="8."] .label,
-    .ui.inverted.indicating.progress[data-percent="9"] .label, .ui.inverted.indicating.progress[data-percent^="9."] .label {
-      color: @invertedIndicatingFirstLabelColor;
-    }
-  }
-
-  /* Indicating Success */
-  .ui.ui.indicating.progress.success .label {
-    color: @successHeaderColor;
-  }
-}
+    /* Indicating */
+    .ui.indicating.progress[data-percent^="1"] .bar,
+    .ui.indicating.progress[data-percent^="2"] .bar {
+        background-color: @indicatingFirstColor;
+    }
+    .ui.indicating.progress[data-percent^="3"] .bar {
+        background-color: @indicatingSecondColor;
+    }
+    .ui.indicating.progress[data-percent^="4"] .bar,
+    .ui.indicating.progress[data-percent^="5"] .bar {
+        background-color: @indicatingThirdColor;
+    }
+    .ui.indicating.progress[data-percent^="6"] .bar {
+        background-color: @indicatingFourthColor;
+    }
+    .ui.indicating.progress[data-percent^="7"] .bar,
+    .ui.indicating.progress[data-percent^="8"] .bar {
+        background-color: @indicatingFifthColor;
+    }
+    .ui.indicating.progress[data-percent^="9"] .bar,
+    .ui.indicating.progress[data-percent^="100"] .bar {
+        background-color: @indicatingSixthColor;
+    }
+
+    /* Indicating Label */
+    .ui.indicating.progress[data-percent^="1"] .label,
+    .ui.indicating.progress[data-percent^="2"] .label {
+        color: @indicatingFirstLabelColor;
+    }
+    .ui.indicating.progress[data-percent^="3"] .label {
+        color: @indicatingSecondLabelColor;
+    }
+    .ui.indicating.progress[data-percent^="4"] .label,
+    .ui.indicating.progress[data-percent^="5"] .label {
+        color: @indicatingThirdLabelColor;
+    }
+    .ui.indicating.progress[data-percent^="6"] .label {
+        color: @indicatingFourthLabelColor;
+    }
+    .ui.indicating.progress[data-percent^="7"] .label,
+    .ui.indicating.progress[data-percent^="8"] .label {
+        color: @indicatingFifthLabelColor;
+    }
+    .ui.indicating.progress[data-percent^="9"] .label,
+    .ui.indicating.progress[data-percent^="100"] .label {
+        color: @indicatingSixthLabelColor;
+    }
 
+    & when (@variationProgressInverted) {
+        /* Inverted Indicating Label */
+        .ui.inverted.indicating.progress[data-percent^="1"] .label,
+        .ui.inverted.indicating.progress[data-percent^="2"] .label {
+            color: @invertedIndicatingFirstLabelColor;
+        }
+        .ui.inverted.indicating.progress[data-percent^="3"] .label {
+            color: @invertedIndicatingSecondLabelColor;
+        }
+        .ui.inverted.indicating.progress[data-percent^="4"] .label,
+        .ui.inverted.indicating.progress[data-percent^="5"] .label {
+            color: @invertedIndicatingThirdLabelColor;
+        }
+        .ui.inverted.indicating.progress[data-percent^="6"] .label {
+            color: @invertedIndicatingFourthLabelColor;
+        }
+        .ui.inverted.indicating.progress[data-percent^="7"] .label,
+        .ui.inverted.indicating.progress[data-percent^="8"] .label {
+            color: @invertedIndicatingFifthLabelColor;
+        }
+        .ui.inverted.indicating.progress[data-percent^="9"] .label,
+        .ui.inverted.indicating.progress[data-percent^="100"] .label {
+            color: @invertedIndicatingSixthLabelColor;
+        }
+    }
+
+    /* Single Digits */
+    .ui.indicating.progress[data-percent="1"] .bar,
+    .ui.indicating.progress[data-percent^="1."] .bar,
+    .ui.indicating.progress[data-percent="2"] .bar,
+    .ui.indicating.progress[data-percent^="2."] .bar,
+    .ui.indicating.progress[data-percent="3"] .bar,
+    .ui.indicating.progress[data-percent^="3."] .bar,
+    .ui.indicating.progress[data-percent="4"] .bar,
+    .ui.indicating.progress[data-percent^="4."] .bar,
+    .ui.indicating.progress[data-percent="5"] .bar,
+    .ui.indicating.progress[data-percent^="5."] .bar,
+    .ui.indicating.progress[data-percent="6"] .bar,
+    .ui.indicating.progress[data-percent^="6."] .bar,
+    .ui.indicating.progress[data-percent="7"] .bar,
+    .ui.indicating.progress[data-percent^="7."] .bar,
+    .ui.indicating.progress[data-percent="8"] .bar,
+    .ui.indicating.progress[data-percent^="8."] .bar,
+    .ui.indicating.progress[data-percent="9"] .bar,
+    .ui.indicating.progress[data-percent^="9."] .bar {
+        background-color: @indicatingFirstColor;
+    }
+    .ui.indicating.progress[data-percent="0"] .label,
+    .ui.indicating.progress[data-percent^="0."] .label,
+    .ui.indicating.progress[data-percent="1"] .label,
+    .ui.indicating.progress[data-percent^="1."] .label,
+    .ui.indicating.progress[data-percent="2"] .label,
+    .ui.indicating.progress[data-percent^="2."] .label,
+    .ui.indicating.progress[data-percent="3"] .label,
+    .ui.indicating.progress[data-percent^="3."] .label,
+    .ui.indicating.progress[data-percent="4"] .label,
+    .ui.indicating.progress[data-percent^="4."] .label,
+    .ui.indicating.progress[data-percent="5"] .label,
+    .ui.indicating.progress[data-percent^="5."] .label,
+    .ui.indicating.progress[data-percent="6"] .label,
+    .ui.indicating.progress[data-percent^="6."] .label,
+    .ui.indicating.progress[data-percent="7"] .label,
+    .ui.indicating.progress[data-percent^="7."] .label,
+    .ui.indicating.progress[data-percent="8"] .label,
+    .ui.indicating.progress[data-percent^="8."] .label,
+    .ui.indicating.progress[data-percent="9"] .label,
+    .ui.indicating.progress[data-percent^="9."] .label {
+        color: @indicatingFirstLabelColor;
+    }
+    & when (@variationProgressInverted) {
+        .ui.inverted.indicating.progress[data-percent="0"] .label,
+        .ui.inverted.indicating.progress[data-percent^="0."] .label,
+        .ui.inverted.indicating.progress[data-percent="1"] .label,
+        .ui.inverted.indicating.progress[data-percent^="1."] .label,
+        .ui.inverted.indicating.progress[data-percent="2"] .label,
+        .ui.inverted.indicating.progress[data-percent^="2."] .label,
+        .ui.inverted.indicating.progress[data-percent="3"] .label,
+        .ui.inverted.indicating.progress[data-percent^="3."] .label,
+        .ui.inverted.indicating.progress[data-percent="4"] .label,
+        .ui.inverted.indicating.progress[data-percent^="4."] .label,
+        .ui.inverted.indicating.progress[data-percent="5"] .label,
+        .ui.inverted.indicating.progress[data-percent^="5."] .label,
+        .ui.inverted.indicating.progress[data-percent="6"] .label,
+        .ui.inverted.indicating.progress[data-percent^="6."] .label,
+        .ui.inverted.indicating.progress[data-percent="7"] .label,
+        .ui.inverted.indicating.progress[data-percent^="7."] .label,
+        .ui.inverted.indicating.progress[data-percent="8"] .label,
+        .ui.inverted.indicating.progress[data-percent^="8."] .label,
+        .ui.inverted.indicating.progress[data-percent="9"] .label,
+        .ui.inverted.indicating.progress[data-percent^="9."] .label {
+            color: @invertedIndicatingFirstLabelColor;
+        }
+    }
+
+    /* Indicating Success */
+    .ui.ui.indicating.progress.success .label {
+        color: @successHeaderColor;
+    }
+}
 
 /*******************************
              States
 *******************************/
 
 & when (@variationProgressSuccess) {
-  /*--------------
-       Success
-  ---------------*/
-
-  .ui.ui.progress.success .bar {
-    background-color: @successColor;
-  }
-  .ui.ui.progress.success .bar,
-  .ui.ui.progress.success .bar::after {
-    animation: none;
-  }
-  .ui.progress.success > .label {
-    color: @successHeaderColor;
-  }
+    /* --------------
+         Success
+    --------------- */
+
+    .ui.ui.progress.success .bar {
+        background-color: @successColor;
+    }
+    .ui.ui.progress.success .bar,
+    .ui.ui.progress.success .bar::after {
+        animation: none;
+    }
+    .ui.progress.success > .label {
+        color: @successHeaderColor;
+    }
 }
 
 & when (@variationProgressWarning) {
-  /*--------------
-       Warning
-  ---------------*/
-
-  .ui.ui.progress.warning .bar {
-    background-color: @warningColor;
-  }
-  .ui.ui.progress.warning .bar,
-  .ui.ui.progress.warning .bar::after {
-    animation: none;
-  }
-  .ui.progress.warning > .label {
-    color: @warningHeaderColor;
-  }
+    /* --------------
+         Warning
+    --------------- */
+
+    .ui.ui.progress.warning .bar {
+        background-color: @warningColor;
+    }
+    .ui.ui.progress.warning .bar,
+    .ui.ui.progress.warning .bar::after {
+        animation: none;
+    }
+    .ui.progress.warning > .label {
+        color: @warningHeaderColor;
+    }
 }
 
 & when (@variationProgressError) {
-  /*--------------
-       Error
-  ---------------*/
-
-  .ui.ui.progress.error .bar {
-    background-color: @errorColor;
-  }
-  .ui.ui.progress.error .bar,
-  .ui.ui.progress.error .bar::after {
-    animation: none;
-  }
-  .ui.progress.error > .label {
-    color: @errorHeaderColor;
-  }
+    /* --------------
+         Error
+    --------------- */
+
+    .ui.ui.progress.error .bar {
+        background-color: @errorColor;
+    }
+    .ui.ui.progress.error .bar,
+    .ui.ui.progress.error .bar::after {
+        animation: none;
+    }
+    .ui.progress.error > .label {
+        color: @errorHeaderColor;
+    }
 }
 
 & when (@variationProgressActive) {
-  /*--------------
-       Active
-  ---------------*/
+    /* --------------
+         Active
+    --------------- */
 
-  .ui.active.progress .bar {
-    position: relative;
-    min-width: @activeMinWidth;
-  }
-  .ui.active.progress .bar::after {
-    content: '';
-    opacity: 0;
-
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: @activePulseColor;
-
-    border-radius: @barBorderRadius;
-
-    animation: progress-active @activePulseDuration @defaultEasing infinite;
-    transform-origin: left;
-  }
-  & when (@variationProgressRightAligned) {
-    .ui.active.right.aligned.progress .bar::after {
-      transform-origin: right;
+    .ui.active.progress .bar {
+        position: relative;
+        min-width: @activeMinWidth;
     }
-  }
-
-  @keyframes progress-active {
-    0% {
-      opacity: @activePulseMaxOpacity;
-      transform: scale(0, 1);
+    .ui.active.progress .bar::after {
+        content: '';
+        opacity: 0;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: @activePulseColor;
+        border-radius: @barBorderRadius;
+        animation: progress-active @activePulseDuration @defaultEasing infinite;
+        transform-origin: left;
+    }
+    & when (@variationProgressRightAligned) {
+        .ui.active.right.aligned.progress .bar::after {
+            transform-origin: right;
+        }
     }
-    100% {
-      opacity: 0;
-      transform: scale(1);
+
+    @keyframes progress-active {
+        0% {
+            opacity: @activePulseMaxOpacity;
+            transform: scale(0, 1);
+        }
+        100% {
+            opacity: 0;
+            transform: scale(1);
+        }
     }
-  }
 }
 
 & when (@variationProgressDisabled) {
-  /*--------------
-      Disabled
-  ---------------*/
-
-  .ui.disabled.progress {
-    opacity: 0.35;
-  }
-  .ui.ui.disabled.progress .bar,
-  .ui.ui.disabled.progress .bar::after {
-    animation: none;
-  }
-}
+    /* --------------
+        Disabled
+    --------------- */
 
+    .ui.disabled.progress {
+        opacity: 0.35;
+    }
+    .ui.ui.disabled.progress .bar,
+    .ui.ui.disabled.progress .bar::after {
+        animation: none;
+    }
+}
 
 /*******************************
            Variations
 *******************************/
 
 & when (@variationProgressInverted) {
-  /*--------------
-      Inverted
-  ---------------*/
-
-  .ui.inverted.progress {
-    background: @invertedBackground;
-    border: @invertedBorder;
-  }
-  .ui.inverted.progress .bar {
-    background: @invertedBarBackground;
-  }
-  .ui.inverted.progress .bar > .progress {
-    color: @invertedProgressColor;
-  }
-  .ui.inverted.progress > .label {
-    color: @invertedLabelColor;
-  }
-  & when (@variationProgressSuccess) {
-    .ui.inverted.progress.success > .label {
-      color: @successColor;
-    }
-  }
-  & when (@variationProgressWarning) {
-    .ui.inverted.progress.warning > .label {
-      color: @warningColor;
-    }
-  }
-  & when (@variationProgressError) {
-    .ui.inverted.progress.error > .label {
-      color: @errorColor;
-    }
-  }
+    /* --------------
+        Inverted
+    --------------- */
+
+    .ui.inverted.progress {
+        background: @invertedBackground;
+        border: @invertedBorder;
+    }
+    .ui.inverted.progress .bar {
+        background: @invertedBarBackground;
+    }
+    .ui.inverted.progress .bar > .progress {
+        color: @invertedProgressColor;
+    }
+    .ui.inverted.progress > .label {
+        color: @invertedLabelColor;
+    }
+    & when (@variationProgressSuccess) {
+        .ui.inverted.progress.success > .label {
+            color: @successColor;
+        }
+    }
+    & when (@variationProgressWarning) {
+        .ui.inverted.progress.warning > .label {
+            color: @warningColor;
+        }
+    }
+    & when (@variationProgressError) {
+        .ui.inverted.progress.error > .label {
+            color: @errorColor;
+        }
+    }
 }
 
 & when (@variationProgressAttached) {
-  /*--------------
-      Attached
-  ---------------*/
+    /* --------------
+        Attached
+    --------------- */
+
+    /* bottom attached */
+    .ui.progress.attached {
+        background: @attachedBackground;
+        position: relative;
+        border: none;
+        margin: 0;
+    }
+    .ui.progress.attached,
+    .ui.progress.attached .bar {
+        height: @attachedHeight;
+        padding: 0;
+        overflow: hidden;
+        border-radius: 0 0 @attachedBorderRadius @attachedBorderRadius;
+    }
+    .ui.progress.attached .bar {
+        border-radius: 0;
+    }
 
-  /* bottom attached */
-  .ui.progress.attached {
-    background: @attachedBackground;
-    position: relative;
-    border: none;
-    margin: 0;
-  }
-  .ui.progress.attached,
-  .ui.progress.attached .bar {
-    height: @attachedHeight;
-    padding: 0;
-    overflow: hidden;
-    border-radius: 0 0 @attachedBorderRadius @attachedBorderRadius;
-  }
-  .ui.progress.attached .bar {
-    border-radius: 0;
-  }
-
-  /* top attached */
-  .ui.progress.top.attached,
-  .ui.progress.top.attached .bar {
-    top: 0;
-    border-radius: @attachedBorderRadius @attachedBorderRadius 0 0;
-  }
-  .ui.progress.top.attached .bar {
-    border-radius: 0;
-  }
-
-  /* Coupling */
-
-  .ui.segment > .ui.attached.progress,
-  .ui.card > .ui.attached.progress {
-    position: absolute;
-    top: auto;
-    left: 0;
-    bottom: 100%;
-    width: 100%;
-  }
-
-  .ui.segment > .ui.bottom.attached.progress,
-  .ui.card > .ui.bottom.attached.progress {
-    top: 100%;
-    bottom: auto;
-  }
-}
+    /* top attached */
+    .ui.progress.top.attached,
+    .ui.progress.top.attached .bar {
+        top: 0;
+        border-radius: @attachedBorderRadius @attachedBorderRadius 0 0;
+    }
+    .ui.progress.top.attached .bar {
+        border-radius: 0;
+    }
 
-/*--------------
-     Colors
----------------*/
-& when not (@variationProgressColors = false) {
-  each(@variationProgressColors, {
-    @color: @value;
-    @c: @colors[@@color][color];
-    @l: @colors[@@color][light];
+    /* Coupling */
 
-    .ui.indeterminate.@{color}.progress .bar::before,
-    .ui.@{color}.progress .bar,
-    .ui.progress .@{color}.bar {
-      background-color: @c;
+    .ui.segment > .ui.attached.progress,
+    .ui.card > .ui.attached.progress {
+        position: absolute;
+        top: auto;
+        left: 0;
+        bottom: 100%;
+        width: 100%;
     }
-    & when (@variationProgressInverted) {
-      .ui.inverted.indeterminate.@{color}.progress .bar::before,
-      .ui.@{color}.inverted.progress .bar,
-      .ui.inverted.progress .@{color}.bar {
-        background-color: @l;
-      }
+
+    .ui.segment > .ui.bottom.attached.progress,
+    .ui.card > .ui.bottom.attached.progress {
+        top: 100%;
+        bottom: auto;
     }
-  })
 }
 
-/*--------------
+/* --------------
+     Colors
+--------------- */
+& when not (@variationProgressColors = false) {
+    each(@variationProgressColors, {
+        @color: @value;
+        @c: @colors[@@color][color];
+        @l: @colors[@@color][light];
+
+        .ui.indeterminate.@{color}.progress .bar::before,
+        .ui.@{color}.progress .bar,
+        .ui.progress .@{color}.bar {
+            background-color: @c;
+        }
+        & when (@variationProgressInverted) {
+            .ui.inverted.indeterminate.@{color}.progress .bar::before,
+            .ui.@{color}.inverted.progress .bar,
+            .ui.inverted.progress .@{color}.bar {
+                background-color: @l;
+            }
+        }
+    })
+}
+
+/* --------------
      Sizes
----------------*/
+--------------- */
 
 .ui.progress {
-  font-size: @medium;
+    font-size: @medium;
 }
 .ui.progress .bar {
-  height: @barHeight;
+    height: @barHeight;
 }
 & when not (@variationProgressSizes = false) {
-  each(@variationProgressSizes, {
-    @h: @{value}BarHeight;
-    @s: @@value;
-    .ui.@{value}.progress  {
-      font-size: @s;
-    }
-    .ui.@{value}.progress .bar {
-      height: @@h;
-    }
-  })
+    each(@variationProgressSizes, {
+        @h: @{value}BarHeight;
+        @s: @@value;
+        .ui.@{value}.progress  {
+            font-size: @s;
+        }
+        .ui.@{value}.progress .bar {
+            height: @@h;
+        }
+    })
 }
 
 & when (@variationProgressIndeterminate) {
-  /*---------------
-    Indeterminate
-  ----------------*/
-
-  .ui.indeterminate.progress .bar {
-    width: 100%;
-  }
-  .ui.indeterminate.progress .bar .progress,
-  .ui.progress .bar .centered.progress {
-    text-align: center;
-    position: relative;
-    right: 0;
-  }
-  .ui.indeterminate.progress .bar::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    border-radius: @barBorderRadius;
-    animation: progress-pulsating @indeterminatePulseDuration @defaultEasing infinite;
-    transform-origin: center;
-    width: 100%;
-  }
-  & when (@variationProgressSpeeds) {
-    .ui.slow.indeterminate.progress .bar::before {
-      animation-duration: @indeterminatePulseDurationSlow;
-    }
-    .ui.fast.indeterminate.progress .bar::before {
-      animation-duration: @indeterminatePulseDurationFast;
-    }
-  }
-  & when (@variationProgressSwinging) {
-    .ui.swinging.indeterminate.progress .bar::before {
-      transform-origin: left;
-      animation-name: progress-swinging;
-    }
-  }
-  & when (@variationProgressSliding) {
-    .ui.sliding.indeterminate.progress .bar::before {
-      transform-origin: left;
-      animation-name: progress-sliding;
-    }
-  }
-  & when (@variationProgressFilling) {
-    .ui.filling.indeterminate.progress .bar::before {
-      animation-name: progress-filling;
-    }
-  }
-  .ui.indeterminate.progress:not(.sliding):not(.filling):not(.swinging) .bar::before {
-    background: @indeterminatePulseColor;
-  }
-  & when (@variationProgressSliding) or (@variationProgressSwinging)  or (@variationProgressFilling) {
-    .ui.sliding.indeterminate.progress .bar,
-    .ui.swinging.indeterminate.progress .bar,
-    .ui.filling.indeterminate.progress .bar {
-      background: @background;
-    }
-    & when (@variationProgressSliding) or (@variationProgressSwinging) {
-      .ui.sliding.indeterminate.progress .bar .progress,
-      .ui.swinging.indeterminate.progress .bar .progress {
-        color: @invertedProgressColor;
-      }
+    /* ---------------
+      Indeterminate
+    ---------------- */
+
+    .ui.indeterminate.progress .bar {
+        width: 100%;
     }
-    & when (@variationProgressInverted) {
-      .ui.inverted.sliding.indeterminate.progress .bar,
-      .ui.inverted.swinging.indeterminate.progress .bar,
-      .ui.inverted.filling.indeterminate.progress .bar {
-        background: @invertedBackground;
-      }
-      & when (@variationProgressSliding) or (@variationProgressSwinging) {
-        .ui.inverted.sliding.indeterminate.progress .bar .progress,
-        .ui.inverted.swinging.indeterminate.progress .bar .progress {
-          color: @progressColor;
+    .ui.indeterminate.progress .bar .progress,
+    .ui.progress .bar .centered.progress {
+        text-align: center;
+        position: relative;
+        right: 0;
+    }
+    .ui.indeterminate.progress .bar::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        border-radius: @barBorderRadius;
+        animation: progress-pulsating @indeterminatePulseDuration @defaultEasing infinite;
+        transform-origin: center;
+        width: 100%;
+    }
+    & when (@variationProgressSpeeds) {
+        .ui.slow.indeterminate.progress .bar::before {
+            animation-duration: @indeterminatePulseDurationSlow;
+        }
+        .ui.fast.indeterminate.progress .bar::before {
+            animation-duration: @indeterminatePulseDurationFast;
         }
-      }
     }
     & when (@variationProgressSwinging) {
-      @keyframes progress-swinging {
-        0%, 100% {
-          width:10%;
-          left:-25%;
+        .ui.swinging.indeterminate.progress .bar::before {
+            transform-origin: left;
+            animation-name: progress-swinging;
         }
-        25%, 65% {
-          width:70%;
+    }
+    & when (@variationProgressSliding) {
+        .ui.sliding.indeterminate.progress .bar::before {
+            transform-origin: left;
+            animation-name: progress-sliding;
         }
-        50% {
-          width: 10%;
-          left:100%;
+    }
+    & when (@variationProgressFilling) {
+        .ui.filling.indeterminate.progress .bar::before {
+            animation-name: progress-filling;
         }
-      }
     }
-
-    & when (@variationProgressSliding) {
-      @keyframes progress-sliding {
-        0% {
-          width:10%;
-          left:-25%;
+    .ui.indeterminate.progress:not(.sliding):not(.filling):not(.swinging) .bar::before {
+        background: @indeterminatePulseColor;
+    }
+    & when (@variationProgressSliding) or (@variationProgressSwinging)  or (@variationProgressFilling) {
+        .ui.sliding.indeterminate.progress .bar,
+        .ui.swinging.indeterminate.progress .bar,
+        .ui.filling.indeterminate.progress .bar {
+            background: @background;
         }
-        50% {
-          width:70%;
+        & when (@variationProgressSliding) or (@variationProgressSwinging) {
+            .ui.sliding.indeterminate.progress .bar .progress,
+            .ui.swinging.indeterminate.progress .bar .progress {
+                color: @invertedProgressColor;
+            }
         }
-        100% {
-          width:10%;
-          left:100%;
+        & when (@variationProgressInverted) {
+            .ui.inverted.sliding.indeterminate.progress .bar,
+            .ui.inverted.swinging.indeterminate.progress .bar,
+            .ui.inverted.filling.indeterminate.progress .bar {
+                background: @invertedBackground;
+            }
+            & when (@variationProgressSliding) or (@variationProgressSwinging) {
+                .ui.inverted.sliding.indeterminate.progress .bar .progress,
+                .ui.inverted.swinging.indeterminate.progress .bar .progress {
+                    color: @progressColor;
+                }
+            }
+        }
+        & when (@variationProgressSwinging) {
+            @keyframes progress-swinging {
+                0%,
+                100% {
+                    width: 10%;
+                    left: -25%;
+                }
+                25%,
+                65% {
+                    width: 70%;
+                }
+                50% {
+                    width: 10%;
+                    left: 100%;
+                }
+            }
         }
-      }
-    }
 
-    & when (@variationProgressFilling) {
-      @keyframes progress-filling {
-        0% {
-          transform: scale(0,1);
+        & when (@variationProgressSliding) {
+            @keyframes progress-sliding {
+                0% {
+                    width: 10%;
+                    left: -25%;
+                }
+                50% {
+                    width: 70%;
+                }
+                100% {
+                    width: 10%;
+                    left: 100%;
+                }
+            }
+        }
+
+        & when (@variationProgressFilling) {
+            @keyframes progress-filling {
+                0% {
+                    transform: scale(0, 1);
+                }
+                80% {
+                    transform: scale(1);
+                    opacity: 1;
+                }
+                100% {
+                    opacity: 0;
+                }
+            }
         }
-        80% {
-          transform: scale(1);
-          opacity:1;
+    }
+    @keyframes progress-pulsating {
+        0% {
+            transform: scale(0, 1);
+            opacity: 0.7;
         }
         100% {
-          opacity:0;
+            transform: scale(1);
+            opacity: 0;
         }
-      }
-    }
-  }
-  @keyframes progress-pulsating {
-    0% {
-      transform: scale(0,1);
-      opacity:0.7;
-    }
-    100% {
-      transform: scale(1);
-      opacity:0;
     }
-  }
 }
 
 .loadUIOverrides();