source: branches/testFACT++branch/dim/WebDID/ext-4.1.1a/resources/themes/stylesheets/ext4/default/widgets/_tab.scss

Last change on this file was 14939, checked in by tbretz, 12 years ago
Added WebDID from v20r5
File size: 17.8 KB
Line 
1/**
2 * Creates the base structure of a Tab.
3 * @member Ext.tab.Tab
4 */
5@mixin extjs-tab {
6 @include x-frame(
7 $cls: 'tab',
8 $ui: 'default-top',
9 $border-radius: $tab-top-border-radius,
10 $border-width: $tab-top-border-width,
11 $background-color: $tab-base-color,
12 $background-gradient: $tab-background-gradient,
13 $background-direction: top,
14 $table: true
15 );
16
17 @include x-frame(
18 $cls: 'tab',
19 $ui: 'default-bottom',
20 $border-radius: $tab-bottom-border-radius,
21 $border-width: $tab-bottom-border-width,
22 $background-color: $tab-base-color,
23 $background-gradient: $tab-background-gradient,
24 $background-direction: bottom,
25 $table: true
26 );
27
28 .#{$prefix}tab {
29 z-index: 1;
30 margin: 0 0 0 $tab-spacing;
31 display: inline-block;
32 zoom: 1;
33 *display: inline;
34 white-space: nowrap;
35 height: $tab-height;
36 border-color: $tab-border-color;
37 cursor: pointer;
38 cursor: hand;
39
40 button {
41 cursor: pointer;
42 cursor: hand;
43 }
44
45 em {
46 display: block;
47 padding: 0 6px;
48 line-height: 1px;
49 }
50
51 button {
52 background: none;
53 border: 0;
54 padding: 0;
55 margin: 0;
56 -webkit-appearance: none;
57 font-size: $tab-font-size;
58 @if $tab-font-weight {
59 font-weight: $tab-font-weight;
60 }
61 @if $tab-font-family {
62 font-family: $tab-font-family;
63 }
64
65 color: $tab-color;
66 outline: 0 none;
67 overflow-x: visible;
68
69 &::-moz-focus-inner {
70 border: 0;
71 padding: 0;
72 }
73
74 .#{$prefix}tab-inner {
75 background-color: transparent;
76 background-repeat: no-repeat;
77 background-position: 0 -2px;
78 display: block;
79 text-align: center;
80 white-space: nowrap;
81 text-overflow: ellipsis;
82 -o-text-overflow: ellipsis;
83 overflow: hidden;
84 }
85 }
86
87 img {
88 display: none;
89 }
90 }
91
92 .#{$prefix}border-box {
93 .#{$prefix}tab-default-top {
94 height: $tab-height + top($tabbar-top-strip-border-width);
95 }
96 .#{$prefix}tab-default-bottom {
97 height: $tab-height + bottom($tabbar-bottom-strip-border-width);
98 }
99 }
100
101 @if $include-ie {
102 * html .#{$prefix}ie {
103 .#{$prefix}tab button {
104 width: 1px;
105 }
106 }
107
108 .#{$prefix}strict .#{$prefix}ie6,
109 .#{$prefix}strict .#{$prefix}ie7 {
110 .#{$prefix}tab .#{$prefix}frame-mc {
111 height: 100%;
112 }
113 }
114
115 .#{$prefix}ie .#{$prefix}tab-active button:active {
116 position: relative;
117 top: -1px;
118 left: -1px;
119 }
120 }
121
122 $framepad: max(top($tab-top-border-radius), right($tab-top-border-radius)) - top($tab-top-border-width);
123
124 .#{$prefix}tab-default-top {
125 @if $tab-inner-border {
126 @include inner-border(
127 $width: $tab-top-inner-border-width,
128 $color: $tab-inner-border-color
129 );
130 }
131
132 border-bottom: 1px solid $tabbar-strip-border-color !important;
133
134 em {
135 padding-bottom: $framepad;
136 }
137
138 button,
139 .#{$prefix}tab-inner {
140 height: $tab-height - $framepad * 2 - top($tab-top-border-width);
141 line-height: $tab-height - $framepad * 2 - top($tab-top-border-width);
142 }
143 }
144
145 // corrects text being clipped at the bottom in safari4 & 5.0.5
146 .#{$prefix}safari4,
147 .#{$prefix}safari5_0 {
148 .#{$prefix}tab-default-top .#{$prefix}tab-inner {
149 line-height: $tab-height - $framepad * 2 - top($tab-top-border-width) - 2;
150 }
151 }
152
153 .#{$prefix}nbr .#{$prefix}tab-default-top {
154 border-bottom-width: 1px !important;
155 }
156
157 .#{$prefix}tab-default-top-active {
158 border-bottom-color: $tabbar-strip-background-color !important;
159 }
160
161 $framepad: max(bottom($tab-bottom-border-radius), left($tab-bottom-border-radius)) - bottom($tab-bottom-border-width);
162
163 .#{$prefix}tab-default-bottom {
164 @if $tab-inner-border {
165 @include inner-border(
166 $width: $tab-bottom-inner-border-width,
167 $color: $tab-inner-border-color
168 );
169 }
170
171 border-top: 1px solid $tabbar-strip-border-color !important;
172
173 @include inner-border(
174 $width: $tab-bottom-inner-border-width,
175 $color: $tab-inner-border-color
176 );
177
178 em {
179 padding-top: $framepad;
180 }
181
182 button,
183 .#{$prefix}tab-inner {
184 height: $tab-height - $framepad * 2 - bottom($tab-bottom-border-width);
185 line-height: $tab-height - $framepad * 2 - bottom($tab-bottom-border-width);
186 }
187 }
188
189 .#{$prefix}nbr .#{$prefix}tab-default-bottom {
190 border-top-width: 1px !important;
191 }
192
193 .#{$prefix}tab-default-bottom-active {
194 border-top-color: $tabbar-strip-background-color !important;
195 }
196
197 .#{$prefix}tab-default-disabled {
198 cursor: default;
199
200 border-color: $tab-border-color-disabled;
201 @include background-gradient($tab-base-color-disabled, $tab-background-gradient-disabled);
202
203 button {
204 color: $tab-color-disabled !important;
205 }
206 }
207
208 .#{$prefix}tab-icon-text-left {
209 .#{$prefix}tab-inner {
210 padding-left: 20px;
211 }
212 }
213
214 .#{$prefix}tab button {
215 position: relative;
216 }
217
218 .#{$prefix}tab-icon {
219 position: absolute;
220 background-repeat: no-repeat;
221 background-position: 0 -1px;
222 top: 0;
223 left: 0;
224 right: auto;
225 bottom: 0;
226 width: 18px;
227 height: 18px;
228 }
229
230 // Stop icons being clipped by the bottom of the button element
231 .#{$prefix}strict {
232 .#{$prefix}ie8 .#{$prefix}tab button,
233 .#{$prefix}ie9 .#{$prefix}tab button {
234 overflow-y: visible;
235 }
236 }
237
238 .#{$prefix}tab-default-disabled .#{$prefix}tab-icon {
239 @include opacity(.5);
240 }
241
242 /* In IE a disabled icon needs to be hidden or the opacity effect covers some of the text */
243 .#{$prefix}tab-noicon .#{$prefix}tab-icon {
244 display: none;
245 }
246
247 //over
248 .#{$prefix}tab-over {
249 @if $tab-border-color-over != $tab-border-color {
250 border-color: $tab-border-color-over;
251 }
252
253 button {
254 @if $tab-color-over != $tab-color {
255 color: $tab-color-over;
256 }
257 @if $tab-font-weight-over != $tab-font-weight {
258 font-weight: $tab-font-weight-over;
259 }
260 @if $tab-font-size-over != $tab-font-size {
261 font-size: $tab-font-size-over;
262 }
263 @if $tab-font-family-over != $tab-font-family {
264 font-family: $tab-font-family-over;
265 }
266 }
267 }
268
269 .#{$prefix}tab-top-over {
270 @include background-gradient($tab-base-color-over, $tab-background-gradient-over, top);
271 }
272 .#{$prefix}tab-bottom-over {
273 @include background-gradient($tab-base-color-over, $tab-background-gradient-over, bottom);
274 }
275
276 //active
277 .#{$prefix}tab-active {
278 z-index: 3;
279 @if $tab-border-color-active != $tab-border-color {
280 border-color: $tab-border-color-active;
281 }
282
283 button {
284 @if $tab-color-active != $tab-color {
285 color: $tab-color-active;
286 }
287 @if $tab-font-weight-active != $tab-font-weight {
288 font-weight: $tab-font-weight-active;
289 }
290 @if $tab-font-size-active != $tab-font-size {
291 font-size: $tab-font-size-active;
292 }
293 @if $tab-font-family-active != $tab-font-family {
294 font-family: $tab-font-family-active;
295 }
296 }
297 }
298
299 .#{$prefix}tab-top-active {
300 @include background-gradient($tab-base-color-active, $tab-background-gradient-active, top);
301 }
302 .#{$prefix}tab-bottom-active {
303 @include background-gradient($tab-base-color-active, $tab-background-gradient-active, bottom);
304 }
305
306 //disabled
307 .#{$prefix}tab-disabled {
308 @if $tab-border-color-disabled != $tab-border-color {
309 border-color: $tab-border-color-disabled;
310 }
311
312 button {
313 @if $tab-color-disabled != $tab-color {
314 color: $tab-color-disabled;
315 }
316 @if $tab-font-weight-disabled != $tab-font-weight {
317 font-weight: $tab-font-weight-disabled;
318 }
319 @if $tab-font-size-disabled != $tab-font-size {
320 font-size: $tab-font-size-disabled;
321 }
322 @if $tab-font-family-disabled != $tab-font-family {
323 font-family: $tab-font-family-disabled;
324 }
325 }
326 }
327
328 .#{$prefix}tab-top-disabled {
329 background-image: none;
330 background: transparent;
331 @include background-gradient($tab-base-color-disabled, $tab-background-gradient-disabled, top);
332 }
333 .#{$prefix}tab-bottom-disabled {
334 background-image: none;
335 background: transparent;
336 @include background-gradient($tab-base-color-disabled, $tab-background-gradient-disabled, bottom);
337 }
338
339 @if not $supports-gradients or $compile-all {
340 .#{$prefix}nlg {
341 @if $tab-background-gradient != null {
342 .#{$prefix}tab-top { background-image: theme-background-image($theme-name, 'tab/tab-default-top-bg.gif'); }
343 .#{$prefix}tab-bottom { background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-bg.gif'); }
344 }
345
346 @if $tab-background-gradient-over != null {
347 .#{$prefix}tab-top-over { background-image: theme-background-image($theme-name, 'tab/tab-default-top-over-bg.gif'); }
348 .#{$prefix}tab-bottom-over { background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-over-bg.gif'); }
349 }
350
351 @if $tab-background-gradient-active != null {
352 .#{$prefix}tab-top-active { background-image: theme-background-image($theme-name, 'tab/tab-default-top-active-bg.gif'); }
353 .#{$prefix}tab-bottom-active { background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-active-bg.gif'); }
354 }
355
356 @if $tab-background-gradient-disabled != null {
357 .#{$prefix}tab-top-disabled { background-image: theme-background-image($theme-name, 'tab/tab-default-top-disabled-bg.gif') !important; }
358 .#{$prefix}tab-bottom-disabled { background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-disabled-bg.gif') !important; }
359 }
360 }
361 }
362
363 .#{$prefix}tab-closable em {
364 padding-right: $tab-closable-icon-width + 3;
365 }
366
367 .#{$prefix}tab-close-btn {
368 position: absolute;
369 top: $tab-closable-icon-top;
370 right: $tab-closable-icon-right;
371 width: $tab-closable-icon-width;
372 height: $tab-closable-icon-height;
373 font-size: 0;
374 line-height: 0;
375 text-indent: -999px;
376 background: no-repeat;
377 background-image: theme-background-image($theme-name, $tab-closable-icon);
378 @include opacity(.6);
379 }
380
381 .#{$prefix}nbr .#{$prefix}tab-close-btn {
382 top: $nbr-tab-closable-icon-top;
383 right: $nbr-tab-closable-icon-right;
384 }
385
386 /* Include the element name otherwise Internet Explorer 7 & 8 take a performance hit */
387 a.#{$prefix}tab-close-btn:hover {
388 @include opacity(1);
389 }
390
391 /* Include the element name to raise the specificity to equal the :hover */
392 .#{$prefix}tab-default-disabled a.#{$prefix}tab-close-btn {
393 @include opacity(0.3);
394 }
395
396 @if not $supports-border-radius or $compile-all {
397 .#{$prefix}nbr {
398 .#{$prefix}tab-top-over {
399 .#{$prefix}frame-tl,
400 .#{$prefix}frame-bl,
401 .#{$prefix}frame-tr,
402 .#{$prefix}frame-br,
403 .#{$prefix}frame-tc,
404 .#{$prefix}frame-bc {
405 background-image: theme-background-image($theme-name, 'tab/tab-default-top-over-corners.gif');
406 }
407 .#{$prefix}frame-ml,
408 .#{$prefix}frame-mr {
409 background-image: theme-background-image($theme-name, 'tab/tab-default-top-over-sides.gif');
410 }
411 @if $tab-background-gradient-over != null {
412 .#{$prefix}frame-mc {
413 background-color: $tab-base-color-over;
414 background-repeat: repeat-x;
415 background-image: theme-background-image($theme-name, 'tab/tab-default-top-over-bg.gif');
416 }
417 }
418 }
419
420 .#{$prefix}tab-bottom-over {
421 .#{$prefix}frame-tl,
422 .#{$prefix}frame-bl,
423 .#{$prefix}frame-tr,
424 .#{$prefix}frame-br,
425 .#{$prefix}frame-tc,
426 .#{$prefix}frame-bc {
427 background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-over-corners.gif');
428 }
429 .#{$prefix}frame-ml,
430 .#{$prefix}frame-mr {
431 background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-over-sides.gif');
432 }
433 @if $tab-background-gradient-over != null {
434 .#{$prefix}frame-mc {
435 background-color: $tab-base-color-over;
436 background-repeat: repeat-x;
437 background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-over-bg.gif');
438 }
439 }
440 }
441
442 .#{$prefix}tab-top-active {
443 .#{$prefix}frame-tl,
444 .#{$prefix}frame-bl,
445 .#{$prefix}frame-tr,
446 .#{$prefix}frame-br,
447 .#{$prefix}frame-tc,
448 .#{$prefix}frame-bc {
449 background-image: theme-background-image($theme-name, 'tab/tab-default-top-active-corners.gif');
450 }
451 .#{$prefix}frame-ml,
452 .#{$prefix}frame-mr {
453 background-image: theme-background-image($theme-name, 'tab/tab-default-top-active-sides.gif');
454 }
455 @if $tab-background-gradient-active != null {
456 .#{$prefix}frame-mc {
457 background-color: $tab-base-color-active;
458 background-repeat: repeat-x;
459 background-image: theme-background-image($theme-name, 'tab/tab-default-top-active-bg.gif');
460 }
461 }
462 }
463
464 .#{$prefix}tab-bottom-active {
465 .#{$prefix}frame-tl,
466 .#{$prefix}frame-bl,
467 .#{$prefix}frame-tr,
468 .#{$prefix}frame-br,
469 .#{$prefix}frame-tc,
470 .#{$prefix}frame-bc {
471 background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-active-corners.gif');
472 }
473 .#{$prefix}frame-ml,
474 .#{$prefix}frame-mr {
475 background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-active-sides.gif');
476 }
477 @if $tab-background-gradient-active != null {
478 .#{$prefix}frame-mc {
479 background-color: $tab-base-color-active;
480 background-repeat: repeat-x;
481 background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-active-bg.gif');
482 }
483 }
484 }
485
486 .#{$prefix}tab-top-disabled {
487 .#{$prefix}frame-tl,
488 .#{$prefix}frame-bl,
489 .#{$prefix}frame-tr,
490 .#{$prefix}frame-br,
491 .#{$prefix}frame-tc,
492 .#{$prefix}frame-bc {
493 background-image: theme-background-image($theme-name, 'tab/tab-default-top-disabled-corners.gif');
494 }
495 .#{$prefix}frame-ml,
496 .#{$prefix}frame-mr {
497 background-image: theme-background-image($theme-name, 'tab/tab-default-top-disabled-sides.gif');
498 }
499 @if $tab-background-gradient-disabled != null {
500 .#{$prefix}frame-mc {
501 background-repeat: repeat-x;
502 background-image: theme-background-image($theme-name, 'tab/tab-default-top-disabled-bg.gif');
503 }
504 }
505 }
506
507 .#{$prefix}tab-bottom-disabled {
508 .#{$prefix}frame-tl,
509 .#{$prefix}frame-bl,
510 .#{$prefix}frame-tr,
511 .#{$prefix}frame-br,
512 .#{$prefix}frame-tc,
513 .#{$prefix}frame-bc {
514 background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-disabled-corners.gif');
515 }
516 .#{$prefix}frame-ml,
517 .#{$prefix}frame-mr {
518 background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-disabled-sides.gif');
519 }
520 @if $tab-background-gradient-disabled != null {
521 .#{$prefix}frame-mc {
522 background-repeat: repeat-x;
523 background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-disabled-bg.gif');
524 }
525 }
526 }
527 }
528 }
529}
Note: See TracBrowser for help on using the repository browser.