[Summary view] [Print] [Text view]

   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  }