vue-ant-patterns/lib/d-icon-button/style/index.less

vue-ant-patterns

@import '../../style/themes/index.less';
@import '../../style/mixins/flex.less';
.icon-button {
  .flex;
  .flex-center;
  padding: 0 6px;
  height: @btn-height-base;
  // width: @btn-height-base;
  border-radius: 3px;
  font-size: 20px;
  user-select: none;
  background: none !important;
  border: none;
  cursor: pointer;
  line-height: 1;

  &-lg,
  &.ant-btn-lg {
    height: @btn-height-lg;
    font-size: 20px + 6px !important;
    padding: 0 7px !important;
  }
  &-sm,
  &.ant-btn-sm {
    height: @btn-height-sm-md;
    font-size: 20px - 6px !important;
    padding: 0 6px !important;
  }
  &-xs,
  &.ant-btn-xs {
    height: @btn-height-sm;
    font-size: 20px - 8px !important;
    padding: 0 6px !important;
  }
  &-circle,
  &.ant-btn-circle {
    border-radius: 50%;
    width: @btn-height-base;
  }

  &-lg&-circle {
    width: @btn-height-lg;
  }
  &-sm&-circle {
    width: @btn-height-sm;
  }

  .acme-icon,
  .anticon {
    line-height: 0;
  }
  .ant-badge {
    font-size: 20px;
  }
  &:hover,
  &:focus:hover {
    background: rgba(0, 0, 0, 0.25);
    .anticon,
    .acme-icon {
      // color: @text-color-blue-light !important;
      color: @primary-5 !important;
    }
  }
  &:focus {
    background: none;
  }
  &:active,
  &:focus {
    outline: 0;
  }

  &:active,
  &.active {
    // background: @primary-7;
    color: @primary-7 !important;
    .anticon,
    .acme-icon {
      // color: @text-color-blue-light !important;
      color: @primary-7 !important;
    }
  }
  &[disabled],
  &.disabled {
    &,
    &:hover,
    &:focus,
    &:active,
    &.active {
      background: @btn-disable-bg;
      color: @btn-disable-color;
      text-shadow: none;
      box-shadow: none;
      .anticon,
      .acme-icon {
        // color: @text-color-blue-light !important;
        color: @btn-disable-color !important;
      }
    }
  }

  &.actived {
    color: @link-color;
  }

  &.no-bg {
    &:hover {
      color: @primary-7;
    }
  }
}