vue-yizun-ui/src/package/theme/button.less

易尊前端组件库

@import "./base.less";

.re-btn-group{
  position: relative;
  display: -ms-inline-flexbox;
  display: inline-flex;
  vertical-align: middle;

  &>.re-btn{
    position: relative;
    margin-left: -1px;

    &:hover{
      z-index: 1;
    }
  }

  &>&:not(:last-child)>.re-btn, &>.re-btn:not(:last-child):not(.dropdown-toggle){
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  &>&:not(:first-child)>.re-btn, &>.re-btn:not(:first-child){
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}

.re-btn {
  display: inline-block;
  position: relative;
  max-width: 100%;
  margin: 0;
  padding: 8px 18px;
  transition: all 0.25s ease-in-out;
  border: 1px solid transparent;
  border-radius: 2px;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  vertical-align: middle;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-decoration: none;

  &:focus {
    background-image: none;
    outline: 0;
  }

  &.re-btn-lg {
    padding: 12px 22px;
    font-size: 1rem;
  }

  &.re-btn-sm {
    padding: 4px 10px;
    font-size: 0.75rem;
  }

  &.re-btn-text{
    background-color: transparent;
    color: @primary;
    padding-left: 0;
    padding-right: 0;


    &.disable,&:disabled{
      color: #999 !important;
      background-color: inherit;
      &:hover{
        color: #999;
      }
    }
  }

  &.re-btn-default {
    @color:#444;
    color:@color;
    border-color: @default;
    background-color: fade(@default, 40%);
    &.is-plain {
      color: @color;
      &.disable:hover,&:disabled:hover{
        color: @color;
        background-color: inherit;
      }
    }
    &:hover {
      background-color: darken(@default, 5%);
    }
    &:active {
      border-color: darken(@default, 10%);
      background-color: fade(@default, 75%);
    }
    &:focus {
      box-shadow: 0 0 0 2px fade(@default, 50%);
    }
  }

  &.re-btn-info {
    border-color: @info;
    background-color: @info;
    &.is-plain {
      color: @info;
      &.disable:hover,&:disabled:hover{
        color: @info;
        background-color: inherit;
      }
    }
    &:hover {
      background-color: darken(@info, 5%);
    }
    &:active {
      border-color: darken(@info, 10%);
      background-color: fade(@info, 75%);
    }
    &:focus {
      box-shadow: 0 0 0 2px fade(@info, 50%);
    }
  }

  &.re-btn-success {
    border-color: @success;
    background-color: @success;
    &.is-plain {
      color: @success;
      &.disable:hover,&:disabled:hover{
        color: @success;
        background-color: inherit;
      }
    }
    &:hover {
      background-color: darken(@success, 5%);
    }
    &:active {
      border-color: darken(@success, 10%);
      background-color: fade(@success, 75%);
    }
    &:focus {
      box-shadow: 0 0 0 2px fade(@success, 50%);
    }
  }

  &.re-btn-primary {
    border-color: @primary;
    background-color: @primary;
    &.is-plain {
      color: @primary;
      &.disable:hover,&:disabled:hover{
        color: @primary;
        background-color: inherit;
      }
    }
    &:hover {
      background-color: darken(@primary, 5%);
    }
    &:active {
      border-color: darken(@primary, 10%);
      background-color: fade(@primary, 75%);
    }
    &:focus {
      box-shadow: 0 0 0 2px fade(@primary, 50%);
    }
  }

  &.re-btn-warning {
    border-color: @warning;
    background-color: @warning;
    &.is-plain {
      color: @warning;
      &.disable:hover,&:disabled:hover{
        color: @warning;
        background-color: inherit;
      }
    }
    &:hover {
      background-color: darken(@warning, 5%);
    }
    &:active {
      border-color: darken(@warning, 10%);
      background-color: fade(@warning, 75%);
    }
    &:focus {
      box-shadow: 0 0 0 2px fade(@warning, 50%);
    }
  }

  &.re-btn-danger {
    border-color: @danger;
    background-color: @danger;
    &.is-plain {
      color: @danger;
      &.disable:hover,&:disabled:hover{
        color: @danger;
        background-color: inherit;
      }
    }
    &:hover {
      background-color: darken(@danger, 5%);
    }
    &:active {
      border-color: darken(@danger, 10%);
      background-color: fade(@danger, 75%);
    }
    &:focus {
      box-shadow: 0 0 0 2px fade(@danger, 50%);
    }
  }

  &.is-plain {
    border-width: 1px;
    border-style: solid;
    background-color: transparent;
    box-shadow: none;

    &:hover{
      color: @white
    }
  }

  &.disabled,
  &:disabled {
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.5;

    &:hover {
      transform: none;
      box-shadow: none;
      opacity: 0.5;
    }
  }

  &.is-round {
    border-radius: 2em
  }

  &.is-circle {
    border-radius: 50%;
    padding: 8px 10px;
  }

  &.is-block {
    display: block;
    width: 100%;
  }

  & [class*=re-icon-]+span{
    margin-left: 5px;
  }
}