modo-mobile/es/button/style/index.less

A mobile UI toolkit, based on React

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

@btn-prefix-cls: ~'@{m-prefix}-button';

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

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

  &:hover,
  &:focus,
  &:active {
    background: #fff;
    text-decoration: none;
  }

  &-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    word-wrap: break-word;
    white-space: nowrap;

    > .@{iconfont-css-prefix} + span,
    > span + .@{iconfont-css-prefix} {
      margin-left: 8px;
    }
  }

  &-primary {
    .btn-primary;
  }

  &-ghost {
    .btn-ghost;
  }

  &-dashed {
    .btn-dashed;
  }

  &-danger {
    .btn-danger;
  }

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

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

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

  &&-loading:before {
    display: block;
  }

  &-inline {
    display: inline-block;
  }

  &-inline:not(&-circle):not(&-circle-outline) {
    width: auto;
  }
}

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