@uiw/react-button/src/style/index.less

Button component

@w-btn:~ "w-btn";

.button-variant(@color, @background) {
  color: @color;
  background-color: @background;
  z-index: 1;
  &:hover {
    background-color: darken(@background, 10%);
  }
  &:focus,
  &.focus {
    outline: 0;
    box-shadow: 0 0 0 2px fadeout(@background, 74%);
  }
  &:hover {
    color: @color;
    background-color: darken(@background, 10%);
    z-index: 2;
  }
  &:active,
  &.active {
    color: @color;
    background-color: darken(@background, 20%);
    background-image: none;
  }
  &.disabled,
  &[disabled] {
    background-color: lighten(@background, 20%);
    z-index: 0;
  }
  &.@{w-btn}-basic {
    background-color: transparent !important;
    box-shadow: inset 0 0 0 #000;
    color: @background;
    &:hover {
      background-color: lighten(@background, 42%) !important;
    }
    &:active,
    &.active {
      color: @background;
      background-color: lighten(@background, 32%) !important;
      background-image: none;
    }
    &.disabled,
    &[disabled] {
      background-color: transparent !important;
      color: lighten(@background, 10%);
    }
  }
}

.button-size(@font-size, @icon-size, @line-height, @min-height) {
  font-size: @font-size;
  line-height: @line-height;
  min-height: @min-height;
  .w-icon {
    font-size: @icon-size;
  }
}

.@{w-btn} {
  user-select: none;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  padding: 5px 7px;
  position: relative;
  vertical-align: middle;
  text-align: left;
  line-height: 14px;
  font-size: 14px;
  min-width: 30px;
  min-height: 30px;
  text-align: center;
  color: #fff;
  transition: background-color 0.5s, opacity 1s;
  > *:not(:last-child) {
    margin-right: 5px;
  }
  & + &:not(.block) {
    margin-left: 5px;
  }
  &.block {
    display: block;
    width: 100%;
  }
  &.disabled,
  &[disabled] {
    cursor: not-allowed;
  }
  &-primary {
    .button-variant(#fff, #008ef0);
  }
  &-success {
    .button-variant(#fff, #28a745);
  }
  &-warning {
    .button-variant(#fff, #ffc107);
  }
  &-danger {
    .button-variant(#fff, #dc3545);
  }
  &-light {
    box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.17), inset 1px -1px 0 0 rgba(0, 0, 0, 0.17),
      inset -1px 0px 0 0 rgba(0, 0, 0, 0.17);
    .button-variant(#393e48, #f8f9fa);
    &:focus,
    &.focus {
      outline: 0;
      box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.17), inset 1px -1px 0 0 rgba(0, 0, 0, 0.17),
        inset -1px 0px 0 0 rgba(0, 0, 0, 0.17), 0 0 0 2px rgba(0, 0, 0, 0.1);
    }
    &.@{w-btn}-basic {
      color: #9199a7;
      &:focus,
      &.focus {
        box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.17);
      }
      &:hover {
        background-color: lighten(#9199a7, 32%) !important;
      }
      &:active,
      &.active {
        color: #9199a7;
        background-color: lighten(#9199a7, 24%) !important;
        background-image: none;
      }
      &.disabled,
      &[disabled] {
        background-color: transparent !important;
        color: lighten(#9199a7, 10%);
      }
    }
    &.disabled,
    &[disabled] {
      color: lighten(#393e48, 20%);
      z-index: 0;
    }
  }
  &-dark {
    .button-variant(#fff, #393e48);
  }
  &-link {
    .button-variant(#008ef0, transparent);
    color: #008ef0 !important;
    &:hover:not([disabled]) {
      color: darken(#008ef0, 12%);
      text-decoration: underline;
    }
    &:not([disabled]):active,
    &:not([disabled]).active {
      color: darken(#008ef0, 32%);
      box-shadow: none;
      text-decoration: underline;
    }
    &.disabled,
    &[disabled] {
      z-index: 0;
    }
  }
  .w-icon {
    font-size: 16px;
  }
  &-size-large {
    .button-size(16px, 20px, 16px, 36px);
  }
  &-size-small {
    padding: 0 6px;
    min-width: 20px;
    .button-size(12px, 14px, 24px, 24px);
  }
  & .w-icon:not(:last-child) {
    margin-right: 5px;
  }
  &-loading.w-btn-light::before {
    border: 1.2px solid #666f81;
  }
  &-loading {
    &::before {
      content: '';
      display: inline-block;
      width: 1em;
      height: 1em;
      border-radius: 50%;
      border: 1.2px solid #fff;
      color: #fff;
      margin: 0 3px 0 0;
      clip-path: polygon(0% 0%, 100% 0, 100% 30%, 0% 30%);
      animation: rotate 0.5s linear infinite;
      @keyframes rotate {
        from {
          transform: rotateZ(0deg);
        }
        to {
          transform: rotateZ(360deg);
        }
      }
    }
  }
}