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

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