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