add extjs 6.0.1 sources

[extjs.git] / extjs / classic / theme-neutral / sass / src / ProgressBar.scss

/**\r
 * Creates a visual theme for an Ext.ProgressBar\r
 *\r
 * @param {string} $ui\r
 * The name of the UI being created. Can not included spaces or special punctuation\r
 * (used in CSS class names).\r
 *\r
 * @param {color} [$ui-border-color=$progress-border-color]\r
 * The border-color of the ProgressBar\r
 *\r
 * @param {color} [$ui-background-color=$progress-background-color]\r
 * The background-color of the ProgressBar\r
 *\r
 * @param {color} [$ui-bar-background-color=$progress-bar-background-color]\r
 * The background-color of the ProgressBar's moving element\r
 *\r
 * @param {string/list} [$ui-bar-background-gradient=$progress-bar-background-gradient]\r
 * The background-gradient of the ProgressBar's moving element. Can be either the name of\r
 * a predefined gradient or a list of color stops. Used as the `$type` parameter for\r
 * {@link Global_CSS#background-gradient}.\r
 *\r
 * @param {color} [$ui-color-front=$progress-text-color-front]\r
 * The color of the ProgressBar's text when in front of the ProgressBar's moving element\r
 *\r
 * @param {color} [$ui-color-back=$progress-text-color-back]\r
 * The color of the ProgressBar's text when the ProgressBar's 'moving element is not under it\r
 *\r
 * @param {number} [$ui-height=$progress-height]\r
 * The height of the ProgressBar\r
 *\r
 * @param {number} [$ui-border-width=$progress-border-width]\r
 * The border-width of the ProgressBar\r
 *\r
 * @param {number} [$ui-border-radius=$progress-border-radius]\r
 * The border-radius of the ProgressBar\r
 *\r
 * @param {string} [$ui-text-text-align=$progress-text-text-align]\r
 * The text-align of the ProgressBar's text\r
 *\r
 * @param {number} [$ui-text-font-size=$progress-text-font-size]\r
 * The font-size of the ProgressBar's text\r
 *\r
 * @param {string} [$ui-text-font-weight=$progress-text-font-weight]\r
 * The font-weight of the ProgressBar's text\r
 *\r
 * @member Ext.ProgressBar\r
 */\r
@mixin extjs-progress-ui(\r
    $ui: null,\r
\r
    $ui-border-color: $progress-border-color,\r
    $ui-background-color: $progress-background-color,\r
\r
    $ui-bar-background-color: $progress-bar-background-color,\r
    $ui-bar-background-gradient: $progress-bar-background-gradient,\r
\r
    $ui-color-front: $progress-text-color-front,\r
    $ui-color-back: $progress-text-color-back,\r
    $ui-height: $progress-height,\r
    $ui-border-width: $progress-border-width,\r
    $ui-border-radius: $progress-border-radius,\r
    $ui-text-text-align: $progress-text-text-align,\r
    $ui-text-font-size: $progress-text-font-size,\r
    $ui-text-font-weight: $progress-text-font-weight,\r
    $ui-text-font-family: $progress-text-font-family,\r
\r
    // deprecated - use $ui instead\r
    $ui-label: null\r
){\r
    @if $ui == null {\r
        @if $ui-label != null {\r
            @warn '$ui-label is deprecated.  Use $ui instead';\r
            $ui: $ui-label;\r
        } @else {\r
            // No @error "$ui is required";\r
            // See https://gist.github.com/MoOx/1671259\r
            @warn "#{error("$ui is required")}";\r
        }\r
    }\r
\r
    $progress-content-height: $ui-height - vertical($ui-border-width);\r
    .#{$prefix}progress-#{$ui} {\r
        background-color: $ui-background-color;\r
        border-width: $ui-border-width;\r
        height: $ui-height;\r
\r
        @if $ui-border-radius != 0 {\r
            @include border-radius($ui-border-radius);\r
        }\r
        @if not is-null($ui-border-color) {\r
            border-color: $ui-border-color;\r
        }\r
\r
        .#{$prefix}progress-bar-#{$ui} {\r
            @if $ui-border-radius != 0 {\r
                @include border-radius($ui-border-radius);\r
            }\r
            @if not is-null($ui-bar-background-color) {\r
                @include background-gradient($ui-bar-background-color, $ui-bar-background-gradient);\r
            }\r
            @if $include-slicer-gradient and not is-null($ui-bar-background-gradient) {\r
                .#{$prefix}nlg & {\r
                    background: repeat-x;\r
                    background-image: slicer-background-image(progress-bar-#{$ui}, 'progress/progress-#{$ui}-bg');\r
                }\r
            }\r
        }\r
\r
        .#{$prefix}progress-text {\r
            color: $ui-color-front;\r
            font-weight: $ui-text-font-weight;\r
            font-size: $ui-text-font-size;\r
            font-family: $ui-text-font-family;\r
            text-align: $ui-text-text-align;\r
            line-height: $progress-content-height;\r
        }\r
\r
        .#{$prefix}progress-text-back {\r
            color: $ui-color-back;\r
            line-height: $progress-content-height;\r
        }\r
    }\r
\r
    $stretch: slicer-background-stretch(progress-bar-#{$ui}, bottom);\r
    @include x-slicer(progress-bar-#{$ui});\r
\r
    @if $include-ext-view-table {\r
        .#{$prefix}progressbar-#{$ui}-cell > .#{$prefix}grid-cell-inner,\r
        .#{$prefix}progressbarwidget-#{$ui}-cell > .#{$prefix}grid-cell-inner {\r
            padding-top:    max(ceil(($grid-row-height - $ui-height) / 2), 0);\r
            padding-bottom: max(floor(($grid-row-height - $ui-height) / 2), 0);\r
            .#{$prefix}progress-#{$ui} {\r
                height: min($progress-height, $grid-row-height - 2);\r
            }\r
        }\r
    }\r
}\r
\r
\r
@if $include-progress-default-ui {\r
    @include extjs-progress-ui(\r
        $ui: 'default'\r
    );\r
}\r