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