/ext-4.1.0_b3/resources/themes/stylesheets/ext4/default/layout/_layout.scss
Sass | 322 lines | 261 code | 53 blank | 8 comment | 0 complexity | 3cc115bb751e8f8f0af5924afa79db6e MD5 | raw file
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}rtl .#{$prefix}box-item {
60 right: 0;
61 left: auto;
62 }
63
64 .#{$prefix}box-layout-ct,
65 .#{$prefix}border-layout-ct {
66 overflow: hidden;
67 zoom: 1;
68 }
69
70 .#{$prefix}overflow-hidden {
71 overflow:hidden !important;
72 }
73
74 .#{$prefix}inline-children > * {
75 display: inline-block !important;
76 }
77
78 .#{$prefix}abs-layout-ct {
79 position: relative;
80 }
81
82 .#{$prefix}abs-layout-item {
83 position: absolute;
84 }
85
86 .#{$prefix}fit-item {
87 position: relative;
88 }
89
90 .#{$prefix}border-layout-ct {
91 background-color: $border-layout-ct-background;
92 }
93
94 .#{$prefix}border-region-slide-in {
95 z-index: 5;
96 }
97
98 .#{$prefix}region-collapsed-placeholder {
99 z-index: 4;
100 }
101
102 .#{$prefix}accordion-hd .#{$prefix}panel-header-text {
103 color: $accordion-header-color;
104 font-weight: normal;
105 }
106
107 .#{$prefix}accordion-hd {
108 .#{$prefix}tool-collapse-top,
109 .#{$prefix}tool-collapse-right,
110 .#{$prefix}tool-collapse-bottom,
111 .#{$prefix}tool-collapse-left {
112 background-position: 0 -255px;
113 }
114
115 .#{$prefix}tool-expand-top,
116 .#{$prefix}tool-expand-right,
117 .#{$prefix}tool-expand-bottom,
118 .#{$prefix}tool-expand-left {
119 background-position: 0 -240px;
120 }
121
122 .#{$prefix}tool-over {
123 .#{$prefix}tool-collapse-top,
124 .#{$prefix}tool-collapse-right,
125 .#{$prefix}tool-collapse-bottom,
126 .#{$prefix}tool-collapse-left {
127 background-position: -15px -255px;
128 }
129 }
130
131 .#{$prefix}tool-over {
132 .#{$prefix}tool-expand-top,
133 .#{$prefix}tool-expand-right,
134 .#{$prefix}tool-expand-bottom,
135 .#{$prefix}tool-expand-left {
136 background-position: -15px -240px;
137 }
138 }
139
140 background: $accordion-header-background-color !important;
141 @include single-box-shadow($accordion-header-background-color, 0, 0, 0, 0, true);
142 }
143
144 .#{$prefix}accordion-hd {
145 border-width: 1px 0 1px 0 !important;
146 padding: 4px 5px 5px 5px;
147 border-top-color: $panel-header-inner-border-color !important;
148 }
149
150 .#{$prefix}accordion-body {
151 border-width: 0 !important;
152 }
153
154 .#{$prefix}accordion-hd-sibling-expanded {
155 border-top-color: $panel-border-color !important;
156 @include single-box-shadow($panel-header-inner-border-color, 0, 1px, 0, 0, true);
157 }
158
159 .#{$prefix}accordion-hd-last-collapsed {
160 border-bottom-color: $accordion-header-background-color !important;
161 }
162
163 .#{$prefix}frame-tl,
164 .#{$prefix}frame-tr,
165 .#{$prefix}frame-tc,
166 .#{$prefix}frame-bl,
167 .#{$prefix}frame-br,
168 .#{$prefix}frame-bc {
169 overflow: hidden;
170 background-repeat: no-repeat;
171 }
172
173 .#{$prefix}frame-tc,
174 .#{$prefix}frame-bc {
175 background-repeat: repeat-x;
176 }
177
178 .#{$prefix}frame-mc {
179 position: relative;
180 background-repeat: repeat-x;
181 overflow: hidden;
182 }
183
184 // Classes for horizontal Box layout scroller.
185 // Uses the *TAB* scroller image because it's all we have.
186 // This will not work well in other cases
187 .#{$prefix}box-scroller-left {
188 float: left;
189 height: 100%;
190
191 z-index: 5;
192
193 .#{$prefix}toolbar-scroll-left,
194 .#{$prefix}tabbar-scroll-left {
195 width: 18px;
196 position: relative;
197 cursor: pointer;
198 height: $tab-height;
199 background: transparent no-repeat -18px 0;
200 background-image: theme-background-image($theme-name, 'tab-bar/scroll-left.gif');
201 }
202 .#{$prefix}toolbar-scroll-left-hover {
203 background-position: 0 0;
204 }
205 .#{$prefix}toolbar-scroll-left-disabled,
206 .#{$prefix}tabbar-scroll-left-disabled {
207 background-position: -18px 0;
208 @include opacity(.5);
209
210 cursor:default;
211 }
212
213 .#{$prefix}toolbar-scroll-left {
214 background-image: theme-background-image($theme-name, 'toolbar/scroll-left.gif');
215 background-position: -14px 0;
216 }
217 .#{$prefix}toolbar-scroll-left-hover {
218 background-position: 0 0;
219 }
220 .#{$prefix}toolbar-scroll-left-disabled {
221 background-position: -14px 0;
222 }
223
224 .#{$prefix}toolbar-scroll-left {
225 width: 14px;
226 height: 22px;
227
228 border-bottom: 1px solid #8db2e3;
229 }
230 }
231
232 .#{$prefix}horizontal-box-overflow-body {
233 float: left;
234 }
235 .#{$prefix}box-scroller-right {
236 float: right;
237 height: 100%;
238
239 z-index: 5;
240
241 .#{$prefix}toolbar-scroll-right,
242 .#{$prefix}tabbar-scroll-right {
243 width: 18px;
244 position: relative;
245 cursor: pointer;
246 height: $tab-height;
247 background: transparent no-repeat 0 0;
248 background-image: theme-background-image($theme-name, 'tab-bar/scroll-right.gif');
249 }
250 .#{$prefix}toolbar-scroll-right-hover {
251 background-position: -18px 0;
252 }
253 .#{$prefix}toolbar-scroll-right-disabled,
254 .#{$prefix}tabbar-scroll-right-disabled {
255 background-position: 0 0;
256 @include opacity(.5);
257
258 cursor:default;
259 }
260
261 .#{$prefix}toolbar-scroll-right {
262 background-image: theme-background-image($theme-name, 'toolbar/scroll-right.gif');
263 }
264 .#{$prefix}toolbar-scroll-right-hover {
265 background-position: -14px 0;
266 }
267 .#{$prefix}toolbar-scroll-right-disabled {
268 background-position: 0 0;
269 }
270
271 .#{$prefix}toolbar-scroll-right {
272 width: 14px;
273 height: 22px;
274
275 border-bottom: 1px solid #8db2e3;
276 }
277 }
278
279// Classes for vertical Box layout scroller
280 .#{$prefix}box-scroller-top {
281 .#{$prefix}box-scroller {
282 line-height: 0;
283 font-size: 0;
284 }
285 .#{$prefix}menu-scroll-top {
286 background: transparent no-repeat center center;
287 background-image: theme-background-image($theme-name, 'layout/mini-top.gif');
288 height: 8px;
289 cursor: pointer;
290 }
291 }
292 .#{$prefix}box-scroller-bottom {
293 .#{$prefix}box-scroller {
294 line-height: 0;
295 font-size: 0;
296 }
297 .#{$prefix}menu-scroll-bottom {
298 background: transparent no-repeat center center;
299 background-image: theme-background-image($theme-name, 'layout/mini-bottom.gif');
300 height: 8px;
301 cursor: pointer;
302 }
303 }
304
305 .#{$prefix}box-menu-right {
306 float: right;
307 padding-right: $toolbar-horizontal-spacing;
308 }
309
310 .#{$prefix}column {
311 float: left;
312 }
313 @if $include-ie {
314 .#{$prefix}ie6 .#{$prefix}column {
315 display: inline; /*prevent IE6 double-margin bug*/
316 }
317
318 .#{$prefix}quirks .#{$prefix}ie .#{$prefix}form-layout-tbody, #{$prefix}quirks .#{$prefix}ie .#{$prefix}form-layout-tbody tr.#{$prefix}form-item {
319 position: relative;
320 }
321 }
322}