heyui/themes/native/button.less

A UI components Library.

@btn-prefix: ~"@{prefix}btn";
.btn-color(@color) {
  background-color: @color;
  border-color: darken(@color, 2%);
  color: @white-color;
  &:hover {
    border-color: lighten(@color, 10%);
    background-color: lighten(@color, 10%);
  }
  &:active {
    border-color: darken(@color, 10%);
    background-color: darken(@color, 10%);
  }
}

.btn-text-color(@color) {
  border-color: @color;
  color: @color;
  &:hover {
    border-color: lighten(@color, 10%);
    color: lighten(@color, 10%);
  }
  &:active {
    border-color: darken(@color, 10%);
    color: darken(@color, 10%);
  }
}

.@{btn-prefix} {
  border: none;
  outline: none;
  padding: 8px 15px;
  display: inline-block;
  border-radius: @btn-border-radius;
  color: inherit;
  font-size: @font-size-mini;
  line-height: 1;
  box-sizing: border-box;
  cursor: pointer;
  transition: all @transition-time;
  background-color: transparent;
  border: 1px solid @gray1-color;
  box-shadow: 0 1px 1px 0 @gray2-color;
  .btn-text-color(@primary-color);
  >i{
    font-size: 90%;
    +span {
      margin-left: 5px;
    }
  }
  >span {
    +i{
      margin-left: 5px;
    }
  }
  &.@{btn-prefix} {
    &-primary {
      .btn-color(@primary-color);
    }
    &-red {
      .btn-color(@red-color);
    }
    &-yellow {
      .btn-color(@yellow-color);
    }
    &-green {
      .btn-color(@green-color);
    }
    &-blue {
      .btn-color(@blue-color);
    }
    &-text {
      box-shadow: none;
      border-color: transparent;
      &-red {
        .btn-text-color(@red-color);
      }
      &-yellow {
        .btn-text-color(@yellow-color);
      }
      &-green {
        .btn-text-color(@green-color);
      }
      &-blue {
        .btn-text-color(@blue-color);
      }
    }
    &-no-border{
      box-shadow: none;
      border-color: transparent !important;
    }
    &-circle {
      border-radius: 20px;
    }
    &-icon-circle {
      border-radius: 20px;
      padding: 8px;
    }
    &-loading {
      pointer-events: none;
      opacity: 0.8;
    }
    &-block {
      display: block;
      width: 100%;
    }
  }
  &[disabled] {
    cursor: @disabled-cursor;
    background-color: @gray2-color;
    border-color: @gray1-color;
    color: @gray-color;
    &:hover {
      background-color: @gray2-color;
      border-color: @gray1-color;
      color: @gray-color;
    }
    &.@{btn-prefix}-text {
      border-color: transparent;
      background-color: transparent;
    }
  }
  +.@{btn-prefix} {
    margin-left: 4px;
  }
  &.@{btn-prefix}-l {
    padding: 10px 20px;
  }
  &.@{btn-prefix}-s {
    padding: 5px 10px;
  }
  &.@{btn-prefix}-xs {
    padding: 2px 6px;
  }
  &-group {
    display: inline-block;
    vertical-align: middle;
    >.@{btn-prefix} {
      border-radius: 0;
      float: left;
      +.@{btn-prefix} {
        margin-left: -1px;
      }
      position: relative;
      &:hover {
        z-index: 2;
      }
      &:first-of-type {
        border-radius: @border-radius 0 0 @border-radius;
      }
      &:last-of-type {
        border-radius: 0 @border-radius @border-radius 0;
      }
    }
    &.@{btn-prefix}-group {
      &-circle {
        >:first-of-type {
          border-radius: 20px 0 0 20px;
        }
        >:last-of-type {
          border-radius: 0 20px 20px 0;
        }
      }
      >.@{btn-prefix}[disabled]{
        z-index: -1;
      }
      &-l>.@{btn-prefix} {
        padding: 10px 20px;
      }
      &-s>.@{btn-prefix} {
        padding: 5px 8px;
      }
      &-xs>.@{btn-prefix} {
        padding: 2px 6px;
        font-size: 90%;
      }
    }
  }
}