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

   1 @mixin extjs-progress {
   2     .#{$prefix}progress {
   3         border-width: $progress-border-width;
   4         border-style: solid;
   5         @include border-radius($progress-border-radius);
   6
   7         overflow: hidden;
   8
   9         height: $progress-height;
  10     }
  11
  12     .#{$prefix}progress-bar {
  13         height: $progress-height - ($progress-border-width * 2);
  14
  15         overflow: hidden;
  16         position: absolute;
  17
  18         width: 0;
  19
  20         @include border-radius($progress-border-radius);
  21         border-right: 1px solid;
  22         border-top: 1px solid;
  23     }
  24
  25     .#{$prefix}progress-text {
  26         overflow: hidden;
  27
  28         position: absolute;
  29
  30         padding: 0 5px;
  31
  32         height: $progress-height - ($progress-border-width * 2);
  33
  34         font-weight: $progress-text-font-weight;
  35         font-size: $progress-text-font-size;
  36         line-height: 16px;
  37         text-align: $progress-text-text-align;
  38     }
  39
  40     .#{$prefix}progress-text-back {
  41         padding-top: 1px;
  42     }
  43
  44     @if $include-ie or $compile-all {
  45         .#{$prefix}strict .#{$prefix}progress  {
  46             height: $progress-height - ($progress-border-width * 2);
  47         }
  48     }
  49
  50     @include extjs-progress-ui(
  51         'default',
  52
  53         $ui-background-color: $progress-background-color,
  54         $ui-border-color: $progress-border-color,
  55
  56         $ui-bar-background-color: $progress-bar-background-color,
  57
  58         $ui-color-front: $progress-text-color-front,
  59         $ui-color-back: $progress-text-color-back
  60     )
  61 }
  62
  63 /**
  64  * @mixin extjs-progress-ui
  65  */
  66 @mixin extjs-progress-ui(
  67     $ui-label,
  68
  69     $ui-base-color: null,
  70
  71     $ui-border-color: null,
  72     $ui-background-color: null,
  73
  74     $ui-bar-background-color: null,
  75     $ui-bar-background-gradient: glossy,
  76
  77     $ui-color-front: null,
  78     $ui-color-back: null
  79 ){
  80     @if $ui-base-color != null {
  81         @if $ui-border-color == null {         $ui-border-color: $ui-base-color; }
  82         @if $ui-bar-background-color == null { $ui-bar-background-color: $ui-base-color; }
  83         @if $ui-color-front == null {          $ui-color-front: lighten($ui-base-color, 60); }
  84         @if $ui-color-back == null {           $ui-color-back: darken($ui-base-color, 60); }
  85     }
  86
  87     .#{$prefix}progress-#{$ui-label} {
  88         @if $ui-border-color != null { border-color: $ui-border-color; }
  89
  90         .#{$prefix}progress-bar {
  91             @if $ui-border-color != null { border-right-color: $ui-border-color; }
  92             @if $ui-border-color != null { border-top-color: lighten($ui-border-color, 25); }
  93
  94             @if $ui-bar-background-color != null { @include background-gradient($ui-bar-background-color, $ui-bar-background-gradient); }
  95         }
  96
  97         .#{$prefix}progress-text {
  98             @if $ui-color-front != null { color: $ui-color-front; }
  99         }
 100
 101         .#{$prefix}progress-text-back {
 102             @if $ui-color-back != null { color: $ui-color-back; }
 103         }
 104     }
 105
 106     @if $ui-background-color != null {
 107         @if not $supports-gradients or $compile-all {
 108             .#{$prefix}nlg {
 109                 .#{$prefix}progress-#{$ui-label} {
 110                     .#{$prefix}progress-bar {
 111                         background: repeat-x;
 112                         background-image: theme-background-image($theme-name, 'progress/progress-#{$ui-label}-bg.gif');
 113                     }
 114                 }
 115             }
 116         }
 117     }
 118 }