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

   1
   2 .claro .dijitTabPaneWrapper {
   3         background:#fff;
   4 }
   5 .claro .dijitTabPaneWrapper,
   6 .claro .dijitTabContainerTop-tabs,
   7 .claro .dijitTabContainerBottom-tabs,
   8 .claro .dijitTabContainerLeft-tabs,
   9 .claro .dijitTabContainerRight-tabs {
  10
  11         border-color: #b5bcc7;
  12 }
  13 .claro .dijitTabCloseButton {
  14         background: url("images/tabClose.png") no-repeat;
  15         width: 14px;
  16         height: 14px;
  17         margin-left: 5px;
  18         margin-right:-3px;
  19 }
  20 .claro .dijitTabCloseButtonHover {
  21         background-position:-14px;
  22 }
  23 .claro .dijitTabCloseButtonActive {
  24         background-position:-28px;
  25 }
  26 .claro .dijitTabSpacer {
  27
  28         display: none;
  29 }
  30 .claro .dijitTabInnerDiv {
  31         background-color:#e6e6e7;
  32         -webkit-transition-property:background-color, border;
  33         -webkit-transition-duration:.35s;
  34         color:#4a4a4a;
  35 }
  36 .claro .dijitTabHover .dijitTabInnerDiv {
  37         background-color:#a9d6ff;
  38         -webkit-transition-duration:.25s;
  39         color:#000;
  40 }
  41 .claro .dijitTabActive .dijitTabInnerDiv {
  42         background-color:#8bc4f9;
  43         color:#000;
  44         -webkit-transition-duration:.1s;
  45 }
  46 .claro .dijitTabChecked .dijitTabInnerDiv {
  47         background-color:#b2d4f3;
  48         color:#000;
  49 }
  50 .claro .dijitTabContent {
  51         border: 1px solid #b5bcc7;
  52 }
  53 .claro .dijitTabHover .dijitTabContent,
  54 .claro .dijitTabActive .dijitTabContent {
  55         border-color: #769dc0;
  56 }
  57 .claro .dijitTabChecked .dijitTabContent {
  58         color:#000;
  59         border-color: #b5bcc7;
  60 }
  61 .claro .tabStripButton .dijitTabInnerDiv {
  62         background-color: transparent;
  63 }
  64 .claro .tabStripButton .dijitTabContent {
  65         border: none;
  66 }
  67 .claro .dijitTabContainerTop-tabs .dijitTab {
  68         top: 1px;
  69         margin-right: 1px;
  70         padding-top: 3px;
  71 }
  72 .dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTab {
  73         top: 3px;
  74 }
  75 .claro .dijitTabContainerTop-tabs .dijitTabContent {
  76         padding:3px 8px 3px 4px;
  77         border-bottom: 1px;
  78         background-image:url("images/tabTop.png");
  79         background-position:0px 0px;
  80         background-repeat:repeat-x;
  81         min-width: 60px;
  82         text-align: center;
  83 }
  84 .claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabContent {
  85         padding-bottom: 4px;
  86         padding-top: 6px;
  87 }
  88 .dj_ie .claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabContent {
  89         border-bottom: none;
  90 }
  91 .claro .dijitTabContainerTop-tabs .dijitTabInnerDiv {
  92         background-image:url("images/tabTop.png");
  93         background-position:0px -248px;
  94         background-position:bottom;
  95         background-repeat:repeat-x;
  96         box-shadow: 0px -1px 1px rgba(0, 0, 0, 0.04);
  97         -webkit-box-shadow: 0px -1px 1px rgba(0, 0, 0, 0.04);
  98         -moz-box-shadow: 0px -1px 1px rgba(0, 0, 0, 0.04);
  99 }
 100 .claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabInnerDiv {
 101         background-image:none;
 102         box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.05);
 103         -webkit-box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.05);
 104         -moz-box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.05);
 105 }
 106 .claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabContent {
 107         background-position:0px -102px;
 108         background-repeat:repeat-x;
 109 }
 110 .claro .dijitTabContainerBottom-tabs .dijitTab {
 111         top: -1px;
 112         margin-right: 1px;
 113 }
 114 .claro .dijitTabContainerBottom-tabs .dijitTabContent {
 115         padding:3px 8px 4px 4px;
 116         border-top: none;
 117         background-image: url("images/tabBottom.png");
 118         background-position:0px -249px;
 119         background-repeat: repeat-x;
 120         background-position:bottom;
 121         min-width: 60px;
 122         text-align: center;
 123 }
 124 .claro .dijitTabContainerBottom-tabs .dijitTab {
 125         padding-bottom: 3px;
 126 }
 127 .claro .dijitTabContainerBottom-tabs .dijitTabInnerDiv {
 128         background-image: url("images/tabBottom.png");
 129         background-position: top;
 130         background-repeat: repeat-x;
 131         box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.04);
 132         -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.04);
 133         -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.04);
 134
 135 }
 136 .claro .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabContent {
 137         padding-bottom: 7px;
 138         padding-top: 4px;
 139         background-position:0px -119px;
 140 }
 141 .claro .dijitTabContainerBottom-tabs .dijitTabChecked {
 142         padding-bottom: 0;
 143 }
 144 .claro .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabInnerDiv {
 145         background-image:none;
 146         box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
 147         -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
 148         -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
 149 }
 150 .claro .dijitTabContainerLeft-tabs .dijitTab {
 151         left: 1px;
 152         margin-bottom: 1px;
 153 }
 154 .claro .dijitTabContainerLeft-tabs .dijitTabInnerDiv {
 155         background-image: url("images/tabLeft.png");
 156         background-position: -347px -340px;
 157         background-repeat: repeat-y;
 158 }
 159 .claro .dijitTabContainerLeft-tabs .dijitTabContent {
 160         padding:3px 8px 4px 4px;
 161         background-image: url("images/tabLeft.png");
 162         background-repeat: repeat-y;
 163         background-position:0px 0px;
 164 }
 165 .claro .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabContent {
 166         padding-right: 9px;
 167         border-right: none;
 168         background-image: none;
 169 }
 170 .claro .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabInnerDiv {
 171         background-position:0px -179px;
 172         background-repeat:repeat-y;
 173         box-shadow: -1px 0px 2px rgba(0, 0, 0, .05);
 174         -webkit-box-shadow: -1px 0px 2px rgba(0, 0, 0, .05);
 175         -moz-box-shadow: -1px 0px 2px rgba(0, 0, 0, 0.05);
 176 }
 177 .claro .dijitTabContainerRight-tabs .dijitTab {
 178         left: -1px;
 179         margin-bottom: 1px;
 180 }
 181 .claro .dijitTabContainerRight-tabs .dijitTabInnerDiv {
 182         background-image: url("images/tabRight.png");
 183         background-repeat: repeat-y;
 184         background-position: -1px -347px;
 185 }
 186 .claro .dijitTabContainerRight-tabs .dijitTabContent {
 187         padding:3px 8px 4px 4px;
 188         background-image: url("images/tabRight.png");
 189         background-position:right top;
 190         background-repeat: repeat-y;
 191 }
 192 .claro .dijitTabContainerRight-tabs .dijitTabChecked .dijitTabContent {
 193         padding-left: 5px;
 194         border-left: none;
 195         background-image: none;
 196 }
 197 .claro .dijitTabContainerRight-tabs .dijitTabChecked .dijitTabInnerDiv {
 198         background-position:-348px -179px;
 199         box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.07);
 200         -webkit-box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.07);
 201         -moz-box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.07);
 202 }
 203 .claro .dijitTabContainerTop-tabs .dijitTabInnerDiv,
 204 .claro .dijitTabContainerTop-tabs .dijitTabContent {
 205         border-radius: 2px 2px 0px 0px;
 206         -moz-border-radius: 2px 2px 0px 0px;
 207         -webkit-border-top-left-radius:2px;
 208         -webkit-border-top-right-radius:2px;
 209 }
 210 .claro .dijitTabContainerBottom-tabs .dijitTabInnerDiv,
 211 .claro .dijitTabContainerBottom-tabs .dijitTabContent{
 212         border-radius: 0px 0px 2px 2px;
 213         -moz-border-radius: 0px 0px 2px 2px;
 214         -webkit-border-bottom-right-radius:2px;
 215         -webkit-border-bottom-left-radius:2px;
 216 }
 217 .claro .dijitTabContainerLeft-tabs .dijitTabInnerDiv,
 218 .claro .dijitTabContainerLeft-tabs .dijitTabContent{
 219         border-radius: 2px 0px 0px 2px;
 220         -moz-border-radius: 2px 0px 0px 2px;
 221         -webkit-border-top-left-radius:2px;
 222         -webkit-border-bottom-left-radius:2px;
 223 }
 224 .claro .dijitTabContainerRight-tabs .dijitTabInnerDiv,
 225 .claro .dijitTabContainerRight-tabs .dijitTabContent{
 226         border-radius: 0px 2px 2px 0px;
 227         -moz-border-radius: 0px 2px 2px 0px;
 228         -webkit-border-top-right-radius:2px;
 229         -webkit-border-bottom-right-radius:2px;
 230 }
 231 .claro .tabStripButton {
 232         background-color:#deecf9;
 233         border: 1px solid #b5bcc7;
 234 }
 235 .claro .dijitTabListContainer-top .tabStripButton {
 236         padding: 4px 3px;
 237         margin-top:7px;
 238         background-image: url("images/tabTop.png");
 239         background-position:0px 0px;
 240 }
 241 .claro .dijitTabListContainer-bottom .tabStripButton {
 242         padding:5px 3px;
 243         margin-bottom:4px;
 244         background-image: url("images/tabTop.png");
 245         background-position:0px -248px;
 246         background-position:bottom;
 247 }
 248 .claro .tabStripButtonHover {
 249         background-color:#a6d2fb;
 250 }
 251 .claro .tabStripButtonActive {
 252         background-color:#7dbefa;
 253 }
 254 .claro .dijitTabStripIcon {
 255         height:15px;
 256         width:15px;
 257         margin: 0 auto;
 258         background:url("../form/images/buttonArrows.png") no-repeat -75px 50%;
 259         background-color: transparent;
 260 }
 261 .claro .dijitTabStripSlideRightIcon{
 262         background-position: -24px 50%;
 263 }
 264 .claro .dijitTabStripMenuIcon {
 265         background-position: -51px 50%;
 266 }
 267 .claro .dijitTabListContainer-top .tabStripButtonDisabled,
 268 .claro .dijitTabListContainer-bottom .tabStripButtonDisabled {
 269         background-color:#dddddd;
 270         border:1px solid #c9c9c9;
 271 }
 272 .claro .tabStripButtonDisabled .dijitTabStripSlideLeftIcon {
 273         background-position:-175px 50%;
 274 }
 275 .claro .tabStripButtonDisabled .dijitTabStripSlideRightIcon {
 276         background-position: -124px 50%;
 277 }
 278 .claro .tabStripButtonDisabled .dijitTabStripMenuIcon {
 279         background-position: -151px 50%;
 280 }
 281 .claro .dijitTabContainerNested .dijitTabListWrapper {
 282         height: auto;
 283 }
 284 .claro .dijitTabContainerNested .dijitTabContainerTop-tabs {
 285         border-bottom:solid 1px #b5bcc7;
 286         padding:1px 2px 4px;
 287         margin-top:-2px;
 288 }
 289 .claro .dijitTabContainerTabListNested .dijitTabContent {
 290         background:rgba(255, 255, 255, 0) none repeat scroll 0 0;
 291         border: none;
 292         padding: 4px;
 293         border-color: rgba(118,157,192,0);
 294         -webkit-transition-property:background-color, border-color;
 295         -webkit-transition-duration:.3s;
 296 }
 297 .claro .dijitTabContainerTabListNested .dijitTab .dijitTabInnerDiv {
 298
 299         background: none;
 300         border: none;
 301         top: 0px;
 302         box-shadow: none;
 303         -webkit-box-shadow: none;
 304         -moz-box-shadow: none;
 305 }
 306 .claro .dijitTabContainerTabListNested .dijitTabHover .dijitTabContent {
 307         background-color:#eaf4fc;
 308         border-radius: 2px 2px 2px 2px;
 309         -moz-border-radius: 2px 2px 2px 2px;
 310         -webkit-border-radius:2px;
 311         border:solid 1px #c8dff3;
 312         padding: 3px;
 313         webkit-transition-duration:.2s;
 314 }
 315 .claro .dijitTabContainerTabListNested .dijitTabHover .tabLabel {
 316         text-decoration: none;
 317 }
 318 .claro .dijitTabContainerTabListNested .dijitTabActive .dijitTabContent {
 319         border-radius: 2px 2px 2px 2px;
 320         -moz-border-radius: 2px 2px 2px 2px;
 321         -webkit-border-radius:2px;
 322         border:solid 1px #a8c7e2;
 323         padding: 3px;
 324         background:#b9d9f5 url("images/tabNested.png") repeat-x;
 325         -webkit-transition-duration:.1s;
 326 }
 327 .claro .dijitTabContainerTabListNested .dijitTabChecked .dijitTabContent {
 328         border-radius: 2px 2px 2px 2px;
 329         -moz-border-radius: 2px 2px 2px 2px;
 330         -webkit-border-radius:2px;
 331         padding: 3px;
 332         border:solid 1px #a8c7e2;
 333         background-position: 0px 105px;
 334         background-color:#d4e8f9;
 335 }
 336 .claro .dijitTabContainerTabListNested .dijitTabChecked .tabLabel {
 337         text-decoration: none;
 338         background-image:none;
 339 }
 340 .claro .dijitTabPaneWrapperNested {
 341         border: none;
 342 }
 343 .dj_ie6 .claro .dijitTabContent,
 344 .dj_ie6 .claro .dijitTabInnerDiv,
 345 .dj_ie6 .dijitTabListContainer-top .tabStripButton,
 346 .dj_ie6 .dijitTabListContainer-bottom .tabStripButton{
 347         background-image: none;
 348 }