root / trunk / web / dojo / dijit / themes / claro / layout / TabContainer.css
History | View | Annotate | Download (9.91 KB)
| 1 | 9 | andrej.cim | |
|---|---|---|---|
| 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 | } |