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