resources/jquery.ui/themes/vector/jquery.ui.button.css

   1 /* Button
   2 ----------------------------------*/
   3
   4 .ui-button {
   5         display: inline-block;
   6         position: relative;
   7         padding: 0;
   8         margin-right: .1em;
   9         text-decoration: none !important;
  10         cursor: pointer;
  11         text-align: center;
  12         zoom: 1;
  13         overflow: visible; /* the overflow property removes extra width in IE */
  14 }
  15 .ui-button-icon-only {
  16         width: 2.2em; /* to make room for the icon, a width needs to be set here */
  17 }
  18 button.ui-button-icon-only {
  19         width: 2.4em; /* button elements seem to need a little more width */
  20 }
  21 .ui-button-icons-only {
  22         width: 3.4em;
  23 }
  24 button.ui-button-icons-only {
  25         width: 3.7em;
  26 }
  27
  28 /*button text element */
  29 .ui-button .ui-button-text {
  30         display: block;
  31         line-height: 1.4;
  32 }
  33 .ui-button-text-only .ui-button-text {
  34         padding: 0.3em 1em 0.25em 1em;
  35 }
  36 .ui-button-icon-only .ui-button-text,
  37 .ui-button-icons-only .ui-button-text {
  38         padding: 0.3em;
  39         text-indent: -9999999px;
  40 }
  41 .ui-button-text-icon-primary .ui-button-text,
  42 .ui-button-text-icons .ui-button-text {
  43         padding: 0.3em 1em 0.25em 2.1em;
  44 }
  45 .ui-button-text-icon-secondary .ui-button-text,
  46 .ui-button-text-icons .ui-button-text {
  47         padding: 0.3em 2.1em 0.25em 1em;
  48 }
  49 .ui-button-text-icons .ui-button-text {
  50         padding-left: 2.1em;
  51         padding-right: 2.1em;
  52 }
  53
  54 /* no icon support for input elements, provide padding by default */
  55 input.ui-button {
  56         padding: 0.3em 1em;
  57 }
  58
  59 /*button icon element(s) */
  60 .ui-button-icon-only .ui-icon,
  61 .ui-button-text-icon-primary .ui-icon,
  62 .ui-button-text-icon-secondary .ui-icon,
  63 .ui-button-text-icons .ui-icon,
  64 .ui-button-text-icon .ui-icon,
  65 .ui-button-icons-only .ui-icon {
  66         position: absolute;
  67         top: 50%;
  68         margin-top: -9px;
  69 }
  70 .ui-button-icon-only .ui-icon {
  71         left: 50%;
  72         margin-left: -8px;
  73 }
  74 .ui-button-text-icon-primary .ui-button-icon-primary,
  75 .ui-button-text-icon .ui-button-icon-primary,
  76 .ui-button-text-icons .ui-button-icon-primary,
  77 .ui-button-icons-only .ui-button-icon-primary {
  78         left: 0.5em;
  79 }
  80 .ui-button-text-icon-secondary .ui-button-icon-secondary,
  81 .ui-button-text-icon .ui-button-icon-secondary,
  82 .ui-button-text-icons .ui-button-icon-secondary,
  83 .ui-button-icons-only .ui-button-icon-secondary {
  84         right: 0.5em;
  85 }
  86
  87 /*button sets*/
  88 .ui-buttonset {
  89         margin-right: 7px;
  90 }
  91 .ui-buttonset .ui-button {
  92         margin-left: 0;
  93         margin-right: -.3em;
  94 }
  95
  96 /* workarounds */
  97 button.ui-button::-moz-focus-inner {
  98         border: 0;
  99         padding: 0; /* reset extra padding in Firefox */
 100 }
 101
 102 body .ui-button {
 103         margin: 0.5em 0 0.5em 0.4em;
 104         border: 1px solid #a6a6a6 !important;
 105         /* @embed */
 106         background: #f2f2f2 url(images/button-off.png) repeat-x scroll 50% 100% !important;
 107         cursor: pointer;
 108         font-size: 1em;
 109         line-height: 1.4em;
 110         width: auto;
 111         overflow: visible;
 112 }
 113
 114 /* Corner radius */
 115 /* This is normally handled in jquery.ui.theme.css, but in our case, the corner
 116    styling of our buttons doesn't match our default widget corner styling */
 117 .ui-button.ui-corner-all,
 118 .ui-button.ui-corner-top,
 119 .ui-button.ui-corner-left,
 120 .ui-button.ui-corner-tl {
 121         -moz-border-radius-topleft: 4px;
 122         -webkit-border-top-left-radius: 4px;
 123         border-top-left-radius: 4px;
 124 }
 125 .ui-button.ui-corner-all,
 126 .ui-button.ui-corner-top,
 127 .ui-button.ui-corner-right,
 128 .ui-button.ui-corner-tr {
 129         -moz-border-radius-topright: 4px;
 130         -webkit-border-top-right-radius: 4px;
 131         border-top-right-radius: 4px;
 132 }
 133 .ui-button.ui-corner-all,
 134 .ui-button.ui-corner-bottom,
 135 .ui-button.ui-corner-left,
 136 .ui-button.ui-corner-bl {
 137         -moz-border-radius-bottomleft: 4px;
 138         -webkit-border-bottom-left-radius: 4px;
 139         border-bottom-left-radius: 4px;
 140 }
 141 .ui-button.ui-corner-all,
 142 .ui-button.ui-corner-bottom,
 143 .ui-button.ui-corner-right,
 144 .ui-button.ui-corner-br {
 145         -moz-border-radius-bottomright: 4px;
 146         -webkit-border-bottom-right-radius: 4px;
 147         border-bottom-right-radius: 4px;
 148 }
 149
 150 body .ui-button:hover {
 151         border-color: #6e7273;
 152         /* @embed */
 153         background: #e1e1e1 url(images/button-over.png) repeat-x scroll 50% 100% !important;
 154 }
 155 body .ui-button:active,
 156 body .ui-button:focus {
 157         border-color: #707271;
 158         /* @embed */
 159         background: #bfbfbf url(images/button-down.png) repeat-x scroll 50% 100% !important;
 160 }
 161 body .ui-button.disabled {
 162         color: #7f7f7f;
 163         border-color: #cccccc;
 164         /* @embed */
 165         background: #f2f2f2 url(images/button-disabled.png) repeat-x scroll 50% 100% !important;
 166 }
 167 /* Disables the annoying dashed border Firefox puts on active buttons */
 168 body button.ui-button::-moz-focus-inner {
 169         border: 0;
 170 }
 171 /* Give large buttons some extra padding */
 172 body .ui-button-large {
 173         padding: 5px;
 174 }
 175 /* Use white icons for colored buttons */
 176 .ui-button-green .ui-icon, .ui-button-blue .ui-icon, .ui-button-red .ui-icon, .ui-button-orange .ui-icon {
 177         /* @embed */
 178         background-image: url(images/ui-icons_ffffff_256x240.png) !important;
 179 }
 180
 181 /* Green buttons */
 182
 183 body .ui-button.ui-button-green {
 184         color: white !important;
 185         border-color: #97af7e !important;
 186         /* @embed */
 187         background: #3cb677 url(images/button-green.png) repeat-x scroll 50% 100% !important;
 188 }
 189 body .ui-button.ui-button-green:hover {
 190         border-color: #778e61 !important;
 191         /* @embed */
 192         background: #339b65 url(images/button-green-hover.png) repeat-x scroll 50% 100% !important;
 193 }
 194 body .ui-button.ui-button-green.ui-button-large {
 195         /* @embed */
 196         background: #3cb677 url(images/button-green-large.png) repeat-x scroll 50% 100% !important;
 197 }
 198 body .ui-button.ui-button-green.ui-button-large:hover {
 199         /* @embed */
 200         background: #339b65 url(images/button-green-hover-large.png) repeat-x scroll 50% 100% !important;
 201 }
 202 body .ui-button.ui-button-green.disabled {
 203         filter:alpha(opacity=50);
 204         -moz-opacity:0.50;
 205         -khtml-opacity: 0.50;
 206         opacity: 0.50;
 207 }
 208
 209 /* Blue buttons */
 210
 211 body .ui-button.ui-button-blue {
 212         color: white !important;
 213         border-color: #628acb !important;
 214         /* @embed */
 215         background: #3365ba url(images/button-blue.png) repeat-x scroll 50% 100% !important;
 216 }
 217 body .ui-button.ui-button-blue:hover {
 218         border-color: #5375ad !important;
 219         /* @embed */
 220         background: #2b569e url(images/button-blue-hover.png) repeat-x scroll 50% 100% !important;
 221 }
 222 body .ui-button.ui-button-blue.ui-button-large {
 223         /* @embed */
 224         background: #3365ba url(images/button-blue-large.png) repeat-x scroll 50% 100% !important;
 225 }
 226 body .ui-button.ui-button-blue.ui-button-large:hover {
 227         /* @embed */
 228         background: #2b569e url(images/button-blue-hover-large.png) repeat-x scroll 50% 100% !important;
 229 }
 230 body .ui-button.ui-button-blue.disabled {
 231         filter:alpha(opacity=50);
 232         -moz-opacity:0.50;
 233         -khtml-opacity: 0.50;
 234         opacity: 0.50;
 235 }
 236
 237 /* Red buttons */
 238
 239 body .ui-button.ui-button-red {
 240         color: white !important;
 241         border-color: #af977e !important;
 242         /* @embed */
 243         background: #cb0000 url(images/button-red.png) repeat-x scroll 50% 100% !important;
 244 }
 245 body .ui-button.ui-button-red:hover {
 246         border-color: #8e7761 !important;
 247         /* @embed */
 248         background: #ad0000 url(images/button-red-hover.png) repeat-x scroll 50% 100% !important;
 249 }
 250 body .ui-button.ui-button-red.ui-button-large {
 251         /* @embed */
 252         background: #cb0000 url(images/button-red.png) repeat-x scroll 50% 100% !important;
 253 }
 254 body .ui-button.ui-button-red.ui-button-large:hover {
 255         /* @embed */
 256         background: #ad0000 url(images/button-red-hover.png) repeat-x scroll 50% 100% !important;
 257 }
 258 body .ui-button.ui-button-red.disabled {
 259         filter:alpha(opacity=50);
 260         -moz-opacity:0.50;
 261         -khtml-opacity: 0.50;
 262         opacity: 0.50;
 263 }
 264
 265 /* Orange buttons */
 266
 267 body .ui-button.ui-button-orange {
 268         color: white !important;
 269         border-color: #f3a863 !important;
 270         /* @embed */
 271         background: #f07f14 url(images/button-orange.png) repeat-x scroll 50% 100% !important;
 272 }
 273 body .ui-button.ui-button-orange:hover {
 274         border-color: #ce9055 !important;
 275         /* @embed */
 276         background: #cc6c11 url(images/button-orange-hover.png) repeat-x scroll 50% 100% !important;
 277 }
 278 body .ui-button.ui-button-orange.ui-button-large {
 279         /* @embed */
 280         background: #f07f14 url(images/button-orange-large.png) repeat-x scroll 50% 100% !important;
 281 }
 282 body .ui-button.ui-button-orange.ui-button-large:hover {
 283         /* @embed */
 284         background: #cc6c11 url(images/button-orange-hover-large.png) repeat-x scroll 50% 100% !important;
 285 }
 286 body .ui-button.ui-button-orange.disabled {
 287         filter:alpha(opacity=50);
 288         -moz-opacity:0.50;
 289         -khtml-opacity: 0.50;
 290         opacity: 0.50;
 291 }