Revert "[TASK] Migrate to ExtJS 4: Migrate Backend Base Components"
[Packages/TYPO3.CMS.git] / typo3 / sysext / t3skin / extjs / themes / stylesheets / ext4 / default / widgets / _tabbar.scss
1 /**
2   * @class Ext.tab.Bar
3   */
4 @mixin extjs-tabbar {
5     .#{$prefix}tab-bar {
6         position: relative;
7         background-color: transparent;
8         @include background-gradient($tabbar-base-color, $tabbar-background-gradient);
9         font-size: $tab-font-size;
10     }
11
12     .#{$prefix}nlg .#{$prefix}tab-bar {
13         background-image: theme-image($theme-name, 'tab-bar/tab-bar-bg.gif');
14     }
15
16     .#{$prefix}tab-bar-default-plain,
17     .#{$prefix}nlg .#{$prefix}tab-bar-default-plain {
18         background: transparent none;
19     }
20
21     
22     .#{$prefix}tab-bar-body {
23         border-style: solid;
24         border-color: $tabbar-border-color;
25
26         position: relative;
27         z-index: 2;
28         zoom: 1;
29     }
30
31     @mixin tab-bar-top($toolbarCls, $bodyCls, $stripCls, $body-padding, $body-border-width, $strip-border-width, $strip-height) {
32         .#{$prefix}#{$toolbarCls} {
33             .#{$prefix}#{$bodyCls} {
34                 height: $tab-height;
35                 border-width: $body-border-width;
36                 padding: $body-padding;
37             }
38
39             .#{$prefix}#{$stripCls} {
40                 /*position strip from top rather than bottom to avoid off-by-one error in IE6*/
41                 top: $tab-height + top($body-border-width) + top($body-padding);
42                 border-width: $strip-border-width;
43                 height: $strip-height - vertical($strip-border-width);
44             }
45         }
46         .#{$prefix}border-box {
47             .#{$prefix}#{$toolbarCls} {
48                 .#{$prefix}#{$bodyCls} {
49                     height: $tab-height + vertical($body-border-width) + vertical($body-padding);
50                 }
51
52                 .#{$prefix}#{$stripCls} {
53                     height: $strip-height;
54                 }
55             }
56         }
57     }
58
59     @mixin tab-bar-bottom($toolbarCls, $bodyCls, $stripCls, $body-padding, $body-border-width, $strip-border-width, $strip-height) {
60         .#{$prefix}#{$toolbarCls} {
61             .#{$prefix}#{$bodyCls} {
62                 height: $tab-height;
63                 border-width: $body-border-width;
64                 padding: $body-padding;
65
66                 .#{$prefix}box-inner {
67                     position: relative;
68                     top: 0 - bottom($strip-border-width);
69                 }
70
71                 .#{$prefix}box-scroller,
72                 .#{$prefix}box-scroller-left,
73                 .#{$prefix}box-scroller-right {
74                     height: $tab-height + bottom($body-padding) + bottom($strip-border-width);
75                 }
76             }
77
78             .#{$prefix}#{$stripCls} {
79                 top: top($body-border-width);
80                 border-width: $strip-border-width;
81                 height: $strip-height - vertical($strip-border-width);
82             }
83         }
84         .#{$prefix}border-box {
85             .#{$prefix}#{$toolbarCls} {
86                 .#{$prefix}#{$bodyCls} {
87                     height: $tab-height + vertical($body-border-width) + vertical($body-padding);
88                 }
89
90                 .#{$prefix}#{$stripCls} {
91                     height: $strip-height;
92                 }
93             }
94         }
95     }
96
97
98     /* Top Tabs */
99     @include tab-bar-top(
100         "tab-bar-top",
101         "tab-bar-body",
102         "tab-bar-strip",
103         $tabbar-top-body-padding,
104         $tabbar-top-body-border-width,
105         $tabbar-top-strip-border-width,
106         $tabbar-strip-height
107     );
108     @include tab-bar-top(
109         "tab-bar-top",
110         "tab-bar-body-default-plain",
111         "tab-bar-strip-default-plain",
112         $tabbar-top-plain-body-padding,
113         $tabbar-top-plain-body-border-width,
114         $tabbar-top-strip-border-width,
115         $tabbar-strip-height
116     );
117
118     /* Bottom Tabs */
119     @include tab-bar-bottom(
120         "tab-bar-bottom",
121         "tab-bar-body",
122         "tab-bar-strip",
123         $tabbar-bottom-body-padding,
124         $tabbar-bottom-body-border-width,
125         $tabbar-bottom-strip-border-width,
126         $tabbar-strip-height
127     );
128     
129     @include tab-bar-bottom(
130         "tab-bar-bottom",
131         "tab-bar-body-default-plain",
132         "tab-bar-strip-default-plain",
133         $tabbar-bottom-plain-body-padding,
134         $tabbar-bottom-plain-body-border-width,
135         $tabbar-bottom-strip-border-width,
136         $tabbar-strip-height
137     );
138
139     .#{$prefix}tab-bar-strip-default,
140     .#{$prefix}tab-bar-strip-default-plain {
141         font-size: 0;
142         line-height: 0;
143         position: absolute;
144         z-index: 1;
145         border-style: solid;
146         overflow: hidden;
147         border-color: $tabbar-strip-border-color;
148         background-color: $tabbar-strip-background-color;
149         zoom: 1;
150     }
151 }