/** * 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} [$ui-border-color=$progress-border-color] * The border-color of the ProgressBar * * @param {color} [$ui-background-color=$progress-background-color] * The background-color of the ProgressBar * * @param {color} [$ui-bar-background-color=$progress-bar-background-color] * The background-color of the ProgressBar's moving element * * @param {string/list} [$ui-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} [$ui-color-front=$progress-text-front-color] * The color of the ProgressBar's text when in front of the ProgressBar's moving element * * @param {color} [$ui-color-back=$progress-text-back-color] * The color of the ProgressBar's text when the ProgressBar's 'moving element is not under it * * @param {number} [$ui-height=$progress-height] * The height of the ProgressBar * * @param {number} [$ui-border-width=$progress-border-width] * The border-width of the ProgressBar * * @param {number} [$ui-border-radius=$progress-border-radius] * The border-radius of the ProgressBar * * @param {color} [$ui-focus-border-color] * The border color of a focused ProgressBar * * @param {color} [$ui-focus-border-style] * The border style of a focused ProgressBar * * @param {color} [$ui-focus-border-width] * The border width of a focused ProgressBar * * @param {string} [$ui-text-text-align=$progress-text-text-align] * The text-align of the ProgressBar's text * * @param {number} [$ui-text-font-size=$progress-text-font-size] * The font-size of the ProgressBar's text * * @param {string} [$ui-text-font-weight=$progress-text-font-weight] * The font-weight of the ProgressBar's text * * @member Ext.ProgressBar */@mixin extjs-progress-ui( $ui: null, $ui-border-color: $progress-border-color, $ui-background-color: $progress-background-color, $ui-bar-background-color: $progress-bar-background-color, $ui-bar-background-gradient: $progress-bar-background-gradient, $ui-color-front: $progress-text-front-color, $ui-color-back: $progress-text-back-color, $ui-height: $progress-height, $ui-border-style: $progress-border-style, $ui-border-width: $progress-border-width, $ui-border-radius: $progress-border-radius, $ui-focus-border-color: $progress-focus-border-color, $ui-focus-border-style: $progress-focus-border-style, $ui-focus-border-width: $progress-focus-border-width, $ui-text-text-align: $progress-text-text-align, $ui-text-font-size: $progress-text-font-size, $ui-text-font-weight: $progress-text-font-weight, $ui-text-font-family: $progress-text-font-family, // deprecated - use $ui instead $ui-label: null){ @if $ui == null { @if $ui-label != null { @warn '$ui-label is deprecated. Use $ui instead'; $ui: $ui-label; } @else { // No @error "$ui is required"; // See https://gist.github.com/MoOx/1671259 @warn "#{error("$ui is required")}"; } } $progress-content-height: $ui-height - vertical($ui-border-width); .#{$prefix}progress-#{$ui} { background-color: $ui-background-color; border-width: $ui-border-width; height: $ui-height; @if $ui-border-radius != 0 { @include border-radius($ui-border-radius); } @if not is-null($ui-border-color) { border-color: $ui-border-color; } @if not is-null($ui-border-style) { border-style: $ui-border-style; } .#{$prefix}progress-bar-#{$ui} { @if $ui-border-radius != 0 { @include border-radius($ui-border-radius); } @if not is-null($ui-bar-background-color) { @include background-gradient($ui-bar-background-color, $ui-bar-background-gradient); } @if $include-slicer-gradient and not is-null($ui-bar-background-gradient) { .#{$prefix}nlg & { background: repeat-x; background-image: slicer-background-image(progress-bar-#{$ui}, 'progress/progress-#{$ui}-bg'); } } } .#{$prefix}progress-text { color: $ui-color-front; font-weight: $ui-text-font-weight; font-size: $ui-text-font-size; font-family: $ui-text-font-family; text-align: $ui-text-text-align; line-height: $progress-content-height; } .#{$prefix}progress-text-back { color: $ui-color-back; line-height: $progress-content-height; } &.#{$prefix}progress-focus { @include css-outline( $width: $ui-focus-border-width, $style: $ui-focus-border-style, $color: $ui-focus-border-color, $offset: -$ui-focus-border-width, $pseudo: true ); } } $stretch: slicer-background-stretch(progress-bar-#{$ui}, bottom); @include x-slicer(progress-bar-#{$ui}); @if $include-ext-view-table { // here we need to add three selectors, one for the progress classic component (xtype: 'pogressbar') // and one for each progressbarwidget alias (xtype: ['progress', 'progressbarwidget']). .#{$prefix}progressbar-#{$ui}-cell, .#{$prefix}progress-#{$ui}-cell, .#{$prefix}progressbarwidget-#{$ui}-cell { > .#{$prefix}grid-cell-inner { padding-top: max(ceil(($grid-row-height - $ui-height) / 2), 0); padding-bottom: max(floor(($grid-row-height - $ui-height) / 2), 0); .#{$prefix}progress-#{$ui} { height: min($progress-height, $grid-row-height - 2); } } } }} @if $include-progress-default-ui { @include extjs-progress-ui( $ui: 'default' );}