resources/src/jquery.ui-themes/vector/jquery.ui.button.css

   1 /*!
   2  * jQuery UI Button 1.9.2
   3  * http://jqueryui.com
   4  *
   5  * Copyright 2012 jQuery Foundation and other contributors
   6  * Released under the MIT license.
   7  * http://jquery.org/license
   8  *
   9  * http://docs.jquery.com/UI/Button#theming
  10  */
  11 .ui-button { display: inline-block; position: relative; padding: 0; margin-right: .1em; cursor: pointer; text-align: center; zoom: 1; overflow: visible; } /* the overflow property removes extra width in IE */
  12 .ui-button, .ui-button:link, .ui-button:visited, .ui-button:hover, .ui-button:active { text-decoration: none; }
  13 .ui-button-icon-only { width: 2.2em; } /* to make room for the icon, a width needs to be set here */
  14 button.ui-button-icon-only { width: 2.4em; } /* button elements seem to need a little more width */
  15 .ui-button-icons-only { width: 3.4em; }
  16 button.ui-button-icons-only { width: 3.7em; }
  17
  18 /*button text element */
  19 .ui-button .ui-button-text { display: block; line-height: 1.4;  }
  20 .ui-button-text-only .ui-button-text { padding: .125em .25em; }
  21 .ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text { padding: .4em; text-indent: -9999999px; }
  22 .ui-button-text-icon-primary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 1em .4em 2.1em; }
  23 .ui-button-text-icon-secondary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 2.1em .4em 1em; }
  24 .ui-button-text-icons .ui-button-text { padding-left: 2.1em; padding-right: 2.1em; }
  25 /* no icon support for input elements, provide padding by default */
  26 input.ui-button { padding: .4em 1em; }
  27
  28 /*button icon element(s) */
  29 .ui-button-icon-only .ui-icon, .ui-button-text-icon-primary .ui-icon, .ui-button-text-icon-secondary .ui-icon, .ui-button-text-icons .ui-icon, .ui-button-icons-only .ui-icon { position: absolute; top: 50%; margin-top: -8px; }
  30 .ui-button-icon-only .ui-icon { left: 50%; margin-left: -8px; }
  31 .ui-button-text-icon-primary .ui-button-icon-primary, .ui-button-text-icons .ui-button-icon-primary, .ui-button-icons-only .ui-button-icon-primary { left: .5em; }
  32 .ui-button-text-icon-secondary .ui-button-icon-secondary, .ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; }
  33 .ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; }
  34
  35 /*button sets*/
  36 .ui-buttonset { margin-right: 7px; }
  37 .ui-buttonset .ui-button { margin-left: 0; margin-right: -.4em; }
  38
  39 /* workarounds */
  40 button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra padding in Firefox */
  41
  42 /* Disables the annoying dashed border Firefox puts on active buttons */
  43 body button.ui-button::-moz-focus-inner {
  44         border: 0;
  45 }
  46 /* Give large buttons some extra padding */
  47 body .ui-button-large {
  48         padding: 5px;
  49 }
  50 /* Use white icons for colored buttons */
  51 .ui-button-green .ui-icon,
  52 .ui-button-blue .ui-icon,
  53 .ui-button-red .ui-icon,
  54 .ui-button-orange .ui-icon {
  55         /* @embed */
  56         background-image: url(images/ui-icons_ffffff_256x240.png) !important;
  57 }
  58
  59 /* Corner radius */
  60 /* This is normally handled in jquery.ui.theme.css, but in our case, the corner
  61    styling of our buttons doesn't match our default widget corner styling */
  62 .ui-button.ui-corner-all,
  63 .ui-button.ui-corner-top,
  64 .ui-button.ui-corner-left,
  65 .ui-button.ui-corner-tl {
  66         border-top-left-radius: 4px;
  67 }
  68 .ui-button.ui-corner-all,
  69 .ui-button.ui-corner-top,
  70
  71 .ui-button.ui-corner-right,
  72 .ui-button.ui-corner-tr {
  73         border-top-right-radius: 4px;
  74 }
  75 .ui-button.ui-corner-all,
  76 .ui-button.ui-corner-bottom,
  77 .ui-button.ui-corner-left,
  78 .ui-button.ui-corner-bl {
  79         border-bottom-left-radius: 4px;
  80 }
  81 .ui-button.ui-corner-all,
  82 .ui-button.ui-corner-bottom,
  83 .ui-button.ui-corner-right,
  84 .ui-button.ui-corner-br {
  85         border-bottom-right-radius: 4px;
  86 }
  87
  88 body .ui-button {
  89         color: #2779aa;
  90         margin: 0.5em 0 0.5em 0.4em;
  91         border: 1px solid #aaa !important;
  92         background: #f0f0f0 !important;
  93         background: -moz-linear-gradient(top, #fff 0%, #ddd 90%) !important; /* FF3.6+ */
  94         background: -webkit-linear-gradient(top, #fff 0%, #ddd 90%) !important; /* Chrome10+, Safari5.1+ */
  95         background: -o-linear-gradient(top, #fff 0%, #ddd 90%) !important; /* Opera 11.10+ */
  96         background: -ms-linear-gradient(top, #fff 0%, #ddd 90%) !important; /* IE10+ */
  97         background: linear-gradient(to bottom, #fff 0%, #ddd 90%) !important;
  98         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dddddd', GradientType=0); /* IE6-8 */
  99         cursor: pointer;
 100         font-size: 1em;
 101         line-height: 1.4em;
 102         width: auto;
 103         overflow: visible;
 104         box-shadow: 0 1px 3px rgba(0,0,0,.2);
 105 }
 106
 107 body .ui-button-icon-only {
 108         width: 2.2em;
 109 }
 110
 111 body .ui-button-icons-only {
 112         width: 3.4em;
 113 }
 114
 115 body .ui-button:hover {
 116         color: #2779aa;
 117         border-color: #bbb !important;
 118         background: #fff !important;
 119         background: -moz-linear-gradient(top, #fff 0%, #eee 90%) !important; /* FF3.6+ */
 120         background: -webkit-linear-gradient(top, #fff 0%, #eee 90%) !important; /* Chrome10+, Safari5.1+ */
 121         background: -o-linear-gradient(top, #fff 0%, #eee 90%) !important; /* Opera 11.10+ */
 122         background: -ms-linear-gradient(top, #fff 0%, #eee 90%) !important; /* IE10+ */
 123         background: linear-gradient(to bottom, #fff 0%, #eee 90%) !important;
 124         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee', GradientType=0); /* IE6-8 */
 125         box-shadow: 0 1px 3px rgba(0,0,0,.1);
 126 }
 127 body .ui-button:active,
 128 body .ui-button:focus {
 129         border-color: #8ad !important;
 130         box-shadow: 0 0 1px 1px rgba(167,215,249,.5);
 131 }
 132 body .ui-button:active {
 133         background: #e0e0e0 !important;
 134         background: -moz-linear-gradient(top, #f0f0f0 0%, #d0d0d0 90%) !important; /* FF3.6+ */
 135         background: -webkit-linear-gradient(top, #f0f0f0 0%, #d0d0d0 90%) !important; /* Chrome10+, Safari5.1+ */
 136         background: -o-linear-gradient(top, #f0f0f0 0%, #d0d0d0 90%) !important; /* Opera 11.10+ */
 137         background: -ms-linear-gradient(top, #f0f0f0 0%, #d0d0d0 90%) !important; /* IE10+ */
 138         background: linear-gradient(to bottom, #f0f0f0 0%, #d0d0d0 90%) !important;
 139         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0f0f0', endColorstr='#d0d0d0', GradientType=0); /* IE6-8 */
 140 }
 141
 142 /* Green buttons */
 143 body .ui-button-green,
 144 body .ui-button-green .ui-button-text {
 145         color: white;
 146         text-shadow: 0 -1px 1px #072;
 147 }
 148 body .ui-button.ui-button-green {
 149         border-color: #294 !important;
 150         background: #295 !important;
 151         background: -moz-linear-gradient(top, #3c8 0%, #295 90%) !important; /* FF3.6+ */
 152         background: -webkit-linear-gradient(top, #3c8 0%, #295 90%) !important; /* Chrome10+, Safari5.1+ */
 153         background: -o-linear-gradient(top, #3c8 0%, #295 90%) !important; /* Opera 11.10+ */
 154         background: -ms-linear-gradient(top, #3c8 0%, #295 90%) !important; /* IE10+ */
 155         background: linear-gradient(to bottom, #3c8 0%, #295 90%) !important;
 156         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#33cc88', endColorstr='#229955', GradientType=0); /* IE6-8 */
 157         box-shadow: 0 1px 3px rgba(0,0,0,.3);
 158 }
 159 body .ui-button.ui-button-green:hover {
 160         background: #33a055 !important;
 161         background: -moz-linear-gradient(top, #44d388 0%, #33a055 90%) !important; /* FF3.6+ */
 162         background: -webkit-linear-gradient(top, #44d388 0%, #33a055 90%) !important; /* Chrome10+, Safari5.1+ */
 163         background: -o-linear-gradient(top, #44d388 0%, #33a055 90%) !important; /* Opera 11.10+ */
 164         background: -ms-linear-gradient(top, #44d388 0%, #33a055 90%) !important; /* IE10+ */
 165         background: linear-gradient(to bottom, #44d388 0%, #33a055 90%) !important;
 166         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#44d388', endColorstr='#33a055', GradientType=0); /* IE6-8 */
 167         box-shadow: 0 1px 3px rgba(0,0,0,.25);
 168 }
 169 body .ui-button.ui-button-green:active,
 170 body .ui-button.ui-button-green:focus {
 171         border-color: #172 !important;
 172         box-shadow: 0 0 2px 2px rgba(167,215,249,.75);
 173 }
 174 body .ui-button.ui-button-green:active {
 175         background: #338855 !important;
 176         background: -moz-linear-gradient(top, #30c080 0%, #338855 90%) !important; /* FF3.6+ */
 177         background: -webkit-linear-gradient(top, #30c080 0%, #338855 90%) !important; /* Chrome10+, Safari5.1+ */
 178         background: -o-linear-gradient(top, #30c080 0%, #338855 90%) !important; /* Opera 11.10+ */
 179         background: -ms-linear-gradient(top, #30c080 0%, #338855 90%) !important; /* IE10+ */
 180         background: linear-gradient(to bottom, #30c080 0%, #338855 90%) !important;
 181         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#30c080', endColorstr='#338855', GradientType=0); /* IE6-8 */
 182 }
 183
 184 /* Blue buttons */
 185 body .ui-button-blue,
 186 body .ui-button-blue .ui-button-text {
 187         color: white;
 188         text-shadow: 0 -1px 1px #037;
 189 }
 190 body .ui-button.ui-button-blue {
 191         border-color: #468 !important;
 192         background: #36b !important;
 193         background: -moz-linear-gradient(top, #48e 0%, #36b 90%) !important; /* FF3.6+ */
 194         background: -webkit-linear-gradient(top, #48e 0%, #36b 90%) !important; /* Chrome10+, Safari5.1+ */
 195         background: -o-linear-gradient(top, #48e 0%, #36b 90%) !important; /* Opera 11.10+ */
 196         background: -ms-linear-gradient(top, #48e 0%, #36b 90%) !important; /* IE10+ */
 197         background: linear-gradient(to bottom, #48e 0%, #36b 90%) !important;
 198         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4488ee', endColorstr='#3366bb', GradientType=0); /* IE6-8 */
 199         box-shadow: 0 1px 3px rgba(0,0,0,.35);
 200 }
 201 body .ui-button.ui-button-blue:hover {
 202         background: #36c !important;
 203         background: -moz-linear-gradient(top, #59e 0%, #36c 90%) !important; /* FF3.6+ */
 204         background: -webkit-linear-gradient(top, #59e 0%, #36c 90%) !important; /* Chrome10+, Safari5.1+ */
 205         background: -o-linear-gradient(top, #59e 0%, #36c 90%) !important; /* Opera 11.10+ */
 206         background: -ms-linear-gradient(top, #59e 0%, #36c 90%) !important; /* IE10+ */
 207         background: linear-gradient(to bottom, #59e 0%, #36c 90%) !important;
 208         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5599ee', endColorstr='#3366cc', GradientType=0); /* IE6-8 */
 209 }
 210 body .ui-button.ui-button-blue:active,
 211 body .ui-button.ui-button-blue:focus {
 212         border-color: #357 !important;
 213         box-shadow: 0 0 2px 2px rgba(167,215,249,.75);
 214 }
 215 body .ui-button.ui-button-blue:active {
 216         background: #3060a0 !important;
 217         background: -moz-linear-gradient(top, #4080e0 0%, #3060a0 90%) !important; /* FF3.6+ */
 218         background: -webkit-linear-gradient(top, #4080e0 0%, #3060a0 90%) !important; /* Chrome10+, Safari5.1+ */
 219         background: -o-linear-gradient(top, #4080e0 0%, #3060a0 90%) !important; /* Opera 11.10+ */
 220         background: -ms-linear-gradient(top, #4080e0 0%, #3060a0 90%) !important; /* IE10+ */
 221         background: linear-gradient(to bottom, #4080e0 0%, #3060a0 90%) !important;
 222         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4080e0', endColorstr='#3060a0', GradientType=0); /* IE6-8 */
 223 }
 224
 225 /* Red buttons */
 226 body .ui-button-red,
 227 body .ui-button-red .ui-button-text {
 228         color: white;
 229         text-shadow: 0 -1px 1px #700;
 230 }
 231 body .ui-button.ui-button-red {
 232         border-color: #944 !important;
 233         background: #a22 !important;
 234         background: -moz-linear-gradient(top, #d44 0%, #a22 90%) !important; /* FF3.6+ */
 235         background: -webkit-linear-gradient(top, #d44 0%, #a22 90%) !important; /* Chrome10+, Safari5.1+ */
 236         background: -o-linear-gradient(top, #d44 0%, #a22 90%) !important; /* Opera 11.10+ */
 237         background: -ms-linear-gradient(top, #d44 0%, #a22 90%) !important; /* IE10+ */
 238         background: linear-gradient(to bottom, #d44 0%, #a22 90%) !important;
 239         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dd4444', endColorstr='#aa2222', GradientType=0); /* IE6-8 */
 240         box-shadow: 0 1px 3px rgba(0,0,0,.35);
 241 }
 242 body .ui-button.ui-button-red:hover {
 243         border-color: #a44 !important;
 244         background: #b03333 !important;
 245         background: -moz-linear-gradient(top, #ee4646 0%, #b03333 90%) !important; /* FF3.6+ */
 246         background: -webkit-linear-gradient(top, #ee4646 0%, #b03333 90%) !important; /* Chrome10+, Safari5.1+ */
 247         background: -o-linear-gradient(top, #ee4646 0%, #b03333 90%) !important; /* Opera 11.10+ */
 248         background: -ms-linear-gradient(top, #ee4646 0%, #b03333 90%) !important; /* IE10+ */
 249         background: linear-gradient(to bottom, #ee4646 0%, #b03333 90%) !important;
 250         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee4646', endColorstr='#b03333', GradientType=0); /* IE6-8 */
 251         box-shadow: 0 1px 3px rgba(0,0,0,.3);
 252 }
 253 body .ui-button.ui-button-red:active,
 254 body .ui-button.ui-button-red:focus {
 255         border-color: #747 !important;
 256         box-shadow: 0 0 2px 2px rgba(167,215,249,.7);
 257 }
 258 body .ui-button.ui-button-red:active {
 259         background: #952020 !important;
 260         background: -moz-linear-gradient(top, #d04545 0%, #952020 90%) !important; /* FF3.6+ */
 261         background: -webkit-linear-gradient(top, #d04545 0%, #952020 90%) !important; /* Chrome10+, Safari5.1+ */
 262         background: -o-linear-gradient(top, #d04545 0%, #952020 90%) !important; /* Opera 11.10+ */
 263         background: -ms-linear-gradient(top, #d04545 0%, #952020 90%) !important; /* IE10+ */
 264         background: linear-gradient(to bottom, #d04545 0%, #952020 90%) !important;
 265         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d04545', endColorstr='#952020', GradientType=0); /* IE6-8 */
 266 }
 267
 268 /* Disabled buttons */
 269 body .ui-button-green.disabled,
 270 body .ui-button-green.disabled:hover,
 271 body .ui-button-green.disabled:active,
 272 body .ui-button-green.disabled:focus,
 273 body .ui-button-blue.disabled,
 274 body .ui-button-blue.disabled:hover,
 275 body .ui-button-blue.disabled:active,
 276 body .ui-button-blue.disabled:focus,
 277 body .ui-button-red.disabled,
 278 body .ui-button-red.disabled:hover,
 279 body .ui-button-red.disabled:active,
 280 body .ui-button-red.disabled:focus,
 281 body .ui-button.disabled,
 282 body .ui-button.disabled:hover {
 283         color: #aaa;
 284         border-color: #ccc !important;
 285         background: #eee !important;
 286         background: -moz-linear-gradient(top, #f6f6f6 0%, #eee 90%) !important; /* FF3.6+ */
 287         background: -webkit-linear-gradient(top, #f6f6f6 0%, #eee 90%) !important; /* Chrome10+, Safari5.1+ */
 288         background: -o-linear-gradient(top, #f6f6f6 0%, #eee 90%) !important; /* Opera 11.10+ */
 289         background: -ms-linear-gradient(top, #f6f6f6 0%, #eee 90%) !important; /* IE10+ */
 290         background: linear-gradient(to bottom, #f6f6f6 0%, #eee 90%) !important;
 291         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#eeeeee', GradientType=0); /* IE6-8 */
 292         box-shadow: 0 1px 3px rgba(0,0,0,0);
 293 }
 294 body .ui-button-green.disabled .ui-button-text,
 295 body .ui-button-blue.disabled .ui-button-text,
 296 body .ui-button-red.disabled .ui-button-text {
 297         color: #aaa;
 298         text-shadow: 0 1px 1px #fff;
 299 }