@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'); } } }