diff --git a/src/definitions/modules/progress.less b/src/definitions/modules/progress.less index 43ae8bf21..a597bd4d6 100755 --- a/src/definitions/modules/progress.less +++ b/src/definitions/modules/progress.less @@ -43,63 +43,63 @@ } /* Indicating */ -.ui.indicating.progress .bar[style*="width: 1"], -.ui.indicating.progress .bar[style*="width: 2"] { +.ui.indicating.progress[data-percent^="1"] .bar, +.ui.indicating.progress[data-percent^="2"] .bar { background-color: @indicatingFirstColor; } -.ui.indicating.progress .bar[style*="width: 3"] { +.ui.indicating.progress[data-percent^="3"] .bar { background-color: @indicatingSecondColor; } -.ui.indicating.progress .bar[style*="width: 4"], -.ui.indicating.progress .bar[style*="width: 5"] { +.ui.indicating.progress[data-percent^="4"] .bar, +.ui.indicating.progress[data-percent^="5"] .bar { background-color: @indicatingThirdColor; } -.ui.indicating.progress .bar[style*="width: 6"] { +.ui.indicating.progress[data-percent^="6"] .bar { background-color: @indicatingFourthColor; } -.ui.indicating.progress .bar[style*="width: 7"], -.ui.indicating.progress .bar[style*="width: 8"] { +.ui.indicating.progress[data-percent^="7"] .bar, +.ui.indicating.progress[data-percent^="8"] .bar { background-color: @indicatingFifthColor; } -.ui.indicating.progress .bar[style*="width: 9"], -.ui.indicating.progress .bar[style*="width: 100"] { +.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: @indicatingFirstColor; + color: @indicatingFirstLabelColor; } .ui.indicating.progress[data-percent^="3"] .label { - color: @indicatingSecondColor; + color: @indicatingSecondLabelColor; } .ui.indicating.progress[data-percent^="4"] .label, .ui.indicating.progress[data-percent^="5"] .label { - color: @indicatingThirdColor; + color: @indicatingThirdLabelColor; } .ui.indicating.progress[data-percent^="6"] .label { - color: @indicatingFourthColor; + color: @indicatingFourthLabelColor; } .ui.indicating.progress[data-percent^="7"] .label, .ui.indicating.progress[data-percent^="8"] .label { - color: @indicatingFifthColor; + color: @indicatingFifthLabelColor; } .ui.indicating.progress[data-percent^="9"] .label, .ui.indicating.progress[data-percent^="100"] .label { - color: @indicatingSixthColor; + color: @indicatingSixthLabelColor; } /* Single Digits */ -.ui.indicating.progress .bar[style^="width: 1%"], -.ui.indicating.progress .bar[style^="width: 2%"], -.ui.indicating.progress .bar[style^="width: 3%"], -.ui.indicating.progress .bar[style^="width: 4%"], -.ui.indicating.progress .bar[style^="width: 5%"], -.ui.indicating.progress .bar[style^="width: 6%"], -.ui.indicating.progress .bar[style^="width: 7%"], -.ui.indicating.progress .bar[style^="width: 8%"], -.ui.indicating.progress .bar[style^="width: 9%"] { +.ui.indicating.progress[data-percent="1"] .bar, +.ui.indicating.progress[data-percent="2"] .bar, +.ui.indicating.progress[data-percent="3"] .bar, +.ui.indicating.progress[data-percent="4"] .bar, +.ui.indicating.progress[data-percent="5"] .bar, +.ui.indicating.progress[data-percent="6"] .bar, +.ui.indicating.progress[data-percent="7"] .bar, +.ui.indicating.progress[data-percent="8"] .bar, +.ui.indicating.progress[data-percent="9"] .bar { background-color: @indicatingFirstColor; } .ui.indicating.progress[data-percent="1"] .label, @@ -111,7 +111,7 @@ .ui.indicating.progress[data-percent="7"] .label, .ui.indicating.progress[data-percent="8"] .label, .ui.indicating.progress[data-percent="9"] .label { - color: @indicatingFirstColor; + color: @indicatingFirstLabelColor; } /* Indicating Success */ diff --git a/src/themes/classic/modules/progress.variables b/src/themes/classic/modules/progress.variables index f66d8f5da..923b828f7 100644 --- a/src/themes/classic/modules/progress.variables +++ b/src/themes/classic/modules/progress.variables @@ -6,3 +6,4 @@ @boxShadow: 0px 0px 4px rgba(0, 0, 0, 0.1) inset; @barBackground: @subtleGradient #888888; @border: 1px solid @borderColor; +@padding: 0.214285em; \ No newline at end of file diff --git a/src/themes/default/modules/progress.variables b/src/themes/default/modules/progress.variables index db48e6840..68e77fc82 100644 --- a/src/themes/default/modules/progress.variables +++ b/src/themes/default/modules/progress.variables @@ -11,10 +11,10 @@ @firstMargin: 0em 0em (@labelHeight + @verticalSpacing); @lastMargin: 0em 0em (@labelHeight); -@background: @subtleTransparentBlack; -@border: 1px solid @borderColor; +@background: @transparentBlack; +@border: none; @boxShadow: none; -@padding: 0.2857em; +@padding: 0em; @borderRadius: @defaultBorderRadius; /* Bar */ @@ -22,8 +22,8 @@ @barHeight: 1.75em; @barBackground: #888888; @barBorderRadius: @borderRadius; -@barTransitionEasing: ease; -@barTransitionDuration: 0.3s; +@barTransitionEasing: @transitionEasing; +@barTransitionDuration: @transitionDuration; @barTransition: width @barTransitionDuration @barTransitionEasing, background-color @barTransitionDuration @barTransitionEasing @@ -33,7 +33,7 @@ /* Progress Bar Label */ @progressWidth: auto; -@progressSize: 0.9em; +@progressSize: @relativeSmall; @progressPosition: absolute; @progressTop: 50%; @progressRight: 0.5em; @@ -66,12 +66,18 @@ --------------------*/ @indicatingFirstColor: #D95C5C; -@indicatingSecondColor: #D9A65C; +@indicatingSecondColor: #EFBC72; @indicatingThirdColor: #E6BB48; @indicatingFourthColor: #DDC928; @indicatingFifthColor: #B4D95C; @indicatingSixthColor: #66DA81; +@indicatingFirstLabelColor: #CA4D4D; +@indicatingSecondLabelColor: #B27F22; +@indicatingThirdLabelColor: #C09522; +@indicatingFourthLabelColor: #ADA422; +@indicatingFifthLabelColor: #7A9F22; +@indicatingSixthLabelColor: #22963D; /*------------------- States