Revert "[TASK] Migrate to ExtJS 4: Migrate Backend Base Components"
[Packages/TYPO3.CMS.git] / typo3 / sysext / t3skin / extjs / 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: theme-image($theme-name, 'progress/progress-#{$ui-label}-bg.gif') repeat-x;
112                     }
113                 }
114             }
115         }
116     }
117 }