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

   1 /**
   2  * dijit.layout.TabContainer
   3  *
   4  * To style TabContainer with rounded corners
   5  * you can use these classes: .dijitTab (left), .dijitTabContent (center), dijitTabInnerDiv (right)
   6  * For tabs aligned to top you can style a stripe div right underneath the tabs using .dijitTabStripe
   7  */
   8 @import url("../Menu.css");
   9
  10 /* Classes for all types of tabs (top/bottom/left/right) */
  11
  12 .nihilo .dijitTabContainer .tabStripRBtn {
  13         margin-right: 21px;
  14 }
  15 .nihilo .dijitTabContainer .tabStripLBtn {
  16         margin-left: 21px;
  17 }
  18
  19 .nihilo .dijitTabContainerBottom .nowrapTabStrip .dijitTab {
  20         top: 0;
  21 }
  22
  23 /* Tabs, shared classes */
  24 .nihilo .dijitTabPaneWrapper {
  25         background:#fff;
  26         border:1px solid #ccc;
  27         margin: 0;
  28         padding: 0;
  29 }
  30
  31 .nihilo .dijitTabInnerDiv {
  32         padding:0 3px 0 0;
  33         margin: 0 0 0 4px;
  34         background: url("../images/tabContainerSprite.gif") no-repeat;
  35         background-position: right -400px;
  36 }
  37
  38 .nihilo .dijitTab {
  39         line-height:normal;
  40         margin:0 2px 0 0;       /* space between one tab and the next in top/bottom mode */
  41         padding:0;
  42         background: url("../images/tabContainerSprite.gif") no-repeat 0 -300px;
  43         color: #6d6d6d;
  44         border-bottom: 1px #ccc solid;
  45 }
  46
  47 .nihilo .dijitTabInnerDiv .dijitTabContent {
  48         padding:3px 3px 3px 4px;
  49         background: url("../images/tabContainerSprite.gif") repeat-x 0 -350px;
  50         position: relative;
  51 }
  52
  53 /* hovered tab */
  54 .nihilo .dijitTabHover {
  55         color: #243C5F;
  56         background: url("../images/tabContainerSprite.gif") no-repeat 0 -150px;
  57 }
  58
  59 .nihilo .dijitTabHover .dijitTabInnerDiv {
  60         background: url("../images/tabContainerSprite.gif") no-repeat right -250px;
  61 }
  62
  63 .nihilo .dijitTabHover .dijitTabInnerDiv .dijitTabContent {
  64         background: url("../images/tabContainerSprite.gif") repeat-x 0 -200px;
  65 }
  66
  67 /* checked tab*/
  68 .nihilo .dijitTabChecked
  69 {
  70         /* the selected tab (with or without hover) */
  71         background: url("../images/tabContainerSprite.gif") no-repeat 0 -0;
  72 }
  73
  74 .nihilo .dijitTabChecked .dijitTabInnerDiv {
  75         background: url("../images/tabContainerSprite.gif") no-repeat right -100px;
  76 }
  77
  78 .nihilo .dijitTabChecked .dijitTabInnerDiv .dijitTabContent {
  79         background: url("../images/tabContainerSprite.gif") repeat-x 0 -50px;
  80         color: #243C5F !important;
  81 }
  82
  83 /* Nested Tabs */
  84 .nihilo .dijitTabContainerNested .dijitTabListWrapper {
  85         height: auto;
  86 }
  87
  88 .nihilo .dijitTabContainerTabListNested {
  89         background: #FDFDFD;
  90         border: none;
  91         margin-bottom: 0;               /* override margin: -1px; */
  92 }
  93 .nihilo .dijitTabContainerTabListNested .dijitTab {
  94         background: none;
  95         border: none;
  96         top: 0; /* override top:1px setting of top-level tabs */
  97 }
  98 .nihilo .dijitTabContainerTabListNested .dijitTab .dijitTabInnerDiv,
  99 .nihilo .dijitTabContainerTabListNested .dijitTab .dijitTabContent {
 100         background: none;
 101 }
 102 .nihilo .dijitTabContainerTabListNested .dijitTabHover .dijitTabContent .tabLabel {
 103         text-decoration: underline;
 104 }
 105 .nihilo .dijitTabContainerTabListNested .dijitTabChecked .tabLabel {
 106         text-decoration: underline;
 107         font-weight: bold;
 108 }
 109 .nihilo .dijitTabContainerSpacerNested {
 110         /* thinner line between tab (labels) and content */
 111         height: 0;
 112         border-bottom: 0;
 113 }
 114 .nihilo .dijitTabPaneWrapperNested {
 115         border: none;   /* prevent double border */
 116 }
 117
 118
 119 /* Close button */
 120 .nihilo .dijitTabCloseButton {
 121         background: url("../images/spriteRoundedIconsSmall.png") no-repeat -60px top;
 122         width: 15px;
 123         height: 15px;
 124         margin-top: -1px;
 125 }
 126
 127 .dj_ie6 .nihilo .dijitTabCloseButton {
 128         background: url("../images/spriteRoundedIconsSmall.gif") no-repeat -60px top;
 129 }
 130 .nihilo .dijitTabCloseButtonHover {
 131         background: url("../images/spriteRoundedIconsSmall.png") no-repeat -60px -15px;
 132 }
 133 .dj_ie6 .nihilo .dijitTabCloseButtonHover {
 134         background: url("../images/spriteRoundedIconsSmall.gif") no-repeat -60px -15px;
 135 }
 136
 137 /* ================================ */
 138 /* top tabs */
 139 .nihilo .dijitTabContainerTop-tabs {
 140         border-bottom: none;
 141         padding-bottom: 1px;
 142         background-position: bottom;
 143         padding-left: 3px;
 144 }
 145
 146 .dj_ie6 .nihilo .dijitTabListContainer-top,
 147 .dj_ie7 .nihilo .dijitTabListContainer-top {
 148         z-index: 3;
 149 }
 150
 151 .dj_ie6 .nihilo .dijitTabContainerTop-tabs,
 152 .dj_ie7 .nihilo .dijitTabContainerTop-tabs {
 153         border-bottom: 1px solid #ccc;
 154         padding-bottom: 0;
 155 }
 156
 157 .nihilo .dijitTabContainerTopNoStrip {
 158         padding-top: 3px;
 159 }
 160
 161 /* top container */
 162 .nihilo .dijitTabContainerTop-container {
 163         border-top: none;
 164 }
 165
 166 /* checked tabs */
 167 .nihilo .dijitTabContainerTop-tabs .dijitTabChecked {
 168         border-bottom-color: #f8f8f8;
 169 }
 170
 171 /* strip */
 172 .nihilo .dijitTabContainer .dijitTabContainerTopStrip {
 173         border-bottom: none;
 174         padding-top: 1px;
 175         margin-top: 1px;
 176         background: #f2f2f2;
 177         border-top: 1px solid #CCC;
 178         border-right: 1px solid #CCC;
 179         border-left: 1px solid #CCC;
 180 }
 181
 182
 183 /* ================================ */
 184 /* bottom tabs */
 185 .nihilo .dijitTabContainerBottom-tabs {
 186         border-top: none;
 187         background-position: top;
 188         padding-left: 3px;
 189 }
 190
 191 .dj_ie6 .nihilo .dijitTabListContainer-bottom,
 192 .dj_ie7 .nihilo .dijitTabListContainer-bottom {
 193         z-index: 3;
 194 }
 195
 196 .dj_ie6 .nihilo .dijitTabContainerBottom-tabs,
 197 .dj_ie7 .nihilo .dijitTabContainerBottom-tabs {
 198         border-top: 1px solid #ccc;
 199         margin-top: -1px;
 200 }
 201
 202 /* bottom container */
 203 .nihilo .dijitTabContainerBottom-container {
 204         border-bottom: none;
 205 }
 206
 207 .nihilo .dijitTabContainerBottom-tabs .dijitTab {
 208         border-bottom: none;
 209         border-top: 1px solid #ccc;
 210         background: url("../images/tabBottomEnabledSpriteLR.gif") no-repeat bottom left;
 211 }
 212
 213 /* checked tabs */
 214 .nihilo .dijitTabContainerBottom-tabs .dijitTabChecked {
 215         border-top-color: #f8f8f8;
 216 }
 217
 218 .nihilo .dijitTabContainerBottom-tabs .dijitTabInnerDiv .dijitTabContent {
 219         padding-top: 3px;
 220         padding-bottom: 3px;
 221         background: url("../images/tabBottomEnabledC.gif") repeat-x bottom left;
 222 }
 223
 224 .nihilo .dijitTabContainerBottom-tabs .dijitTabInnerDiv {
 225         background: url("../images/tabBottomEnabledSpriteLR.gif") no-repeat bottom right;
 226 }
 227
 228 .nihilo .dijitTabContainerBottom-tabs .dijitTabHover {
 229         color: #243C5F;
 230         background: url("../images/tabBottomHoverSpriteLR.gif") no-repeat bottom left;
 231 }
 232
 233 .nihilo .dijitTabContainerBottom-tabs .dijitTabHover .dijitTabInnerDiv {
 234         background: url("../images/tabBottomHoverSpriteLR.gif") no-repeat bottom right;
 235 }
 236
 237 .nihilo .dijitTabContainerBottom-tabs .dijitTabHover .dijitTabInnerDiv .dijitTabContent {
 238         background: url("../images/tabBottomHoverC.gif") repeat-x bottom left;
 239 }
 240
 241 .nihilo .dijitTabContainerBottom-tabs .dijitTabChecked {
 242         /* the selected tab (with or without hover) */
 243         background: url("../images/tabBottomActiveSpriteLR.gif") no-repeat bottom left;
 244 }
 245
 246 .nihilo .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabInnerDiv {
 247         background: url("../images/tabBottomActiveSpriteLR.gif") no-repeat bottom right;
 248 }
 249
 250 .nihilo .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabInnerDiv .dijitTabContent {
 251         background: url("../images/tabBottomActiveC.gif") repeat-x bottom left;
 252 }
 253
 254 /* strip */
 255 .nihilo .dijitTabContainer .dijitTabContainerBottomStrip {
 256         border: 1px solid #ccc;
 257         background: #f2f2f2;
 258         border-top: none;
 259         padding-bottom: 2px;
 260 }
 261
 262 /* top/bottom strip */
 263 .nihilo .dijitTabContainerBottom-spacer,
 264 .nihilo .dijitTabContainerTop-spacer {
 265         height: 2px;
 266         border: 1px solid #ccc;
 267         background: #f8f8f8;
 268 }
 269
 270 .nihilo  .dijitTabContainerTop-spacer {
 271         margin-top: -1px;
 272 }
 273 .nihilo .dijitTabContainerBottom-spacer {
 274         margin-bottom: -1px;
 275 }
 276
 277
 278 /* ================================ */
 279 /* right tabs */
 280 .nihilo .dijitTabContainerRight-tabs {
 281         border-color: #ccc;
 282         padding-top: 3px;
 283 }
 284 .nihilo .dijitTabContainerRight .dijitTabListWrapper {
 285         padding-right: 3px;
 286 }
 287
 288 /* right container */
 289 .nihilo .dijitTabContainerRight-container {
 290         border-right: none;
 291 }
 292
 293 .nihilo .dijitTabContainerRight-tabs .dijitTab {
 294         border-bottom: none;
 295         border-left: 1px solid #ccc;
 296         border-bottom: 1px solid #dedede !important;
 297 }
 298
 299
 300 /* some odd ie bug when borders dissapear when setting a bottom margin, this sortof helps */
 301 .dj_ie .nihilo .dijitTabContainerRight-tabs .dijitTabInnerDiv {
 302         border-bottom: solid #fff 1px;
 303 }
 304
 305 /* checked tabs */
 306 .nihilo .dijitTabContainerRight-tabs .dijitTabChecked {
 307         border-left-color: #f8f8f8;
 308 }
 309
 310 .nihilo .dijitTabContainerRight-tabs .dijitTabChecked {
 311         background: url("../images/tabRightChecked.gif") no-repeat left top !important;
 312 }
 313
 314 /* some odd ie bug when borders dissapear when setting a bottom margin, this sortof helps */
 315 .dj_ie .nihilo .dijitTabContainerRight-tabs .dijitTabChecked .dijitTabInnerDiv,
 316 .dj_ie .nihilo .dijitTabContainerRight-tabs .dijitTabCheckedHover .dijitTabInnerDiv {
 317         border-bottom: solid #efefef 1px;
 318 }
 319
 320 .nihilo .dijitTabContainerRight-tabs .dijitTab {
 321         background: url("../images/tabContainerSprite.gif") no-repeat left -350px;
 322 }
 323 .nihilo .dijitTabContainerRight-tabs .dijitTabHover .dijitTab {
 324         background: url("../images/tabContainerSprite.gif") no-repeat left -200px;
 325 }
 326
 327 /* strip */
 328 .nihilo .dijitTabContainerRightStrip {
 329         padding-right: 2px;
 330         border: 1px solid #ccc;
 331         border-left: none;
 332         background: #f2f2f2;
 333 }
 334
 335 /* ================================ */
 336 /* left tabs */
 337 .nihilo .dijitTabContainerLeft-tabs {
 338         border-color: #ccc;
 339         padding-top: 3px;
 340 }
 341
 342 /* left conatiner */
 343 .nihilo .dijitTabContainerLeft-container {
 344         border-left: none;
 345 }
 346
 347 .nihilo .dijitTabContainerLeft-tabs .dijitTab {
 348         border-right: 1px solid #ccc;
 349         border-bottom: 1px solid #dedede;
 350 }
 351
 352 /* checked tabs */
 353 .nihilo .dijitTabContainerLeft-tabs .dijitTabChecked {
 354         border-right: 1px solid #f8f8f8;
 355 }
 356
 357 .nihilo .dijitTabContainerLeft-tabs .dijitTabInnerDiv {
 358         background: url("../images/tabContainerSprite.gif") no-repeat right -350px;
 359 }
 360 .nihilo .dijitTabContainerLeft-tabs .dijitTabHover .dijitTabInnerDiv {
 361         background: url("../images/tabContainerSprite.gif") no-repeat right -200px;
 362 }
 363 .nihilo .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabInnerDiv,
 364 .nihilo .dijitTabContainerLeft-tabs .dijitTabCheckedHover .dijitTabInnerDiv {
 365         background: url("../images/tabLeftChecked.gif") no-repeat right top;
 366 }
 367
 368 .dj_ie .nihilo .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabInnerDiv,
 369 .dj_ie .nihilo .dijitTabContainerLeft-tabs .dijitTabCheckedHover .dijitTabInnerDiv {
 370         border-bottom: solid #efefef 1px;
 371 }
 372
 373 .dj_ie .nihilo .dijitTabContainerLeft-tabs .dijitTabInnerDiv {
 374         border-bottom: solid #fff 1px;
 375 }
 376
 377 /* strip */
 378 .nihilo .dijitTabContainerLeftStrip {
 379         padding-left: 2px;
 380         border: 1px solid #ccc;
 381         border-right: none;
 382 }
 383
 384 .nihilo .dijitTabContainerLeftStrip {
 385         background: #f2f2f2;
 386 }
 387
 388 /* ================================ */
 389 /* left/right tabs */
 390 .nihilo .dijitTabContainerLeft-tabs .dijitTab,
 391 .nihilo .dijitTabContainerRight-tabs .dijitTab {
 392         margin-right:auto;
 393         margin-bottom:2px;      /* space between one tab and the next in left/right mode */
 394 }
 395
 396 /* left/right tabstrip */
 397 .nihilo .dijitTabContainerLeft-spacer,
 398 .nihilo .dijitTabContainerRight-spacer {
 399         width: 2px;
 400         border: 1px solid #ccc;
 401         background: #f8f8f8;
 402 }
 403
 404 .nihilo .dijitTabContainerRight-spacer {
 405         border-right: none;
 406 }
 407
 408 .nihilo .dijitTabContainerRight-tabs {
 409         padding-top: 3px;
 410         height: 100%;
 411 }
 412 .nihilo .dijitTabContainerLeft-tabs {
 413         height: 100%;
 414 }
 415
 416 .nihilo .dijitTabContainerLeft-spacer {
 417         border-left: none;
 418 }
 419
 420 /* ================================ */
 421
 422 /* this resets the tabcontainer stripe when within a contentpane */
 423 .nihilo .dijitTabContainerTop-dijitContentPane .dijitTabContainerTop-tabs {
 424         border-left: 0 solid #ccc;
 425         border-top: 0 solid #ccc;
 426         border-right: 0 solid #ccc;
 427         padding-top: 0;
 428         padding-left: 0;
 429 }
 430
 431 /* ================================ */
 432
 433 /* Menu and slider control styles */
 434 .nihilo .dijitTabContainer .tabStripButton {
 435         margin-right: 0;
 436 }
 437
 438 .nihilo .tabStripButton .dijitTabInnerDiv .dijitTabContent {
 439         padding: 5px 0 6px;
 440 }
 441
 442 .dj_ie6 .nihilo .tabStripButton .dijitTabInnerDiv .dijitTabContent,
 443 .dj_ie7 .nihilo .tabStripButton .dijitTabInnerDiv .dijitTabContent,
 444 .dj_opera .nihilo .tabStripButton .dijitTabInnerDiv .dijitTabContent {
 445         padding-bottom: 7px;
 446 }
 447
 448 .nihilo .tabStrip-disabled .tabStripButton .dijitTabInnerDiv .dijitTabContent {
 449         padding: 3px 0 5px;
 450 }
 451
 452 .dj_ie6 .nihilo .tabStrip-disabled .tabStripButton .dijitTabInnerDiv .dijitTabContent,
 453 .dj_ie7 .nihilo .tabStrip-disabled .tabStripButton .dijitTabInnerDiv .dijitTabContent,
 454 .dj_opera .nihilo .tabStrip-disabled .tabStripButton .dijitTabInnerDiv .dijitTabContent {
 455         padding-top: 4px;
 456 }
 457
 458 .nihilo .dijitTabStripIcon {
 459         height: 14px;
 460         width: 14px;
 461         background: url(../images/spriteRoundedIconsSmall.png) no-repeat left top;
 462 }
 463
 464 .dj_ie6 .nihilo .dijitTabStripIcon {
 465         background-image: url(../images/spriteRoundedIconsSmall.gif);
 466 }
 467
 468 .nihilo .dijitTabStripSlideRightIcon {
 469         background-position: -30px top;
 470 }
 471
 472 .nihilo .dijitTabStripMenuIcon {
 473         background-position: -15px top;
 474 }
 475
 476 .nihilo .dijitTabContainerTopNone {
 477         padding-top: 0;
 478 }
 479
 480 .nihilo .dijitTabContainer .tabStripButton-top {
 481         margin-top: 1px;
 482 }
 483
 484 .nihilo .dijitTabContainer .tabStripButton-bottom {
 485         background: transparent url(../images/tabBottomEnabledSpriteLR.gif) no-repeat scroll left bottom;
 486         border-bottom: medium none;
 487         border-top: 1px solid #CCCCCC;
 488 }
 489
 490 .nihilo .dijitTabContainer .tabStripButton-bottom .dijitTabInnerDiv {
 491         background: transparent url(../images/tabBottomEnabledSpriteLR.gif) no-repeat scroll right bottom;
 492 }
 493
 494 .nihilo .dijitTabContainer .tabStripButton-bottom .dijitTabContent {
 495         background: transparent;
 496 }