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

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