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

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

@import '../../style/themes/default';
@import '../../style/mixins/index';
@import './ripple';
@import './mixin';

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

// for compatibile
@btn-ghost-color: @text-color;
@btn-ghost-bg: transparent;
@btn-ghost-border: @border-color-base;

// Button styles
// -----------------------------
.@{btn-prefix-cls} {
  line-height: @btn-height-base;
  .btn;
  .btn-default;

  &-disabled-wrapper > button {
    height: 100%;
    margin: 0;
    padding: 0;
    text-align: inherit;
    background-color: transparent;
    border: none;
    cursor: inherit;
    pointer-events: none;

    &:focus-visible > span,
    &:active > span {
      position: relative;
    }
  }

  // Make sure that the target of Button's click event always be `button`
  &-disabled-wrapper > button,
  & {
    > i.@{iconfont-css-prefix} {
      display: inline-block;
      line-height: inherit;
      vertical-align: top;
      pointer-events: none;
    }

    > span {
      display: inline-block;
    }

    > i.@{iconfont-css-prefix} + span,
    > span + i.@{iconfont-css-prefix} {
      margin-left: 0.04rem;
    }

    > div.btn-loading {
      display: inline-block;
      width: 0.32rem;
      margin-right: 0.04rem;

      > span {
        display: inline-block;
        width: 0.07rem;
        height: 0.07rem;
        background: #000;
        border-color: #000;
        border-radius: 50%;
      }

      .dot1 {
        transform: scale(1);
        opacity: 1;
        animation: btn-loading 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.07s infinite normal;
      }

      .dot2 {
        margin: 0 0.03rem;
        transform: scale(0.7);
        opacity: 0.9;
        animation: btn-loading 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.17s infinite normal;
      }

      .dot3 {
        transform: scale(0.7);
        opacity: 0.9;
        animation: btn-loading 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.27s infinite normal;
      }
    }
  }

  .@{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;

      circle {
        stroke: currentColor;
      }
    }
  }

  &-flat&-primary {
    .btn-flat-primary;

    .@{btn-prefix-cls}-group &:not(:first-child):not(:last-child) {
      border-right-color: @btn-group-border;
      border-left-color: @btn-group-border;

      &:disabled {
        border-color: @btn-default-border;
      }
    }

    .@{btn-prefix-cls}-group &:first-child {
      &:not(:last-child) {
        border-right-color: @btn-group-border;

        &[disabled] {
          border-right-color: @btn-default-border;
        }
      }
    }

    .@{btn-prefix-cls}-group &:last-child:not(:first-child),
    .@{btn-prefix-cls}-group & + & {
      border-left-color: @btn-group-border;

      &[disabled] {
        border-left-color: @btn-default-border;
      }
    }
  }

  &-raised&-primary {
    .btn-raised-primary;

    .@{btn-prefix-cls}-group &:not(:first-child):not(:last-child) {
      border-right-color: @btn-group-border;
      border-left-color: @btn-group-border;

      &:disabled {
        border-color: @btn-default-border;
      }
    }

    .@{btn-prefix-cls}-group &:first-child {
      &:not(:last-child) {
        border-right-color: @btn-group-border;

        &[disabled] {
          border-right-color: @btn-default-border;
        }
      }
    }

    .@{btn-prefix-cls}-group &:last-child:not(:first-child),
    .@{btn-prefix-cls}-group & + & {
      border-left-color: @btn-group-border;

      &[disabled] {
        border-left-color: @btn-default-border;
      }
    }
  }

  &-ghost {
    .btn-ghost;
  }

  &-dashed {
    .btn-dashed;
    line-height: calc(@btn-height-base - 0.04rem);
  }

  &-danger {
    .btn-danger;
  }

  &-circle,
  &-circle-outline {
    .btn-circle(@btn-prefix-cls);

    & > i.@{iconfont-css-prefix} {
      margin: 0;
    }
  }

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

  .@{iconfont-css-prefix} {
    transition: margin-left @animation-duration-slow @ease-in-out;
  }

  &&-loading:not(&-circle):not(&-circle-outline):not(&-icon-only) {
    pointer-events: none;
  }

  &-group {
    .btn-group(@btn-prefix-cls);
  }

  &-icon-only:not(&-circle):not(&-circle-outline) {
    padding-right: 0.08rem;
    padding-left: 0.08rem;
  }

  &:focus-visible > span,
  &:active > span {
    position: relative;
  }

  &-clicked::after {
    position: absolute;
    top: -0.01rem;
    right: -0.01rem;
    bottom: -0.01rem;
    left: -0.01rem;
    display: block;
    border: 0 solid @primary-color;
    border-radius: inherit;
    opacity: 0.4;
    content: '';
  }

  &-danger&-clicked::after {
    border-color: @btn-danger-color;
  }

  &-background-ghost {
    color: #fff;
    background: transparent !important;
    border-color: #fff;
  }

  &-background-ghost&-primary {
    .button-variant-ghost(@btn-primary-bg);
  }

  &-background-ghost&-danger {
    .button-variant-ghost(@btn-danger-color);
  }

  &-two-chinese-chars::first-letter {
    letter-spacing: 0.34em;
  }

  &-two-chinese-chars > * {
    margin-right: -0.34em;
    letter-spacing: 0.34em;
  }

  &-raised {
    box-shadow: @btn-box-shadow;
    transition: background 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
    box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;

    &:not([disabled]):active {
      box-shadow: @btn-active-box-shadow;
    }
  }

  &-flat&-loading {
    background: rgba(0, 0, 0, 0.04);
    box-shadow: @btn-active-box-shadow;
  }

  &-raised&-loading {
    box-shadow: @btn-active-box-shadow;
  }

  &-flat {
    &:hover {
      background: @btn-hover-default-color;
    }
  }
}

@keyframes buttonEffect {
  to {
    top: -0.06rem;
    right: -0.06rem;
    bottom: -0.06rem;
    left: -0.06rem;
    border-width: 0.06rem;
    opacity: 0;
  }
}

a.@{btn-prefix-cls} {
  line-height: calc(@btn-height-base - 0.02rem);

  &-lg {
    line-height: calc(@btn-height-lg - 0.02rem);
  }

  &-sm {
    line-height: calc(@btn-height-sm - 0.02rem);
  }
}

@keyframes btn-loading {
  0% {
    transform: scale(0.7);
    opacity: 0.9;
  }
  33.3% {
    transform: scale(1);
    opacity: 1;
  }
  66.6% {
    transform: scale(0.7);
    opacity: 0.9;
  }
  100% {
    transform: scale(0.7);
    opacity: 0.9;
  }
}