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 .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
  24  *
  25  *              .dijitTabContainerTop-tabs .dijitTabChecked .dijitTab
  26  *                              - styles for selected status of top tab button
  27  *              same to Bottom, Left, Right Tabs
  28  *
  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
  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 .dijitTab {
  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;
  89   color: #494949;
  90 }
  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;
  97   color: #000000;
  98 }
  99 .claro .dijitTabActive {
 100   border-color: #759dc0;
 101   background-color: #7dbdfa;
 102   color: #000000;
 103   -webkit-transition-duration: 0.1s;
 104   -moz-transition-duration: 0.1s;
 105   transition-duration: 0.1s;
 106 }
 107 .claro .dijitTabChecked {
 108   border-color: #b5bcc7;
 109   background-color: #cfe5fa;
 110   color: #000000;
 111 }
 112 .claro .dijitTabDisabled {
 113   background-color: #d3d3d3;
 114 }
 115 .claro .tabStripButton {
 116   background-color: transparent;
 117   border: none;
 118 }
 119 /*** end common ***/
 120 /*************** top tab ***************/
 121 .claro .dijitTabContainerTop-tabs .dijitTab {
 122   /* unselected (and not hovered/pressed) tab */
 123
 124   top: 1px;
 125   /* used for overlap */
 126
 127   margin-right: 1px;
 128   padding: 3px 6px;
 129   border-bottom-width: 0;
 130   min-width: 60px;
 131   text-align: center;
 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);
 141 }
 142 .claro .dijitTabContainerTop-tabs .dijitTabChecked {
 143   /* selected tab */
 144
 145   padding-bottom: 4px;
 146   padding-top: 9px;
 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);
 155 }
 156 /** end top tab **/
 157 /*************** bottom tab ***************/
 158 .claro .dijitTabContainerBottom-tabs .dijitTab {
 159   /* unselected (and not hovered/pressed) tab */
 160
 161   top: -1px;
 162   /* used for overlap */
 163
 164   margin-right: 1px;
 165   padding: 3px 6px;
 166   border-top-width: 0;
 167   min-width: 60px;
 168   text-align: center;
 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);
 179 }
 180 /* selected tab */
 181 .claro .dijitTabContainerBottom-tabs .dijitTabChecked {
 182   padding-bottom: 9px;
 183   padding-top: 4px;
 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);
 192 }
 193 /** end bottom tab **/
 194 /*************** left tab ***************/
 195 .claro .dijitTabContainerLeft-tabs .dijitTab {
 196   /* unselected (and not hovered/pressed) tab */
 197
 198   left: 1px;
 199   /* used for overlap */
 200
 201   margin-bottom: 1px;
 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%);
 209 }
 210 /* selected tab */
 211 .claro .dijitTabContainerLeft-tabs .dijitTabChecked {
 212   border-right-width: 0;
 213   padding-right: 9px;
 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);
 222 }
 223 /** end left tab **/
 224 /*************** right tab ***************/
 225 .claro .dijitTabContainerRight-tabs .dijitTab {
 226   /* unselected (and not hovered/pressed) tab */
 227
 228   left: -1px;
 229   /* used for overlap */
 230
 231   margin-bottom: 1px;
 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%);
 240 }
 241 .claro .dijitTabContainerRight-tabs .dijitTabChecked {
 242   /* selected tab */
 243
 244   padding-left: 5px;
 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);
 254 }
 255 /** end right tab **/
 256 /** round corner **/
 257 .claro .dijitTabContainerTop-tabs .dijitTab {
 258   -moz-border-radius: 2px 2px 0 0;
 259   border-radius: 2px 2px 0 0;
 260 }
 261 .claro .dijitTabContainerBottom-tabs .dijitTab {
 262   -moz-border-radius: 0 0 2px 2px;
 263   border-radius: 0 0 2px 2px;
 264 }
 265 .claro .dijitTabContainerLeft-tabs .dijitTab {
 266   -moz-border-radius: 2px 0 0 2px;
 267   border-radius: 2px 0 0 2px;
 268 }
 269 .claro .dijitTabContainerRight-tabs .dijitTab {
 270   -moz-border-radius: 0 2px 2px 0;
 271   border-radius: 0 2px 2px 0;
 272 }
 273 /************ left/right scroll buttons + menu button ************/
 274 .claro .tabStripButton {
 275   background-color: #e5f2fe;
 276   border: 1px solid #b5bcc7;
 277 }
 278 .claro .dijitTabListContainer-top .tabStripButton {
 279   padding: 4px 3px;
 280   margin-top: 7px;
 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%);
 285 }
 286 .claro .dijitTabListContainer-bottom .tabStripButton {
 287   padding: 4px 3px;
 288   margin-bottom: 7px;
 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%);
 293 }
 294 .claro .tabStripButtonHover {
 295   background-color: #abd6ff;
 296 }
 297 .claro .tabStripButtonActive {
 298   background-color: #7dbdfa;
 299 }
 300 .claro .dijitTabStripIcon {
 301   height: 15px;
 302   width: 15px;
 303   margin: 0 auto;
 304   background: url("../form/images/buttonArrows.png") no-repeat -75px 50%;
 305   background-color: transparent;
 306 }
 307 .claro .dijitTabStripSlideRightIcon {
 308   background-position: -24px 50%;
 309 }
 310 .claro .dijitTabStripMenuIcon {
 311   background-position: -51px 50%;
 312 }
 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 */
 318
 319 }
 320 .claro .tabStripButtonDisabled .dijitTabStripSlideLeftIcon {
 321   background-position: -175px 50%;
 322 }
 323 .claro .tabStripButtonDisabled .dijitTabStripSlideRightIcon {
 324   background-position: -124px 50%;
 325 }
 326 .claro .tabStripButtonDisabled .dijitTabStripMenuIcon {
 327   background-position: -151px 50%;
 328 }
 329 /* Nested Tabs */
 330 .claro .dijitTabContainerNested .dijitTabListWrapper {
 331   height: auto;
 332 }
 333 .claro .dijitTabContainerNested .dijitTabContainerTop-tabs {
 334   border-bottom: solid 1px #b5bcc7;
 335   padding: 2px 2px 4px;
 336 }
 337 .claro .dijitTabContainerTabListNested .dijitTab {
 338   background: rgba(255, 255, 255, 0) none repeat scroll 0 0;
 339   border: none;
 340   padding: 4px;
 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;
 349   border-radius: 2px;
 350 }
 351 .claro .dijitTabContainerTabListNested .dijitTab {
 352   background: none;
 353   border: none;
 354   top: 0;
 355   /* to override top: 1px/-1px for normal tabs */
 356
 357   -webkit-box-shadow: none;
 358   -moz-box-shadow: none;
 359   box-shadow: none;
 360 }
 361 .claro .dijitTabContainerTabListNested .dijitTabHover {
 362   background-color: #e5f2fe;
 363   border: solid 1px #cfe5fa;
 364   padding: 3px;
 365   -webkit-transition-duration: 0.2s;
 366   -moz-transition-duration: 0.2s;
 367   transition-duration: 0.2s;
 368 }
 369 .claro .dijitTabContainerTabListNested .dijitTabHover .tabLabel {
 370   text-decoration: none;
 371 }
 372 .claro .dijitTabContainerTabListNested .dijitTabActive {
 373   border: solid 1px #759dc0;
 374   padding: 3px;
 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;
 383 }
 384 .claro .dijitTabContainerTabListNested .dijitTabChecked {
 385   padding: 3px;
 386   border: solid 1px #759dc0;
 387   background-color: #cfe5fa;
 388 }
 389 .claro .dijitTabContainerTabListNested .dijitTabChecked .tabLabel {
 390   text-decoration: none;
 391   background-image: none;
 392 }
 393 .claro .dijitTabPaneWrapperNested {
 394   border: none;
 395   /* prevent double border */
 396
 397 }
 398 .claro .dijitTab, .claro .tabStripButton {
 399   _background-image: none !important;
 400 }