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         text-shadow: 0 1px 1px #fff;
  33 }
  34 .ui-button-text-only .ui-button-text {
  35         padding: 0.3em 1em 0.25em 1em;
  36 }
  37 .ui-button-icon-only .ui-button-text,
  38 .ui-button-icons-only .ui-button-text {
  39         padding: 0.3em;
  40         text-indent: -9999999px;
  41 }
  42 .ui-button-text-icon-primary .ui-button-text,
  43 .ui-button-text-icons .ui-button-text {
  44         padding: 0.3em 1em 0.25em 2.1em;
  45 }
  46 .ui-button-text-icon-secondary .ui-button-text,
  47 .ui-button-text-icons .ui-button-text {
  48         padding: 0.3em 2.1em 0.25em 1em;
  49 }
  50 .ui-button-text-icons .ui-button-text {
  51         padding-left: 2.1em;
  52         padding-right: 2.1em;
  53 }
  54
  55 /* no icon support for input elements, provide padding by default */
  56 input.ui-button {
  57         padding: 0.3em 1em;
  58 }
  59
  60 /*button icon element(s) */
  61 .ui-button-icon-only .ui-icon,
  62 .ui-button-text-icon-primary .ui-icon,
  63 .ui-button-text-icon-secondary .ui-icon,
  64 .ui-button-text-icons .ui-icon,
  65 .ui-button-text-icon .ui-icon,
  66 .ui-button-icons-only .ui-icon {
  67         position: absolute;
  68         top: 50%;
  69         margin-top: -9px;
  70 }
  71 .ui-button-icon-only .ui-icon {
  72         left: 50%;
  73         margin-left: -8px;
  74 }
  75 .ui-button-text-icon-primary .ui-button-icon-primary,
  76 .ui-button-text-icon .ui-button-icon-primary,
  77 .ui-button-text-icons .ui-button-icon-primary,
  78 .ui-button-icons-only .ui-button-icon-primary {
  79         left: 0.5em;
  80 }
  81 .ui-button-text-icon-secondary .ui-button-icon-secondary,
  82 .ui-button-text-icon .ui-button-icon-secondary,
  83 .ui-button-text-icons .ui-button-icon-secondary,
  84 .ui-button-icons-only .ui-button-icon-secondary {
  85         right: 0.5em;
  86 }
  87
  88 /*button sets*/
  89 .ui-buttonset {
  90         margin-right: 7px;
  91 }
  92 .ui-buttonset .ui-button {
  93         margin-left: 0;
  94         margin-right: -.4em;
  95 }
  96
  97 /* workarounds */
  98 button.ui-button::-moz-focus-inner {
  99         border: 0;
 100         padding: 0; /* reset extra padding in Firefox */
 101 }
 102 /* Disables the annoying dashed border Firefox puts on active buttons */
 103 body button.ui-button::-moz-focus-inner {
 104         border: 0;
 105 }
 106 /* Give large buttons some extra padding */
 107 body .ui-button-large {
 108         padding: 5px;
 109 }
 110 /* Use white icons for colored buttons */
 111 .ui-button-green .ui-icon,
 112 .ui-button-blue .ui-icon,
 113 .ui-button-red .ui-icon,
 114 .ui-button-orange .ui-icon {
 115         /* @embed */
 116         background-image: url(images/ui-icons_ffffff_256x240.png) !important;
 117 }
 118
 119 /* Corner radius */
 120 /* This is normally handled in jquery.ui.theme.css, but in our case, the corner
 121    styling of our buttons doesn't match our default widget corner styling */
 122 .ui-button.ui-corner-all,
 123 .ui-button.ui-corner-top,
 124 .ui-button.ui-corner-left,
 125 .ui-button.ui-corner-tl {
 126         -moz-border-radius-topleft: 4px;
 127         -webkit-border-top-left-radius: 4px;
 128         border-top-left-radius: 4px;
 129 }
 130 .ui-button.ui-corner-all,
 131 .ui-button.ui-corner-top,
 132
 133 .ui-button.ui-corner-right,
 134 .ui-button.ui-corner-tr {
 135         -moz-border-radius-topright: 4px;
 136         -webkit-border-top-right-radius: 4px;
 137         border-top-right-radius: 4px;
 138 }
 139 .ui-button.ui-corner-all,
 140 .ui-button.ui-corner-bottom,
 141 .ui-button.ui-corner-left,
 142 .ui-button.ui-corner-bl {
 143         -moz-border-radius-bottomleft: 4px;
 144         -webkit-border-bottom-left-radius: 4px;
 145         border-bottom-left-radius: 4px;
 146 }
 147 .ui-button.ui-corner-all,
 148 .ui-button.ui-corner-bottom,
 149 .ui-button.ui-corner-right,
 150 .ui-button.ui-corner-br {
 151         -moz-border-radius-bottomright: 4px;
 152         -webkit-border-bottom-right-radius: 4px;
 153         border-bottom-right-radius: 4px;
 154 }
 155
 156 body .ui-button {
 157         color: #2779aa;
 158         margin: 0.5em 0 0.5em 0.4em;
 159         border: 1px solid #aaa !important;
 160         background: #f0f0f0 !important;
 161         background: -moz-linear-gradient(top, #fff 0%, #ddd 90%) !important; /* FF3.6+ */
 162         background: -webkit-linear-gradient(top, #fff 0%, #ddd 90%) !important; /* Chrome10+, Safari5.1+ */
 163         background: -o-linear-gradient(top, #fff 0%, #ddd 90%) !important; /* Opera 11.10+ */
 164         background: -ms-linear-gradient(top, #fff 0%, #ddd 90%) !important; /* IE10+ */
 165         background: linear-gradient(to bottom, #fff 0%, #ddd 90%) !important;
 166         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dddddd', GradientType=0); /* IE6-8 */
 167         cursor: pointer;
 168         font-size: 1em;
 169         line-height: 1.4em;
 170         width: auto;
 171         overflow: visible;
 172         -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.2);
 173         -moz-box-shadow: 0 1px 3px rgba(0,0,0,.2);
 174         box-shadow: 0 1px 3px rgba(0,0,0,.2);
 175 }
 176
 177 body .ui-button-icon-only {
 178         width: 2.2em;
 179 }
 180
 181 body .ui-button-icons-only {
 182         width: 3.4em;
 183 }
 184
 185 body .ui-button:hover {
 186         color: #2779aa;
 187         border-color: #bbb !important;
 188         background: #fff !important;
 189         background: -moz-linear-gradient(top, #fff 0%, #eee 90%) !important; /* FF3.6+ */
 190         background: -webkit-linear-gradient(top, #fff 0%, #eee 90%) !important; /* Chrome10+, Safari5.1+ */
 191         background: -o-linear-gradient(top, #fff 0%, #eee 90%) !important; /* Opera 11.10+ */
 192         background: -ms-linear-gradient(top, #fff 0%, #eee 90%) !important; /* IE10+ */
 193         background: linear-gradient(to bottom, #fff 0%, #eee 90%) !important;
 194         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee', GradientType=0); /* IE6-8 */
 195         -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.1);
 196         -moz-box-shadow: 0 1px 3px rgba(0,0,0,.1);
 197         box-shadow: 0 1px 3px rgba(0,0,0,.1);
 198 }
 199 body .ui-button:active,
 200 body .ui-button:focus {
 201         border-color: #8ad !important;
 202         -webkit-box-shadow: 0 0 1px 1px rgba(167,215,249,.5);
 203         -moz-box-shadow: 0 0 1px 1px rgba(167,215,249,.5);
 204         box-shadow: 0 0 1px 1px rgba(167,215,249,.5);
 205 }
 206 body .ui-button:active {
 207         background: #e0e0e0 !important;
 208         background: -moz-linear-gradient(top, #f0f0f0 0%, #d0d0d0 90%) !important; /* FF3.6+ */
 209         background: -webkit-linear-gradient(top, #f0f0f0 0%, #d0d0d0 90%) !important; /* Chrome10+, Safari5.1+ */
 210         background: -o-linear-gradient(top, #f0f0f0 0%, #d0d0d0 90%) !important; /* Opera 11.10+ */
 211         background: -ms-linear-gradient(top, #f0f0f0 0%, #d0d0d0 90%) !important; /* IE10+ */
 212         background: linear-gradient(to bottom, #f0f0f0 0%, #d0d0d0 90%) !important;
 213         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0f0f0', endColorstr='#d0d0d0', GradientType=0); /* IE6-8 */
 214 }
 215
 216 /* Green buttons */
 217 body .ui-button-green,
 218 body .ui-button-green .ui-button-text {
 219         color: white;
 220         text-shadow: 0 -1px 1px #072;
 221 }
 222 body .ui-button.ui-button-green {
 223         border-color: #294 !important;
 224         background: #295 !important;
 225         background: -moz-linear-gradient(top, #3c8 0%, #295 90%) !important; /* FF3.6+ */
 226         background: -webkit-linear-gradient(top, #3c8 0%, #295 90%) !important; /* Chrome10+, Safari5.1+ */
 227         background: -o-linear-gradient(top, #3c8 0%, #295 90%) !important; /* Opera 11.10+ */
 228         background: -ms-linear-gradient(top, #3c8 0%, #295 90%) !important; /* IE10+ */
 229         background: linear-gradient(to bottom, #3c8 0%, #295 90%) !important;
 230         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#33cc88', endColorstr='#229955', GradientType=0); /* IE6-8 */
 231         -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.3);
 232         -moz-box-shadow: 0 1px 3px rgba(0,0,0,.3);
 233         box-shadow: 0 1px 3px rgba(0,0,0,.3);
 234 }
 235 body .ui-button.ui-button-green:hover {
 236         background: #33a055 !important;
 237         background: -moz-linear-gradient(top, #44d388 0%, #33a055 90%) !important; /* FF3.6+ */
 238         background: -webkit-linear-gradient(top, #44d388 0%, #33a055 90%) !important; /* Chrome10+, Safari5.1+ */
 239         background: -o-linear-gradient(top, #44d388 0%, #33a055 90%) !important; /* Opera 11.10+ */
 240         background: -ms-linear-gradient(top, #44d388 0%, #33a055 90%) !important; /* IE10+ */
 241         background: linear-gradient(to bottom, #44d388 0%, #33a055 90%) !important;
 242         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#44d388', endColorstr='#33a055', GradientType=0); /* IE6-8 */
 243         -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.25);
 244         -moz-box-shadow: 0 1px 3px rgba(0,0,0,.25);
 245         box-shadow: 0 1px 3px rgba(0,0,0,.25);
 246 }
 247 body .ui-button.ui-button-green:active,
 248 body .ui-button.ui-button-green:focus {
 249         border-color: #172 !important;
 250         -webkit-box-shadow: 0 0 2px 2px rgba(167,215,249,.75);
 251         -moz-box-shadow: 0 0 2px 2px rgba(167,215,249,.75);
 252         box-shadow: 0 0 2px 2px rgba(167,215,249,.75);
 253 }
 254 body .ui-button.ui-button-green:active {
 255         background: #338855 !important;
 256         background: -moz-linear-gradient(top, #30c080 0%, #338855 90%) !important; /* FF3.6+ */
 257         background: -webkit-linear-gradient(top, #30c080 0%, #338855 90%) !important; /* Chrome10+, Safari5.1+ */
 258         background: -o-linear-gradient(top, #30c080 0%, #338855 90%) !important; /* Opera 11.10+ */
 259         background: -ms-linear-gradient(top, #30c080 0%, #338855 90%) !important; /* IE10+ */
 260         background: linear-gradient(to bottom, #30c080 0%, #338855 90%) !important;
 261         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#30c080', endColorstr='#338855', GradientType=0); /* IE6-8 */
 262 }
 263
 264 /* Blue buttons */
 265 body .ui-button-blue,
 266 body .ui-button-blue .ui-button-text {
 267         color: white;
 268         text-shadow: 0 -1px 1px #037;
 269 }
 270 body .ui-button.ui-button-blue {
 271         border-color: #468 !important;
 272         background: #36b !important;
 273         background: -moz-linear-gradient(top, #48e 0%, #36b 90%) !important; /* FF3.6+ */
 274         background: -webkit-linear-gradient(top, #48e 0%, #36b 90%) !important; /* Chrome10+, Safari5.1+ */
 275         background: -o-linear-gradient(top, #48e 0%, #36b 90%) !important; /* Opera 11.10+ */
 276         background: -ms-linear-gradient(top, #48e 0%, #36b 90%) !important; /* IE10+ */
 277         background: linear-gradient(to bottom, #48e 0%, #36b 90%) !important;
 278         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4488ee', endColorstr='#3366bb', GradientType=0); /* IE6-8 */
 279         -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.35);
 280         -moz-box-shadow: 0 1px 3px rgba(0,0,0,.35);
 281         box-shadow: 0 1px 3px rgba(0,0,0,.35);
 282 }
 283 body .ui-button.ui-button-blue:hover {
 284         background: #36c !important;
 285         background: -moz-linear-gradient(top, #59e 0%, #36c 90%) !important; /* FF3.6+ */
 286         background: -webkit-linear-gradient(top, #59e 0%, #36c 90%) !important; /* Chrome10+, Safari5.1+ */
 287         background: -o-linear-gradient(top, #59e 0%, #36c 90%) !important; /* Opera 11.10+ */
 288         background: -ms-linear-gradient(top, #59e 0%, #36c 90%) !important; /* IE10+ */
 289         background: linear-gradient(to bottom, #59e 0%, #36c 90%) !important;
 290         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5599ee', endColorstr='#3366cc', GradientType=0); /* IE6-8 */
 291 }
 292 body .ui-button.ui-button-blue:active,
 293 body .ui-button.ui-button-blue:focus {
 294         border-color: #357 !important;
 295         -webkit-box-shadow: 0 0 2px 2px rgba(167,215,249,.75);
 296         -moz-box-shadow: 0 0 2px 2px rgba(167,215,249,.75);
 297         box-shadow: 0 0 2px 2px rgba(167,215,249,.75);
 298 }
 299 body .ui-button.ui-button-blue:active {
 300         background: #3060a0 !important;
 301         background: -moz-linear-gradient(top, #4080e0 0%, #3060a0 90%) !important; /* FF3.6+ */
 302         background: -webkit-linear-gradient(top, #4080e0 0%, #3060a0 90%) !important; /* Chrome10+, Safari5.1+ */
 303         background: -o-linear-gradient(top, #4080e0 0%, #3060a0 90%) !important; /* Opera 11.10+ */
 304         background: -ms-linear-gradient(top, #4080e0 0%, #3060a0 90%) !important; /* IE10+ */
 305         background: linear-gradient(to bottom, #4080e0 0%, #3060a0 90%) !important;
 306         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4080e0', endColorstr='#3060a0', GradientType=0); /* IE6-8 */
 307 }
 308
 309 /* Red buttons */
 310 body .ui-button-red,
 311 body .ui-button-red .ui-button-text {
 312         color: white;
 313         text-shadow: 0 -1px 1px #700;
 314 }
 315 body .ui-button.ui-button-red {
 316         border-color: #944 !important;
 317         background: #a22 !important;
 318         background: -moz-linear-gradient(top, #d44 0%, #a22 90%) !important; /* FF3.6+ */
 319         background: -webkit-linear-gradient(top, #d44 0%, #a22 90%) !important; /* Chrome10+, Safari5.1+ */
 320         background: -o-linear-gradient(top, #d44 0%, #a22 90%) !important; /* Opera 11.10+ */
 321         background: -ms-linear-gradient(top, #d44 0%, #a22 90%) !important; /* IE10+ */
 322         background: linear-gradient(to bottom, #d44 0%, #a22 90%) !important;
 323         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dd4444', endColorstr='#aa2222', GradientType=0); /* IE6-8 */
 324         -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.35);
 325         -moz-box-shadow: 0 1px 3px rgba(0,0,0,.35);
 326         box-shadow: 0 1px 3px rgba(0,0,0,.35);
 327 }
 328 body .ui-button.ui-button-red:hover {
 329         border-color: #a44 !important;
 330         background: #b03333 !important;
 331         background: -moz-linear-gradient(top, #ee4646 0%, #b03333 90%) !important; /* FF3.6+ */
 332         background: -webkit-linear-gradient(top, #ee4646 0%, #b03333 90%) !important; /* Chrome10+, Safari5.1+ */
 333         background: -o-linear-gradient(top, #ee4646 0%, #b03333 90%) !important; /* Opera 11.10+ */
 334         background: -ms-linear-gradient(top, #ee4646 0%, #b03333 90%) !important; /* IE10+ */
 335         background: linear-gradient(to bottom, #ee4646 0%, #b03333 90%) !important;
 336         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee4646', endColorstr='#b03333', GradientType=0); /* IE6-8 */
 337         -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.3);
 338         -moz-box-shadow: 0 1px 3px rgba(0,0,0,.3);
 339         box-shadow: 0 1px 3px rgba(0,0,0,.3);
 340 }
 341 body .ui-button.ui-button-red:active,
 342 body .ui-button.ui-button-red:focus {
 343         border-color: #747 !important;
 344         -webkit-box-shadow: 0 0 2px 2px rgba(167,215,249,.7);
 345         -moz-box-shadow: 0 0 2px 2px rgba(167,215,249,.7);
 346         box-shadow: 0 0 2px 2px rgba(167,215,249,.7);
 347 }
 348 body .ui-button.ui-button-red:active {
 349         background: #952020 !important;
 350         background: -moz-linear-gradient(top, #d04545 0%, #952020 90%) !important; /* FF3.6+ */
 351         background: -webkit-linear-gradient(top, #d04545 0%, #952020 90%) !important; /* Chrome10+, Safari5.1+ */
 352         background: -o-linear-gradient(top, #d04545 0%, #952020 90%) !important; /* Opera 11.10+ */
 353         background: -ms-linear-gradient(top, #d04545 0%, #952020 90%) !important; /* IE10+ */
 354         background: linear-gradient(to bottom, #d04545 0%, #952020 90%) !important;
 355         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d04545', endColorstr='#952020', GradientType=0); /* IE6-8 */
 356 }
 357
 358 /* Disabled buttons */
 359 body .ui-button-green.disabled,
 360 body .ui-button-green.disabled:hover,
 361 body .ui-button-green.disabled:active,
 362 body .ui-button-green.disabled:focus,
 363 body .ui-button-blue.disabled,
 364 body .ui-button-blue.disabled:hover,
 365 body .ui-button-blue.disabled:active,
 366 body .ui-button-blue.disabled:focus,
 367 body .ui-button-red.disabled,
 368 body .ui-button-red.disabled:hover,
 369 body .ui-button-red.disabled:active,
 370 body .ui-button-red.disabled:focus,
 371 body .ui-button.disabled,
 372 body .ui-button.disabled:hover {
 373         color: #aaa;
 374         border-color: #ccc !important;
 375         background: #eee !important;
 376         background: -moz-linear-gradient(top, #f6f6f6 0%, #eee 90%) !important; /* FF3.6+ */
 377         background: -webkit-linear-gradient(top, #f6f6f6 0%, #eee 90%) !important; /* Chrome10+, Safari5.1+ */
 378         background: -o-linear-gradient(top, #f6f6f6 0%, #eee 90%) !important; /* Opera 11.10+ */
 379         background: -ms-linear-gradient(top, #f6f6f6 0%, #eee 90%) !important; /* IE10+ */
 380         background: linear-gradient(to bottom, #f6f6f6 0%, #eee 90%) !important;
 381         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#eeeeee', GradientType=0); /* IE6-8 */
 382         -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0);
 383         -moz-box-shadow: 0 1px 3px rgba(0,0,0,0);
 384         box-shadow: 0 1px 3px rgba(0,0,0,0);
 385 }
 386 body .ui-button-green.disabled .ui-button-text,
 387 body .ui-button-blue.disabled .ui-button-text,
 388 body .ui-button-red.disabled .ui-button-text {
 389         color: #aaa;
 390         text-shadow: 0 1px 1px #fff;
 391 }