resources/css/structure/tabs.css

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