resources/css/structure/tabs.css

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