diff --git a/src/definitions/modules/progress.less b/src/definitions/modules/progress.less index a7f5613e60..d29d7e67c5 100755 --- a/src/definitions/modules/progress.less +++ b/src/definitions/modules/progress.less @@ -33,6 +33,14 @@ border-radius: @borderRadius; } +& when (@variationProgressBasic) { + .ui.basic.progress { + background: transparent; + border: none; + box-shadow: none; + } +} + .ui.progress:first-child { margin: @firstMargin; } @@ -50,14 +58,16 @@ line-height: 1; position: @barPosition; width: @barInitialWidth; - min-width: @barMinWidth; background: @barBackground; border-radius: @barBorderRadius; transition: @barTransition; overflow: hidden; + &:not(:empty) { + min-width: @barMinWidth; + } } -.ui.ui.ui.progress:not([data-percent]):not(.indeterminate) .bar, -.ui.ui.ui.progress[data-percent="0"]:not(.indeterminate) .bar { +.ui.ui.ui.progress:not([data-percent]):not(.indeterminate) .bar:not(:empty), +.ui.ui.ui.progress[data-percent="0"]:not(.indeterminate) .bar:not(:empty) { background: transparent; } .ui.progress[data-percent="0"] .bar .progress { @@ -328,7 +338,9 @@ .ui.active.progress .bar { position: relative; - min-width: @activeMinWidth; + &:not(:empty) { + min-width: @activeMinWidth; + } } .ui.active.progress .bar::after { content: ""; @@ -384,7 +396,7 @@ Inverted --------------- */ - .ui.inverted.progress { + .ui.inverted.progress:not(.basic) { background: @invertedBackground; border: @invertedBorder; } diff --git a/src/themes/default/globals/variation.variables b/src/themes/default/globals/variation.variables index d5b633143e..6c2da02ddb 100644 --- a/src/themes/default/globals/variation.variables +++ b/src/themes/default/globals/variation.variables @@ -643,6 +643,7 @@ /* Progress */ @variationProgressInverted: true; @variationProgressDisabled: true; +@variationProgressBasic: true; @variationProgressIndicating: true; @variationProgressIndeterminate: true; @variationProgressSliding: true;