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