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

   1 /* Tabs, shared classes */
   2 .tundra .dijitTabPaneWrapper {
   3         background:#fff;
   4         border:1px solid #ccc;
   5         margin: 0;
   6         padding: 0;
   7 }
   8
   9 .tundra .dijitTab {
  10         line-height:normal;
  11         margin-right:4px;       /* space between one tab and the next in top/bottom mode */
  12     padding:2px 8px 2px 9px;
  13         border:1px solid #ccc;
  14         background:#e2e2e2 url("../images/tabEnabled.png") repeat-x;
  15 }
  16
  17 .tundra .dijitTabSpacer {
  18         display: none;
  19 }
  20
  21 .tundra .dijitTabContainer .tabStripRBtn {
  22         margin-right: 20px;
  23 }
  24 .tundra .dijitTabContainer .tabStripLBtn {
  25         margin-left: 20px;
  26 }
  27
  28 .tundra .nowrapTabStrip .dijitTab {
  29         top: 2px;
  30 }
  31 .tundra .dijitTabContainerBottom .nowrapTabStrip .dijitTab {
  32         top: 0;
  33         bottom: 2px;
  34 }
  35
  36 /* selected tab */
  37 .tundra .dijitTabChecked {
  38         /* the selected tab (with or without hover) */
  39         background-color:#fff;
  40         border-color: #ccc;
  41         background-image:none;
  42 }
  43
  44 /* hovered tab */
  45 .tundra .dijitTabHover {
  46         color: #243C5F;
  47         border-top-color:#92a0b3;
  48         border-left-color:#92a0b3;
  49         border-right-color:#92a0b3;
  50         border-bottom-color:#92a0b3;
  51         background:#e2e2e2 url("../images/tabHover.gif") repeat-x;
  52 }
  53
  54 .tundra .dijitTabContainerTop .dijitTabHover {
  55         border-bottom-color:#ccc;
  56 }
  57
  58 .tundra .dijitTabContainerBottom .dijitTabHover {
  59         border-top-color:#ccc;
  60 }
  61
  62 .tundra .dijitTabContainerLeft .dijitTabHover {
  63         border-right-color:#ccc;
  64 }
  65
  66 .tundra .dijitTabContainerRight .dijitTabHover {
  67         border-left-color:#ccc;
  68 }
  69
  70 .tundra .dijitTabContainer .dijitTabCheckedHover {
  71         color: inherit;
  72         border:1px solid #ccc;
  73         background:#fff;
  74 }
  75
  76 .tundra .dijitTab .tabLabel {
  77         /* make sure tabs w/close button and w/out close button are same height, even w/small (<12px) font */
  78         min-height: 12px;
  79         display: inline-block;
  80 }
  81
  82 /* Nested Tabs */
  83
  84 .tundra .dijitTabContainerNested .dijitTabListWrapper {
  85         height: auto;
  86 }
  87
  88 .tundra .dijitTabContainerNested .dijitTabContainerTop-tabs {
  89         border-bottom: 1px solid #CCC;
  90 }
  91
  92 .tundra .dijitTabContainerTabListNested .dijitTab {
  93         background: none;
  94         border: none;
  95         top: 0;         /* to override top: 1px/-1px for normal tabs */
  96 }
  97
  98 .tundra .dijitTabContainerTabListNested .dijitTabHover .tabLabel {
  99         text-decoration: underline;
 100 }
 101 .tundra .dijitTabContainerTabListNested .dijitTabChecked .tabLabel {
 102         text-decoration: underline;
 103         font-weight: bold;
 104         /*background:#f3f3f3;*/
 105 }
 106 .tundra .dijitTabContainer .dijitTabPaneWrapperNested {
 107         border: none;   /* prevent double border */
 108 }
 109
 110 /* Close button */
 111
 112 .tundra .dijitTabCloseButton {
 113         background: url("../images/tabClose.png") no-repeat right top;
 114         width: 12px;
 115         height: 12px;
 116 }
 117 .dj_ie6 .tundra .dijitTabCloseButton {
 118         background-image : url("../images/tabClose.gif");
 119 }
 120
 121 .tundra .dijitTabCloseButtonHover {
 122         background-image : url("../images/tabCloseHover.png");
 123 }
 124 .dj_ie6 .tundra .dijitTabCloseButtonHover {
 125         background-image : url("../images/tabCloseHover.gif");
 126 }
 127
 128 /* ================================ */
 129 /* top tabs */
 130
 131 .tundra .dijitTabContainerTop-tabs {
 132         margin-bottom: 0;
 133         border-color: #cccccc;
 134         padding-left: 3px;
 135         background-position: bottom;
 136 }
 137 .tundra .dijitTabContainerTop-tabs .dijitTab {
 138         top: 0;
 139         margin-bottom: -1px;
 140 }
 141
 142 /* top container */
 143 .tundra .dijitTabContainerTop-container {
 144         border-top: none;
 145 }
 146
 147 /* selected tab */
 148 .tundra .dijitTabContainerTop-tabs .dijitTabChecked {
 149         border-bottom-color:white;
 150 }
 151
 152 .tundra .dijitTabContainerTop-tabs,
 153 .tundra .dijitTabContainerBottom-tabs {
 154         padding-left: 3px;
 155         padding-right: 3px;
 156 }
 157
 158 /* strip */
 159 .tundra .dijitTabContainerTopStrip {
 160         border-top: 1px solid #CCC;
 161         border-right: 1px solid #CCC;
 162         border-left: 1px solid #CCC;
 163         padding-top: 2px;
 164         background: #f2f2f2;
 165 }
 166
 167 .tundra .dijitTabContainerTopNone {
 168         padding-top: 0;
 169 }
 170
 171
 172 /* ================================ */
 173 /* bottom tabs */
 174 .tundra .dijitTabContainerBottom-tabs {
 175         margin-top: 0;
 176         border-color: #cccccc;
 177         background-position: top;
 178         padding-left: 3px;
 179 }
 180 .tundra .dijitTabContainerBottom-tabs .dijitTab {
 181         bottom: 0;
 182         margin-top: -1px;
 183 }
 184
 185 /* bottom container */
 186 .tundra .dijitTabContainerBottom-container {
 187         border-bottom: none;
 188 }
 189
 190 /* selected tab */
 191 .tundra .dijitTabContainerBottom-tabs .dijitTabChecked {
 192         border-top-color:white;
 193 }
 194
 195 /* strip */
 196 .tundra .dijitTabContainerBottomStrip {
 197         padding-bottom: 2px;
 198         border: 1px solid #ccc;
 199         background: #f2f2f2;
 200         border-top: none;
 201 }
 202
 203 /* ================================ */
 204 /* right tabs */
 205 .tundra .dijitTabContainerRight-tabs {
 206         border-color: #ccc;
 207         height: 100%;
 208         padding-top: 3px;
 209 }
 210
 211 .tundra .dijitTabContainerRightStrip {
 212         margin-left: -1px;
 213 }
 214
 215 /* right container */
 216 .tundra .dijitTabContainerRight-container {
 217         border-right: none;
 218 }
 219
 220 /* selected tab */
 221 .tundra .dijitTabContainerRight-tabs .dijitTabChecked {
 222         border-left-color:white;
 223 }
 224
 225 /* strip */
 226 .tundra .dijitTabContainerRightStrip {
 227         padding-right: 2px;
 228         border: 1px solid #ccc;
 229 }
 230
 231 .tundra .dijitTabContainerRightStrip {
 232         background: #f2f2f2;
 233 }
 234
 235 /* ================================ */
 236 /* left tabs */
 237 .tundra .dijitTabContainerLeft-tabs {
 238         border-color: #ccc;
 239         padding-top: 3px;
 240         height: 100%;
 241 }
 242
 243 /* left container */
 244 .tundra .dijitTabContainerLeft-container {
 245         border-left: none;
 246 }
 247
 248 /* selected tab */
 249 .tundra .dijitTabContainerLeft-tabs .dijitTabChecked {
 250         border-right-color:white;
 251 }
 252
 253 /* strip */
 254 .tundra .dijitTabContainerLeftStrip {
 255         padding-left: 2px;
 256         border: 1px solid #ccc;
 257         background: #f2f2f2;
 258         border-right: none;
 259 }
 260
 261 /* ================================ */
 262 /* left/right tabs */
 263 .tundra .dijitTabContainerLeft-tabs .dijitTab,
 264 .tundra .dijitTabContainerRight-tabs .dijitTab {
 265         margin-right:0;
 266         margin-bottom:4px;      /* space between one tab and the next in left/right mode */
 267 }
 268
 269 /* ================================ */
 270
 271 /* this resets the tabcontainer stripe when within a contentpane */
 272 .tundra .dijitTabContainerTop-dijitContentPane .dijitTabContainerTop-tabs {
 273         border-left: 0 solid #ccc;
 274         border-top: 0 solid #ccc;
 275         border-right: 0 solid #ccc;
 276         padding-top: 0;
 277         padding-left: 0;
 278 }
 279
 280 /* ================================ */
 281
 282 /* Menu and slider control styles */
 283 .tundra .dijitTabContainer .tabStripButton {
 284         margin-right: 0;
 285         padding-top: 2px;
 286         z-index: 12;
 287 }
 288
 289 .tundra .dijitTabContainerBottom .tabStripButton {
 290         padding-top: 3px;
 291 }
 292
 293 .tundra .tabStrip-disabled .tabStripButton {
 294         padding-bottom: 3px;
 295         padding-top: 1px;
 296 }
 297
 298 .tundra .tabStripButton {
 299         padding: 3px 2px 4px 2px;
 300 }
 301
 302 .tundra .dijitTabStripIcon {
 303         height: 14px;
 304         width: 14px;
 305         background: url(../images/spriteRoundedIconsSmall.png) no-repeat left top ;
 306 }
 307
 308 .dj_ie6 .tundra .dijitTabStripIcon {
 309         background-image: url(../images/spriteRoundedIconsSmall.gif);
 310 }
 311
 312 .tundra .dijitTabStripSlideRightIcon {
 313         background-position: -30px top;
 314 }
 315
 316 .tundra .dijitTabStripMenuIcon {
 317         background-position: -15px top;
 318 }
 319