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 .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
25 * .dijitTabContainerTop-tabs .dijitTabChecked .dijitTab
26 * - styles for selected status of top tab button
27 * same to Bottom, Left, Right Tabs
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
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. */
81 border: 1px solid
#b5bcc7;
82 background-color: #efefef;
83 -webkit-transition-property: background-color
, border
;
84 -moz-transition-property: background-color
, border
;
85 transition-property: background-color
, border
;
86 -webkit-transition-duration: 0.35s;
87 -moz-transition-duration: 0.35s;
88 transition-duration: 0.35s;
91 .claro .dijitTabHover {
92 border-color: #759dc0;
93 background-color: #abd6ff;
94 -webkit-transition-duration: 0.25s;
95 -moz-transition-duration: 0.25s;
96 transition-duration: 0.25s;
99 .claro .dijitTabActive {
100 border-color: #759dc0;
101 background-color: #7dbdfa;
103 -webkit-transition-duration: 0.1s;
104 -moz-transition-duration: 0.1s;
105 transition-duration: 0.1s;
107 .claro .dijitTabChecked {
108 border-color: #b5bcc7;
109 background-color: #cfe5fa;
112 .claro .dijitTabDisabled {
113 background-color: #d3d3d3;
115 .claro .tabStripButton {
116 background-color: transparent
;
120 /*************** top tab ***************/
121 .claro .dijitTabContainerTop-tabs .dijitTab {
122 /* unselected (and not hovered/pressed) tab */
125 /* used for overlap */
129 border-bottom-width: 0;
132 background-image: url
("images/tabTopUnselected.png");
133 background-repeat: repeat-x
;
134 background-image: -moz-linear-gradient
(top
, #ffffff 0px, #ffffff 1px, rgba
(255, 255, 255, 0.1) 2px, rgba
(255, 255, 255, 0.6) 7px, rgba
(255, 255, 255, 0) 100%);
135 background-image: -webkit-linear-gradient
(top
, #ffffff 0px, #ffffff 1px, rgba
(255, 255, 255, 0.1) 2px, rgba
(255, 255, 255, 0.6) 7px, rgba
(255, 255, 255, 0) 100%);
136 background-image: -o-linear-gradient
(top
, #ffffff 0px, #ffffff 1px, rgba
(255, 255, 255, 0.1) 2px, rgba
(255, 255, 255, 0.6) 7px, rgba
(255, 255, 255, 0) 100%);
137 background-image: linear-gradient
(top
, #ffffff 0px, #ffffff 1px, rgba
(255, 255, 255, 0.1) 2px, rgba
(255, 255, 255, 0.6) 7px, rgba
(255, 255, 255, 0) 100%);
138 -webkit-box-shadow: 0 -1px 1px rgba
(0, 0, 0, 0.04);
139 -moz-box-shadow: 0 -1px 1px rgba
(0, 0, 0, 0.04);
140 box-shadow: 0 -1px 1px rgba
(0, 0, 0, 0.04);
142 .claro .dijitTabContainerTop-tabs .dijitTabChecked {
147 background-image: url
("images/tabTopSelected.png");
148 background-image: -moz-linear-gradient
(top
, #ffffff 0px, #ffffff 1px, rgba
(255, 255, 255, 0) 2px, #ffffff 7px);
149 background-image: -webkit-linear-gradient
(top
, #ffffff 0px, #ffffff 1px, rgba
(255, 255, 255, 0) 2px, #ffffff 7px);
150 background-image: -o-linear-gradient
(top
, #ffffff 0px, #ffffff 1px, rgba
(255, 255, 255, 0) 2px, #ffffff 7px);
151 background-image: linear-gradient
(top
, #ffffff 0px, #ffffff 1px, rgba
(255, 255, 255, 0) 2px, #ffffff 7px);
152 -webkit-box-shadow: 0 -1px 2px rgba
(0, 0, 0, 0.05);
153 -moz-box-shadow: 0 -1px 2px rgba
(0, 0, 0, 0.05);
154 box-shadow: 0 -1px 2px rgba
(0, 0, 0, 0.05);
157 /*************** bottom tab ***************/
158 .claro .dijitTabContainerBottom-tabs .dijitTab {
159 /* unselected (and not hovered/pressed) tab */
162 /* used for overlap */
169 background-image: url
("images/tabBottomUnselected.png");
170 background-repeat: repeat-x
;
171 background-position: bottom
;
172 background-image: -moz-linear-gradient
(bottom
, #ffffff 0px, #ffffff 1px, rgba
(255, 255, 255, 0.1) 2px, rgba
(255, 255, 255, 0.6) 7px, rgba
(255, 255, 255, 0) 100%);
173 background-image: -webkit-linear-gradient
(bottom
, #ffffff 0px, #ffffff 1px, rgba
(255, 255, 255, 0.1) 2px, rgba
(255, 255, 255, 0.6) 7px, rgba
(255, 255, 255, 0) 100%);
174 background-image: -o-linear-gradient
(bottom
, #ffffff 0px, #ffffff 1px, rgba
(255, 255, 255, 0.1) 2px, rgba
(255, 255, 255, 0.6) 7px, rgba
(255, 255, 255, 0) 100%);
175 background-image: linear-gradient
(bottom
, #ffffff 0px, #ffffff 1px, rgba
(255, 255, 255, 0.1) 2px, rgba
(255, 255, 255, 0.6) 7px, rgba
(255, 255, 255, 0) 100%);
176 -webkit-box-shadow: 0 1px 1px rgba
(0, 0, 0, 0.04);
177 -moz-box-shadow: 0 1px 1px rgba
(0, 0, 0, 0.04);
178 box-shadow: 0 1px 1px rgba
(0, 0, 0, 0.04);
181 .claro .dijitTabContainerBottom-tabs .dijitTabChecked {
184 background-image: url
("images/tabBottomSelected.png");
185 background-image: -moz-linear-gradient
(bottom
, #ffffff 0px, #ffffff 1px, rgba
(255, 255, 255, 0) 2px, #ffffff 7px);
186 background-image: -webkit-linear-gradient
(bottom
, #ffffff 0px, #ffffff 1px, rgba
(255, 255, 255, 0) 2px, #ffffff 7px);
187 background-image: -o-linear-gradient
(bottom
, #ffffff 0px, #ffffff 1px, rgba
(255, 255, 255, 0) 2px, #ffffff 7px);
188 background-image: linear-gradient
(bottom
, #ffffff 0px, #ffffff 1px, rgba
(255, 255, 255, 0) 2px, #ffffff 7px);
189 -webkit-box-shadow: 0 1px 2px rgba
(0, 0, 0, 0.05);
190 -moz-box-shadow: 0 1px 2px rgba
(0, 0, 0, 0.05);
191 box-shadow: 0 1px 2px rgba
(0, 0, 0, 0.05);
193 /** end bottom tab **/
194 /*************** left tab ***************/
195 .claro .dijitTabContainerLeft-tabs .dijitTab {
196 /* unselected (and not hovered/pressed) tab */
199 /* used for overlap */
202 padding: 3px 8px 4px 4px;
203 background-image: url
("images/tabLeftUnselected.png");
204 background-repeat: repeat-y
;
205 background-image: -moz-linear-gradient
(left
, #ffffff 0px, #ffffff 1px, rgba
(255, 255, 255, 0.1) 2px, rgba
(255, 255, 255, 0.6) 7px, rgba
(255, 255, 255, 0) 100%);
206 background-image: -webkit-linear-gradient
(left
, #ffffff 0px, #ffffff 1px, rgba
(255, 255, 255, 0.1) 2px, rgba
(255, 255, 255, 0.6) 7px, rgba
(255, 255, 255, 0) 100%);
207 background-image: -o-linear-gradient
(left
, #ffffff 0px, #ffffff 1px, rgba
(255, 255, 255, 0.1) 2px, rgba
(255, 255, 255, 0.6) 7px, rgba
(255, 255, 255, 0) 100%);
208 background-image: linear-gradient
(left
, #ffffff 0px, #ffffff 1px, rgba
(255, 255, 255, 0.1) 2px, rgba
(255, 255, 255, 0.6) 7px, rgba
(255, 255, 255, 0) 100%);
211 .claro .dijitTabContainerLeft-tabs .dijitTabChecked {
212 border-right-width: 0;
214 background-image: url
("images/tabLeftSelected.png");
215 background-image: -moz-linear-gradient
(left
, rgba
(255, 255, 255, 0.5) 0px, #ffffff 30px);
216 background-image: -webkit-linear-gradient
(left
, rgba
(255, 255, 255, 0.5) 0px, #ffffff 30px);
217 background-image: -o-linear-gradient
(left
, rgba
(255, 255, 255, 0.5) 0px, #ffffff 30px);
218 background-image: linear-gradient
(left
, rgba
(255, 255, 255, 0.5) 0px, #ffffff 30px);
219 -webkit-box-shadow: -1px 0 2px rgba
(0, 0, 0, 0.05);
220 -moz-box-shadow: -1px 0 2px rgba
(0, 0, 0, 0.05);
221 box-shadow: -1px 0 2px rgba
(0, 0, 0, 0.05);
224 /*************** right tab ***************/
225 .claro .dijitTabContainerRight-tabs .dijitTab {
226 /* unselected (and not hovered/pressed) tab */
229 /* used for overlap */
232 padding: 3px 8px 4px 4px;
233 background-image: url
("images/tabRightUnselected.png");
234 background-repeat: repeat-y
;
235 background-position: right
;
236 background-image: -moz-linear-gradient
(right
, #ffffff 0px, #ffffff 1px, rgba
(255, 255, 255, 0.1) 2px, rgba
(255, 255, 255, 0.6) 7px, rgba
(255, 255, 255, 0) 100%);
237 background-image: -webkit-linear-gradient
(right
, #ffffff 0px, #ffffff 1px, rgba
(255, 255, 255, 0.1) 2px, rgba
(255, 255, 255, 0.6) 7px, rgba
(255, 255, 255, 0) 100%);
238 background-image: -o-linear-gradient
(right
, #ffffff 0px, #ffffff 1px, rgba
(255, 255, 255, 0.1) 2px, rgba
(255, 255, 255, 0.6) 7px, rgba
(255, 255, 255, 0) 100%);
239 background-image: linear-gradient
(right
, #ffffff 0px, #ffffff 1px, rgba
(255, 255, 255, 0.1) 2px, rgba
(255, 255, 255, 0.6) 7px, rgba
(255, 255, 255, 0) 100%);
241 .claro .dijitTabContainerRight-tabs .dijitTabChecked {
245 border-left-width: 0;
246 background-image: url
("images/tabRightSelected.png");
247 background-image: -moz-linear-gradient
(right
, rgba
(255, 255, 255, 0.5) 0px, #ffffff 30px);
248 background-image: -webkit-linear-gradient
(right
, rgba
(255, 255, 255, 0.5) 0px, #ffffff 30px);
249 background-image: -o-linear-gradient
(right
, rgba
(255, 255, 255, 0.5) 0px, #ffffff 30px);
250 background-image: linear-gradient
(right
, rgba
(255, 255, 255, 0.5) 0px, #ffffff 30px);
251 -webkit-box-shadow: 1px 0 2px rgba
(0, 0, 0, 0.07);
252 -moz-box-shadow: 1px 0 2px rgba
(0, 0, 0, 0.07);
253 box-shadow: 1px 0 2px rgba
(0, 0, 0, 0.07);
255 /** end right tab **/
257 .claro .dijitTabContainerTop-tabs .dijitTab {
258 -moz-border-radius: 2px 2px 0 0;
259 border-radius: 2px 2px 0 0;
261 .claro .dijitTabContainerBottom-tabs .dijitTab {
262 -moz-border-radius: 0 0 2px 2px;
263 border-radius: 0 0 2px 2px;
265 .claro .dijitTabContainerLeft-tabs .dijitTab {
266 -moz-border-radius: 2px 0 0 2px;
267 border-radius: 2px 0 0 2px;
269 .claro .dijitTabContainerRight-tabs .dijitTab {
270 -moz-border-radius: 0 2px 2px 0;
271 border-radius: 0 2px 2px 0;
273 /************ left/right scroll buttons + menu button ************/
274 .claro .tabStripButton {
275 background-color: #e5f2fe;
276 border: 1px solid
#b5bcc7;
278 .claro .dijitTabListContainer-top .tabStripButton {
281 background-image: -moz-linear-gradient
(top
, #ffffff 0px, rgba
(255, 255, 255, 0.1) 1px, rgba
(255, 255, 255, 0.6) 6px, rgba
(255, 255, 255, 0) 100%);
282 background-image: -webkit-linear-gradient
(top
, #ffffff 0px, rgba
(255, 255, 255, 0.1) 1px, rgba
(255, 255, 255, 0.6) 6px, rgba
(255, 255, 255, 0) 100%);
283 background-image: -o-linear-gradient
(top
, #ffffff 0px, rgba
(255, 255, 255, 0.1) 1px, rgba
(255, 255, 255, 0.6) 6px, rgba
(255, 255, 255, 0) 100%);
284 background-image: linear-gradient
(top
, #ffffff 0px, rgba
(255, 255, 255, 0.1) 1px, rgba
(255, 255, 255, 0.6) 6px, rgba
(255, 255, 255, 0) 100%);
286 .claro .dijitTabListContainer-bottom .tabStripButton {
289 background-image: -moz-linear-gradient
(bottom
, #ffffff 0px, rgba
(255, 255, 255, 0.1) 1px, rgba
(255, 255, 255, 0.6) 6px, rgba
(255, 255, 255, 0) 100%);
290 background-image: -webkit-linear-gradient
(bottom
, #ffffff 0px, rgba
(255, 255, 255, 0.1) 1px, rgba
(255, 255, 255, 0.6) 6px, rgba
(255, 255, 255, 0) 100%);
291 background-image: -o-linear-gradient
(bottom
, #ffffff 0px, rgba
(255, 255, 255, 0.1) 1px, rgba
(255, 255, 255, 0.6) 6px, rgba
(255, 255, 255, 0) 100%);
292 background-image: linear-gradient
(bottom
, #ffffff 0px, rgba
(255, 255, 255, 0.1) 1px, rgba
(255, 255, 255, 0.6) 6px, rgba
(255, 255, 255, 0) 100%);
294 .claro .tabStripButtonHover {
295 background-color: #abd6ff;
297 .claro .tabStripButtonActive {
298 background-color: #7dbdfa;
300 .claro .dijitTabStripIcon {
304 background: url
("../form/images/buttonArrows.png") no-repeat
-75px 50%;
305 background-color: transparent
;
307 .claro .dijitTabStripSlideRightIcon {
308 background-position: -24px 50%;
310 .claro .dijitTabStripMenuIcon {
311 background-position: -51px 50%;
313 /*disabled styles for tab strip buttons*/
314 .claro .dijitTabListContainer-top .tabStripButtonDisabled, .claro .dijitTabListContainer-bottom .tabStripButtonDisabled {
315 background-color: #d3d3d3;
316 border: 1px solid
#b5bcc7;
317 /* to match border of TabContainer itself */
320 .claro .tabStripButtonDisabled .dijitTabStripSlideLeftIcon {
321 background-position: -175px 50%;
323 .claro .tabStripButtonDisabled .dijitTabStripSlideRightIcon {
324 background-position: -124px 50%;
326 .claro .tabStripButtonDisabled .dijitTabStripMenuIcon {
327 background-position: -151px 50%;
330 .claro .dijitTabContainerNested .dijitTabListWrapper {
333 .claro .dijitTabContainerNested .dijitTabContainerTop-tabs {
334 border-bottom: solid
1px #b5bcc7;
335 padding: 2px 2px 4px;
337 .claro .dijitTabContainerTabListNested .dijitTab {
338 background: rgba
(255, 255, 255, 0) none repeat scroll
0 0;
341 border-color: rgba
(118, 157, 192, 0);
342 -webkit-transition-property: background-color
, border-color
;
343 -moz-transition-property: background-color
, border-color
;
344 transition-property: background-color
, border-color
;
345 -webkit-transition-duration: 0.3s;
346 -moz-transition-duration: 0.3s;
347 transition-duration: 0.3s;
348 -moz-border-radius: 2px;
351 .claro .dijitTabContainerTabListNested .dijitTab {
355 /* to override top: 1px/-1px for normal tabs */
357 -webkit-box-shadow: none
;
358 -moz-box-shadow: none
;
361 .claro .dijitTabContainerTabListNested .dijitTabHover {
362 background-color: #e5f2fe;
363 border: solid
1px #cfe5fa;
365 -webkit-transition-duration: 0.2s;
366 -moz-transition-duration: 0.2s;
367 transition-duration: 0.2s;
369 .claro .dijitTabContainerTabListNested .dijitTabHover .tabLabel {
370 text-decoration: none
;
372 .claro .dijitTabContainerTabListNested .dijitTabActive {
373 border: solid
1px #759dc0;
375 background: #abd6ff url
("images/tabNested.png") repeat-x
;
376 background-image: -moz-linear-gradient
(rgba
(255, 255, 255, 0.61) 0%, rgba
(255, 255, 255, 0) 17%, rgba
(255, 255, 255, 0) 83%, rgba
(255, 255, 255, 0.61) 100%);
377 background-image: -webkit-linear-gradient
(rgba
(255, 255, 255, 0.61) 0%, rgba
(255, 255, 255, 0) 17%, rgba
(255, 255, 255, 0) 83%, rgba
(255, 255, 255, 0.61) 100%);
378 background-image: -o-linear-gradient
(rgba
(255, 255, 255, 0.61) 0%, rgba
(255, 255, 255, 0) 17%, rgba
(255, 255, 255, 0) 83%, rgba
(255, 255, 255, 0.61) 100%);
379 background-image: linear-gradient
(rgba
(255, 255, 255, 0.61) 0%, rgba
(255, 255, 255, 0) 17%, rgba
(255, 255, 255, 0) 83%, rgba
(255, 255, 255, 0.61) 100%);
380 -webkit-transition-duration: 0.1s;
381 -moz-transition-duration: 0.1s;
382 transition-duration: 0.1s;
384 .claro .dijitTabContainerTabListNested .dijitTabChecked {
386 border: solid
1px #759dc0;
387 background-color: #cfe5fa;
389 .claro .dijitTabContainerTabListNested .dijitTabChecked .tabLabel {
390 text-decoration: none
;
391 background-image: none
;
393 .claro .dijitTabPaneWrapperNested {
395 /* prevent double border */
398 .claro .dijitTab, .claro .tabStripButton {
399 _background-image: none
!important
;