bin-ui/src/styles/components/button.styl

基于 vue2.6 / vue-cli3 的 UI 组件库

.bin-button {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  height: $default-height;
  line-height: $default-height - 2;
  white-space: nowrap;
  cursor: pointer;
  background: $color-white;
  border: $border-base;
  color: $color-text-default
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  transition: $animation-duration-base;
  user-select: none;
  padding: 0 15px;
  font-size: $base-font-size;
  border-radius: $border-base-radius;
  .iconfont {
    vertical-align: -1px;
    + span {
      margin-left: 4px;
    }
  }
  &-loading {
    font-size: 14px;
    margin-right: 5px;
  }
  &:hover, &:focus {
    color: $color-primary;
    border-color: $color-primary;
  }
  &:active {
    color: $color-primary-active;
    border-color: $color-primary-active;
  }
  &.is-round {
    border-radius: 20px;
  }
  &.is-transparent {
    background: transparent;
    border-color: #fff;
    color: #fff;
    &:hover {
      color: $color-primary;
      border-color: $color-primary;
    }
    &:active {
      color: $color-primary-active;
      border-color: $color-primary-active;
    }
    &.is-disabled, &.is-disabled:focus, &.is-disabled:hover {
      background: transparent;
      cursor: not-allowed;
      color: #fff;
    }
  }
  &.is-dashed {
    &:hover {
      color: $color-primary;
      border-color: $color-primary;
    }
    &:active {
      color: $color-primary-active;
      border-color: $color-primary-active;
    }
  }
  &.is-background{
    background-image: -webkit-gradient(linear, left bottom, left top, from(#f5f5f5), to(#fff));
    background-image: linear-gradient(0deg, #f5f5f5, #fff);
    &.is-disabled, &.is-disabled:focus, &.is-disabled:hover {
      color: #c0c4cc;
      cursor: not-allowed;
      background-image: none;
      background: #f5f5f5;
      border-color: #d9d9d9;
    }
  }
  &.is-loading {
    pointer-events: none;
  }
  &.is-disabled, &.is-disabled:focus, &.is-disabled:hover {
    color: #c0c4cc;
    cursor: not-allowed;
    background-image: none;
    background-color: #fff;
    border-color: #ebeef5;
  }
}

.bin-button--large {
  height: $large-height;
  line-height: $large-height - 2;
  padding: 0 14px;
  font-size: $header-font-size;
  &.is-round {
    padding: 0 14px;
  }
}
.bin-button--small {
  height: $small-height;
  line-height: $small-height - 2;
  padding: 0 11px;
  &.is-round {
    padding: 0 11px;
  }
}
.bin-button--mini {
  height: $mini-height;
  line-height: $mini-height - 2;
  padding: 0 7px;
  &.is-round {
    padding: 0 10px;
  }
}
.bin-button--primary {
  color: $color-white;
  background-color: $color-primary;
  border-color: $color-primary;
  background-image: none;
  &:hover, &:focus {
    background: $color-primary-light1;
    border-color: $color-primary-light1;
    color: #fff;
  }
  &:active {
    background: $color-primary-active;
    border-color: $color-primary-active;
  }
  &.is-transparent {
    border-color: $color-primary;
    color: $color-primary;
    background-color: transparent;
    &:hover {
      border-color: $color-primary-light1;
      color: $color-primary;
      background-color: rgba(245, 249, 254, .5);
    }
    &:active {
      color: $color-primary-active;
      border-color: $color-primary-active;
    }
    &.is-disabled, &.is-disabled:focus, &.is-disabled:hover {
      border-color: $color-primary-light2;
      color: $color-primary-light2;
    }
  }
  &.is-plain {
    color: $color-primary;
    background: $color-primary-light5;
    border-color: $color-primary-light3;
    &:hover, &:focus {
      border-color: $color-primary-light2;
    }
    &:active {
      color: $color-primary-active;
      border-color: $color-primary-active;
    }
    &.is-disabled, &.is-disabled:focus, &.is-disabled:hover {
      cursor: not-allowed;
      color: $color-primary-light2;
      background-color: $color-primary-light5;
      border-color: $color-primary-light3;
    }
  }
  &.is-dashed {
    background: $color-white;
    color: $color-primary;
    &:hover {
      border-color: $color-primary-light1;
      color: $color-primary;
      background-color: rgba(245, 249, 254, .5);
    }
    &:active {
      color: $color-primary-active;
      border-color: $color-primary-active;
    }
    &.is-disabled, &.is-disabled:focus, &.is-disabled:hover, &.is-loading {
      cursor: not-allowed;
      background: $color-white;
      color: $color-primary-light2;
    }
  }
  &.is-disabled, &.is-disabled:focus, &.is-disabled:hover, &.is-loading {
    cursor: not-allowed;
    color: $color-white;
    background-color: $color-primary-light2;
    border-color: $color-primary-light2;
  }
}

.bin-button--success {
  color: #fff;
  background-color: $color-success;
  border-color: $color-success;
  background-image: none;
  &:hover, &:focus {
    background: $color-success-light1;
    border-color: $color-success-light1;
    color: #fff;
  }
  &:active {
    background: $color-success-active;
    border-color: $color-success-active;
  }
  &.is-transparent {
    border-color: $color-success;
    color: $color-success;
    background-color: transparent;
    &:hover {
      border-color: $color-success-light1;
      color: $color-success;
      background-color: rgba(245, 249, 254, .5);
    }
    &:active {
      color: $color-success-active;
      border-color: $color-success-active;
    }
    &.is-disabled, &.is-disabled:focus, &.is-disabled:hover {
      border-color: $color-success-light2;
      color: $color-success-light2;
    }
  }
  &.is-plain {
    color: $color-success;
    background: $color-success-light5;
    border-color: $color-success-light3;
    &:hover, &:focus {
      border-color: $color-success-light2;
    }
    &:active {
      color: $color-success-active;
      border-color: $color-success-active;
    }
    &.is-disabled, &.is-disabled:focus, &.is-disabled:hover {
      cursor: not-allowed;
      color: $color-success-light2;
      background-color: $color-success-light5;
      border-color: $color-success-light3;
    }
  }
  &.is-dashed {
    background: $color-white;
    color: $color-success;
    &:hover {
      border-color: $color-success-light1;
      color: $color-success;
      background-color: rgba(245, 249, 254, .5);
    }
    &:active {
      color: $color-success-active;
      border-color: $color-success-active;
    }
    &.is-disabled, &.is-disabled:focus, &.is-disabled:hover, &.is-loading {
      cursor: not-allowed;
      background: $color-white;
      color: $color-success-light2;
    }
  }
  &.is-disabled, &.is-disabled:focus, &.is-disabled:hover, &.is-loading {
    cursor: not-allowed;
    color: $color-white;
    background-color: $color-success-light2;
    border-color: $color-success-light2;
  }
}

.bin-button--info {
  color: #fff;
  background-color: $color-info;
  border-color: $color-info;
  background-image: none;
  &:hover, &:focus {
    background: $color-info-light1;
    border-color: $color-info-light1;
    color: #fff;
  }
  &:active {
    background: $color-info-active;
    border-color: $color-info-active;
  }
  &.is-transparent {
    border-color: $color-info;
    color: $color-info;
    background-color: transparent;
    &:hover {
      border-color: $color-info-light1;
      color: $color-info;
      background-color: rgba(245, 249, 254, .5);
    }
    &:active {
      color: $color-info-active;
      border-color: $color-info-active;
    }
    &.is-disabled, &.is-disabled:focus, &.is-disabled:hover {
      border-color: $color-info-light2;
      color: $color-info-light2;
    }
  }
  &.is-plain {
    color: $color-info;
    background: $color-info-light5;
    border-color: $color-info-light3;
    &:hover, &:focus {
      border-color: $color-info-light2;
    }
    &:active {
      color: $color-info-active;
      border-color: $color-info-active;
    }
    &.is-disabled, &.is-disabled:focus, &.is-disabled:hover {
      cursor: not-allowed;
      color: $color-info-light2;
      background-color: $color-info-light5;
      border-color: $color-info-light3;
    }
  }
  &.is-dashed {
    background: $color-white;
    color: $color-info;
    &:hover {
      border-color: $color-info-light1;
      color: $color-info;
      background-color: rgba(245, 249, 254, .5);
    }
    &:active {
      color: $color-info-active;
      border-color: $color-info-active;
    }
    &.is-disabled, &.is-disabled:focus, &.is-disabled:hover, &.is-loading {
      cursor: not-allowed;
      background: $color-white;
      color: $color-info-light2;
    }
  }
  &.is-disabled, &.is-disabled:focus, &.is-disabled:hover, &.is-loading {
    cursor: not-allowed;
    color: $color-white;
    background-color: $color-info-light2;
    border-color: $color-info-light2;
  }
}

.bin-button--warning {
  color: #fff;
  background-color: $color-warning;
  border-color: $color-warning;
  background-image: none;
  &:hover, &:focus {
    background: $color-warning-light1;
    border-color: $color-warning-light1;
    color: #fff;
  }
  &:active {
    background: $color-warning-active;
    border-color: $color-warning-active;
  }
  &.is-transparent {
    border-color: $color-warning;
    color: $color-warning;
    background-color: transparent;
    &:hover {
      border-color: $color-warning-light1;
      color: $color-warning;
      background-color: rgba(245, 249, 254, .5);
    }
    &:active {
      color: $color-warning-active;
      border-color: $color-warning-active;
    }
    &.is-disabled, &.is-disabled:focus, &.is-disabled:hover {
      border-color: $color-warning-light2;
      color: $color-warning-light2;
    }
  }
  &.is-plain {
    color: $color-warning;
    background: $color-warning-light5;
    border-color: $color-warning-light3;
    &:hover, &:focus {
      border-color: $color-warning-light2;
    }
    &:active {
      color: $color-warning-active;
      border-color: $color-warning-active;
    }
    &.is-disabled, &.is-disabled:focus, &.is-disabled:hover {
      cursor: not-allowed;
      color: $color-warning-light2;
      background-color: $color-warning-light5;
      border-color: $color-warning-light3;
    }
  }
  &.is-dashed {
    background: $color-white;
    color: $color-warning;
    &:hover {
      border-color: $color-warning-light1;
      color: $color-warning;
      background-color: rgba(245, 249, 254, .5);
    }
    &:active {
      color: $color-warning-active;
      border-color: $color-warning-active;
    }
    &.is-disabled, &.is-disabled:focus, &.is-disabled:hover, &.is-loading {
      cursor: not-allowed;
      background: $color-white;
      color: $color-warning-light2;
    }
  }
  &.is-disabled, &.is-disabled:focus, &.is-disabled:hover, &.is-loading {
    cursor: not-allowed;
    color: $color-white;
    background-color: $color-warning-light2;
    border-color: $color-warning-light2;
  }
}
.bin-button--danger {
  color: #fff;
  background-color: $color-danger;
  border-color: $color-danger;
  background-image: none;
  &:hover, &:focus {
    background: $color-danger-light1;
    border-color: $color-danger-light1;
    color: #fff;
  }
  &:active {
    background: $color-danger-active;
    border-color: $color-danger-active;
  }
  &.is-transparent {
    border-color: $color-danger;
    color: $color-danger;
    background-color: transparent;
    &:hover {
      border-color: $color-danger-light1;
      color: $color-danger;
      background-color: rgba(245, 249, 254, .5);
    }
    &:active {
      color: $color-danger-active;
      border-color: $color-danger-active;
    }
    &.is-disabled, &.is-disabled:focus, &.is-disabled:hover {
      border-color: $color-danger-light2;
      color: $color-danger-light2;
    }
  }
  &.is-plain {
    color: $color-danger;
    background: $color-danger-light5;
    border-color: $color-danger-light3;
    &:hover, &:focus {
      border-color: $color-danger-light2;
    }
    &:active {
      color: $color-danger-active;
      border-color: $color-danger-active;
    }
    &.is-disabled, &.is-disabled:focus, &.is-disabled:hover {
      cursor: not-allowed;
      color: $color-danger-light2;
      background-color: $color-danger-light5;
      border-color: $color-danger-light3;
    }
  }
  &.is-dashed {
    background: $color-white;
    color: $color-danger;
    &:hover {
      border-color: $color-danger-light1;
      color: $color-danger;
      background-color: rgba(245, 249, 254, .5);
    }
    &:active {
      color: $color-danger-active;
      border-color: $color-danger-active;
    }
    &.is-disabled, &.is-disabled:focus, &.is-disabled:hover, &.is-loading {
      cursor: not-allowed;
      background: $color-white;
      color: $color-danger-light2;
    }
  }
  &.is-disabled, &.is-disabled:focus, &.is-disabled:hover, &.is-loading {
    cursor: not-allowed;
    color: $color-white;
    background-color: $color-danger-light2;
    border-color: $color-danger-light2;
  }
}

.bin-button--text {
  border-color: transparent;
  color: $color-primary;
  background: transparent;
  background-image: none;
  padding: 0;
  height: auto;
  &:focus, &:hover {
    color: $color-primary-light1;
    border-color: transparent;
    background-color: transparent;
    box-shadow: none;
  }
  &:active {
    color: $color-primary-active;
  }
  &.is-disabled, &.is-disabled:focus, &.is-disabled:hover {
    cursor: not-allowed;
    background-color: transparent;
    border-color: transparent;
    color: $color-primary-light3;
  }
}
.bin-button--dashed, .is-dashed {
  border-style: dashed;
}
//  button-group
.bin-button-group {
  display: inline-block;
  vertical-align: middle;
  & > .bin-button {
    float: left;
    position: relative;
  }
  .bin-button {
    z-index: 0;
    &:hover {
      z-index: 1;
    }
    &:active {
      z-index: 1;
      outline: none;
    }
  }
  .bin-button + .bin-button {
    margin-left: -1px;
  }
  & > .bin-button:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  & > .bin-button:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  & > .bin-button:not(:first-child):not(:last-child) {
    border-radius: 0;
  }
  .bin-button--primary:first-child,
  .bin-button--info:first-child,
  .bin-button--success:first-child,
  .bin-button--warning:first-child,
  .bin-button--danger:first-child {
    border-right-color: hsla(0, 0%, 100%, .5);
  }
  .bin-button--primary:last-child
  .bin-button--info:last-child,
  .bin-button--success:last-child,
  .bin-button--warning:last-child,
  .bin-button--danger:last-child {
    border-left-color: hsla(0, 0%, 100%, .5);
  }
  .bin-button--primary:not(:first-child):not(:last-child),
  .bin-button--info:not(:first-child):not(:last-child),
  .bin-button--success:not(:first-child):not(:last-child),
  .bin-button--warning:not(:first-child):not(:last-child),
  .bin-button--danger:not(:first-child):not(:last-child) {
    border-left-color: hsla(0, 0%, 100%, .5);
    border-right-color: hsla(0, 0%, 100%, .5);
  }
}

.bin-button + .bin-button {
  margin-left: 8px;
}