123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778 |
- @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(--el-font-size-medium);
- padding: 8px 20px;
- }
- & + &{
- margin-left: 8px;
- }
- // 对plain的danger修改,暂时不需要
- //&--danger.is-plain{
- // --el-button-bg-color: var(--el-color-white);
- // --el-button-text-color: var(--el-color-danger-light-3);
- // --el-button-hover-bg-color: var(--el-color-white);
- // --el-button-hover-text-color: var(--el-color-danger);
- // --el-button-border-color: var(--el-color-danger);
- // --el-button-active-border-color: var(--el-color-danger);
- // --el-button-active-bg-color: var(--el-color-danger-light-9);
- // --el-button-active-text-color: var(--el-color-danger);
- //}
- --el-disabled-text-color: var(--el-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(--el-button-text-color);
- background: var(--el-button-bg-color);
- border-color: var(--el-button-border-color);
- &.is-plain{
- color: var(--el-button-text-color);
- border-color: var(--el-button-border-color);
- background: var(--el-button-bg-color);
- }
- }
- &.is-link.is-disabled{
- color: var(--el-disabled-text-color) !important;
- }
- &.is-link:not(.is-disabled){
- &.@{elNamespace}-button--primary,&.@{elNamespace}-button--danger{
- --el-button-hover-link-text-color: var(--el-button-text-color);
- &:focus:not(:hover):not(:active){
- color: var(--el-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){
- --el-button-hover-border-color: var(--el-color-primary);
- --el-button-hover-bg-color: var(--el-fill-color-blank);
- --el-button-active-bg-color: var(--el-color-primary-light-9);
- --el-button-disabled-bg-color: var(--el-color-info-light-9);
- }
- &:focus{
- --el-button-hover-link-text-color: var(--el-button-text-color);
- }
- &:hover{
- --el-button-hover-link-text-color: var(--el-color-primary);
- }
- &:active{
- --el-button-active-color: var(--el-color-primary-dark-2);
- }
- }
- }
|