lu2/theme/peak/css/common/ui/Button.css

Simple and flexible UI component library based on native HTML and JavaScript

@charset "UTF-8";
/**
 *
 * @Button.css
 * @author zhangxinxu
 * @create 15-06-12
 * @edit   17-06-13
           17-11-07 use png+spin for loading
 */
.ui-button {
  display: inline-block;
  line-height: 20px;
  font-size: 14px;
  text-align: center;
  color: #4c5161;
  border: 1px solid #d0d0d5;
  border-radius: 4px;
  padding: 9px 15px;
  min-width: 50px;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  text-decoration: none;
  -webkit-transition: border-color .15s, background-color .15s, opacity .15s;
  transition: border-color .15s, background-color .15s, opacity .15s;
  cursor: pointer;
  overflow: visible; }

.ui-button.error {
  border-color: #f4615c !important; }

div.ui-button {
  display: block; }

button,
[type="button"],
[type="submit"] {
  outline: 0; }

input.ui-button,
button.ui-button {
  height: 20px;
  -ms-box-sizing: content-box;
  box-sizing: content-box; }

.ui-button:hover {
  color: #4c5161;
  border-color: #ababaf;
  text-decoration: none; }

.ui-button-clip {
  width: 0;
  height: 0;
  font-size: 0;
  position: absolute;
  clip: rect(0 0 0 0); }

.ui-button-clip.ui-outline + label.ui-button {
  outline: 1px dotted #2486ff;
  outline: 5px auto -webkit-focus-ring-color; }

.ui-button:not(.disabled):active,
.ui-button:not(.loading):active {
  background-color: #f7f9fa; }

.ui-button.disabled:hover,
.ui-button.loading,
.ui-button.loading:hover {
  color: #4c5161;
  background-color: #fff;
  border-color: #d0d0d5;
  cursor: default; }

.ui-button-primary,
.ui-button-primary.disabled:hover,
.ui-button-primary.loading,
.ui-button-primary.loading:hover {
  border: 1px solid #2486ff;
  background-color: #2486ff;
  color: #fff; }

.ui-button-primary:hover {
  background-color: #0160d5;
  border-color: #0160d5;
  color: #fff; }

.ui-button-primary:not(.disabled):active,
.ui-button-primary:not(.loading):active {
  background-color: #0057c3;
  border-color: #0057c3; }

.ui-button-success,
.ui-button-success.disabled,
.ui-button-success.disabled:hover,
.ui-button-success.loading,
.ui-button-success.loading:hover {
  border: 1px solid #01cf97;
  background-color: #01cf97;
  color: #fff; }

.ui-button-success:hover {
  background-color: #00dba2;
  border-color: #00dba2;
  color: #fff; }

.ui-button-success:not(.disabled):active,
.ui-button-success:not(.loading):active {
  background-color: #00bf8e;
  border-color: #00bf8e; }

.ui-button-warning,
.ui-button-warning.disabled,
.ui-button-warning.disabled:hover,
.ui-button-warning.loading,
.ui-button-warning.loading:hover {
  border: 1px solid #f4615c;
  background-color: #f4615c;
  color: #fff; }

.ui-button-warning:hover,
input.ui-button-warning:focus,
button.ui-button-warning:focus {
  background-color: #ff7772;
  border-color: #ff7772;
  color: #fff; }

.ui-button-warning:not(.disabled):active,
.ui-button-warning:not(.loading):active {
  background-color: #dc5652;
  border-color: #dc5652; }

.ui-button.loading {
  cursor: default;
  -ms-pointer-events: none;
  pointer-events: none;
  color: transparent !important;
  position: relative;
  background-repeat: no-repeat;
  background-position: center; }

.ui-button.loading:before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: no-repeat center; }

.ui-button.loading:before,
input.ui-button.loading {
  background-image: url(images/Button/loading.gif); }

.ui-button-primary.loading:before,
input.ui-button-primary.loading {
  background-image: url(images/Button/loading-primary.gif); }

.ui-button-success.loading:before,
input.ui-button-success.loading {
  background-image: url(images/Button/loading-success.gif); }

.ui-button-warning.loading:before,
input.ui-button-warning.loading {
  background-image: url(images/Button/loading-warning.gif); }

/* IE10+ png loading */
.ui-button.loading::before {
  background: url(images/Button/loading-blue.png), linear-gradient(transparent, transparent);
  background-size: 100%;
  -webkit-animation: spin 0.8s linear infinite;
  animation: spin 800ms linear infinite; }

.ui-button-primary.loading::before,
.ui-button-success.loading::before,
.ui-button-warning.loading::before {
  background: url(images/Button/loading-white.png), linear-gradient(transparent, transparent);
  background-size: 100%; }

/* IE8 loading文字隐藏控制-背景色覆盖 */
@media \0screen\,screen\9 {
  .ui-button.loading:before {
    width: auto;
    height: auto;
    background-color: inherit; } }