git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dijit/themes/nihilo/layout/TabContainer.css.commented.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 .nihilo .dijitTabPaneWrapper { /* Container for tab content */
  12         /*
  13         overflow: hidden;
  14         */
  15         background:#fff;
  16         border:1px solid #ccc;
  17 }
  18
  19 .nihilo .dijitTab {
  20         line-height:normal;
  21         margin-right:3px;       /* space between one tab and the next in top/bottom mode */
  22         padding:0px;
  23         background: url("../images/tabContainerSprite.gif") no-repeat 0 -300px;
  24         font-size: 0.9em;
  25         font-weight: bold;
  26         color: #6d6d6d;
  27         margin-bottom: -1px;
  28 }
  29
  30 .nihilo dijitTabChecked {
  31         margin-bottom: -2px;
  32 }
  33
  34 .nihilo .dijitTabInnerDiv .dijitTabContent {
  35         padding:8px 10px 4px 10px;
  36         background: url("../images/tabContainerSprite.gif") repeat-x 0 -350px;
  37 }
  38
  39 .nihilo .dijitTabInnerDiv {
  40         padding:0px 10px 0px 10px;
  41         background: url("../images/tabContainerSprite.gif") no-repeat;
  42         background-position: right -400px;
  43         border: none;
  44 }
  45
  46 .nihilo .dijitTabHover,
  47 .nihilo .dijitTabCloseButtonHover {
  48         color: #243C5F;
  49         background: url("../images/tabContainerSprite.gif") no-repeat 0px -150px;
  50 }
  51
  52 .nihilo .dijitTabHover .dijitTabInnerDiv,
  53 .nihilo .dijitTabCloseButtonHover .dijitTabInnerDiv {
  54         background: url("../images/tabContainerSprite.gif") no-repeat right -250px;
  55         border: none;
  56 }
  57
  58 .nihilo .dijitTabHover .dijitTabInnerDiv .dijitTabContent,
  59 .nihilo .dijitTabCloseButtonHover .dijitTabInnerDiv .dijitTabContent {
  60         background: url("../images/tabContainerSprite.gif") repeat-x 0 -200px;
  61         padding:8px 10px 4px 10px;
  62 }
  63
  64 .nihilo .dijitTabChecked,
  65 .nihilo .dijitTabCloseButtonChecked
  66 {
  67         /* the selected tab (with or without hover) */
  68         background: url("../images/tabContainerSprite.gif") no-repeat 0px -0px;
  69 }
  70
  71 .nihilo .dijitTabChecked .dijitTabInnerDiv {
  72         padding:0px 10px 0px 10px;
  73         background: url("../images/tabContainerSprite.gif") no-repeat right -100px;
  74         border: none;
  75 }
  76
  77 .nihilo .dijitTabChecked .dijitTabInnerDiv .dijitTabContent {
  78         background: url("../images/tabContainerSprite.gif") repeat-x 0 -50px;
  79         padding:8px 10px 5px 10px;
  80         color: #243C5F !important;
  81 }
  82
  83 /* top specific classes */
  84
  85 .nihilo .dijitTabLabels-top {
  86         border-left: 1px solid #ccc;
  87         border-top: 1px solid #ccc;
  88         border-right: 1px solid #ccc;
  89         padding-top: 2px;
  90         padding-left: 3px;
  91         background: #fafafa url("../images/tabStripe.gif") repeat-x left bottom;
  92         padding-bottom: 4px;
  93 }
  94 /*
  95 .nihilo .dijitAlignTop .dijitTabStripe {
  96         background: url("../images/tabStripe.gif") repeat-x left bottom;
  97         padding-left: 2px;
  98         padding-top: 0px;
  99         height: 4px;
 100         clear: both;
 101         font-size: 1px;
 102         margin-left: -3px;
 103 }
 104 */
 105
 106 .nihilo .dijitAlignLeft .dijitTab,
 107 .nihilo .dijitAlignRight .dijitTab {
 108         margin-right:0px;
 109         margin-bottom:5px;      /* space between one tab and the next in left/right mode */
 110 }
 111
 112 /* make the active tab white on the side next to the content pane */
 113 .nihilo .dijitAlignTop .dijitTabChecked,
 114 .nihilo .dijitAlignTop .dijitTabCloseButtonChecked
 115 {
 116         border-bottom-color:white;
 117         vertical-align:bottom;
 118 }
 119
 120 .nihilo .dijitAlignBottom .dijitTabChecked,
 121 .nihilo .dijitAlignBottom .dijitTabCloseButtonChecked
 122 {
 123         border-top-color:white;
 124         /*-moz-border-radius:2px 2px 0px 0px; eliminate some border detritrus on moz */
 125 }
 126
 127 .nihilo .dijitAlignLeft .dijitTabChecked,
 128 .nihilo .dijitAlignLeft .dijitTabCloseButtonChecked
 129 {
 130         border-right-color:white;
 131 }
 132
 133 .nihilo .dijitAlignRight .dijitTabChecked,
 134 .nihilo .dijitAlignRight .dijitTabCloseButtonChecked
 135 {
 136         border-left-color:white;
 137 }
 138
 139 /* bottom specific classes */
 140
 141 .nihilo .dijitTabLabels-bottom {
 142         padding-bottom: 2px;
 143         padding-left: 3px;
 144         border-left: 1px solid #ccc;
 145         border-bottom: 1px solid #ccc;
 146         border-right: 1px solid #ccc;
 147         background: #fafafa url("../images/tabStripeBottom.gif") repeat-x left top;
 148         padding-top: 3px;
 149 }
 150 /*
 151 .nihilo .dijitAlignBottom .dijitTabStripe {
 152         background: url("../images/tabStripe.gif") repeat-x left bottom;
 153         padding-left: 2px;
 154         padding-top: 0px;
 155         height: 4px;
 156         clear: both;
 157         font-size: 1px;
 158         margin-left: -3px;
 159 }
 160 */
 161 .nihilo .dijitAlignBottom .dijitTab {
 162         line-height:normal;
 163         margin-right:3px;       /* space between one tab and the next in top/bottom mode */
 164         padding:0px;
 165         background: url("../images/tabBottomEnabledSpriteLR.gif") no-repeat bottom left;
 166         font-size: 0.9em;
 167         font-weight: bold;
 168         color: #6d6d6d;
 169         margin-bottom: 0px;
 170         margin-top: 1px;
 171 }
 172
 173 .nihilo .dijitAlignBottom .dijitTabChecked {
 174         margin-bottom: 0px;
 175         margin-top: 0px !important;
 176 }
 177
 178 .nihilo .dijitAlignBottom .dijitTabInnerDiv .dijitTabContent {
 179         padding:6px 10px 6px 10px;
 180         background: url("../images/tabBottomEnabledC.gif") repeat-x bottom left;
 181 }
 182
 183 .nihilo .dijitAlignBottom .dijitTabInnerDiv {
 184         padding:0px 10px 0px 10px;
 185         background: url("../images/tabBottomEnabledSpriteLR.gif") no-repeat bottom right;
 186         border: none;
 187 }
 188
 189 .nihilo .dijitAlignBottom .dijitTabHover,
 190 .nihilo .dijitAlignBottom .dijitTabCloseButtonHover {
 191         color: #243C5F;
 192         background: url("../images/tabBottomHoverSpriteLR.gif") no-repeat bottom left;
 193 }
 194
 195 .nihilo .dijitAlignBottom .dijitTabHover .dijitTabInnerDiv,
 196 .nihilo .dijitAlignBottom .dijitTabCloseButtonHover .dijitTabInnerDiv {
 197         background: url("../images/tabBottomHoverSpriteLR.gif") no-repeat bottom right;
 198         border: none;
 199 }
 200
 201 .nihilo .dijitAlignBottom .dijitTabHover .dijitTabInnerDiv .dijitTabContent,
 202 .nihilo .dijitAlignBottom .dijitTabCloseButtonHover .dijitTabInnerDiv .dijitTabContent {
 203         background: url("../images/tabBottomHoverC.gif") repeat-x bottom left;
 204         padding:6px 10px 6px 10px;
 205 }
 206
 207 .dj_ie6 .nihilo .dijitAlignBottom .dijitTabHover,
 208 .dj_ie6 .nihilo .dijitAlignBottom .dijitTabCloseButtonHover {
 209         background-image: url("../images/tabHover.gif");
 210 }
 211
 212 .nihilo .dijitAlignBottom .dijitTabChecked,
 213 .nihilo .dijitAlignBottom .dijitTabCloseButtonChecked
 214 {
 215         /* the selected tab (with or without hover) */
 216         background: url("../images/tabBottomActiveSpriteLR.gif") no-repeat bottom left;
 217 }
 218
 219 .nihilo .dijitAlignBottom .dijitTabChecked .dijitTabInnerDiv {
 220         padding:0px 10px 0px 10px;
 221         background: url("../images/tabBottomActiveSpriteLR.gif") no-repeat bottom right;
 222         border: none;
 223 }
 224
 225 .nihilo .dijitAlignBottom .dijitTabChecked .dijitTabInnerDiv .dijitTabContent {
 226         background: url("../images/tabBottomActiveC.gif") repeat-x bottom left;
 227         padding:7px 10px 6px 10px;
 228 }
 229
 230
 231 /* left specific classes */
 232 .nihilo .dijitAlignLeft .dijitTab {
 233         margin-right: 1px !important;
 234 }
 235
 236 .nihilo .dijitAlignLeft .dijitTabChecked {
 237         margin-right: 0px !important;
 238 }
 239
 240 .nihilo .dijitAlignLeft .dijitTabChecked .dijitTabInnerDiv {
 241         background: url("../images/tabLeftChecked.gif") no-repeat right top !important;
 242         padding-left: 10px;
 243         border-bottom: 1px solid #dedede !important;
 244 }
 245
 246 .nihilo .dijitAlignLeft .dijitTabInnerDiv {
 247         background: url("../images/tabContainerSprite.gif") no-repeat right -350px;
 248         padding-left: 10px;
 249         border-bottom: 1px solid #dedede;
 250 }
 251 .nihilo .dijitAlignLeft .dijitTabHover .dijitTabInnerDiv {
 252         background: url("../images/tabContainerSprite.gif") no-repeat right -200px;
 253         padding-left: 10px;
 254         border-bottom: 1px solid #dedede;
 255 }
 256
 257 .nihilo .dijitTabLabels-left-h {
 258         padding-left: 2px;
 259         padding-top: 3px;
 260         border-left: 1px solid #b1badf;
 261         border-bottom: 1px solid #b1badf;
 262         border-top: 1px solid #b1badf;
 263         background: #fafafa url("../images/tabStripeLeft.gif") repeat-y right top;
 264         padding-right: 3px;
 265 }
 266
 267 .nihilo .dijitAlignLeft .dijitTabInnerDiv .dijitTabContent {
 268         padding:7px 10px 6px 10px !important;
 269 }
 270
 271 /* right specific classes */
 272 .nihilo .dijitTabLabels-right-h {
 273         padding-right: 2px;
 274         padding-top: 3px;
 275         border-right: 1px solid #b1badf;
 276         border-bottom: 1px solid #b1badf;
 277         border-top: 1px solid #b1badf;
 278         background: #fafafa url("../images/tabStripeRight.gif") repeat-y left top;
 279         padding-left: 3px;
 280 }
 281
 282 .nihilo .dijitAlignRight .dijitTab {
 283         margin-left: 1px;
 284 }
 285
 286 .nihilo .dijitAlignRight .dijitTabChecked {
 287         margin-left: 0px;
 288 }
 289
 290 .nihilo .dijitAlignRight .dijitTabChecked {
 291         background: url("../images/tabRightChecked.gif") no-repeat left top !important;
 292 }
 293
 294 .nihilo .dijitAlignRight .dijitTab {
 295         background: url("../images/tabContainerSprite.gif") no-repeat left -350px;
 296 }
 297 .nihilo .dijitAlignRight .dijitTabHover .dijitTab {
 298         background: url("../images/tabContainerSprite.gif") no-repeat left -200px;
 299 }
 300 .nihilo .dijitAlignRight .dijitTabInnerDiv .dijitTabContent {
 301         padding:7px 10px 6px 10px !important;
 302 }
 303
 304 .nihilo .dijitAlignRight .dijitTabChecked .dijitTabInnerDiv {
 305         border-bottom: 1px solid #dedede !important;
 306 }
 307
 308 .nihilo .dijitAlignRight .dijitTabInnerDiv {
 309         border-bottom: 1px solid #dedede;
 310 }
 311 .nihilo .dijitAlignRight .dijitTabHover .dijitTabInnerDiv {
 312         border-bottom: 1px solid #dedede;
 313 }
 314
 315 /* make space for a positioned close button */
 316 .nihilo .dijitTab .dijitClosable {
 317         position: relative;
 318         padding: 0;
 319         padding-left: 10px !important;
 320         padding-right: 20px !important;
 321 }
 322
 323 .nihilo .dijitTab img {
 324         padding: 0;
 325         margin: 0;
 326 }
 327
 328 .nihilo .dijitTab .dijitClosable .closeImage {
 329         position:absolute;
 330         top: 5px;
 331         right: 5px;
 332         height: 15px;
 333         width: 15px;
 334         padding: 0;
 335         margin: 0;
 336         background: url("../images/spriteRoundedIconsSmall.png") no-repeat -60px top;
 337 }
 338 .dj_ie6 .dijitTab .dijitClosable .closeImage {
 339         background:url("../images/spriteRoundedIconsSmall.gif") no-repeat -60px top;
 340 }
 341 .dj_ie6 .nihilo .dijitTabCloseButton .dijitClosable .closeImage {
 342         background: url("../images/spriteRoundedIconsSmall.gif") no-repeat -60px top;
 343 }
 344
 345 .nihilo .dijitTabHover .dijitClosable .closeImage {
 346         background: url("../images/spriteRoundedIconsSmall.png") no-repeat -60px -15px !important;
 347 }
 348 .dj_ie6 .nihilo .dijitTabHover .dijitClosable .closeImage {
 349         background: url("../images/spriteRoundedIconsSmall.gif") no-repeat -60px -15px !important;
 350 }
 351
 352 /* correct for IE6.
 353     We cant force hasLayout as that blows out the shrink wrapped tabs
 354     ..so we shim in the closeImage position properties instead
 355 */
 356 .dj_ie6 .nihilo .dijitAlignLeft .dijitTab .dijitClosable .closeImage {
 357         left:-20px;
 358 }
 359
 360 .nihilo .dijitAlignBottom .dijitTab .dijitClosable .closeImage {
 361         top: auto;
 362         bottom: 7px;
 363         right: 3px;
 364 }
 365
 366 .nihilo .dijitAlignLeft .dijitTab .dijitClosable .closeImage {
 367         top: 7px;
 368         left: 3px;
 369 }