cip-components/styles/cci-stardand/button.less

@import "../variate.less";
// el-button 按钮点击后focus状态不变问题处理
.@{elNamespace}-button{
  font-weight: 400; // 将按钮的字重从500修改为400(Regular)
  padding: 6px 16px;
  &--small{
    padding: 4px 12px;
  }
  &--large{
    font-size: var(~'--@{elNamespace}-font-size-medium');
    padding: 8px 20px;
  }
  & + &{
    margin-left: 8px;
  }
  // 对plain的danger修改，暂时不需要
  //&--danger.is-plain{
  //  --@{elNamespace}-button-bg-color: var(~'--@{elNamespace}-color-white');
  //  --@{elNamespace}-button-text-color: var(~'--@{elNamespace}-color-danger-light-3');
  //  --@{elNamespace}-button-hover-bg-color: var(~'--@{elNamespace}-color-white');
  //  --@{elNamespace}-button-hover-text-color: var(~'--@{elNamespace}-color-danger');
  //  --@{elNamespace}-button-border-color: var(~'--@{elNamespace}-color-danger');
  //  --@{elNamespace}-button-active-border-color: var(~'--@{elNamespace}-color-danger');
  //  --@{elNamespace}-button-active-bg-color: var(~'--@{elNamespace}-color-danger-light-9');
  //  --@{elNamespace}-button-active-text-color: var(~'--@{elNamespace}-color-danger');
  //}
  --@{elNamespace}-disabled-text-color: var(~'--@{elNamespace}-text-color-disabled');
  // UI标准 hover采用light-2(实际使用3), disabled采用light-7(实际使用5), active采用dark-2(实际使用2)
  // :not 以逗号分隔的选择器列表作为参数是实验性的，尚未获得广泛支持。(请勿使用)
  &:not(.is-text):not(.is-link):not(.@{elNamespace}-button:active):not(.@{elNamespace}-button:hover):focus {
    color: var(~'--@{elNamespace}-button-text-color');
    background: var(~'--@{elNamespace}-button-bg-color');
    border-color: var(~'--@{elNamespace}-button-border-color');
    &.is-plain{
      color: var(~'--@{elNamespace}-button-text-color');
      border-color: var(~'--@{elNamespace}-button-border-color');
      background: var(~'--@{elNamespace}-button-bg-color');
    }
  }
  &.is-link.is-disabled{
    color: var(~'--@{elNamespace}-disabled-text-color') !important;
  }
  &.is-link:not(.is-disabled){
    &.@{elNamespace}-button--primary,&.@{elNamespace}-button--danger{
      --@{elNamespace}-button-hover-link-text-color: var(~'--@{elNamespace}-button-text-color');
      &:focus:not(:hover):not(:active){
        color: var(~'--@{elNamespace}-button-text-color');
      }
      &:hover{
        text-decoration: underline;
      }
      &:active{
        text-decoration: underline;
      }
    }

  }

  &:not(.@{elNamespace}-button--primary):not(.@{elNamespace}-button--success):not(.@{elNamespace}-button--warning):not(.@{elNamespace}-button--danger):not(.@{elNamespace}-button--info){
     &:not(.is-link){
       --@{elNamespace}-button-hover-border-color: var(~'--@{elNamespace}-color-primary');
       --@{elNamespace}-button-hover-bg-color: var(~'--@{elNamespace}-fill-color-blank');
       --@{elNamespace}-button-active-bg-color: var(~'--@{elNamespace}-color-primary-light-9');
       --@{elNamespace}-button-disabled-bg-color: var(~'.@{elNamespace}-color-info-light-9');
     }

    &:focus{
      --@{elNamespace}-button-hover-link-text-color: var(~'--@{elNamespace}-button-text-color');
    }
    &:hover{
      --@{elNamespace}-button-hover-link-text-color: var(~'--@{elNamespace}-color-primary');
    }
    &:active{
      --@{elNamespace}-button-active-color: var(~'--@{elNamespace}-color-primary-dark-2');
    }
  }
}