Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / resources / themes / stylesheets / ext4 / default / mixins / _frame.scss
1 @mixin x-frame(
2     $cls, 
3     $ui: null, 
4     $border-radius: 0px, 
5     $border-width: 0px, 
6     $padding: null, 
7     $background-color: null, 
8     $background-gradient: null,
9     $table: false,
10     $background-direction: top
11 ) {
12     $cls-ui: $cls;
13     @if $ui != null {
14         $cls-ui: $cls + '-' + $ui;
15     }
16     
17     $vertical: false;
18     @if $background-direction == left or $background-direction == right {
19         $vertical: true;
20     }
21
22     $frame-top: max(top($border-radius), right($border-radius));
23     $frame-right: max(right($border-radius), bottom($border-radius));
24     $frame-bottom: max(bottom($border-radius), left($border-radius));
25     $frame-left: max(left($border-radius), top($border-radius));
26     
27     $padding-top: 0;
28     $padding-right: 0;
29     $padding-bottom: 0;
30     $padding-left: 0;
31     
32     @if $padding == null {
33         $padding-top: $frame-top - top($border-width);
34         $padding-right: $frame-right - right($border-width);
35         $padding-bottom: $frame-bottom - bottom($border-width);
36         $padding-left: $frame-left - left($border-width);
37     }
38     @else {
39         $padding-top: top($padding);
40         $padding-right: right($padding);
41         $padding-bottom: bottom($padding);
42         $padding-left: left($padding);    
43     }
44     
45     @if $padding-top < $frame-top {
46         $padding-top: $frame-top - top($border-width);
47     }
48     @if $padding-right < $frame-right {
49         $padding-right: $frame-right - right($border-width);
50     }
51     @if $padding-bottom < $frame-bottom {
52         $padding-bottom: $frame-bottom - bottom($border-width);
53     }
54     @if $padding-left < $frame-left {
55         $padding-left: $frame-left - left($border-width);
56     }
57      
58     .#{$prefix}#{$cls-ui} {
59         @if $supports-border-radius {
60             @if length($border-radius) == 2 {
61                 @include border-top-left-radius(nth($border-radius, 1));
62                 @include border-top-right-radius(nth($border-radius, 2));
63             } @else if length($border-radius) == 3 {
64                 @include border-top-left-radius(nth($border-radius, 1));
65                 @include border-top-right-radius(nth($border-radius, 2));
66                 @include border-bottom-right-radius(nth($border-radius, 3));
67             } @else if length($border-radius) == 4 {
68                 @include border-top-left-radius(nth($border-radius, 1));
69                 @include border-top-right-radius(nth($border-radius, 2));
70                 @include border-bottom-right-radius(nth($border-radius, 3));
71                 @include border-bottom-left-radius(nth($border-radius, 4));
72             } @else {
73                 @include border-radius($border-radius);
74             }
75         }
76         padding: $padding-top $padding-right $padding-bottom $padding-left;
77         border-width: $border-width;
78         border-style: solid;
79         @if $background-color != null {
80             @if $supports-gradients and $background-gradient != null {
81                 @include background-gradient($background-color, $background-gradient, $background-direction);
82             }
83             @else {
84                 background-color: $background-color;
85             }      
86         }
87     }
88     
89     @if not $supports-gradients or $compile-all {
90         .#{$prefix}nlg {
91             .#{$prefix}#{$cls-ui}-mc {
92                 @if $background-gradient != null {
93                     background-image: theme-background-image($theme-name, '#{$cls}/#{$cls-ui}-bg.gif', false, $relative-image-path-for-uis);
94                 }
95                 @if $background-color != null {
96                     background-color: $background-color;
97                 }
98             }
99         }        
100     }
101     
102     @if not $supports-border-radius or $compile-all {
103         .#{$prefix}nbr {
104             .#{$prefix}#{$cls-ui} {
105                 padding: 0 !important;
106                 border-width: 0 !important;
107                 @include border-radius(0px);
108                 @if $background-color != null {
109                     background-color: transparent;
110                 }
111                 @else {
112                     background: #fff;
113                 }
114
115                 @function pad($radius) {
116                     $radius: boxmax($radius);
117                     $radius: parseint($radius);
118                     @if $radius > 10 {
119                         @return $radius;
120                     }
121                     @else {
122                         @return "0" + $radius;
123                     }
124                 }
125                 
126                 $type: '100';
127                 @if $table == true {
128                     $type: '110';
129                 }
130                 $direction: '100';
131                 @if $vertical == true {
132                     $direction: '110';
133                 }
134                 
135                 $left: $type + pad(top($border-radius)) + pad(right($border-radius)) + 'px';
136                 $top: $direction + pad(bottom($border-radius)) + pad(left($border-radius)) + 'px';
137                 background-position: unquote($left) unquote($top);
138             }
139
140             .#{$prefix}#{$cls-ui}-tl,
141             .#{$prefix}#{$cls-ui}-bl,
142             .#{$prefix}#{$cls-ui}-tr,
143             .#{$prefix}#{$cls-ui}-br,
144             .#{$prefix}#{$cls-ui}-tc,
145             .#{$prefix}#{$cls-ui}-bc,
146             .#{$prefix}#{$cls-ui}-ml,
147             .#{$prefix}#{$cls-ui}-mr {
148                 zoom:1;
149                 
150                 @if $background-color != transparent {
151                     background-image: theme-background-image($theme-name, '#{$cls}/#{$cls-ui}-corners.gif', false, $relative-image-path-for-uis);
152                 }
153             }
154             
155             @if $vertical == true {
156                 .#{$prefix}#{$cls-ui}-tc,
157                 .#{$prefix}#{$cls-ui}-bc {
158                     zoom:1;
159
160                     @if $background-color != transparent {
161                         background-image: theme-background-image($theme-name, '#{$cls}/#{$cls-ui}-sides.gif', false, $relative-image-path-for-uis);
162                         background-position: 0 0;
163                         background-repeat: repeat-x;
164                     }
165                 }
166             } @else {
167                 .#{$prefix}#{$cls-ui}-ml,
168                 .#{$prefix}#{$cls-ui}-mr {
169                     zoom:1;
170
171                     @if $background-color != transparent {
172                         background-image: theme-background-image($theme-name, '#{$cls}/#{$cls-ui}-sides.gif', false, $relative-image-path-for-uis);
173                         background-position: 0 0;
174                         @if $background-gradient == null {
175                             background-repeat: repeat-y;
176                         }
177                     }
178                 }
179             }
180
181             $padding-top: $padding-top - $frame-top;
182             $padding-right: $padding-right - $frame-right;
183             $padding-bottom: $padding-bottom - $frame-bottom;
184             $padding-left: $padding-left - $frame-left;
185             
186             
187             @if $padding-top < 0 {
188                 $padding-top: 0;
189             }
190             @if $padding-right < 0 {
191                 $padding-right: 0;
192             }
193             @if $padding-bottom < 0 {
194                 $padding-bottom: 0;
195             }
196             @if $padding-left < 0 {
197                 $padding-left: 0;
198             }
199
200             .#{$prefix}#{$cls-ui}-mc {
201                 padding: $padding-top $padding-right $padding-bottom $padding-left;
202             }    
203         }   
204     }
205 }