/******************************* Progress *******************************/ /*------------------- Element --------------------*/ @verticalSpacing: 1em; @margin: @verticalSpacing 0em (@labelHeight + @verticalSpacing); @firstMargin: 0em 0em (@labelHeight + @verticalSpacing); @lastMargin: 0em 0em (@labelHeight); @background: @subtleTransparentBlack; @border: 1px solid @borderColor; @boxShadow: none; @padding: 0.2857em; @borderRadius: @defaultBorderRadius; /* Bar */ @barPosition: relative; @barHeight: 1.75em; @barBackground: #888888; @barBorderRadius: @borderRadius; @barTransitionEasing: ease; @barTransitionDuration: 0.3s; @barTransition: width @barTransitionDuration @barTransitionEasing, background-color @barTransitionDuration @barTransitionEasing ; @barInitialWidth: 0%; @barMinWidth: 2em; /* Progress Bar Label */ @progressWidth: auto; @progressSize: 0.9em; @progressPosition: absolute; @progressTop: 50%; @progressRight: 0.5em; @progressLeft: auto; @progressBottom: auto; @progressOffset: -0.5em; @progressColor: @invertedLightTextColor; @progressTextShadow: none; @progressFontWeight: bold; @progressTextAlign: left; /* Label */ @labelWidth: 100%; @labelHeight: 1.5em; @labelSize: 1em; @labelPosition: absolute; @labelTop: 100%; @labelLeft: 0%; @labelRight: auto; @labelBottom: auto; @labelOffset: (@labelHeight - 1.3em); @labelColor: @textColor; @labelTextShadow: none; @labelFontWeight: bold; @labelTextAlign: center; @labelTransition: color 0.4s @defaultEasing; /*------------------- Types --------------------*/ @indicatingFirstColor: #D95C5C; @indicatingSecondColor: #D9A65C; @indicatingThirdColor: #E6BB48; @indicatingFourthColor: #DDC928; @indicatingFifthColor: #B4D95C; @indicatingSixthColor: #66DA81; /*------------------- States --------------------*/ /* Active */ @activePulseColor: @white; @activePulseMaxOpacity: 0.3; @activePulseDuration: 2s; @activeMinWidth: @barMinWidth; /*------------------- Variations --------------------*/ /* Attached */ @attachedBackground: transparent; @attachedHeight: 3px; @attachedBorderRadius: @borderRadius; /* Inverted */ @invertedBackground: @transparentWhite; @invertedBorder: none; @invertedBarBackground: @barBackground; @invertedProgressColor: @offWhite; @invertedLabelColor: @white; /* Sizing */ @tinyBarHeight: 0.5em; @smallBarHeight: 1em; @largeBarHeight: 2.5em; @bigBarHeight: 3.5em;