Upgrade to ExtJS 4.0.2 - Released 06/09/2011
[extjs.git] / resources / themes / stylesheets / ext4 / default / layout / _layout.scss
1 @mixin extjs-layout {
2     .#{$prefix}docked {
3         position: absolute;
4         z-index: 1;
5     }
6     
7     /**
8       * Dock Layouts
9       * @todo move this somewhere else?
10       */
11     .#{$prefix}docked-top {
12         border-bottom-width: 0 !important;
13     }
14
15     .#{$prefix}docked-bottom {
16         border-top-width: 0 !important;
17     }
18
19     .#{$prefix}docked-left {
20         border-right-width: 0 !important;
21     }
22
23     .#{$prefix}docked-right {
24         border-left-width: 0 !important;
25     }
26     
27     .#{$prefix}docked-noborder-top {
28         border-top-width: 0 !important;
29     }
30
31     .#{$prefix}docked-noborder-right {
32         border-right-width: 0 !important;
33     }
34     
35     .#{$prefix}docked-noborder-bottom {
36         border-bottom-width: 0 !important;
37     }
38     
39     .#{$prefix}docked-noborder-left {
40         border-left-width: 0 !important;
41     }
42     
43     .#{$prefix}box-inner {
44         overflow:hidden;
45
46         zoom:1;
47
48         position:relative;
49         left:0;
50         top:0;
51     }
52
53     .#{$prefix}box-item {
54         position:absolute !important;
55         left:0;
56         top:0;
57     }
58
59     .#{$prefix}box-layout-ct,
60     .#{$prefix}border-layout-ct {
61         overflow: hidden;
62         zoom: 1;
63     }
64
65     .#{$prefix}overflow-hidden {
66         overflow:hidden !important;
67     }
68
69     .#{$prefix}inline-children > * {
70         display: inline-block !important;
71     }
72
73     .#{$prefix}abs-layout-item {
74         position: absolute;
75     }
76
77     .#{$prefix}border-layout-ct {
78         background-color: $border-layout-ct-background;
79     }
80
81     .#{$prefix}border-region-slide-in {
82         z-index: 5;
83     }
84
85     .#{$prefix}region-collapsed-placeholder {
86         z-index: 4;
87     }
88
89     .#{$prefix}accordion-hd .#{$prefix}panel-header-text {
90         color: $accordion-header-color;
91         font-weight: normal;
92     }
93
94     .#{$prefix}accordion-hd {
95         .#{$prefix}tool-collapse-top,
96         .#{$prefix}tool-collapse-right,
97         .#{$prefix}tool-collapse-bottom,
98         .#{$prefix}tool-collapse-left {
99             background-position: 0 -255px;
100         }
101
102         .#{$prefix}tool-expand-top,
103         .#{$prefix}tool-expand-right,
104         .#{$prefix}tool-expand-bottom,
105         .#{$prefix}tool-expand-left {
106             background-position: 0 -240px;
107         }
108
109         .#{$prefix}tool-over {
110             .#{$prefix}tool-collapse-top,
111             .#{$prefix}tool-collapse-right,
112             .#{$prefix}tool-collapse-bottom,
113             .#{$prefix}tool-collapse-left {
114                 background-position: -15px -255px;
115             }
116         }
117
118         .#{$prefix}tool-over {
119             .#{$prefix}tool-expand-top,
120             .#{$prefix}tool-expand-right,
121             .#{$prefix}tool-expand-bottom,
122             .#{$prefix}tool-expand-left {
123                 background-position: -15px -240px;
124             }
125         }
126
127         background: $accordion-header-background-color !important;
128         @include single-box-shadow($accordion-header-background-color, 0, 0, 0, 0, true);
129     }
130
131     .#{$prefix}accordion-hd {
132         border-width: 1px 0 1px 0 !important;
133         padding: 4px 5px 5px 5px;
134         border-top-color: $panel-header-inner-border-color !important;
135     }
136     
137     .#{$prefix}accordion-body {
138         border-width: 0 !important;
139     }
140     
141     .#{$prefix}accordion-hd-sibling-expanded {
142         border-top-color: $panel-border-color !important;
143         @include single-box-shadow($panel-header-inner-border-color, 0, 1px, 0, 0, true);
144     }
145
146     .#{$prefix}accordion-hd-last-collapsed {
147         border-bottom-color: $accordion-header-background-color !important;
148     }
149
150     .#{$prefix}frame-tl,
151     .#{$prefix}frame-tr,
152     .#{$prefix}frame-tc,
153     .#{$prefix}frame-bl,
154     .#{$prefix}frame-br,
155     .#{$prefix}frame-bc {
156         overflow: hidden;
157         background-repeat: no-repeat;
158     }
159
160     .#{$prefix}frame-tc,
161     .#{$prefix}frame-bc {
162         background-repeat: repeat-x;
163     }
164
165     .#{$prefix}frame-mc {
166         position: relative;
167         background-repeat: repeat-x;
168         overflow: hidden;
169     }
170
171     // Classes for horizontal Box layout scroller.
172     // Uses the *TAB* scroller image because it's all we have.
173     // This will not work well in other cases
174     .#{$prefix}box-scroller-left {
175         float: left;
176         height: 100%;
177
178         z-index: 5;
179
180         .#{$prefix}toolbar-scroll-left,
181         .#{$prefix}tabbar-scroll-left {
182             width: 18px;
183             position: relative;
184             cursor: pointer;
185             height: $tab-height;
186             background: transparent no-repeat -18px 0;
187             @include theme-background-image($theme-name, 'tab-bar/scroll-left.gif');
188         }
189         .#{$prefix}toolbar-scroll-left-hover {
190             background-position: 0 0;
191         }
192         .#{$prefix}toolbar-scroll-left-disabled,
193         .#{$prefix}tabbar-scroll-left-disabled {
194             background-position: -18px 0;
195             @include opacity(.5);
196             
197             cursor:default;
198         }
199
200         .#{$prefix}toolbar-scroll-left {
201             @include theme-background-image($theme-name, 'toolbar/scroll-left.gif');
202             background-position: -14px 0;
203         }
204         .#{$prefix}toolbar-scroll-left-hover {
205             background-position: 0 0;
206         }
207         .#{$prefix}toolbar-scroll-left-disabled {
208             background-position: -14px 0;
209         }
210
211         .#{$prefix}toolbar-scroll-left {
212             width: 14px;
213             height: 22px;
214
215             border-bottom: 1px solid #8db2e3;
216         }
217     }
218
219     .#{$prefix}horizontal-box-overflow-body {
220         float: left;
221     }
222     .#{$prefix}box-scroller-right {
223         float: right;
224         height: 100%;
225
226         z-index: 5;
227
228         .#{$prefix}toolbar-scroll-right,
229         .#{$prefix}tabbar-scroll-right {
230             width: 18px;
231             position: relative;
232             cursor: pointer;
233             height: $tab-height;
234             background: transparent no-repeat 0 0;
235             @include theme-background-image($theme-name, 'tab-bar/scroll-right.gif');
236         }
237         .#{$prefix}toolbar-scroll-right-hover {
238             background-position: -18px 0;
239         }
240         .#{$prefix}toolbar-scroll-right-disabled,
241         .#{$prefix}tabbar-scroll-right-disabled {
242             background-position: 0 0;
243             @include opacity(.5);
244             
245             cursor:default;
246         }
247
248         .#{$prefix}toolbar-scroll-right {
249             @include theme-background-image($theme-name, 'toolbar/scroll-right.gif');
250         }
251         .#{$prefix}toolbar-scroll-right-hover {
252             background-position: -14px 0;
253         }
254         .#{$prefix}toolbar-scroll-right-disabled {
255             background-position: 0 0;
256         }
257
258         .#{$prefix}toolbar-scroll-right {
259             width: 14px;
260             height: 22px;
261
262             border-bottom: 1px solid #8db2e3;
263         }
264     }
265
266 // Classes for vertical Box layout scroller
267     .#{$prefix}box-scroller-top {
268         .#{$prefix}box-scroller {
269             line-height: 0;
270             font-size: 0;
271         }
272         .#{$prefix}menu-scroll-top {
273             background: transparent no-repeat center center;
274             @include theme-background-image($theme-name, 'layout/mini-top.gif');
275             height: 8px;
276             cursor: pointer;
277         }
278     }
279     .#{$prefix}box-scroller-bottom {
280         .#{$prefix}box-scroller {
281             line-height: 0;
282             font-size: 0;
283         }
284         .#{$prefix}menu-scroll-bottom {
285             background: transparent no-repeat center center;
286             @include theme-background-image($theme-name, 'layout/mini-bottom.gif');
287             height: 8px;
288             cursor: pointer;
289         }
290     }
291
292     .#{$prefix}box-menu-right {
293         float: right;
294         padding-right: $toolbar-horizontal-spacing;
295     }
296
297     .#{$prefix}column {
298         float: left;
299     }
300     @if $include-ie {
301         .#{$prefix}ie6 .#{$prefix}column {
302             display: inline; /*prevent IE6 double-margin bug*/
303         }
304     }
305 }