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