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

   1
   2
   3 /* ------------ BUTTON FONTS ------------------ */
   4
   5 .x-btn
   6 {
   7         font: normal 8pt tahoma,verdan,arial,helvetica;
   8         white-space: nowrap;
   9     text-decoration:none !important;
  10     color:black !important;
  11     -moz-user-select: none;
  12         -khtml-user-select: none;
  13     cursor:pointer;
  14     /** no sure **/
  15     vertical-align: middle;
  16     text-align:center;
  17     border: 0px none;
  18 }
  19 /* override em (which is what the <button> is wrapped in) */
  20 .x-btn em
  21 {
  22     font-weight: normal;
  23     font-style: normal;
  24 }
  25
  26 /* -------- BUTTON LEFT RIGHT MAKE SMALL */
  27 .x-toolbar .x-btn-left,
  28 .x-toolbar .x-btn-right,
  29
  30 .x-btn-left,
  31 .x-btn-right
  32 {
  33         font-size:1px;
  34         line-height:1px;
  35     width: 3px;
  36 }
  37
  38
  39 .x-btn-left i
  40 .x-btn-right i
  41 {
  42     display: block;
  43     overflow: hidden;
  44     width: 3px;
  45     line-height: 1px;
  46     font-size: 1px;
  47     /*
  48     padding: 0px;
  49     margin: 0px;
  50     */
  51
  52 }
  53
  54 /* -------- BUTTON BACKGROUND IMAGE -------------- */
  55 .x-btn-left,
  56 .x-btn-center,
  57 .x-btn-right
  58
  59 {
  60     background-image :url(../images/default/basic-dialog/btn-sprite.gif);
  61     background-repeat: no-repeat;
  62     /* might have height, and padding / margin zero'd */
  63     height:21px;
  64     vertical-align: middle;
  65
  66
  67 }
  68 .x-btn-primary.x-btn-over .x-btn-left,
  69 .x-btn-left
  70 {
  71     background-position:0 0;
  72 }
  73 .x-btn-primary.x-btn-over .x-btn-right,
  74 .x-btn-right
  75 {
  76         background-position:0 -21px;
  77 }
  78 .x-btn-primary.x-btn-over .x-btn-center,
  79 .x-btn-center
  80 {
  81         background-position: 0 -42px;
  82     background-repeat: repeat-x;
  83     width:auto;
  84     /* ??? not sure **/
  85     padding:0 5px;
  86
  87 }
  88
  89 .x-btn-clear .x-btn-center .x-btn-text  {
  90         width:16px;
  91         height:16px;
  92         background:url(../images/default/basic-dialog/btn-clear.gif) no-repeat 0 0;
  93 }
  94 /** - button with icon only **/
  95 .x-btn-icon .x-btn-text {
  96     width: 16px;
  97 }
  98
  99
 100 /* -------------------------- BUTTON OVER -------------------------- */
 101 .x-btn-primary .x-btn-left,
 102 .x-btn-over .x-btn-left
 103 {
 104         background-position:0 -63px;
 105 }
 106 .x-btn-primary .x-btn-right,
 107 .x-btn-over .x-btn-right
 108 {
 109         background-position:0 -84px;
 110 }
 111 .x-btn-primary .x-btn-center,
 112 .x-btn-over .x-btn-center
 113 {
 114         background-position:0 -105px;
 115 }
 116
 117
 118
 119 /* -------------------------- BUTTON CLICK -------------------------- */
 120 .x-btn-click .x-btn-left
 121 {
 122         background-position:0 -63px; /* FIXME */
 123 }
 124 .x-btn-click .x-btn-right
 125 {
 126         background-position:0 -84px; /* FIXME */
 127 }
 128 .x-btn-click .x-btn-center
 129 {
 130         background-position:0 -126px;
 131 }
 132
 133 /* -------------------------- BUTTON FOCUS -------------------------- */
 134 /* ??? any special settings ?? */
 135
 136 /* -------------------------- BUTTON DISABLED -------------------------- */
 137 .x-btn .x-btn-disabled
 138 {
 139         cursor:default;
 140 }
 141 .x-btn-disabled .x-btn-center
 142 {
 143         color:gray;
 144 }
 145 /* -------------------------- BUTTON ELEMENT -------------------------- */
 146 .x-btn button {
 147     font-size: 11px;
 148     background: none no-repeat scroll 0 0 transparent;
 149     cursor:pointer;
 150     margin: 0px;
 151     outline: none;
 152     color: -moz-use-text-color;
 153     overflow: visible;
 154     width: auto;
 155     border: 0px none;
 156 }
 157 .x-btn-left i,
 158 .x-btn-right i
 159 {
 160     display: block;
 161     width: 3px;
 162 }
 163
 164 .roo-gecko .x-btn button
 165 {
 166     padding-left: 0px;
 167     padding-right: 0px;
 168 }
 169 /* -------------------------- BUTTON WITH ICONS  -------------------------- */
 170 .x-btn-text-icon .x-btn-center .x-btn-text
 171 {
 172    background-position:0 2px;
 173    background:none no-repeat scroll 0 0 transparent;
 174     /* padding : 3px 0 2px 18px; */
 175     padding: 1px 0px 1px 18px;
 176
 177 }
 178
 179
 180 /* -------------------------- BUTTON WITH MENUS  -------------------------- */
 181 button.x-btn-menu-arrow-el
 182 {
 183     display: block;
 184     background: url(../images/default/grid/sort_desc.gif) no-repeat scroll left 7px;
 185 }
 186
 187
 188 .x-btn-text-icon .x-btn-with-menu .x-btn-center em
 189 {
 190     display: block;
 191     background: url(../images/default/grid/sort_desc.gif) no-repeat scroll right 6px;
 192 }
 193
 194 .x-btn-with-menu .x-btn-center em
 195 {
 196     display: block;
 197     /* ??? background: url(../images/default/grid/sort_desc.gif) no-repeat scroll right 3px */
 198     padding-right: 14px;
 199
 200 }
 201 .x-btn-pressed .x-btn-center .x-btn-text
 202 {
 203     /* padding : 3px 0 2px 18px; */
 204     padding : 0 0 2px 0px;
 205 }
 206
 207