yqcloud-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: ~"@{ant-prefix}-btn";

// 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;
  // Make sure that the target of Button's click event always be `button`
  // Ref: https://github.com/ant-design/ant-design/issues/7034

  > i.icon {
    pointer-events: none;
    display: inline-block;
    vertical-align: top;
    line-height: inherit;
  }
  > span {
    display: inline-block;
  }
  > i.icon + span,
  > span + i.icon {
    margin-left: 4px;
  }
  > div.btn-loading {
    display: inline-block;
    width: 32px;
    margin-right: 4px;

    > span {
      background: #000;
      border-color: #000;
      display: inline-block;
      border-radius: 50%;
      width: 7px;
      height: 7px;
    }
    .dot1 {
      opacity: 1;
      transform: scale(1);
      animation: btn-loading .4s cubic-bezier(0.4, 0, 0.2, 1) 0.07s infinite normal;
    }
    .dot2 {
      margin: 0 3px;
      opacity: 0.9;
      transform: scale(0.7);
      animation: btn-loading .4s cubic-bezier(0.4, 0, 0.2, 1) .17s infinite normal;
    }
    .dot3 {
      opacity: 0.9;
      transform: scale(0.7);
      animation: btn-loading .4s cubic-bezier(0.4, 0, 0.2, 1) .27s infinite normal;
    }
  }

  &-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;
    }

    .@{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: @btn-height-base - 4px;
  }

  &-danger {
    .btn-danger;
  }

  &-circle,
  &-circle-outline {
    .btn-circle(@btn-prefix-cls);
    & >i.icon {
      margin: 0;
    }
  }

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

  .@{iconfont-css-prefix} {
    transition: margin-left .3s @ease-in-out;
  }

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

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

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

  // http://stackoverflow.com/a/21281554/3040605
  &:focus > span,
  &:active > span {
    position: relative;
  }

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

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

  &-background-ghost {
    background: transparent !important;
    border-color: #fff;
    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: .34em;
  }

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

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

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

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

  &-border {
    color: @primary-color;
    border: 1px solid @primary-color;

    .@{ripple-prefix-cls} {
      background-color: #E9F5FE;
    }

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

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

  &-raised&-loading {
    box-shadow: @btn-active-box-shadow;
    border-color: #2196f3;
  }

  &-flat {
    border-color: #acb3bf;
    color: @cancel-color;
    &:hover {
      background: @btn-hover-default-color;
    }
  }

  &-orange {
    color: #ff9500;
  }

  &-gules {
    color: #d0021b;
  }
}

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

a.@{btn-prefix-cls} {
  line-height: @btn-height-base - 2px;
  &-lg {
    line-height: @btn-height-lg - 2px;
  }
  &-sm {
    line-height: @btn-height-sm - 2px;
  }
}

@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;
  }
}