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 body .ui-button:hover {
 177         color: #2779aa;
 178         border-color: #bbb !important;
 179         background: #fff !important;
 180         background: -moz-linear-gradient(top, #fff 0%, #eee 90%) !important; /* FF3.6+ */
 181         background: -webkit-linear-gradient(top, #fff 0%, #eee 90%) !important; /* Chrome10+, Safari5.1+ */
 182         background: -o-linear-gradient(top, #fff 0%, #eee 90%) !important; /* Opera 11.10+ */
 183         background: -ms-linear-gradient(top, #fff 0%, #eee 90%) !important; /* IE10+ */
 184         background: linear-gradient(to bottom, #fff 0%, #eee 90%) !important;
 185         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee', GradientType=0); /* IE6-8 */
 186         -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.1);
 187         -moz-box-shadow: 0 1px 3px rgba(0,0,0,.1);
 188         box-shadow: 0 1px 3px rgba(0,0,0,.1);
 189 }
 190 body .ui-button:active,
 191 body .ui-button:focus {
 192         border-color: #8ad !important;
 193         -webkit-box-shadow: 0 0 1px 1px rgba(167,215,249,.5);
 194         -moz-box-shadow: 0 0 1px 1px rgba(167,215,249,.5);
 195         box-shadow: 0 0 1px 1px rgba(167,215,249,.5);
 196 }
 197 body .ui-button:active {
 198         background: #e0e0e0 !important;
 199         background: -moz-linear-gradient(top, #f0f0f0 0%, #d0d0d0 90%) !important; /* FF3.6+ */
 200         background: -webkit-linear-gradient(top, #f0f0f0 0%, #d0d0d0 90%) !important; /* Chrome10+, Safari5.1+ */
 201         background: -o-linear-gradient(top, #f0f0f0 0%, #d0d0d0 90%) !important; /* Opera 11.10+ */
 202         background: -ms-linear-gradient(top, #f0f0f0 0%, #d0d0d0 90%) !important; /* IE10+ */
 203         background: linear-gradient(to bottom, #f0f0f0 0%, #d0d0d0 90%) !important;
 204         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0f0f0', endColorstr='#d0d0d0', GradientType=0); /* IE6-8 */
 205 }
 206
 207 /* Green buttons */
 208 body .ui-button-green,
 209 body .ui-button-green .ui-button-text {
 210         color: white;
 211         text-shadow: 0 -1px 1px #072;
 212 }
 213 body .ui-button.ui-button-green {
 214         border-color: #294 !important;
 215         background: #295 !important;
 216         background: -moz-linear-gradient(top, #3c8 0%, #295 90%) !important; /* FF3.6+ */
 217         background: -webkit-linear-gradient(top, #3c8 0%, #295 90%) !important; /* Chrome10+, Safari5.1+ */
 218         background: -o-linear-gradient(top, #3c8 0%, #295 90%) !important; /* Opera 11.10+ */
 219         background: -ms-linear-gradient(top, #3c8 0%, #295 90%) !important; /* IE10+ */
 220         background: linear-gradient(to bottom, #3c8 0%, #295 90%) !important;
 221         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#33cc88', endColorstr='#229955', GradientType=0); /* IE6-8 */
 222         -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.3);
 223         -moz-box-shadow: 0 1px 3px rgba(0,0,0,.3);
 224         box-shadow: 0 1px 3px rgba(0,0,0,.3);
 225 }
 226 body .ui-button.ui-button-green:hover {
 227         background: #33a055 !important;
 228         background: -moz-linear-gradient(top, #44d388 0%, #33a055 90%) !important; /* FF3.6+ */
 229         background: -webkit-linear-gradient(top, #44d388 0%, #33a055 90%) !important; /* Chrome10+, Safari5.1+ */
 230         background: -o-linear-gradient(top, #44d388 0%, #33a055 90%) !important; /* Opera 11.10+ */
 231         background: -ms-linear-gradient(top, #44d388 0%, #33a055 90%) !important; /* IE10+ */
 232         background: linear-gradient(to bottom, #44d388 0%, #33a055 90%) !important;
 233         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#44d388', endColorstr='#33a055', GradientType=0); /* IE6-8 */
 234         -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.25);
 235         -moz-box-shadow: 0 1px 3px rgba(0,0,0,.25);
 236         box-shadow: 0 1px 3px rgba(0,0,0,.25);
 237 }
 238 body .ui-button.ui-button-green:active,
 239 body .ui-button.ui-button-green:focus {
 240         border-color: #172 !important;
 241         -webkit-box-shadow: 0 0 2px 2px rgba(167,215,249,.75);
 242         -moz-box-shadow: 0 0 2px 2px rgba(167,215,249,.75);
 243         box-shadow: 0 0 2px 2px rgba(167,215,249,.75);
 244 }
 245 body .ui-button.ui-button-green:active {
 246         background: #338855 !important;
 247         background: -moz-linear-gradient(top, #30c080 0%, #338855 90%) !important; /* FF3.6+ */
 248         background: -webkit-linear-gradient(top, #30c080 0%, #338855 90%) !important; /* Chrome10+, Safari5.1+ */
 249         background: -o-linear-gradient(top, #30c080 0%, #338855 90%) !important; /* Opera 11.10+ */
 250         background: -ms-linear-gradient(top, #30c080 0%, #338855 90%) !important; /* IE10+ */
 251         background: linear-gradient(to bottom, #30c080 0%, #338855 90%) !important;
 252         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#30c080', endColorstr='#338855', GradientType=0); /* IE6-8 */
 253 }
 254
 255 /* Blue buttons */
 256 body .ui-button-blue,
 257 body .ui-button-blue .ui-button-text {
 258         color: white;
 259         text-shadow: 0 -1px 1px #037;
 260 }
 261 body .ui-button.ui-button-blue {
 262         border-color: #468 !important;
 263         background: #36b !important;
 264         background: -moz-linear-gradient(top, #48e 0%, #36b 90%) !important; /* FF3.6+ */
 265         background: -webkit-linear-gradient(top, #48e 0%, #36b 90%) !important; /* Chrome10+, Safari5.1+ */
 266         background: -o-linear-gradient(top, #48e 0%, #36b 90%) !important; /* Opera 11.10+ */
 267         background: -ms-linear-gradient(top, #48e 0%, #36b 90%) !important; /* IE10+ */
 268         background: linear-gradient(to bottom, #48e 0%, #36b 90%) !important;
 269         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4488ee', endColorstr='#3366bb', GradientType=0); /* IE6-8 */
 270         -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.35);
 271         -moz-box-shadow: 0 1px 3px rgba(0,0,0,.35);
 272         box-shadow: 0 1px 3px rgba(0,0,0,.35);
 273 }
 274 body .ui-button.ui-button-blue:hover {
 275         background: #36c !important;
 276         background: -moz-linear-gradient(top, #59e 0%, #36c 90%) !important; /* FF3.6+ */
 277         background: -webkit-linear-gradient(top, #59e 0%, #36c 90%) !important; /* Chrome10+, Safari5.1+ */
 278         background: -o-linear-gradient(top, #59e 0%, #36c 90%) !important; /* Opera 11.10+ */
 279         background: -ms-linear-gradient(top, #59e 0%, #36c 90%) !important; /* IE10+ */
 280         background: linear-gradient(to bottom, #59e 0%, #36c 90%) !important;
 281         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5599ee', endColorstr='#3366cc', GradientType=0); /* IE6-8 */
 282 }
 283 body .ui-button.ui-button-blue:active,
 284 body .ui-button.ui-button-blue:focus {
 285         border-color: #357 !important;
 286         -webkit-box-shadow: 0 0 2px 2px rgba(167,215,249,.75);
 287         -moz-box-shadow: 0 0 2px 2px rgba(167,215,249,.75);
 288         box-shadow: 0 0 2px 2px rgba(167,215,249,.75);
 289 }
 290 body .ui-button.ui-button-blue:active {
 291         background: #3060a0 !important;
 292         background: -moz-linear-gradient(top, #4080e0 0%, #3060a0 90%) !important; /* FF3.6+ */
 293         background: -webkit-linear-gradient(top, #4080e0 0%, #3060a0 90%) !important; /* Chrome10+, Safari5.1+ */
 294         background: -o-linear-gradient(top, #4080e0 0%, #3060a0 90%) !important; /* Opera 11.10+ */
 295         background: -ms-linear-gradient(top, #4080e0 0%, #3060a0 90%) !important; /* IE10+ */
 296         background: linear-gradient(to bottom, #4080e0 0%, #3060a0 90%) !important;
 297         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4080e0', endColorstr='#3060a0', GradientType=0); /* IE6-8 */
 298 }
 299
 300 /* Red buttons */
 301 body .ui-button-red,
 302 body .ui-button-red .ui-button-text {
 303         color: white;
 304         text-shadow: 0 -1px 1px #700;
 305 }
 306 body .ui-button.ui-button-red {
 307         border-color: #944 !important;
 308         background: #a22 !important;
 309         background: -moz-linear-gradient(top, #d44 0%, #a22 90%) !important; /* FF3.6+ */
 310         background: -webkit-linear-gradient(top, #d44 0%, #a22 90%) !important; /* Chrome10+, Safari5.1+ */
 311         background: -o-linear-gradient(top, #d44 0%, #a22 90%) !important; /* Opera 11.10+ */
 312         background: -ms-linear-gradient(top, #d44 0%, #a22 90%) !important; /* IE10+ */
 313         background: linear-gradient(to bottom, #d44 0%, #a22 90%) !important;
 314         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dd4444', endColorstr='#aa2222', GradientType=0); /* IE6-8 */
 315         -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.35);
 316         -moz-box-shadow: 0 1px 3px rgba(0,0,0,.35);
 317         box-shadow: 0 1px 3px rgba(0,0,0,.35);
 318 }
 319 body .ui-button.ui-button-red:hover {
 320         border-color: #a44 !important;
 321         background: #b03333 !important;
 322         background: -moz-linear-gradient(top, #ee4646 0%, #b03333 90%) !important; /* FF3.6+ */
 323         background: -webkit-linear-gradient(top, #ee4646 0%, #b03333 90%) !important; /* Chrome10+, Safari5.1+ */
 324         background: -o-linear-gradient(top, #ee4646 0%, #b03333 90%) !important; /* Opera 11.10+ */
 325         background: -ms-linear-gradient(top, #ee4646 0%, #b03333 90%) !important; /* IE10+ */
 326         background: linear-gradient(to bottom, #ee4646 0%, #b03333 90%) !important;
 327         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee4646', endColorstr='#b03333', GradientType=0); /* IE6-8 */
 328         -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.3);
 329         -moz-box-shadow: 0 1px 3px rgba(0,0,0,.3);
 330         box-shadow: 0 1px 3px rgba(0,0,0,.3);
 331 }
 332 body .ui-button.ui-button-red:active,
 333 body .ui-button.ui-button-red:focus {
 334         border-color: #747 !important;
 335         -webkit-box-shadow: 0 0 2px 2px rgba(167,215,249,.7);
 336         -moz-box-shadow: 0 0 2px 2px rgba(167,215,249,.7);
 337         box-shadow: 0 0 2px 2px rgba(167,215,249,.7);
 338 }
 339 body .ui-button.ui-button-red:active {
 340         background: #952020 !important;
 341         background: -moz-linear-gradient(top, #d04545 0%, #952020 90%) !important; /* FF3.6+ */
 342         background: -webkit-linear-gradient(top, #d04545 0%, #952020 90%) !important; /* Chrome10+, Safari5.1+ */
 343         background: -o-linear-gradient(top, #d04545 0%, #952020 90%) !important; /* Opera 11.10+ */
 344         background: -ms-linear-gradient(top, #d04545 0%, #952020 90%) !important; /* IE10+ */
 345         background: linear-gradient(to bottom, #d04545 0%, #952020 90%) !important;
 346         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d04545', endColorstr='#952020', GradientType=0); /* IE6-8 */
 347 }
 348
 349 /* Disabled buttons */
 350 body .ui-button-green.disabled,
 351 body .ui-button-green.disabled:hover,
 352 body .ui-button-green.disabled:active,
 353 body .ui-button-green.disabled:focus,
 354 body .ui-button-blue.disabled,
 355 body .ui-button-blue.disabled:hover,
 356 body .ui-button-blue.disabled:active,
 357 body .ui-button-blue.disabled:focus,
 358 body .ui-button-red.disabled,
 359 body .ui-button-red.disabled:hover,
 360 body .ui-button-red.disabled:active,
 361 body .ui-button-red.disabled:focus,
 362 body .ui-button.disabled,
 363 body .ui-button.disabled:hover {
 364         color: #aaa;
 365         border-color: #ccc !important;
 366         background: #eee !important;
 367         background: -moz-linear-gradient(top, #f6f6f6 0%, #eee 90%) !important; /* FF3.6+ */
 368         background: -webkit-linear-gradient(top, #f6f6f6 0%, #eee 90%) !important; /* Chrome10+, Safari5.1+ */
 369         background: -o-linear-gradient(top, #f6f6f6 0%, #eee 90%) !important; /* Opera 11.10+ */
 370         background: -ms-linear-gradient(top, #f6f6f6 0%, #eee 90%) !important; /* IE10+ */
 371         background: linear-gradient(to bottom, #f6f6f6 0%, #eee 90%) !important;
 372         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#eeeeee', GradientType=0); /* IE6-8 */
 373         -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0);
 374         -moz-box-shadow: 0 1px 3px rgba(0,0,0,0);
 375         box-shadow: 0 1px 3px rgba(0,0,0,0);
 376 }
 377 body .ui-button-green.disabled .ui-button-text,
 378 body .ui-button-blue.disabled .ui-button-text,
 379 body .ui-button-red.disabled .ui-button-text {
 380         color: #aaa;
 381         text-shadow: 0 1px 1px #fff;
 382 }