Upgrade to ExtJS 4.0.0 - Released 04/26/2011

[extjs.git] / resources / themes / stylesheets / ext4 / default / widgets / _progress-bar.scss

diff --git a/resources/themes/stylesheets/ext4/default/widgets/_progress-bar.scss b/resources/themes/stylesheets/ext4/default/widgets/_progress-bar.scss
new file mode 100644 (file)
index 0000000..bbd41f6
--- /dev/null
+++ b/resources/themes/stylesheets/ext4/default/widgets/_progress-bar.scss
@@ -0,0 +1,117 @@
+@mixin extjs-progress {
+    .#{$prefix}progress {
+        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}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
+    )
+}
+
+/**
+ * @mixin extjs-progress-ui
+ */
+@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: theme-image($theme-name, 'progress/progress-#{$ui-label}-bg.gif') repeat-x;
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file