test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-05 04:37:47 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

style(components): [button] remove focus styles, Fix outline flickering when foucs-visible (#16002)

Browse Source 
* style(components): [button] remove focus styles

* fix: button transition
This commit is contained in:
一只前端汪 2024-03-01 12:18:54 +08:00 committed by GitHub
parent 4f18c6feda
commit 0b48f8148c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 9 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
packages/theme-chalk/src/button.scss
View File

@ -43,8 +43,7 @@ $button-icon-span-gap: map.merge(
border: getCssVar('border');
border-color: getCssVar('button', 'border-color');
&:hover,
&:focus {
&:hover {
color: getCssVar('button', 'hover', 'text-color');
border-color: getCssVar('button', 'hover', 'border-color');
background-color: getCssVar('button', 'hover', 'bg-color');
@ -61,6 +60,7 @@ $button-icon-span-gap: map.merge(
&:focus-visible {
outline: 2px solid getCssVar('button', 'outline-color');
outline-offset: 1px;
transition: outline-offset 0s, outline 0s;
}
> span {
@ -116,8 +116,7 @@ $button-icon-span-gap: map.merge(
@include when(disabled) {
&,
&:hover,
&:focus {
&:hover {
color: getCssVar('button', 'disabled', 'text-color');
cursor: not-allowed;
background-image: none;
@ -164,14 +163,14 @@ $button-icon-span-gap: map.merge(
}
&:not(.is-disabled) {
&:hover,
&:focus {
&:hover {
background-color: getCssVar('fill-color', 'light');
}
&:focus-visible {
outline: 2px solid getCssVar('button', 'outline-color');
outline-offset: 1px;
transition: outline-offset 0s, outline 0s;
}
&:active {
@ -181,8 +180,7 @@ $button-icon-span-gap: map.merge(
@include when(has-bg) {
background-color: getCssVar('fill-color', 'light');
&:hover,
&:focus {
&:hover {
background-color: getCssVar('fill-color');
}
@ -207,8 +205,7 @@ $button-icon-span-gap: map.merge(
padding: 2px;
height: auto;
&:hover,
&:focus {
&:hover {
color: getCssVar('button', 'hover', 'link-text-color');
}
@ -219,8 +216,7 @@ $button-icon-span-gap: map.merge(
}
&:not(.is-disabled) {
&:hover,
&:focus {
&:hover {
border-color: transparent;
background-color: transparent;
}
@ -246,8 +242,7 @@ $button-icon-span-gap: map.merge(
}
&:not(.is-disabled) {
&:hover,
&:focus {
&:hover {
color: getCssVar('color', 'primary', 'light-3');
border-color: transparent;
background-color: transparent;