choerodon-ui/pro/es/button/style/index.less

An enterprise-class UI design language and React-based implementation

@import '../../../../es/style/themes/default';

@btn-prefix-cls: ~'@{c7n-pro-prefix}-btn';

@progress-cls: ~'@{c7n-prefix}-progress';

.@{btn-prefix-cls} {
  position: relative;
  display: inline-block;
  height: @btn-height-base;
  padding: @btn-padding-base;
  line-height: @btn-line-height;
  text-align: center;
  vertical-align: middle;
  background-color: @btn-default-bg;
  border: none;
  border-radius: @border-radius-base;
  outline: none;
  box-shadow: @btn-box-shadow;
  cursor: pointer;
  transition: all 0.3s ease-out;
  user-select: none;

  &:focus {
    box-shadow: @btn-focus-box-shadow;
  }

  &[href] {
    line-height: @btn-height-base;
  }

  &:enabled:active {
    box-shadow: @btn-active-box-shadow;
  }

  > .@{iconfont-css-prefix} {
    margin-right: 0.05rem;
    font-size: @btn-icon-size;
  }

  &::-moz-focus-inner {
    padding: 0;
    border: 0;
  }

  &-lg {
    height: @btn-height-lg;
    padding: @btn-padding-lg;
    font-size: @font-size-lg;

    .@{c7n-pro-prefix}-icon {
      font-size: @font-size-lg;
    }
    &[href] {
      line-height: @btn-height-lg;
    }
  }

  &-sm {
    height: @btn-height-sm;
    padding: @btn-padding-sm;
    font-size: @font-size-sm;
    &[href] {
      line-height:  @btn-height-sm;
    }

    .@{c7n-pro-prefix}-icon {
      font-size: @font-size-sm;
    }
  }

  &-flat {
    background: transparent;
    box-shadow: none;

    &:enabled:hover,
    &:enabled:focus {
      background-color: @btn-hover-default-color;
      box-shadow: none;
    }

    &:enabled:active {
      box-shadow: none;
    }
  }

  &-raised,
  &-raised:disabled {
    color: #fff;

    .@{progress-cls} circle {
      stroke: #fff;
    }
  }

  &:disabled {
    cursor: not-allowed;

    &::before {
      position: absolute;
      top: -0.01rem;
      right: -0.01rem;
      bottom: -0.01rem;
      left: -0.01rem;
      z-index: 1;
      background: #fff;
      border-radius: inherit;
      opacity: 0.35;
      transition: opacity 0.2s;
      content: '';
      pointer-events: none;
    }
  }

  // primary
  &-primary {
    &.@{btn-prefix-cls}-raised {
      background-color: @primary-color;

      &:enabled:hover,
      &:enabled:focus {
        background-color: @primary-7;
      }

      .@{c7n-pro-prefix}-ripple {
        background-color: @ripple-light-color;
      }
    }

    &.@{btn-prefix-cls}-flat {
      color: @primary-color;

      .@{progress-cls} circle {
        stroke: @primary-color;
      }
    }
  }

  // gray
  &-gray {
    &.@{btn-prefix-cls}-raised {
      color: @btn-default-color;
      background-color: #f5f5f5;

      &:enabled:hover,
      &:enabled:focus {
        background-color: #e6e6e6;
      }

      &:disabled {
        color: @disabled-color;
      }
    }

    &.@{btn-prefix-cls}-flat {
      color: #d0d0d0;

      .@{progress-cls} circle {
        stroke: #d0d0d0;
      }
    }
  }

  // blue
  &-blue {
    &.@{btn-prefix-cls}-raised {
      background-color: @blue-6;

      &:enabled:hover,
      &:enabled:focus {
        background-color: @blue-7;
      }

      .@{c7n-pro-prefix}-ripple {
        background-color: @ripple-light-color;
      }
    }

    &.@{btn-prefix-cls}-flat {
      color: @blue-6;

      .@{progress-cls} circle {
        stroke: @blue-6;
      }
    }
  }

  // green
  &-green {
    &.@{btn-prefix-cls}-raised {
      background-color: @green-6;

      &:enabled:hover,
      &:enabled:focus {
        background-color: @green-7;
      }

      .@{c7n-pro-prefix}-ripple {
        background-color: @ripple-light-color;
      }
    }

    &.@{btn-prefix-cls}-flat {
      color: @green-6;

      .@{progress-cls} circle {
        stroke: @green-6;
      }
    }
  }

  // red
  &-red {
    &.@{btn-prefix-cls}-raised {
      background-color: @red-6;

      &:enabled:hover,
      &:enabled:focus {
        background-color: @red-7;
      }

      .@{c7n-pro-prefix}-ripple {
        background-color: @ripple-light-color;
      }
    }

    &.@{btn-prefix-cls}-flat {
      color: @red-6;

      .@{progress-cls} circle {
        stroke: @red-6;
      }
    }
  }

  // yellow
  &-yellow {
    &.@{btn-prefix-cls}-raised {
      background-color: @yellow-6;

      &:enabled:hover,
      &:enabled:focus {
        background-color: @yellow-7;
      }

      .@{c7n-pro-prefix}-ripple {
        background-color: @ripple-light-color;
      }
    }

    &.@{btn-prefix-cls}-flat {
      color: @yellow-6;

      .@{progress-cls} circle {
        stroke: @yellow-6;
      }
    }
  }

  // purple
  &-purple {
    &.@{btn-prefix-cls}-raised {
      background-color: @purple-6;

      &:enabled:hover,
      &:enabled:focus {
        background-color: @purple-7;
      }

      .@{c7n-pro-prefix}-ripple {
        background-color: @ripple-light-color;
      }
    }

    &.@{btn-prefix-cls}-flat {
      color: @purple-6;

      .@{progress-cls} circle {
        stroke: @purple-6;
      }
    }
  }

  // dark
  &-dark {
    &.@{btn-prefix-cls}-raised {
      background-color: @dark-4;

      &:enabled:hover,
      &:enabled:focus {
        background-color: @dark-5;
      }

      .@{c7n-pro-prefix}-ripple {
        background-color: @ripple-light-color;
      }
    }

    &.@{btn-prefix-cls}-flat {
      color: @dark-6;

      .@{progress-cls} circle {
        stroke: @dark-6;
      }
    }
  }

  &-default {
    color: @btn-default-color;

    .@{progress-cls} circle {
      stroke: @btn-default-color;
    }

    &.@{btn-prefix-cls}-raised:disabled {
      color: @disabled-color;

      .@{progress-cls} circle {
        stroke: @disabled-color;
      }
    }

    &:focus {
      color: @primary-color;
    }
  }

  &-icon-only {
    width: @btn-circle-size;
    height: @btn-circle-size;
    padding: 0;
    border-radius: 50%;

    > .@{iconfont-css-prefix} {
      margin-right: 0;
      font-size: @btn-icon-size + 0.06rem;
      line-height: 1.5;
    }

    &.@{btn-prefix-cls}-sm {
      width: @btn-circle-size-sm;
      height: @btn-circle-size-sm;
      padding: 0;

      > .@{iconfont-css-prefix} {
        font-size: @btn-icon-size;
      }
    }

    &.@{btn-prefix-cls}-lg {
      width: @btn-circle-size-lg;
      height: @btn-circle-size-lg;
      padding: 0;

      > .@{iconfont-css-prefix} {
        font-size: @btn-icon-size + 0.1rem;
      }
    }

    &:disabled::before {
      opacity: 0.5;
    }
  }

  .@{progress-cls}.@{progress-cls}-loading {
    margin-right: 0.01rem;
    line-height: 1;

    & + span {
      margin-left: 0.05rem;
    }

    .@{progress-cls}-inner {
      width: 0.15rem;
      height: 0.15rem;
    }
  }

  & + & {
    margin-left: 0.1rem;
  }

  > * {
    vertical-align: middle;
  }
}