3 * Styling TabContainer means styling the TabList and Its content container (dijitTitlePane)
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
12 * .dijitTabStripIcon - tab strip button icon
13 * .dijitTabStripMenuIcon - down arrow icon position
14 * .dijitTabStripSlideLeftIcon - left arrow icon position
15 * .dijitTabStripSlideRightIcon - right arrow icon position
17 * .tabStripButtonDisabled - styles for disabled tab strip buttons
20 * .dijitTabContainerTop-tabs .dijitTabInnerDiv/.dijitTabContent - styles for top tab button container
21 * .dijitTabContainerBottom-tabs .dijitTabInnerDiv/.dijitTabContent - styles for bottom tab button container
22 * .dijitTabContainerLeft-tabs .dijitTabInnerDiv/.dijitTabContent - styles for left tab button container
23 * .dijitTabContainerRight-tabs .dijitTabInnerDiv/.dijitTabContent - styles for right tab button container
25 * .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabInnerDiv/.dijitTabContent
26 * - styles for selected status of top tab button
27 * same to Bottom, Left, Right Tabs
29 * .dijitTabHover .dijitTabInnerDiv - styles when mouse hover on tab buttons
30 * .dijitTabActive .dijitTabInnerDiv - styles when mouse down on tab buttons
31 * .dijitTabChecked .dijitTabInnerDiv - styles when on buttons of selected tab
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
37 * Tab Button: (checked status)
39 * Tab Content Container:
40 * .dijitTabContainerTop-dijitContentPane
41 * .dijitTabContainerBottom-dijitContentPane
42 * .dijitTabContainerLeft-dijitContentPane
43 * .dijitTabContainerRight-dijitContentPane - for background and padding
46 * .dijitTabContainerNested - Container for nested tabs
47 * .dijitTabContainerTabListNested - tab list container for nested tabs
49 /*** some common features ***/
50 .claro .dijitTabPaneWrapper {
53 .claro
.dijitTabPaneWrapper
,
54 .claro
.dijitTabContainerTop-tabs
,
55 .claro
.dijitTabContainerBottom-tabs
,
56 .claro
.dijitTabContainerLeft-tabs
,
57 .claro .dijitTabContainerRight-tabs {
58 /* todo: add common class name for this div */
60 border-color: #b5bcc7;
62 .claro .dijitTabCloseButton {
63 background: url
("../layout/images/tabClose.png") no-repeat
;
69 .claro .dijitTabCloseButtonHover {
70 background-position: -14px;
72 .claro .dijitTabCloseButtonActive {
73 background-position: -28px;
75 .claro .dijitTabSpacer {
76 /* set the spacer invisible. note that height:0 doesn't work on IE/quirks, it's still 10px. */
80 .claro .dijitTabInnerDiv {
81 background-color: #efefef;
82 -webkit-transition-property: background-color
, border
;
83 -moz-transition-property: background-color
, border
;
84 transition-property: background-color
, border
;
85 -webkit-transition-duration: 0.35s;
86 -moz-transition-duration: 0.35s;
87 transition-duration: 0.35s;
90 .claro .dijitTabHover .dijitTabInnerDiv {
91 background-color: #abd6ff;
92 -webkit-transition-duration: 0.25s;
93 -moz-transition-duration: 0.25s;
94 transition-duration: 0.25s;
97 .claro .dijitTabActive .dijitTabInnerDiv {
98 background-color: #7dbdfa;
100 -webkit-transition-duration: 0.1s;
101 -moz-transition-duration: 0.1s;
102 transition-duration: 0.1s;
104 .claro .dijitTabChecked .dijitTabInnerDiv {
105 background-color: #cfe5fa;
108 .claro .dijitTabContent {
109 border: 1px solid
#b5bcc7;
111 .claro .dijitTabHover .dijitTabContent {
112 border-color: #759dc0;
114 .claro .dijitTabActive .dijitTabContent {
115 border-color: #759dc0;
117 .claro .dijitTabChecked .dijitTabContent {
119 border-color: #b5bcc7;
121 .claro .tabStripButton .dijitTabInnerDiv {
122 background-color: transparent
;
124 .claro .tabStripButton .dijitTabContent {
128 /*************** top tab ***************/
129 .claro .dijitTabContainerTop-tabs .dijitTab {
131 /* used for overlap */
136 .dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTab {
139 /* for top tab padding. change height when status changes */
140 .claro .dijitTabContainerTop-tabs .dijitTabContent {
142 border-bottom-width: 0;
143 background-image: url
("../layout/images/tabTop.png");
144 background-position: 0 0;
145 background-repeat: repeat-x
;
149 .claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabContent {
154 .claro .dijitTabContainerTop-tabs .dijitTabInnerDiv {
155 background-image: url
("../layout/images/tabTop.png");
156 background-position: 0 -248px;
157 background-position: bottom
;
158 background-repeat: repeat-x
;
159 -webkit-box-shadow: 0 -1px 1px rgba
(0, 0, 0, 0.04);
160 -moz-box-shadow: 0 -1px 1px rgba
(0, 0, 0, 0.04);
161 box-shadow: 0 -1px 1px rgba
(0, 0, 0, 0.04);
164 .claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabInnerDiv {
165 background-image: none
;
166 -webkit-box-shadow: 0 -1px 2px rgba
(0, 0, 0, 0.05);
167 -moz-box-shadow: 0 -1px 2px rgba
(0, 0, 0, 0.05);
168 box-shadow: 0 -1px 2px rgba
(0, 0, 0, 0.05);
170 .claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabContent {
171 background-position: 0 -102px;
172 background-repeat: repeat-x
;
175 /*************** bottom tab ***************/
176 .claro .dijitTabContainerBottom-tabs .dijitTab {
178 /* used for overlap */
182 /* calculate the position and size */
183 .claro .dijitTabContainerBottom-tabs .dijitTabContent {
186 background-image: url
("../layout/images/tabBottom.png");
187 background-position: 0 -249px;
188 background-repeat: repeat-x
;
189 background-position: bottom
;
193 .claro .dijitTabContainerBottom-tabs .dijitTab {
197 .claro .dijitTabContainerBottom-tabs .dijitTabInnerDiv {
198 background-image: url
("../layout/images/tabBottom.png");
199 background-position: top
;
200 background-repeat: repeat-x
;
201 -webkit-box-shadow: 0 1px 1px rgba
(0, 0, 0, 0.04);
202 -moz-box-shadow: 0 1px 1px rgba
(0, 0, 0, 0.04);
203 box-shadow: 0 1px 1px rgba
(0, 0, 0, 0.04);
206 .claro .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabContent {
209 background-position: 0 -119px;
211 .claro .dijitTabContainerBottom-tabs .dijitTabChecked {
214 .claro .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabInnerDiv {
215 background-image: none
;
216 -webkit-box-shadow: 0 1px 2px rgba
(0, 0, 0, 0.05);
217 -moz-box-shadow: 0 1px 2px rgba
(0, 0, 0, 0.05);
218 box-shadow: 0 1px 2px rgba
(0, 0, 0, 0.05);
220 /** end bottom tab **/
221 /*************** left tab ***************/
222 .claro .dijitTabContainerLeft-tabs .dijitTab {
223 border-right-width: 0;
225 /* used for overlap */
230 .claro .dijitTabContainerLeft-tabs .dijitTabInnerDiv {
231 background-image: url
("../layout/images/tabLeft.png");
232 background-position: -347px -340px;
233 background-repeat: repeat-y
;
235 .claro .dijitTabContainerLeft-tabs .dijitTabContent {
236 padding: 3px 8px 4px 4px;
237 background-image: url
("../layout/images/tabLeft.png");
238 background-repeat: repeat-y
;
239 background-position: 0 0;
242 .claro .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabContent {
245 background-image: none
;
247 .claro .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabInnerDiv {
248 background-position: 0 -179px;
249 background-repeat: repeat-y
;
250 -webkit-box-shadow: -1px 0 2px rgba
(0, 0, 0, 0.05);
251 -moz-box-shadow: -1px 0 2px rgba
(0, 0, 0, 0.05);
252 box-shadow: -1px 0 2px rgba
(0, 0, 0, 0.05);
255 /*************** right tab ***************/
256 .claro .dijitTabContainerRight-tabs .dijitTab {
257 border-left-width: 0;
259 /* used for overlap */
264 .claro .dijitTabContainerRight-tabs .dijitTabInnerDiv {
265 background-image: url
("../layout/images/tabRight.png");
266 background-repeat: repeat-y
;
267 background-position: -1px -347px;
269 .claro .dijitTabContainerRight-tabs .dijitTabContent {
270 padding: 3px 8px 4px 4px;
271 background-image: url
("../layout/images/tabRight.png");
272 background-position: right top
;
273 background-repeat: repeat-y
;
276 .claro .dijitTabContainerRight-tabs .dijitTabChecked .dijitTabContent {
279 background-image: none
;
281 .claro .dijitTabContainerRight-tabs .dijitTabChecked .dijitTabInnerDiv {
282 background-position: -348px -179px;
283 -webkit-box-shadow: 1px 0 2px rgba
(0, 0, 0, 0.07);
284 -moz-box-shadow: 1px 0 2px rgba
(0, 0, 0, 0.07);
285 box-shadow: 1px 0 2px rgba
(0, 0, 0, 0.07);
287 /** end right tab **/
289 .claro .dijitTabContainerTop-tabs .dijitTabInnerDiv, .claro .dijitTabContainerTop-tabs .dijitTabContent {
290 -moz-border-radius: 2px 2px 0 0;
291 border-radius: 2px 2px 0 0;
293 .claro .dijitTabContainerBottom-tabs .dijitTabInnerDiv, .claro .dijitTabContainerBottom-tabs .dijitTabContent {
294 -moz-border-radius: 0 0 2px 2px;
295 border-radius: 0 0 2px 2px;
297 .claro .dijitTabContainerLeft-tabs .dijitTabInnerDiv, .claro .dijitTabContainerLeft-tabs .dijitTabContent {
298 -moz-border-radius: 2px 0 0 2px;
299 border-radius: 2px 0 0 2px;
301 .claro .dijitTabContainerRight-tabs .dijitTabInnerDiv, .claro .dijitTabContainerRight-tabs .dijitTabContent {
302 -moz-border-radius: 0 2px 2px 0;
303 border-radius: 0 2px 2px 0;
305 /************ left/right scroll buttons + menu button ************/
306 .claro .tabStripButton {
307 background-color: #e5f2fe;
308 border: 1px solid
#b5bcc7;
310 .claro .dijitTabListContainer-top .tabStripButton {
313 background-image: url
("../layout/images/tabTop.png");
314 background-position: 0 0;
316 .claro .dijitTabListContainer-bottom .tabStripButton {
319 background-image: url
("../layout/images/tabTop.png");
320 background-position: 0 -248px;
321 background-position: bottom
;
323 .claro .tabStripButtonHover {
324 background-color: #abd6ff;
326 .claro .tabStripButtonActive {
327 background-color: #7dbdfa;
329 .claro .dijitTabStripIcon {
333 background: url
("../form/images/buttonArrows.png") no-repeat
-75px 50%;
334 background-color: transparent
;
336 .claro .dijitTabStripSlideRightIcon {
337 background-position: -24px 50%;
339 .claro .dijitTabStripMenuIcon {
340 background-position: -51px 50%;
342 /*disabled styles for tab strip buttons*/
343 .claro .dijitTabListContainer-top .tabStripButtonDisabled, .claro .dijitTabListContainer-bottom .tabStripButtonDisabled {
344 background-color: #d3d3d3;
345 border: 1px solid
#b5bcc7;
346 /* to match border of TabContainer itself */
349 .claro .tabStripButtonDisabled .dijitTabStripSlideLeftIcon {
350 background-position: -175px 50%;
352 .claro .tabStripButtonDisabled .dijitTabStripSlideRightIcon {
353 background-position: -124px 50%;
355 .claro .tabStripButtonDisabled .dijitTabStripMenuIcon {
356 background-position: -151px 50%;
359 .claro .dijitTabContainerNested .dijitTabListWrapper {
362 .claro .dijitTabContainerNested .dijitTabContainerTop-tabs {
363 border-bottom: solid
1px #b5bcc7;
364 padding: 1px 2px 4px;
367 .claro .dijitTabContainerTabListNested .dijitTabContent {
368 background: rgba
(255, 255, 255, 0) none repeat scroll
0 0;
371 border-color: rgba
(118, 157, 192, 0);
372 -webkit-transition-property: background-color
, border-color
;
373 -moz-transition-property: background-color
, border-color
;
374 transition-property: background-color
, border-color
;
375 -webkit-transition-duration: 0.3s;
376 -moz-transition-duration: 0.3s;
377 transition-duration: 0.3s;
378 -moz-border-radius: 2px;
381 .claro .dijitTabContainerTabListNested .dijitTab .dijitTabInnerDiv {
382 /* 4 element selector to override box-shadow setting from above rule:
383 * .claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabInnerDiv { ... }
389 /* to override top: 1px/-1px for normal tabs */
391 -webkit-box-shadow: none
;
392 -moz-box-shadow: none
;
395 .claro .dijitTabContainerTabListNested .dijitTabHover .dijitTabContent {
396 background-color: #e5f2fe;
397 border: solid
1px #cfe5fa;
399 -webkit-transition-duration: 0.2s;
400 -moz-transition-duration: 0.2s;
401 transition-duration: 0.2s;
403 .claro .dijitTabContainerTabListNested .dijitTabHover .tabLabel {
404 text-decoration: none
;
406 .claro .dijitTabContainerTabListNested .dijitTabActive .dijitTabContent {
407 border: solid
1px #759dc0;
409 background: #abd6ff url
("../layout/images/tabNested.png") repeat-x
;
410 -webkit-transition-duration: 0.1s;
411 -moz-transition-duration: 0.1s;
412 transition-duration: 0.1s;
414 .claro .dijitTabContainerTabListNested .dijitTabChecked .dijitTabContent {
416 border: solid
1px #759dc0;
417 background-position: 0 105px;
418 background-color: #cfe5fa;
420 .claro .dijitTabContainerTabListNested .dijitTabChecked .tabLabel {
421 text-decoration: none
;
422 background-image: none
;
424 .claro .dijitTabPaneWrapperNested {
426 /* prevent double border */
429 .dj_ie6
.claro
.dijitTabContent
,
430 .dj_ie6
.claro
.dijitTabInnerDiv
,
431 .dj_ie6
.dijitTabListContainer-top
.tabStripButton
,
432 .dj_ie6 .dijitTabListContainer-bottom .tabStripButton {
433 background-image: none
;