deer-ui/es/button/style.less

React.js UI components for PC Web

@import "../styles/themes.less";
@import "../styles/mixins.less";
@import "../styles/animate.less";

@prefixCls : deer-ui-button;

.@{prefixCls} {
  display: inline-block;
  &-btn {
    border: none;
    outline: none;
    cursor: pointer;
    padding: @button-default-padding;
    font-size: @button-default-font-size;
    height: @button-default-height;
    touch-action: manipulation;
    white-space: nowrap;
    background-image: none;
    text-align: center;
    border-radius: @button-default-border-radius;
    text-shadow: none;
    vertical-align: middle;
    &.btn-size-small{
      font-size: @button-small-font-size;
      padding: @button-small-padding;
      height: @button-small-height;  
    }
    &.btn-size-large{
      font-size: @button-large-font-size;
      padding: @button-large-padding;
      height: @button-large-height;  
    }
    &-default {
      color: @font-color;
      background-color: #fff;
      border: 1px solid @default-color;
      text-shadow: none;
      &-circle {
        border-radius: 50%;
        padding: 0;
        width: @button-default-width;
        height: @button-default-height;
      }
    }
    &-primary {
      .deer-ui-button-theme-color-hover(@primary-color);
      &.btn-hollow {
        .deer-ui-button-theme-color-hollow(@primary-color);
      }
      &.btn-circle {
        border-radius: 50%;
        padding: 0;
        width: @button-default-width;
        height: @button-default-height;
      }
    }
    &-link {
      background-color: transparent;
      height: auto;
      padding: 0 5px;
      white-space: nowrap;
      text-align: center;
      text-decoration: none;
      color: @primary-color;
      &.btn-hollow {
        color: @primary-color;
      }
      &.btn-circle {
        border-radius: 50%;
        padding: 0;
        width: @button-default-width;
        height: @button-default-height;
      }
    }
    &-warning {
      .deer-ui-button-theme-color-hover(@warning-color);
      // color: #fff;
      // background-color: #fca130;
      // border: 1px solid #fca130;
      &.btn-hollow {
        .deer-ui-button-theme-color-hollow(@warning-color);
        // color: #fca130;
      }
      &.btn-circle {
        border-radius: 50%;
        padding: 0;
        width: @button-default-width;
        height: @button-default-height;
      }
    }
    &-info {
      .deer-ui-button-theme-color-hover(@info-color);
      &.btn-hollow {
        .deer-ui-button-theme-color-hollow(@info-color);
      }
      &.btn-circle {
        border-radius: 50%;
        padding: 0;
        width: @button-default-width;
        height: @button-default-height;
      }
    }
    &-error {
      .deer-ui-button-theme-color-hover(@error-color);
      &.btn-hollow {
        .deer-ui-button-theme-color-hollow(@error-color);
      }
      &.btn-circle {
        border-radius: 50%;
        padding: 0;
        width: @button-default-width;
        height: @button-default-height;
      }
    }
    &-success {
      .deer-ui-button-theme-color-hover(@success-color);
      &.btn-hollow {
        .deer-ui-button-theme-color-hollow(@success-color);
      }
      &.btn-circle {
        border-radius: 50%;
        padding: 0;
        width: @button-default-width;
        height: @button-default-height;
      }
    }
    &.btn-disabled {
      cursor: not-allowed;
      opacity: @button-disabled-opacity;
      &.btn-circle {
        border-radius: 50%;
        padding: 0;
        width: @button-default-width;
        height: @button-default-height;
      }
    }
    &.btn-block {
      width: 100%;
    }

    &.btn-dashed {
      border: 1px dashed @border-color;
      &.btn-circle {
        border-radius: 50%;
        padding: 0;
        width: @button-default-width;
        height: @button-default-height;
      }
    }
    &.btn-loading {
      opacity: @button-disabled-opacity;
      cursor: not-allowed;
    }
    &.btn-hollow {
      background: transparent;
      text-shadow: unset;
    }
  }
  &-block {
    width: 100%;
  }
  &-loading {
    margin-right: 10px;
    vertical-align: -1px;
    animation:  deer-ui-spin @loading-time linear infinite;
  }
  &-link {
    padding: 0 5px;
    font-size: @button-default-font-size;
    white-space: nowrap;
    text-align: center;
    text-decoration: none;
    color: @primary-color !important;
    &-disabled{
      cursor: not-allowed;
      color: @disabled-font-color !important;
    }
  }
}