partkeepr

fork of partkeepr
git clone https://git.e1e0.net/partkeepr.git
Log | Files | Refs | Submodules | README | LICENSE

_progress-bar.scss (3531B)

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