cip-components/cip-button/index.less

// el-button 按钮点击后focus状态不变问题处理
.cip-button{
  /* 非朴素按钮 */
  &.el-button--default{
    &:focus{
      color: #606266;
      border-color: #dcdfe6;
      background-color: #fff;
      &:hover{
        color: #409eff;
        border-color: #c6e2ff;
        background-color: #ecf5ff;
      }
    }
  }
  &.el-button--primary{
    &:focus{
      border-color: #409eff;
      background-color: #409eff;
      &:hover{
        border-color: #66b1ff;
        background-color: #66b1ff;
      }
    }
  }
  &.el-button--success{
    &:focus{
      border-color: #67c23a;
      background-color: #67c23a;
      &:hover{
        border-color: #95d475;
        background-color: #95d475;
      }
    }
  }
  &.el-button--info{
    &:focus{
      border-color: #909399;
      background-color: #909399;
      &:hover{
        border-color: #b1b3b8;
        background-color: #b1b3b8;
      }
    }
  }
  &.el-button--warning{
    &:focus{
      border-color: #e6a23c;
      background-color: #e6a23c;
      &:hover{
        border-color: #eebe77;
        background-color: #eebe77;
      }
    }
  }
  &.el-button--danger{
    &:focus{
      border-color: #f56c6c;
      background-color: #f56c6c;
      &:hover{
        border-color: #f89898;
        background-color: #f89898;
      }
    }
  }
  /* 朴素按钮 */
  &.el-button--default{
    &.is-plain:focus{
      color: #606266;
      border-color: #dcdfe6;
      background-color: #fff;
      &:hover{
        color: #409eff;
        border-color: #409eff;
        background-color: #fff;
      }
    }
  }
  &.el-button--primary{
    &.is-plain:focus{
      color: #409eff;
      border-color: #b3d8ff;
      background-color: #ecf5ff;
      &:hover{
        color: #fff;
        border-color: #409eff;
        background-color: #409eff;
      }
    }
  }
  &.el-button--success{
    &.is-plain:focus{
      color: #67c23a;
      border-color: #c2e7b0;
      background-color: #f0f9eb;
      &:hover{
        color: #fff;
        border-color: #67c23a;
        background-color: #67c23a;
      }
    }
  }
  &.el-button--info{
    &.is-plain:focus{
      color: #909399;
      border-color: #d3d4d6;
      background-color: #f4f4f5;
      &:hover{
        color: #fff;
        border-color: #909399;
        background-color: #909399;
      }
    }
  }
  &.el-button--warning{
    &.is-plain:focus{
      color: #e6a23c;
      border-color: #f5dab1;
      background-color: #fdf6ec;
      &:hover{
        color: #fff;
        border-color: #e6a23c;
        background-color: #e6a23c;
      }
    }
  }
  &.el-button--danger{
    &.is-plain:focus{
      color: #f56c6c;
      border-color: #fbc4c4;
      background-color: #fef0f0;
      &:hover{
        color: #fff;
        border-color: #f56c6c;
        background-color: #f56c6c;
      }
    }
  }
}