resources/css/structure/tabs.css

   1 /*!
   2  * Ext JS Library 3.1.1
   3  * Copyright(c) 2006-2010 Ext JS, LLC
   4  * licensing@extjs.com
   5  * http://www.extjs.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 ul.x-tab-strip li {
 178     position: relative;
 179 }
 180 .ext-ie8 .x-tab-strip .x-tab-right{
 181     margin-bottom: 0 !important;
 182     top: 1px;
 183 }
 184 .ext-ie8 ul.x-tab-strip-top {
 185     padding-top: 0;
 186 }
 187 .ext-ie8 .x-tab-strip .x-tab-strip-closable a.x-tab-strip-close {
 188     top:4px;
 189 }
 190
 191
 192 .x-tab-strip-top .x-tab-strip-active .x-tab-right span.x-tab-strip-text {
 193     padding-bottom:5px;
 194 }
 195
 196 .x-tab-strip-bottom .x-tab-strip-active .x-tab-right {
 197     margin-top:-1px;
 198 }
 199
 200 .x-tab-strip-bottom .x-tab-strip-active .x-tab-right span.x-tab-strip-text {
 201     padding-top:5px;
 202 }
 203
 204 .x-tab-strip-top .x-tab-right {
 205         background: transparent no-repeat 0 -51px;
 206     padding-left:10px;
 207 }
 208
 209 .x-tab-strip-top .x-tab-left {
 210         background: transparent no-repeat right -351px;
 211     padding-right:10px;
 212 }
 213
 214 .x-tab-strip-top .x-tab-strip-inner {
 215         background: transparent repeat-x 0 -201px;
 216 }
 217
 218 .x-tab-strip-top .x-tab-strip-over .x-tab-right {
 219          background-position:0 -101px;
 220 }
 221
 222 .x-tab-strip-top .x-tab-strip-over .x-tab-left {
 223          background-position:right -401px;
 224 }
 225
 226 .x-tab-strip-top .x-tab-strip-over .x-tab-strip-inner {
 227          background-position:0 -251px;
 228 }
 229
 230 .x-tab-strip-top .x-tab-strip-active .x-tab-right {
 231         background-position: 0 0;
 232 }
 233
 234 .x-tab-strip-top .x-tab-strip-active .x-tab-left {
 235         background-position: right -301px;
 236 }
 237
 238 .x-tab-strip-top .x-tab-strip-active .x-tab-strip-inner {
 239         background-position: 0 -151px;
 240 }
 241
 242 .x-tab-strip-bottom .x-tab-right {
 243         background: no-repeat bottom right;
 244 }
 245
 246 .x-tab-strip-bottom .x-tab-left {
 247         background: no-repeat bottom left;
 248 }
 249
 250 .x-tab-strip-bottom .x-tab-strip-active .x-tab-right {
 251         background: no-repeat bottom right;
 252 }
 253
 254 .x-tab-strip-bottom .x-tab-strip-active .x-tab-left {
 255         background: no-repeat bottom left;
 256 }
 257
 258 .x-tab-strip-bottom .x-tab-left {
 259     margin-right: 3px;
 260     padding:0 10px;
 261 }
 262
 263 .x-tab-strip-bottom .x-tab-right {
 264     padding:0;
 265 }
 266
 267 .x-tab-strip .x-tab-strip-close {
 268     display:none;
 269 }
 270
 271 .x-tab-strip-closable {
 272     position:relative;
 273 }
 274
 275 .x-tab-strip-closable .x-tab-left {
 276     padding-right:19px;
 277 }
 278
 279 .x-tab-strip .x-tab-strip-closable a.x-tab-strip-close {
 280     opacity:.6;
 281     -moz-opacity:.6;
 282     background-repeat:no-repeat;
 283     display:block;
 284         width:11px;
 285     height:11px;
 286     position:absolute;
 287     top:3px;
 288     right:3px;
 289     cursor:pointer;
 290     z-index:2;
 291 }
 292
 293 .x-tab-strip .x-tab-strip-active a.x-tab-strip-close {
 294     opacity:.8;
 295     -moz-opacity:.8;
 296 }
 297 .x-tab-strip .x-tab-strip-closable a.x-tab-strip-close:hover{
 298     opacity:1;
 299     -moz-opacity:1;
 300 }
 301
 302 .x-tab-panel-body {
 303     border: 1px solid;
 304 }
 305
 306 .x-tab-panel-body-top {
 307     border-top: 0 none;
 308 }
 309
 310 .x-tab-panel-body-bottom {
 311     border-bottom: 0 none;
 312 }
 313
 314 .x-tab-scroller-left {
 315     background: transparent no-repeat -18px 0;
 316     border-bottom: 1px solid;
 317     width:18px;
 318     position:absolute;
 319     left:0;
 320     top:0;
 321     z-index:10;
 322     cursor:pointer;
 323 }
 324 .x-tab-scroller-left-over {
 325     background-position: 0 0;
 326 }
 327
 328 .x-tab-scroller-left-disabled {
 329     background-position: -18px 0;
 330     opacity:.5;
 331     -moz-opacity:.5;
 332     filter:alpha(opacity=50);
 333     cursor:default;
 334 }
 335
 336 .x-tab-scroller-right {
 337     background: transparent no-repeat 0 0;
 338     border-bottom: 1px solid;
 339     width:18px;
 340     position:absolute;
 341     right:0;
 342     top:0;
 343     z-index:10;
 344     cursor:pointer;
 345 }
 346
 347 .x-tab-scroller-right-over {
 348     background-position: -18px 0;
 349 }
 350
 351 .x-tab-scroller-right-disabled {
 352     background-position: 0 0;
 353     opacity:.5;
 354     -moz-opacity:.5;
 355     filter:alpha(opacity=50);
 356     cursor:default;
 357 }
 358
 359 .x-tab-scrolling-bottom .x-tab-scroller-left, .x-tab-scrolling-bottom .x-tab-scroller-right{
 360     margin-top: 1px;
 361 }
 362
 363 .x-tab-scrolling .x-tab-strip-wrap {
 364     margin-left:18px;
 365     margin-right:18px;
 366 }
 367
 368 .x-tab-scrolling {
 369     position:relative;
 370 }
 371
 372 .x-tab-panel-bbar .x-toolbar {
 373     border:1px solid;
 374     border-top:0 none;
 375     overflow:hidden;
 376     padding:2px;
 377 }
 378
 379 .x-tab-panel-tbar .x-toolbar {
 380     border:1px solid;
 381     border-top:0 none;
 382     overflow:hidden;
 383     padding:2px;
 384 }