lib/dijit/themes/claro/layout/TabContainer.css

   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:
  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
  24  *
  25  *              .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabInnerDiv/.dijitTabContent
  26  *                              - styles for selected status of top tab button
  27  *              same to Bottom, Left, Right Tabs
  28  *
  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
  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 /*** some common features ***/
  50 .claro .dijitTabPaneWrapper {
  51   background: #ffffff;
  52 }
  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 */
  59
  60   border-color: #b5bcc7;
  61 }
  62 .claro .dijitTabCloseButton {
  63   background: url("../layout/images/tabClose.png") no-repeat;
  64   width: 14px;
  65   height: 14px;
  66   margin-left: 5px;
  67   margin-right: -5px;
  68 }
  69 .claro .dijitTabCloseButtonHover {
  70   background-position: -14px;
  71 }
  72 .claro .dijitTabCloseButtonActive {
  73   background-position: -28px;
  74 }
  75 .claro .dijitTabSpacer {
  76   /* set the spacer invisible.  note that height:0 doesn't work on IE/quirks, it's still 10px. */
  77
  78   display: none;
  79 }
  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;
  88   color: #494949;
  89 }
  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;
  95   color: #000000;
  96 }
  97 .claro .dijitTabActive .dijitTabInnerDiv {
  98   background-color: #7dbdfa;
  99   color: #000000;
 100   -webkit-transition-duration: 0.1s;
 101   -moz-transition-duration: 0.1s;
 102   transition-duration: 0.1s;
 103 }
 104 .claro .dijitTabChecked .dijitTabInnerDiv {
 105   background-color: #cfe5fa;
 106   color: #000000;
 107 }
 108 .claro .dijitTabContent {
 109   border: 1px solid #b5bcc7;
 110 }
 111 .claro .dijitTabHover .dijitTabContent {
 112   border-color: #759dc0;
 113 }
 114 .claro .dijitTabActive .dijitTabContent {
 115   border-color: #759dc0;
 116 }
 117 .claro .dijitTabChecked .dijitTabContent {
 118   color: #000000;
 119   border-color: #b5bcc7;
 120 }
 121 .claro .tabStripButton .dijitTabInnerDiv {
 122   background-color: transparent;
 123 }
 124 .claro .tabStripButton .dijitTabContent {
 125   border: none;
 126 }
 127 /*** end common ***/
 128 /*************** top tab ***************/
 129 .claro .dijitTabContainerTop-tabs .dijitTab {
 130   top: 1px;
 131   /* used for overlap */
 132
 133   margin-right: 1px;
 134   padding-top: 3px;
 135 }
 136 .dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTab {
 137   top: 3px;
 138 }
 139 /* for top tab padding. change height when status changes */
 140 .claro .dijitTabContainerTop-tabs .dijitTabContent {
 141   padding: 3px 6px;
 142   border-bottom-width: 0;
 143   background-image: url("../layout/images/tabTop.png");
 144   background-position: 0 0;
 145   background-repeat: repeat-x;
 146   min-width: 60px;
 147   text-align: center;
 148 }
 149 .claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabContent {
 150   padding-bottom: 4px;
 151   padding-top: 6px;
 152 }
 153 /* normal status */
 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);
 162 }
 163 /* checked status */
 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);
 169 }
 170 .claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabContent {
 171   background-position: 0 -102px;
 172   background-repeat: repeat-x;
 173 }
 174 /** end top tab **/
 175 /*************** bottom tab ***************/
 176 .claro .dijitTabContainerBottom-tabs .dijitTab {
 177   top: -1px;
 178   /* used for overlap */
 179
 180   margin-right: 1px;
 181 }
 182 /* calculate the position and size */
 183 .claro .dijitTabContainerBottom-tabs .dijitTabContent {
 184   padding: 3px 6px;
 185   border-top-width: 0;
 186   background-image: url("../layout/images/tabBottom.png");
 187   background-position: 0 -249px;
 188   background-repeat: repeat-x;
 189   background-position: bottom;
 190   min-width: 60px;
 191   text-align: center;
 192 }
 193 .claro .dijitTabContainerBottom-tabs .dijitTab {
 194   padding-bottom: 3px;
 195 }
 196 /* normal status */
 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);
 204 }
 205 /* checked status */
 206 .claro .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabContent {
 207   padding-bottom: 7px;
 208   padding-top: 4px;
 209   background-position: 0 -119px;
 210 }
 211 .claro .dijitTabContainerBottom-tabs .dijitTabChecked {
 212   padding-bottom: 0;
 213 }
 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);
 219 }
 220 /** end bottom tab **/
 221 /*************** left tab ***************/
 222 .claro .dijitTabContainerLeft-tabs .dijitTab {
 223   border-right-width: 0;
 224   left: 1px;
 225   /* used for overlap */
 226
 227   margin-bottom: 1px;
 228 }
 229 /* normal status */
 230 .claro .dijitTabContainerLeft-tabs .dijitTabInnerDiv {
 231   background-image: url("../layout/images/tabLeft.png");
 232   background-position: -347px -340px;
 233   background-repeat: repeat-y;
 234 }
 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;
 240 }
 241 /* checked status */
 242 .claro .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabContent {
 243   padding-right: 9px;
 244   border-right: none;
 245   background-image: none;
 246 }
 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);
 253 }
 254 /** end left tab **/
 255 /*************** right tab ***************/
 256 .claro .dijitTabContainerRight-tabs .dijitTab {
 257   border-left-width: 0;
 258   left: -1px;
 259   /* used for overlap */
 260
 261   margin-bottom: 1px;
 262 }
 263 /* normal status */
 264 .claro .dijitTabContainerRight-tabs .dijitTabInnerDiv {
 265   background-image: url("../layout/images/tabRight.png");
 266   background-repeat: repeat-y;
 267   background-position: -1px -347px;
 268 }
 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;
 274 }
 275 /* checked status */
 276 .claro .dijitTabContainerRight-tabs .dijitTabChecked .dijitTabContent {
 277   padding-left: 5px;
 278   border-left: none;
 279   background-image: none;
 280 }
 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);
 286 }
 287 /** end right tab **/
 288 /** round corner **/
 289 .claro .dijitTabContainerTop-tabs .dijitTabInnerDiv, .claro .dijitTabContainerTop-tabs .dijitTabContent {
 290   -moz-border-radius: 2px 2px 0 0;
 291   border-radius: 2px 2px 0 0;
 292 }
 293 .claro .dijitTabContainerBottom-tabs .dijitTabInnerDiv, .claro .dijitTabContainerBottom-tabs .dijitTabContent {
 294   -moz-border-radius: 0 0 2px 2px;
 295   border-radius: 0 0 2px 2px;
 296 }
 297 .claro .dijitTabContainerLeft-tabs .dijitTabInnerDiv, .claro .dijitTabContainerLeft-tabs .dijitTabContent {
 298   -moz-border-radius: 2px 0 0 2px;
 299   border-radius: 2px 0 0 2px;
 300 }
 301 .claro .dijitTabContainerRight-tabs .dijitTabInnerDiv, .claro .dijitTabContainerRight-tabs .dijitTabContent {
 302   -moz-border-radius: 0 2px 2px 0;
 303   border-radius: 0 2px 2px 0;
 304 }
 305 /************ left/right scroll buttons + menu button ************/
 306 .claro .tabStripButton {
 307   background-color: #e5f2fe;
 308   border: 1px solid #b5bcc7;
 309 }
 310 .claro .dijitTabListContainer-top .tabStripButton {
 311   padding: 4px 3px;
 312   margin-top: 7px;
 313   background-image: url("../layout/images/tabTop.png");
 314   background-position: 0 0;
 315 }
 316 .claro .dijitTabListContainer-bottom .tabStripButton {
 317   padding: 5px 3px;
 318   margin-bottom: 4px;
 319   background-image: url("../layout/images/tabTop.png");
 320   background-position: 0 -248px;
 321   background-position: bottom;
 322 }
 323 .claro .tabStripButtonHover {
 324   background-color: #abd6ff;
 325 }
 326 .claro .tabStripButtonActive {
 327   background-color: #7dbdfa;
 328 }
 329 .claro .dijitTabStripIcon {
 330   height: 15px;
 331   width: 15px;
 332   margin: 0 auto;
 333   background: url("../form/images/buttonArrows.png") no-repeat -75px 50%;
 334   background-color: transparent;
 335 }
 336 .claro .dijitTabStripSlideRightIcon {
 337   background-position: -24px 50%;
 338 }
 339 .claro .dijitTabStripMenuIcon {
 340   background-position: -51px 50%;
 341 }
 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 */
 347
 348 }
 349 .claro .tabStripButtonDisabled .dijitTabStripSlideLeftIcon {
 350   background-position: -175px 50%;
 351 }
 352 .claro .tabStripButtonDisabled .dijitTabStripSlideRightIcon {
 353   background-position: -124px 50%;
 354 }
 355 .claro .tabStripButtonDisabled .dijitTabStripMenuIcon {
 356   background-position: -151px 50%;
 357 }
 358 /* Nested Tabs */
 359 .claro .dijitTabContainerNested .dijitTabListWrapper {
 360   height: auto;
 361 }
 362 .claro .dijitTabContainerNested .dijitTabContainerTop-tabs {
 363   border-bottom: solid 1px #b5bcc7;
 364   padding: 1px 2px 4px;
 365   margin-top: -2px;
 366 }
 367 .claro .dijitTabContainerTabListNested .dijitTabContent {
 368   background: rgba(255, 255, 255, 0) none repeat scroll 0 0;
 369   border: none;
 370   padding: 4px;
 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;
 379   border-radius: 2px;
 380 }
 381 .claro .dijitTabContainerTabListNested .dijitTab .dijitTabInnerDiv {
 382   /* 4 element selector to override box-shadow setting from above rule:
 383          *              .claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabInnerDiv { ... }
 384          */
 385
 386   background: none;
 387   border: none;
 388   top: 0;
 389   /* to override top: 1px/-1px for normal tabs */
 390
 391   -webkit-box-shadow: none;
 392   -moz-box-shadow: none;
 393   box-shadow: none;
 394 }
 395 .claro .dijitTabContainerTabListNested .dijitTabHover .dijitTabContent {
 396   background-color: #e5f2fe;
 397   border: solid 1px #cfe5fa;
 398   padding: 3px;
 399   -webkit-transition-duration: 0.2s;
 400   -moz-transition-duration: 0.2s;
 401   transition-duration: 0.2s;
 402 }
 403 .claro .dijitTabContainerTabListNested .dijitTabHover .tabLabel {
 404   text-decoration: none;
 405 }
 406 .claro .dijitTabContainerTabListNested .dijitTabActive .dijitTabContent {
 407   border: solid 1px #759dc0;
 408   padding: 3px;
 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;
 413 }
 414 .claro .dijitTabContainerTabListNested .dijitTabChecked .dijitTabContent {
 415   padding: 3px;
 416   border: solid 1px #759dc0;
 417   background-position: 0 105px;
 418   background-color: #cfe5fa;
 419 }
 420 .claro .dijitTabContainerTabListNested .dijitTabChecked .tabLabel {
 421   text-decoration: none;
 422   background-image: none;
 423 }
 424 .claro .dijitTabPaneWrapperNested {
 425   border: none;
 426   /* prevent double border */
 427
 428 }
 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;
 434 }