resources/css/tabs.css

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