PageRenderTime 59ms CodeModel.GetById 18ms app.highlight 33ms RepoModel.GetById 1ms app.codeStats 1ms

/ext-4.1.0_b3/resources/themes/stylesheets/ext4/default/layout/_layout.scss

https://bitbucket.org/srogerf/javascript
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}