resources/css/structure/tabs.css

   1 /*!
   2  * Ext JS Library 3.3.1
   3  * Copyright(c) 2006-2010 Sencha Inc.
   4  * licensing@sencha.com
   5  * http://www.sencha.com/license
   6  */
   7 .x-tab-panel {
   8     overflow:hidden;
   9 }
  10
  11 .x-tab-panel-header, .x-tab-panel-footer {
  12         border: 1px solid;
  13     overflow:hidden;
  14     zoom:1;
  15 }
  16
  17 .x-tab-panel-header {
  18         border: 1px solid;
  19         padding-bottom: 2px;
  20 }
  21
  22 .x-tab-panel-footer {
  23         border: 1px solid;
  24         padding-top: 2px;
  25 }
  26
  27 .x-tab-strip-wrap {
  28         width:100%;
  29     overflow:hidden;
  30     position:relative;
  31     zoom:1;
  32 }
  33
  34 ul.x-tab-strip {
  35         display:block;
  36     width:5000px;
  37     zoom:1;
  38 }
  39
  40 ul.x-tab-strip-top{
  41         padding-top: 1px;
  42         background: repeat-x bottom;
  43         border-bottom: 1px solid;
  44 }
  45
  46 ul.x-tab-strip-bottom{
  47         padding-bottom: 1px;
  48         background: repeat-x top;
  49         border-top: 1px solid;
  50         border-bottom: 0 none;
  51 }
  52
  53 .x-tab-panel-header-plain .x-tab-strip-top {
  54     background:transparent !important;
  55     padding-top:0 !important;
  56 }
  57
  58 .x-tab-panel-header-plain {
  59     background:transparent !important;
  60     border-width:0 !important;
  61     padding-bottom:0 !important;
  62 }
  63
  64 .x-tab-panel-header-plain .x-tab-strip-spacer,
  65 .x-tab-panel-footer-plain .x-tab-strip-spacer {
  66     border:1px solid;
  67     height:2px;
  68     font-size:1px;
  69     line-height:1px;
  70 }
  71
  72 .x-tab-panel-header-plain .x-tab-strip-spacer {
  73     border-top: 0 none;
  74 }
  75
  76 .x-tab-panel-footer-plain .x-tab-strip-spacer {
  77     border-bottom: 0 none;
  78 }
  79
  80 .x-tab-panel-footer-plain .x-tab-strip-bottom {
  81     background:transparent !important;
  82     padding-bottom:0 !important;
  83 }
  84
  85 .x-tab-panel-footer-plain {
  86     background:transparent !important;
  87     border-width:0 !important;
  88     padding-top:0 !important;
  89 }
  90
  91 .ext-border-box .x-tab-panel-header-plain .x-tab-strip-spacer,
  92 .ext-border-box .x-tab-panel-footer-plain .x-tab-strip-spacer {
  93     height:3px;
  94 }
  95
  96 ul.x-tab-strip li {
  97     float:left;
  98     margin-left:2px;
  99 }
 100
 101 ul.x-tab-strip li.x-tab-edge {
 102     float:left;
 103     margin:0 !important;
 104     padding:0 !important;
 105     border:0 none !important;
 106     font-size:1px !important;
 107     line-height:1px !important;
 108     overflow:hidden;
 109     zoom:1;
 110     background:transparent !important;
 111     width:1px;
 112 }
 113
 114 .x-tab-strip a, .x-tab-strip span, .x-tab-strip em {
 115         display:block;
 116 }
 117
 118 .x-tab-strip a {
 119         text-decoration:none !important;
 120         -moz-outline: none;
 121         outline: none;
 122         cursor:pointer;
 123 }
 124
 125 .x-tab-strip-inner {
 126     overflow:hidden;
 127         text-overflow: ellipsis;
 128 }
 129
 130 .x-tab-strip span.x-tab-strip-text {
 131         white-space: nowrap;
 132         cursor:pointer;
 133     padding:4px 0;
 134 }
 135
 136 .x-tab-strip-top .x-tab-with-icon .x-tab-right {
 137     padding-left:6px;
 138 }
 139
 140 .x-tab-strip .x-tab-with-icon span.x-tab-strip-text {
 141         padding-left:20px;
 142     background-position: 0 3px;
 143     background-repeat: no-repeat;
 144 }
 145
 146 .x-tab-strip-active, .x-tab-strip-active a.x-tab-right {
 147     cursor:default;
 148 }
 149
 150 .x-tab-strip-active span.x-tab-strip-text {
 151         cursor:default;
 152 }
 153
 154 .x-tab-strip-disabled .x-tabs-text {
 155         cursor:default;
 156 }
 157
 158 .x-tab-panel-body {
 159     overflow:hidden;
 160 }
 161
 162 .x-tab-panel-bwrap {
 163     overflow:hidden;
 164 }
 165
 166 .ext-ie .x-tab-strip .x-tab-right {
 167     position:relative;
 168 }
 169
 170 .x-tab-strip-top .x-tab-strip-active .x-tab-right {
 171     margin-bottom:-1px;
 172 }
 173
 174 /*
 175  * Horrible hack for IE8 in quirks mode
 176  */
 177 .ext-ie8 .x-tab-strip li {
 178     position: relative;
 179 }
 180 .ext-border-box .ext-ie8 .x-tab-strip-top .x-tab-right {
 181     top: 1px;
 182 }
 183 .ext-ie8 .x-tab-strip-top {
 184     padding-top: 1;
 185 }
 186 .ext-border-box .ext-ie8 .x-tab-strip-top {
 187     padding-top: 0;
 188 }
 189 .ext-ie8 .x-tab-strip .x-tab-strip-closable a.x-tab-strip-close {
 190     top:3px;
 191 }
 192 .ext-border-box .ext-ie8 .x-tab-strip .x-tab-strip-closable a.x-tab-strip-close {
 193     top:4px;
 194 }
 195 .ext-ie8 .x-tab-strip-bottom .x-tab-right{
 196     top:0;
 197 }
 198
 199
 200 .x-tab-strip-top .x-tab-strip-active .x-tab-right span.x-tab-strip-text {
 201     padding-bottom:5px;
 202 }
 203
 204 .x-tab-strip-bottom .x-tab-strip-active .x-tab-right {
 205     margin-top:-1px;
 206 }
 207
 208 .x-tab-strip-bottom .x-tab-strip-active .x-tab-right span.x-tab-strip-text {
 209     padding-top:5px;
 210 }
 211
 212 .x-tab-strip-top .x-tab-right {
 213         background: transparent no-repeat 0 -51px;
 214     padding-left:10px;
 215 }
 216
 217 .x-tab-strip-top .x-tab-left {
 218         background: transparent no-repeat right -351px;
 219     padding-right:10px;
 220 }
 221
 222 .x-tab-strip-top .x-tab-strip-inner {
 223         background: transparent repeat-x 0 -201px;
 224 }
 225
 226 .x-tab-strip-top .x-tab-strip-over .x-tab-right {
 227          background-position:0 -101px;
 228 }
 229
 230 .x-tab-strip-top .x-tab-strip-over .x-tab-left {
 231          background-position:right -401px;
 232 }
 233
 234 .x-tab-strip-top .x-tab-strip-over .x-tab-strip-inner {
 235          background-position:0 -251px;
 236 }
 237
 238 .x-tab-strip-top .x-tab-strip-active .x-tab-right {
 239         background-position: 0 0;
 240 }
 241
 242 .x-tab-strip-top .x-tab-strip-active .x-tab-left {
 243         background-position: right -301px;
 244 }
 245
 246 .x-tab-strip-top .x-tab-strip-active .x-tab-strip-inner {
 247         background-position: 0 -151px;
 248 }
 249
 250 .x-tab-strip-bottom .x-tab-right {
 251         background: no-repeat bottom right;
 252 }
 253
 254 .x-tab-strip-bottom .x-tab-left {
 255         background: no-repeat bottom left;
 256 }
 257
 258 .x-tab-strip-bottom .x-tab-strip-active .x-tab-right {
 259         background: no-repeat bottom right;
 260 }
 261
 262 .x-tab-strip-bottom .x-tab-strip-active .x-tab-left {
 263         background: no-repeat bottom left;
 264 }
 265
 266 .x-tab-strip-bottom .x-tab-left {
 267     margin-right: 3px;
 268     padding:0 10px;
 269 }
 270
 271 .x-tab-strip-bottom .x-tab-right {
 272     padding:0;
 273 }
 274
 275 .x-tab-strip .x-tab-strip-close {
 276     display:none;
 277 }
 278
 279 .x-tab-strip-closable {
 280     position:relative;
 281 }
 282
 283 .x-tab-strip-closable .x-tab-left {
 284     padding-right:19px;
 285 }
 286
 287 .x-tab-strip .x-tab-strip-closable a.x-tab-strip-close {
 288     opacity:.6;
 289     -moz-opacity:.6;
 290     background-repeat:no-repeat;
 291     display:block;
 292         width:11px;
 293     height:11px;
 294     position:absolute;
 295     top:3px;
 296     right:3px;
 297     cursor:pointer;
 298     z-index:2;
 299 }
 300
 301 .x-tab-strip .x-tab-strip-active a.x-tab-strip-close {
 302     opacity:.8;
 303     -moz-opacity:.8;
 304 }
 305 .x-tab-strip .x-tab-strip-closable a.x-tab-strip-close:hover{
 306     opacity:1;
 307     -moz-opacity:1;
 308 }
 309
 310 .x-tab-panel-body {
 311     border: 1px solid;
 312 }
 313
 314 .x-tab-panel-body-top {
 315     border-top: 0 none;
 316 }
 317
 318 .x-tab-panel-body-bottom {
 319     border-bottom: 0 none;
 320 }
 321
 322 .x-tab-scroller-left {
 323     background: transparent no-repeat -18px 0;
 324     border-bottom: 1px solid;
 325     width:18px;
 326     position:absolute;
 327     left:0;
 328     top:0;
 329     z-index:10;
 330     cursor:pointer;
 331 }
 332 .x-tab-scroller-left-over {
 333     background-position: 0 0;
 334 }
 335
 336 .x-tab-scroller-left-disabled {
 337     background-position: -18px 0;
 338     opacity:.5;
 339     -moz-opacity:.5;
 340     filter:alpha(opacity=50);
 341     cursor:default;
 342 }
 343
 344 .x-tab-scroller-right {
 345     background: transparent no-repeat 0 0;
 346     border-bottom: 1px solid;
 347     width:18px;
 348     position:absolute;
 349     right:0;
 350     top:0;
 351     z-index:10;
 352     cursor:pointer;
 353 }
 354
 355 .x-tab-scroller-right-over {
 356     background-position: -18px 0;
 357 }
 358
 359 .x-tab-scroller-right-disabled {
 360     background-position: 0 0;
 361     opacity:.5;
 362     -moz-opacity:.5;
 363     filter:alpha(opacity=50);
 364     cursor:default;
 365 }
 366
 367 .x-tab-scrolling-bottom .x-tab-scroller-left, .x-tab-scrolling-bottom .x-tab-scroller-right{
 368     margin-top: 1px;
 369 }
 370
 371 .x-tab-scrolling .x-tab-strip-wrap {
 372     margin-left:18px;
 373     margin-right:18px;
 374 }
 375
 376 .x-tab-scrolling {
 377     position:relative;
 378 }
 379
 380 .x-tab-panel-bbar .x-toolbar {
 381     border:1px solid;
 382     border-top:0 none;
 383     overflow:hidden;
 384     padding:2px;
 385 }
 386
 387 .x-tab-panel-tbar .x-toolbar {
 388     border:1px solid;
 389     border-top:0 none;
 390     overflow:hidden;
 391     padding:2px;
 392 }