react-antd-cssvars/dist/styles/button.less

A minimal cssvars antd module

@button-prefix: ~"@{ant-prefix}-btn";

.@{button-prefix} {

  &[disabled] {
    color: @antd-disable-color;
  }

  &:not([disabled]) {
    color: @antd-primary-color;
    border-color: @antd-primary-color;

    &:hover,
    &:focus {
      color: @antd-primary-color-hover;
      border-color: @antd-primary-color-hover;
    }
  }

  &.btn-uppercase {
    text-transform: uppercase;
  }

  &.@{button-prefix}-primary:not([disabled]) {
    color: @antd-text-color-inv;
    background: @antd-primary-color;
    border-color: @antd-primary-color;

    &:hover,
    &:focus {
      background: @antd-primary-color-hover;
      border-color: @antd-primary-color-hover;
    }
  }

  &.@{button-prefix}-dangerous:not([disabled]) {
    color: @antd-text-color-inv;
    background: @antd-danger-color;
    border-color: @antd-danger-color;

    &:hover,
    &:focus {
      background: @antd-danger-color-hover;
      border-color: @antd-danger-color-hover;
    }
  }

  &.@{button-prefix}.btn-secondary:not([disabled]) {
    color: @antd-text-color-inv;
    border-color: @antd-secondary-color;
    background: @antd-secondary-color;

    &:hover,
    &:focus {
      background: @antd-secondary-color-hover;
      border-color: @antd-secondary-color-hover;
    }
  }

  &.@{button-prefix}.btn-success:not([disabled]) {
    color: @antd-text-color-inv;
    border-color: @antd-success-color;
    background: @antd-success-color;
  }

  &.@{button-prefix}.btn-warning:not([disabled]) {
    color: @antd-text-color-inv;
    border-color: @antd-warning-color;
    background: @antd-warning-color;
  }

  &.@{button-prefix}.btn-menu:not([disabled]) {
    color: @antd-menu-text-color;
    border-color: @antd-menu-background;
    background: @antd-menu-background;

    &:hover,
    &:focus {
      background: @antd-submenu-background;
      border-color: @antd-submenu-background;
    }
  }

  &.@{button-prefix}-link {
    border-color: transparent;

    &:not([disabled]) {
      color: @antd-primary-color;

      &:hover,
      &:focus {

        color: @antd-primary-color-hover;
        border-color: transparent;
      }
    }
  }

  &.@{button-prefix}-text {
    border-color: transparent;

    &:not([disabled]) {
      color: @antd-primary-color;

      &:hover,
      &:focus {

        color: @antd-primary-color-hover;
        border-color: transparent;
      }
    }
  }

  &.@{button-prefix}.@{button-prefix}-xs {
    height: 34px;
    font-size: 11px;
  }
}