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