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

   1 /* ------- MAIN TOOLBAR ---------------- */
   2
   3 .x-toolbar {
   4         background: url(../images/default/toolbar/gray-bg.gif) repeat-x 0 0;
   5         border-top: 1px solid #cbc7b8;
   6         border-bottom: 1px solid #cbc7b8;
   7         display: block;
   8         position: relative;
   9         padding: 1px;
  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
 140 .roo-gecko .x-toolbar .x-form-text {
 141     height:16px;
 142 }
 143
 144
 145 /* ------------ MENUS -----------------------*/
 146
 147 .x-menu
 148 {
 149     background: white url(../images/default/menu/menu-bg.gif) repeat-y 0 0;
 150     font:normal 11px arial, tahoma, verdana, helvetica;
 151     border: 1px solid black;
 152     margin-top: 2px;
 153     margin-left: 2px;
 154     max-height: 95%;
 155     overflow-y: auto;
 156 }
 157
 158 .x-menu-plain
 159 {
 160     background: none;
 161 }
 162 .x-menu-plain .x-menu-list-item .x-color-palette,
 163 .x-menu-plain .x-menu-list-item .x-date-picker
 164 {
 165     margin-left: 4px;
 166     margin-right: 0;
 167 }
 168 .x-menu-focus
 169 {
 170     position: absolute;
 171     left: 0;
 172     top: -5px;
 173     width: 0;
 174     height: 0;
 175 }
 176 .x-menu-list
 177 {
 178     border: 1px solid white;
 179 }
 180 .x-menu li
 181 {
 182     line-height: 100%;
 183 }
 184
 185 .x-menu-list-item
 186 {
 187     -moz-user-select: none;
 188     display: block;
 189     /* padding: 1px; */
 190     white-space: nowrap;
 191 }
 192
 193
 194 .x-menu-item
 195 {
 196     /*pointer: cursor; */
 197     color: #333;
 198     display: block;
 199     line-height: 15px;
 200     outline: none;
 201     padding: 3px 21px 3px 3px;
 202     text-decoration:none ;
 203     white-space: nowrap;
 204 }
 205 .x-menu-item-active
 206 {
 207     background-color: #ABC9C2;
 208 }
 209
 210
 211 .x-menu li.x-menu-sep-li
 212 {
 213
 214     font-size: 1px;
 215     line-height: 1px;
 216     background: #ccc;
 217     display: block;
 218     height: 1px;
 219     margin: 3px 3px 3px 32px;
 220 }
 221 .x-menu-item-icon
 222 {
 223     background-position: center center;
 224     border: 0px;
 225     width: 16px;
 226     height: 16px;
 227     padding: 0px;
 228     margin: 0 11px 0 0;
 229     vertical-align: middle;
 230
 231 }
 232
 233
 234 .x-menu-list-item .x-menu-item-arrow
 235 {
 236     background: url(../images/default/grid/page-next.gif) no-repeat right 2px;
 237 }
 238
 239
 240
 241
 242
 243 /* ------------ CHECKBOX ITEM-----------------------*/
 244
 245
 246 /* ------------ DISABLED ITEMS -----------------------*/
 247 .x-item-disabled .x-menu-item ,
 248 .x-item-disabled
 249 {
 250     color : #ccc;
 251     cursor: default !important;
 252
 253 }
 254
 255
 256
 257
 258
 259
 260
 261 /* ------------ OLD STUFF!!! -----------------------*/
 262 .x-menu-check-item .x-menu-item-icon
 263 {
 264     background: url(../images/default/menu/chk-sprite.gif) no-repeat 0 0;
 265     width: 16px;
 266     height: 16px;
 267 }
 268 .x-menu-item-checked .x-menu-item-icon
 269 {
 270     background-position: 0 -16px;
 271     width: 16px;
 272     height: 16px;
 273 }
 274
 275
 276
 277
 278 /* NOT SURE WHAT THIS DOES ? - MS HACK? */
 279
 280 /*
 281 .mso .x-toolbar, .x-grid-mso .x-toolbar
 282 {
 283         border: 0px none;
 284         background: url(../images/default/grid/mso-hd.gif);
 285 }
 286 */
 287
 288
 289 /* disabled?? */
 290 .x-toolbar .x-tb-button-disabled .x-tb-button-inner
 291 {
 292         color:gray;
 293         cursor:default;
 294 }
 295
 296
 297 /* a seperator */
 298
 299
 300
 301
 302
 303
 304
 305 .x-toolbar .ytb-sep {
 306     background-image:url(../images/default/grid/grid-split.gif);
 307     background-position:center center;
 308     background-repeat:no-repeat;
 309     border:0pt none;
 310     cursor:default;
 311     display:block;
 312     font-size:1px;
 313     height:16px;
 314     margin:0pt 2px;
 315     overflow:hidden;
 316     width:4px;
 317 }
 318
 319
 320
 321
 322
 323 /*
 324  Default button class is icon only. Add a class with a background-image property
 325  to your toolbar button
 326 */
 327 /*
 328 .x-toolbar .x-tb-button-inner
 329 {
 330         background-position: center;
 331         background-repeat: no-repeat;
 332         display: block;
 333         height: 16px;
 334         width: 16px;
 335         cursor:pointer;
 336         white-space: nowrap;
 337 }
 338 */
 339
 340 /*
 341  Button class for icon and text. Add this class and a class with a background-image
 342  to your toolbar button for both text and icon
 343 */
 344
 345 /*
 346 .x-toolbar .x-tb-text-icon
 347 {
 348         background-position: 0px 0px;
 349         background-repeat: no-repeat;
 350         padding-left:18px;
 351         padding-top:1px;
 352         width:auto;
 353         display:block;
 354 }
 355 */
 356
 357 /*
 358  Button class for a button with only text. Add this class
 359  to your toolbar button for a just text button
 360 */
 361 /*
 362 .x-toolbar .x-tb-text-only{
 363         background:none;
 364         padding-left:0px;
 365         padding-top:1px;
 366         width:auto;
 367         display:block;
 368 }
 369 .x-toolbar .x-tb-text{
 370    padding:2px;
 371 }
 372 .x-toolbar .x-tb-button{
 373    padding:2px 3px;
 374         display:block;
 375 }
 376 .x-toolbar .x-tb-button-over{
 377    background:#c3d3ed url(../images/default/toolbar/btn-over-bg.gif) repeat-x;
 378         border:1px solid #6593cf;
 379         padding:1px 2px;
 380 }
 381 .x-toolbar .x-tb-sep {
 382         background-image: url(../images/default/grid/grid-split.gif);
 383         background-position: center;
 384         background-repeat: no-repeat;
 385         display: block;
 386         font-size: 1px;
 387         height: 16px;
 388         width:4px;
 389         overflow: hidden;
 390         cursor:default;
 391         margin: 0px 2px 0px;
 392         border:0px;
 393 }
 394 .mso .x-toolbar .x-tb-sep, .x-grid-mso .x-toolbar .x-tb-sep{
 395         background-image: url(../images/default/grid/grid-blue-split.gif);
 396 }
 397
 398 */
 399
 400
 401 /** ---- Toolbar ontop of tab bar ---------- **/
 402 .x-tabs-strip-wrap .x-toolbar {
 403     background: none !important;
 404 }
 405 .x-tab-strip-toolbar {
 406     width: 100%;
 407 }