/** * @class Ext.Progress */ /** * @var {number} * The min-height of the ProgressBar */$progress-min-height: dynamic(20px); /** * @var {number} * The min-height of the ProgressBar in the {@link Global_CSS#$enable-big big} sizing scheme */$progress-min-height-big: dynamic(24px); /** * @var {color} * The border-color of the ProgressBar */$progress-border-color: dynamic(null); /** * @var {number} * The border-width of the ProgressBar */$progress-border-width: dynamic(null); /** * @var {number} * The border-style of the ProgressBar */$progress-border-style: dynamic(null); /** * @var {number} * The border-radius of the ProgressBar */$progress-border-radius: dynamic(0); /** * @var {color} * The background-color of the ProgressBar */$progress-background-color: dynamic($neutral-highlight-color); /** * @var {color} * The background-color of the ProgressBar's moving element */$progress-bar-background-color: dynamic($base-color); /** * @var {string/list} * The background-gradient of the ProgressBar's moving element. Can be either the name of * a predefined gradient or a list of color stops. Used as the `$type` parameter for * {@link Global_CSS#background-gradient}. */$progress-bar-background-gradient: dynamic(null); //# fashion replaces $progress-text-color-front/** * @var {color} * The color of the ProgressBar's text when in front of the ProgressBar's moving element */$progress-text-front-color: dynamic(#fff); //# fashion replaces $progress-text-color-back/** * @var {color} * The color of the ProgressBar's text when the ProgressBar's 'moving element is not under it */$progress-text-back-color: dynamic(#000); /** * @var {string} * The text-align of the ProgressBar's text */$progress-text-text-align: dynamic(center); /** * @var {number} * The font-size of the ProgressBar's text */$progress-text-font-size: dynamic(13px); /** * @var {number} * The font-size-big of the ProgressBar's text in the {@link Global_CSS#$enable-big big} sizing scheme */$progress-text-font-size-big: dynamic(15px); /** * @var {string} * The font-weight of the ProgressBar's text */$progress-text-font-weight: dynamic($font-weight-bold); /** * @var {string} * The font-family of the ProgressBar's text */$progress-text-font-family: dynamic($font-family); /** * @var {number} * The line-height of the ProgressBar's text */$progress-text-line-height: dynamic($progress-min-height); /** * @var {number} * The line-height-big of the ProgressBar's text in the {@link Global_CSS#$enable-big big} sizing scheme */$progress-text-line-height-big: dynamic(32px); /** * Creates a visual theme for an Ext.ProgressBar * * @param {string} $ui * The name of the UI being created. Can not included spaces or special punctuation * (used in CSS class names). * * @param {color} [$background-color=$progress-background-color] * The background-color of the ProgressBar * * @param {color} [$bar-background-color=$progress-bar-background-color] * The background-color of the ProgressBar's moving element * * @param {string/list} [$bar-background-gradient=$progress-bar-background-gradient] * The background-gradient of the ProgressBar's moving element. Can be either the name of * a predefined gradient or a list of color stops. Used as the `$type` parameter for * {@link Global_CSS#background-gradient}. * * @param {color} [$front-color=$progress-text-front-color] * The color of the ProgressBar's text when in front of the ProgressBar's moving element * * @param {color} [$back-color=$progress-text-back-color] * The color of the ProgressBar's text when the ProgressBar's 'moving element is not under it * * @param {number} [$min-height=$progress-min-height] * The min-height of the ProgressBar * * @param {number} [$min-height-big=$progress-min-height-big] * The min-height of the ProgressBar in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} [$border-width=$progress-border-width] * The border-width of the ProgressBar * * @param {color} [$border-color=$progress-border-color] * The border-color of the ProgressBar * * @param {number} [$border-style=$progress-border-style] * The border-style of the ProgressBar * * @param {number} [$border-radius=$progress-border-radius] * The border-radius of the ProgressBar * * @param {string} [$text-text-align=$progress-text-text-align] * The text-align of the ProgressBar's text * * @param {number} [$text-font-size=$progress-text-font-size] * The font-size of the ProgressBar's text * * @param {number} [$text-font-size-big=$progress-text-font-size-big] * The font-size of the ProgressBar's text in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {string} [$text-font-weight=$progress-text-font-weight] * The font-weight of the ProgressBar's text * * @param {string} [$text-font-family=$progress-font-family] * The font-family of the ProgressBar's text * * @param {number} [$text-line-height=$progress-text-line-height] * The line-height of the ProgressBar's text * * @param {number} [$text-line-height-big=$progress-text-line-height-big] * The line-height of the ProgressBar's text in the {@link Global_CSS#$enable-big big} sizing scheme * * @member Ext.Progress */@mixin progress-ui( $ui: null, $background-color: null, $bar-background-color: null, $bar-background-gradient: null, $front-color: null, $back-color: null, $min-height: null, $min-height-big: null, $border-width: null, $border-color: null, $border-style: null, $border-radius: null, $text-text-align: null, $text-font-size: null, $text-font-size-big: null, $text-font-weight: null, $text-font-family: null, $text-line-height: null, $text-line-height-big: null){ $ui-suffix: ui-suffix($ui); .#{$prefix}progress#{$ui-suffix} { background-color: $background-color; min-height: $min-height; color: $front-color; font-weight: $text-font-weight; font-size: $text-font-size; font-family: $text-font-family; text-align: $text-text-align; line-height: $text-line-height; @if $enable-big { .#{$prefix}big & { min-height: $min-height-big; font-size: $text-font-size-big; line-height: $text-line-height-big; } } @include border($border-width, $border-style, $border-color); @include border-radius($border-radius); .#{$prefix}progress-bar { min-height: $min-height; @if $enable-big { .#{$prefix}big & { min-height: $min-height-big; } } @if $border-radius != 0 { @include border-radius($border-radius); } @if not is-null($bar-background-color) { @include background-gradient($bar-background-color, $bar-background-gradient); } } .#{$prefix}progress-text-back { color: $back-color; } }}