]>
Commit | Line | Data |
---|---|---|
81bea17a AD |
1 | /* TabContainer |
2 | * | |
3 | * Styling TabContainer means styling the TabList and Its content container (dijitTitlePane) | |
4 | * | |
5 | * Tab List: (including 4 kinds of tab location) | |
6 | * .dijitTabContainerTop-tabs - tablist container at top | |
7 | * .dijitTabContainerBottom-tabs - tablist container at bottom | |
8 | * .dijitTabContainerLeft-tabs - tablist container at left | |
9 | * .dijitTabContainerRight-tabs - tablist container at right | |
10 | * | |
11 | * Tab Strip Button: | |
12 | * .dijitTabStripIcon - tab strip button icon | |
13 | * .dijitTabStripMenuIcon - down arrow icon position | |
14 | * .dijitTabStripSlideLeftIcon - left arrow icon position | |
15 | * .dijitTabStripSlideRightIcon - right arrow icon position | |
16 | * | |
17 | * .tabStripButtonDisabled - styles for disabled tab strip buttons | |
18 | * | |
19 | * Tab Button: | |
f0cfe83e AD |
20 | * .dijitTabContainerTop-tabs .dijitTab - styles for top tab button container |
21 | * .dijitTabContainerBottom-tabs .dijitTab - styles for bottom tab button container | |
22 | * .dijitTabContainerLeft-tabs .dijitTab - styles for left tab button container | |
23 | * .dijitTabContainerRight-tabs .dijitTab - styles for right tab button container | |
81bea17a | 24 | * |
f0cfe83e | 25 | * .dijitTabContainerTop-tabs .dijitTabChecked .dijitTab |
81bea17a AD |
26 | * - styles for selected status of top tab button |
27 | * same to Bottom, Left, Right Tabs | |
28 | * | |
f0cfe83e AD |
29 | * .dijitTabHover .dijitTab - styles when mouse hover on tab buttons |
30 | * .dijitTabActive .dijitTab - styles when mouse down on tab buttons | |
31 | * .dijitTabChecked .dijitTab - styles when on buttons of selected tab | |
81bea17a AD |
32 | * |
33 | * .dijitTabCloseButton - the close action buttons lie at the right top of each tab button on closable tabs | |
34 | * .dijitTabCloseButtonHover - styles when mouse hover on close action button | |
35 | * .dijitTabCloseButtonActive - styles when mouse down on close action button | |
36 | * | |
37 | * Tab Button: (checked status) | |
38 | * | |
39 | * Tab Content Container: | |
40 | * .dijitTabContainerTop-dijitContentPane | |
41 | * .dijitTabContainerBottom-dijitContentPane | |
42 | * .dijitTabContainerLeft-dijitContentPane | |
43 | * .dijitTabContainerRight-dijitContentPane - for background and padding | |
44 | * | |
45 | * Nested Tabs: | |
46 | * .dijitTabContainerNested - Container for nested tabs | |
47 | * .dijitTabContainerTabListNested - tab list container for nested tabs | |
48 | */ | |
49 | ||
50 | @import "../variables"; | |
51 | ||
f0cfe83e AD |
52 | .unselected-tab-gradient (@direction) { |
53 | // white line, dark line, then fade from light to dark | |
54 | .alpha-white-gradient (@direction, 1,0px, 1,1px, 0.1,2px, 0.6,7px, 0,100%); | |
55 | } | |
56 | .topBottom-selected-tab-gradient (@direction) { | |
57 | .alpha-white-gradient (@direction, 1,0px, 1,1px, 0,2px, 1,7px); // white line, blue line, remainder white | |
58 | } | |
81bea17a AD |
59 | /*** some common features ***/ |
60 | .claro .dijitTabPaneWrapper { | |
61 | background:@pane-background-color; | |
62 | } | |
63 | .claro .dijitTabPaneWrapper, | |
64 | .claro .dijitTabContainerTop-tabs, | |
65 | .claro .dijitTabContainerBottom-tabs, | |
66 | .claro .dijitTabContainerLeft-tabs, | |
67 | .claro .dijitTabContainerRight-tabs { | |
68 | /* todo: add common class name for this div */ | |
69 | border-color: @border-color; | |
70 | } | |
71 | .claro .dijitTabCloseButton { | |
1354d172 | 72 | background: url("../@{image-layout-tab-close}") no-repeat; |
81bea17a AD |
73 | width: 14px; |
74 | height: 14px; | |
75 | margin-left: 5px; | |
76 | margin-right:-5px; | |
77 | } | |
78 | .claro .dijitTabCloseButtonHover { | |
79 | background-position:-14px; | |
80 | } | |
81 | .claro .dijitTabCloseButtonActive { | |
82 | background-position:-28px; | |
83 | } | |
84 | .claro .dijitTabSpacer { | |
85 | /* set the spacer invisible. note that height:0 doesn't work on IE/quirks, it's still 10px. */ | |
86 | display: none; | |
87 | } | |
f0cfe83e AD |
88 | .claro .dijitTab { |
89 | border: 1px solid @border-color; | |
81bea17a AD |
90 | background-color:@unselected-background-color; |
91 | .transition-property(background-color, border); | |
92 | .transition-duration(.35s); | |
93 | color:@unselected-text-color; | |
94 | } | |
f0cfe83e AD |
95 | .claro .dijitTabHover { |
96 | border-color: @hovered-border-color; | |
81bea17a AD |
97 | background-color:@hovered-background-color; |
98 | .transition-duration(.25s); | |
99 | color:@hovered-text-color; | |
100 | } | |
f0cfe83e AD |
101 | .claro .dijitTabActive { |
102 | border-color: @pressed-border-color; | |
81bea17a AD |
103 | background-color:@pressed-background-color; |
104 | color:@selected-text-color; | |
105 | .transition-duration(.1s); | |
106 | } | |
f0cfe83e AD |
107 | .claro .dijitTabChecked { |
108 | // selected tab | |
81bea17a | 109 | border-color: @border-color; // don't use @selected-border-color because need to match border of TabContainer |
f0cfe83e AD |
110 | background-color: @selected-background-color; |
111 | color: @selected-text-color; | |
112 | } | |
113 | .claro .dijitTabDisabled { | |
114 | background-color: @tab-disabled-background-color; | |
81bea17a AD |
115 | } |
116 | ||
f0cfe83e | 117 | .claro .tabStripButton { |
81bea17a | 118 | background-color: transparent; |
81bea17a AD |
119 | border: none; |
120 | } | |
121 | /*** end common ***/ | |
122 | ||
123 | ||
124 | /*************** top tab ***************/ | |
125 | .claro .dijitTabContainerTop-tabs .dijitTab { | |
f0cfe83e | 126 | /* unselected (and not hovered/pressed) tab */ |
81bea17a AD |
127 | top: 1px; /* used for overlap */ |
128 | margin-right: 1px; | |
81bea17a AD |
129 | padding:3px 6px; |
130 | border-bottom-width: 0; | |
81bea17a AD |
131 | min-width: 60px; |
132 | text-align: center; | |
f0cfe83e AD |
133 | |
134 | // gradient (CSS gradient, with backup image for IE6-9) | |
135 | background-image: url("images/tabTopUnselected.png"); | |
136 | background-repeat: repeat-x; | |
137 | .unselected-tab-gradient(top); | |
138 | ||
139 | .box-shadow(0 -1px 1px rgba(0, 0, 0, 0.04)); | |
81bea17a | 140 | } |
f0cfe83e AD |
141 | |
142 | .claro .dijitTabContainerTop-tabs .dijitTabChecked { | |
143 | /* selected tab */ | |
81bea17a | 144 | padding-bottom: 4px; |
f0cfe83e | 145 | padding-top: 9px; |
81bea17a | 146 | |
f0cfe83e AD |
147 | // gradient (CSS gradient, with backup image for IE6-9) |
148 | background-image: url("images/tabTopSelected.png"); | |
149 | .topBottom-selected-tab-gradient (top); | |
81bea17a | 150 | |
81bea17a AD |
151 | .box-shadow(0 -1px 2px rgba(0, 0, 0, 0.05)); |
152 | } | |
f0cfe83e | 153 | |
81bea17a AD |
154 | /** end top tab **/ |
155 | ||
156 | ||
157 | /*************** bottom tab ***************/ | |
158 | .claro .dijitTabContainerBottom-tabs .dijitTab { | |
f0cfe83e | 159 | /* unselected (and not hovered/pressed) tab */ |
81bea17a AD |
160 | top: -1px; /* used for overlap */ |
161 | margin-right: 1px; | |
81bea17a AD |
162 | padding:3px 6px; |
163 | border-top-width: 0; | |
81bea17a AD |
164 | min-width: 60px; |
165 | text-align: center; | |
f0cfe83e AD |
166 | |
167 | // gradient (CSS gradient, with backup image for IE6-9) | |
168 | background-image: url("images/tabBottomUnselected.png"); | |
81bea17a | 169 | background-repeat: repeat-x; |
f0cfe83e AD |
170 | background-position: bottom; |
171 | .unselected-tab-gradient(bottom); | |
172 | ||
81bea17a | 173 | .box-shadow(0 1px 1px rgba(0, 0, 0, 0.04)); |
81bea17a AD |
174 | } |
175 | ||
f0cfe83e | 176 | /* selected tab */ |
81bea17a | 177 | .claro .dijitTabContainerBottom-tabs .dijitTabChecked { |
f0cfe83e AD |
178 | padding-bottom: 9px; |
179 | padding-top: 4px; | |
180 | ||
181 | // gradient (CSS gradient, with backup image for IE6-9) | |
182 | background-image: url("images/tabBottomSelected.png"); | |
183 | .topBottom-selected-tab-gradient (bottom); | |
184 | ||
81bea17a AD |
185 | .box-shadow(0 1px 2px rgba(0, 0, 0, 0.05)); |
186 | } | |
187 | /** end bottom tab **/ | |
188 | ||
189 | /*************** left tab ***************/ | |
190 | .claro .dijitTabContainerLeft-tabs .dijitTab { | |
f0cfe83e | 191 | /* unselected (and not hovered/pressed) tab */ |
81bea17a AD |
192 | left: 1px; /* used for overlap */ |
193 | margin-bottom: 1px; | |
81bea17a | 194 | padding:3px 8px 4px 4px; |
f0cfe83e AD |
195 | |
196 | // gradient (CSS gradient, with backup image for IE6-9) | |
197 | background-image: url("images/tabLeftUnselected.png"); | |
81bea17a | 198 | background-repeat: repeat-y; |
f0cfe83e | 199 | .unselected-tab-gradient(left); |
81bea17a | 200 | } |
f0cfe83e AD |
201 | |
202 | /* selected tab */ | |
203 | .claro .dijitTabContainerLeft-tabs .dijitTabChecked { | |
204 | border-right-width: 0; | |
81bea17a | 205 | padding-right: 9px; |
f0cfe83e AD |
206 | |
207 | // gradient (CSS gradient, with backup image for IE6-9) | |
208 | background-image: url("images/tabLeftSelected.png"); | |
209 | .alpha-white-gradient (left, 0.5,0px, 1,30px); // 1/2 inch blue gradient, remainder white | |
210 | ||
81bea17a AD |
211 | .box-shadow(-1px 0 2px rgba(0, 0, 0, .05)); |
212 | } | |
213 | /** end left tab **/ | |
214 | ||
215 | /*************** right tab ***************/ | |
216 | .claro .dijitTabContainerRight-tabs .dijitTab { | |
f0cfe83e | 217 | /* unselected (and not hovered/pressed) tab */ |
81bea17a AD |
218 | left: -1px; /* used for overlap */ |
219 | margin-bottom: 1px; | |
81bea17a | 220 | padding:3px 8px 4px 4px; |
f0cfe83e AD |
221 | |
222 | // gradient (CSS gradient, with backup image for IE6-9) | |
223 | background-image: url("images/tabRightUnselected.png"); | |
81bea17a | 224 | background-repeat: repeat-y; |
f0cfe83e AD |
225 | background-position: right; |
226 | .unselected-tab-gradient(right); | |
81bea17a | 227 | } |
f0cfe83e AD |
228 | .claro .dijitTabContainerRight-tabs .dijitTabChecked { |
229 | /* selected tab */ | |
81bea17a | 230 | padding-left: 5px; |
f0cfe83e AD |
231 | border-left-width: 0; |
232 | ||
233 | // gradient (CSS gradient, with backup image for IE6-9) | |
234 | background-image: url("images/tabRightSelected.png"); | |
235 | .alpha-white-gradient (right, 0.5,0px, 1,30px); // 1/2 inch blue gradient, remainder white | |
236 | ||
81bea17a AD |
237 | .box-shadow(1px 0 2px rgba(0, 0, 0, 0.07)); |
238 | } | |
239 | /** end right tab **/ | |
240 | ||
241 | /** round corner **/ | |
f0cfe83e | 242 | .claro .dijitTabContainerTop-tabs .dijitTab { |
81bea17a AD |
243 | .border-radius(2px 2px 0 0); |
244 | } | |
f0cfe83e | 245 | .claro .dijitTabContainerBottom-tabs .dijitTab { |
81bea17a AD |
246 | .border-radius(0 0 2px 2px); |
247 | } | |
f0cfe83e | 248 | .claro .dijitTabContainerLeft-tabs .dijitTab { |
81bea17a AD |
249 | .border-radius(2px 0 0 2px); |
250 | } | |
251 | ||
f0cfe83e | 252 | .claro .dijitTabContainerRight-tabs .dijitTab { |
81bea17a AD |
253 | .border-radius(0 2px 2px 0); |
254 | } | |
255 | ||
256 | /************ left/right scroll buttons + menu button ************/ | |
257 | .claro .tabStripButton { | |
258 | background-color:@button-background-color; | |
259 | border: 1px solid @border-color; | |
260 | } | |
261 | .claro .dijitTabListContainer-top .tabStripButton { | |
262 | padding: 4px 3px; | |
263 | margin-top:7px; | |
f0cfe83e | 264 | .alpha-white-gradient (top, 1,0px, 0.1,1px, 0.6,6px, 0,100%); // to match unselected tab, but had to tweak numbers |
81bea17a AD |
265 | } |
266 | .claro .dijitTabListContainer-bottom .tabStripButton { | |
f0cfe83e AD |
267 | padding:4px 3px; |
268 | margin-bottom:7px; | |
269 | .alpha-white-gradient (bottom, 1,0px, 0.1,1px, 0.6,6px, 0,100%); // to match unselected tab, but had to tweak numbers | |
81bea17a AD |
270 | } |
271 | .claro .tabStripButtonHover { | |
272 | background-color:@hovered-background-color; | |
273 | } | |
274 | .claro .tabStripButtonActive { | |
275 | background-color:@pressed-background-color; | |
276 | } | |
277 | .claro .dijitTabStripIcon { | |
278 | height:15px; | |
279 | width:15px; | |
280 | margin: 0 auto; | |
1354d172 | 281 | background:url("../@{image-form-button-arrows}") no-repeat -75px 50%; |
81bea17a AD |
282 | background-color: transparent; |
283 | } | |
284 | .claro .dijitTabStripSlideRightIcon{ | |
285 | background-position: -24px 50%; | |
286 | } | |
287 | .claro .dijitTabStripMenuIcon { | |
288 | background-position: -51px 50%; | |
289 | } | |
290 | ||
291 | /*disabled styles for tab strip buttons*/ | |
292 | .claro .dijitTabListContainer-top .tabStripButtonDisabled, | |
293 | .claro .dijitTabListContainer-bottom .tabStripButtonDisabled { | |
294 | background-color:@tab-disabled-background-color; | |
295 | border:1px solid @border-color; /* to match border of TabContainer itself */ | |
296 | } | |
297 | .claro .tabStripButtonDisabled .dijitTabStripSlideLeftIcon { | |
298 | background-position:-175px 50%; | |
299 | } | |
300 | .claro .tabStripButtonDisabled .dijitTabStripSlideRightIcon { | |
301 | background-position: -124px 50%; | |
302 | } | |
303 | .claro .tabStripButtonDisabled .dijitTabStripMenuIcon { | |
304 | background-position: -151px 50%; | |
305 | } | |
306 | /* Nested Tabs */ | |
307 | .claro .dijitTabContainerNested .dijitTabListWrapper { | |
308 | height: auto; | |
309 | } | |
310 | .claro .dijitTabContainerNested .dijitTabContainerTop-tabs { | |
311 | border-bottom:solid 1px @border-color; | |
f0cfe83e | 312 | padding:2px 2px 4px; |
81bea17a | 313 | } |
f0cfe83e | 314 | .claro .dijitTabContainerTabListNested .dijitTab { |
6887a0f5 | 315 | background-color:rgba(255, 255, 255, 0); |
81bea17a AD |
316 | border: none; |
317 | padding: 4px; | |
318 | border-color: rgba(118,157,192,0); | |
319 | .transition-property(background-color, border-color); | |
320 | .transition-duration(.3s); | |
321 | .border-radius(2px); | |
81bea17a AD |
322 | top: 0;/* to override top: 1px/-1px for normal tabs */ |
323 | .box-shadow(none); | |
6887a0f5 AK |
324 | |
325 | // CSS gradient with fallback to image for IE | |
326 | background-image: url("images/tabNested.png") repeat-x; | |
327 | .alpha-white-gradient (0.61,0%, 0,17%, 0,83%, 0.61,100%); | |
81bea17a | 328 | } |
f0cfe83e | 329 | .claro .dijitTabContainerTabListNested .dijitTabHover { |
81bea17a AD |
330 | background-color: @nestedtab-hovered-background-color; |
331 | border:solid 1px @nestedtab-hovered-border-color; | |
f0cfe83e | 332 | padding: 3px; // 4px above padding - 1px compensation for border |
81bea17a AD |
333 | .transition-duration(.2s); |
334 | } | |
335 | .claro .dijitTabContainerTabListNested .dijitTabHover .tabLabel { | |
336 | text-decoration: none; | |
337 | } | |
f0cfe83e | 338 | .claro .dijitTabContainerTabListNested .dijitTabActive { |
81bea17a AD |
339 | border:solid 1px @nestedtab-selected-border-color; |
340 | padding: 3px; | |
81bea17a AD |
341 | .transition-duration(.1s); |
342 | } | |
f0cfe83e | 343 | .claro .dijitTabContainerTabListNested .dijitTabChecked { |
81bea17a AD |
344 | padding: 3px; |
345 | border:solid 1px @selected-border-color; | |
81bea17a AD |
346 | background-color:@selected-background-color; |
347 | } | |
348 | .claro .dijitTabContainerTabListNested .dijitTabChecked .tabLabel { | |
349 | text-decoration: none; | |
350 | background-image:none; | |
351 | } | |
352 | .claro .dijitTabPaneWrapperNested { | |
353 | border: none;/* prevent double border */ | |
354 | } | |
355 | ||
6887a0f5 AK |
356 | .claro .dijitTabContainer .dijitTab, |
357 | .claro .dijitTabContainer .tabStripButton { | |
f0cfe83e | 358 | // IE6 can't handle background-image and background-color on same node |
6887a0f5 | 359 | _background-image: none; |
81bea17a | 360 | } |