git.roojs.org Git - roojs1/blob - css/toolbar.css

   1 /* ------- MAIN TOOLBAR ---------------- */
   2
   3 .x-toolbar {\r
   4         background: url(../images/default/toolbar/gray-bg.gif) repeat-x 0 0;\r
   5         border-top: 1px solid #cbc7b8;
   6     border-bottom: 1px solid #cbc7b8;\r
   7         display: block;
   8     position: relative;\r
   9         padding: 1px;\r
  10 }
  11 /*
  12 .x-toolbar .x-btn
  13 {
  14     margin-left: 2px;
  15     margin-right: 2px;
  16 }
  17 */
  18 /* ------------ FONTS / colors.-----------------------*/
  19 .x-toolbar td,
  20 .x-toolbar span,
  21 .x-toolbar input,
  22 .x-toolbar div,
  23 .x-toolbar select,
  24 .x-toolbar label
  25 {
  26
  27     font: normal 11px tahoma, verdana, helvetica;
  28     white-space: nowrap;
  29     line-height: normal;
  30
  31 }
  32
  33
  34 /* ------------ VERTICAL ALIGNMENT -----------------------*/
  35 .x-toolbar td
  36 {
  37     vertical-align: middle;
  38 }
  39
  40 /* ------------ TOOLBAR BUTTONS -----------------------*/
  41
  42 .x-toolbar .x-btn-left,
  43 .x-toolbar .x-btn-right,
  44 .x-toolbar .x-btn-center
  45 {
  46
  47  /*   background: none; */
  48
  49 }
  50 .x-toolbar .x-btn-center
  51 {
  52     padding: 0px;
  53 }
  54
  55 /*  ------------ TOOLBAR BUTTONS  (WITH MENU) --------- */
  56 .x-toolbar .x-btn-with-menu .x-btn-center em
  57 {
  58     padding-right: 14px;
  59 }
  60
  61
  62
  63 /* ------------ TOOLBAR ITEMS -----------------------*/
  64
  65 .x-toolbar .ytb-text
  66 {
  67     padding: 2px;
  68 }
  69
  70 /* ------------ TOOLBAR OVER / CLICK / CENTER-----------------------*/
  71
  72 .x-toolbar .x-btn-click .x-btn-center,
  73 .x-toolbar .x-btn-pressed .x-btn-center,
  74 .x-toolbar .x-btn-active .x-btn-center,
  75 .x-toolbar .x-btn-over .x-btn-center,
  76
  77 .x-toolbar .x-btn-click .x-btn-left,
  78 .x-toolbar .x-btn-pressed .x-btn-left,
  79 .x-toolbar .x-btn-active .x-btn-left,
  80 .x-toolbar .x-btn-over .x-btn-left,
  81
  82 .x-toolbar .x-btn-click .x-btn-right,
  83 .x-toolbar .x-btn-pressed .x-btn-right,
  84 .x-toolbar .x-btn-active .x-btn-right,
  85 .x-toolbar .x-btn-over .x-btn-right
  86 {
  87     background-repeat: no-repeat;
  88     background-image: url(../images/default/basic-dialog/btn-sprite.gif);
  89
  90 }
  91
  92 .x-toolbar .x-btn-click .x-btn-center,
  93 .x-toolbar .x-btn-pressed .x-btn-center,
  94 .x-toolbar .x-btn-active .x-btn-center
  95 {
  96     background-position:0  -42px;
  97     background-repeat: repeat-x;
  98 }
  99
 100 .x-toolbar .x-btn-over .x-btn-center
 101 {
 102     background-position:  0 -105px;
 103     background-repeat: repeat-x;
 104 }
 105
 106 .x-toolbar .x-btn-click .x-btn-left,
 107 .x-toolbar .x-btn-pressed .x-btn-left,
 108 .x-toolbar .x-btn-active .x-btn-left
 109 {
 110     background-position:0  0;
 111
 112 }
 113
 114 .x-toolbar .x-btn-over .x-btn-left
 115 {
 116     background-position:  0 -63px;
 117
 118 }
 119
 120 .x-toolbar .x-btn-click .x-btn-right,
 121 .x-toolbar .x-btn-pressed .x-btn-right,
 122 .x-toolbar .x-btn-active .x-btn-right
 123 {
 124     background-position:0  -21px;
 125
 126 }
 127
 128 .x-toolbar .x-btn-over .x-btn-right
 129 {
 130     background-position:  0 -84px;
 131
 132 }
 133
 134 /* ------------ COMBOS/ FIELDS-----------------------*/
 135 .x-toolbar .x-form-text
 136 {
 137     height:14px;
 138 }
 139 .roo-gecko x-toolbar .x-form-text {
 140     height:16px;
 141 }
 142
 143
 144 /* ------------ MENUS -----------------------*/
 145
 146 .x-menu
 147 {
 148     background: white url(../images/default/menu/menu-bg.gif) repeat-y 0 0;
 149     font:normal 11px arial, tahoma, verdana, helvetica;
 150     border: 1px solid black;
 151     margin-top: 2px;
 152     margin-left: 2px;
 153 }
 154
 155 .x-menu-plain
 156 {
 157     background: none;
 158 }
 159 .x-menu-plain .x-menu-list-item .x-color-palette,
 160 .x-menu-plain .x-menu-list-item .x-date-picker
 161 {
 162     margin-left: 4px;
 163     margin-right: 0;
 164 }
 165 .x-menu-focus
 166 {
 167     position: absolute;
 168     left: 0;
 169     top: -5px;
 170     width: 0;
 171     height: 0;
 172 }
 173 .x-menu-list
 174 {
 175     border: 1px solid white;
 176 }
 177 .x-menu li
 178 {
 179     line-height: 100%;
 180 }
 181
 182 .x-menu-list-item
 183 {
 184     -moz-user-select: none;
 185     display: block;
 186     /* padding: 1px; */
 187     white-space: nowrap;
 188 }
 189
 190
 191 .x-menu-item
 192 {
 193     pointer: cursor;
 194     color: #333;
 195     display: block;
 196     line-height: 15px;
 197     outline: none;
 198     padding: 3px 21px 3px 3px;
 199     text-decoration:none ;
 200     white-space: nowrap;
 201 }
 202 .x-menu-item-active
 203 {
 204     background-color: #ABC9C2;
 205 }
 206
 207
 208 .x-menu li.x-menu-sep-li
 209 {
 210
 211     font-size: 1px;
 212     line-height: 1px;
 213     background: #ccc;
 214     display: block
 215     height: 1px;
 216     margin: 3px 3px 3px 32px;
 217 }
 218 .x-menu-item-icon
 219 {
 220     background-position: center center;
 221     border: 0px;
 222     width: 16px;
 223     height: 16px;
 224     padding: 0px;
 225     margin: 0 11px 0 0;
 226     vertical-align: middle;
 227
 228 }
 229
 230
 231 .x-menu-list-item .x-menu-item-arrow
 232 {
 233     background: url(../images/default/grid/page-next.gif) no-repeat right 2px;
 234 }
 235
 236
 237
 238
 239
 240 /* ------------ CHECKBOX ITEM-----------------------*/
 241
 242
 243 /* ------------ DISABLED ITEMS -----------------------*/
 244 .x-item-disabled .x-menu-item ,
 245 .x-item-disabled
 246 {
 247     color : #ccc;
 248     cursor: default !important;
 249
 250 }
 251
 252
 253
 254
 255
 256
 257
 258 /* ------------ OLD STUFF!!! -----------------------*/
 259 .x-menu-check-item .x-menu-item-icon
 260 {
 261     background: url(../images/default/menu/chk-sprite.gif) no-repeat 0 0;
 262     width: 16px;
 263     height: 16px;
 264 }
 265 .x-menu-item-checked .x-menu-check-item  .x-menu-item-icon
 266 {
 267     background-position: 0 -16px;
 268     width: 16px;
 269     height: 16px;
 270 }
 271
 272
 273
 274
 275 /* NOT SURE WHAT THIS DOES ? - MS HACK? */
 276 \r
 277 \r
 278 .mso .x-toolbar, .x-grid-mso .x-toolbar
 279 {\r
 280         border: 0px none;\r
 281         background: url(../images/default/grid/mso-hd.gif);\r
 282 }\r
 283 */
 284
 285
 286 /* disabled?? */\r
 287 .x-toolbar .x-tb-button-disabled .x-tb-button-inner
 288 {\r
 289         color:gray;\r
 290         cursor:default;\r
 291 }\r
 292
 293
 294 /* a seperator */
 295
 296
 297
 298
 299
 300
 301
 302 .x-toolbar .ytb-sep {
 303     background-image:url(../images/default/grid/grid-split.gif);
 304     background-position:center center;
 305     background-repeat:no-repeat;
 306     border:0pt none;
 307     cursor:default;
 308     display:block;
 309     font-size:1px;
 310     height:16px;
 311     margin:0pt 2px;
 312     overflow:hidden;
 313     width:4px;
 314 }
 315
 316
 317
 318
 319 \r
 320 /*\r
 321  Default button class is icon only. Add a class with a background-image property\r
 322  to your toolbar button\r
 323 */
 324 /*\r
 325 .x-toolbar .x-tb-button-inner
 326 {\r
 327         background-position: center;\r
 328         background-repeat: no-repeat;\r
 329         display: block;\r
 330         height: 16px;\r
 331         width: 16px;\r
 332         cursor:pointer;\r
 333         white-space: nowrap;\r
 334 }
 335 */\r
 336 \r
 337 /* \r
 338  Button class for icon and text. Add this class and a class with a background-image \r
 339  to your toolbar button for both text and icon \r
 340 */
 341 /*
 342 /*\r
 343 .x-toolbar .x-tb-text-icon
 344 {\r
 345         background-position: 0px 0px;\r
 346         background-repeat: no-repeat;\r
 347         padding-left:18px;\r
 348         padding-top:1px;\r
 349         width:auto;\r
 350         display:block;\r
 351 }
 352 */\r
 353 */\r
 354 /* \r
 355  Button class for a button with only text. Add this class  \r
 356  to your toolbar button for a just text button\r
 357 */
 358 /*\r
 359 .x-toolbar .x-tb-text-only{\r
 360         background:none;\r
 361         padding-left:0px;\r
 362         padding-top:1px;\r
 363         width:auto;\r
 364         display:block;\r
 365 }\r
 366 .x-toolbar .x-tb-text{\r
 367    padding:2px;\r
 368 }\r
 369 .x-toolbar .x-tb-button{\r
 370    padding:2px 3px;\r
 371         display:block;\r
 372 }\r
 373 .x-toolbar .x-tb-button-over{\r
 374    background:#c3d3ed url(../images/default/toolbar/btn-over-bg.gif) repeat-x;\r
 375         border:1px solid #6593cf;\r
 376         padding:1px 2px;\r
 377 }\r
 378 .x-toolbar .x-tb-sep {\r
 379         background-image: url(../images/default/grid/grid-split.gif);\r
 380         background-position: center;\r
 381         background-repeat: no-repeat;\r
 382         display: block;\r
 383         font-size: 1px;\r
 384         height: 16px;\r
 385         width:4px;\r
 386         overflow: hidden;\r
 387         cursor:default;\r
 388         margin: 0px 2px 0px;\r
 389         border:0px;\r
 390 }\r
 391 .mso .x-toolbar .x-tb-sep, .x-grid-mso .x-toolbar .x-tb-sep{\r
 392         background-image: url(../images/default/grid/grid-blue-split.gif);\r
 393 }\r
 394 \r
 395 */