fireInternet/res/extjs/resources/themes/stylesheets/ext4/default/widgets/_progress-bar.scss

/**
 * Creates the base structure of an Ext.ProgressBar
 * @member Ext.ProgressBar
 */
@mixin extjs-progress {
    .#{$prefix}progress {
        position: relative;
        border-width: $progress-border-width;
        border-style: solid;
        @include border-radius($progress-border-radius);

        overflow: hidden;

        height: $progress-height;
    }

    .#{$prefix}progress-bar {
        height: $progress-height - ($progress-border-width * 2);

        overflow: hidden;
        position: absolute;

        width: 0;

        @include border-radius($progress-border-radius);
        border-right: 1px solid;
        border-top: 1px solid;
    }

    .#{$prefix}progress-text {
        overflow: hidden;

        position: absolute;

        padding: 0 5px;

        height: $progress-height - ($progress-border-width * 2);

        font-weight: $progress-text-font-weight;
        font-size: $progress-text-font-size;
        line-height: 16px;
        text-align: $progress-text-text-align;
    }

    .#{$prefix}progress-text-back {
        padding-top: 1px;
    }

    @if $include-ie or $compile-all {
        .#{$prefix}strict .#{$prefix}ie7m .#{$prefix}progress  {
            height: $progress-height - ($progress-border-width * 2);
        }
    }

    @include extjs-progress-ui(
        'default',

        $ui-background-color: $progress-background-color,
        $ui-border-color: $progress-border-color,

        $ui-bar-background-color: $progress-bar-background-color,

        $ui-color-front: $progress-text-color-front,
        $ui-color-back: $progress-text-color-back
    )
}

/**
 * Creates a visual theme for an Ext.ProgressBar
 * @member Ext.ProgressBar
 */
@mixin extjs-progress-ui(
    $ui-label,

    $ui-base-color: null,

    $ui-border-color: null,
    $ui-background-color: null,

    $ui-bar-background-color: null,
    $ui-bar-background-gradient: glossy,

    $ui-color-front: null,
    $ui-color-back: null
){
    @if $ui-base-color != null {
        @if $ui-border-color == null {         $ui-border-color: $ui-base-color; }
        @if $ui-bar-background-color == null { $ui-bar-background-color: $ui-base-color; }
        @if $ui-color-front == null {          $ui-color-front: lighten($ui-base-color, 60); }
        @if $ui-color-back == null {           $ui-color-back: darken($ui-base-color, 60); }
    }

    .#{$prefix}progress-#{$ui-label} {
        @if $ui-border-color != null { border-color: $ui-border-color; }

        .#{$prefix}progress-bar {
            @if $ui-border-color != null { border-right-color: $ui-border-color; }
            @if $ui-border-color != null { border-top-color: lighten($ui-border-color, 25); }

            @if $ui-bar-background-color != null { @include background-gradient($ui-bar-background-color, $ui-bar-background-gradient); }
        }

        .#{$prefix}progress-text {
            @if $ui-color-front != null { color: $ui-color-front; }
        }

        .#{$prefix}progress-text-back {
            @if $ui-color-back != null { color: $ui-color-back; }
        }
    }

    @if $ui-background-color != null {
        @if not $supports-gradients or $compile-all {
            .#{$prefix}nlg {
                .#{$prefix}progress-#{$ui-label} {
                    .#{$prefix}progress-bar {
                        background: repeat-x;
                        background-image: theme-background-image($theme-name, 'progress/progress-#{$ui-label}-bg.gif');
                    }
                }
            }
        }
    }
}