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