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