javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2026-03-13 07:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

style(components): [button] focus-visible (#8224)

Browse Source 
* style(components): [button] link-button add focus/focus-visible/active
This commit is contained in:
Xc
2022-06-12 15:43:15 +08:00
committed by GitHub
parent ab88ec505a
commit 1702a20214
3 changed files with 18 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -59,8 +59,7 @@ $button-icon-span-gap: map.merge(
}
&:focus-visible {
border-color: transparent;
outline: 2px solid getCssVar('button', 'border-color');
outline: 2px solid getCssVar('button', 'outline-color');
outline-offset: 1px;
}
@@ -170,8 +169,7 @@ $button-icon-span-gap: map.merge(
}
&:focus-visible {
border-color: transparent;
outline: 2px solid getCssVar('button', 'border-color');
outline: 2px solid getCssVar('button', 'outline-color');
outline-offset: 1px;
}
@@ -207,7 +205,8 @@ $button-icon-span-gap: map.merge(
padding: 2px;
height: auto;
&:hover {
&:hover,
&:focus {
color: getCssVar('button', 'hover', 'link-text-color');
}
@@ -225,6 +224,7 @@ $button-icon-span-gap: map.merge(
}
&:active {
color: getCssVar('button', 'active-color');
border-color: transparent;
background-color: transparent;
}

3
packages/theme-chalk/src/common/var.scss
View File

@@ -643,6 +643,9 @@ $button: map.merge(
'active-text-color': getCssVar('button-hover-text-color'),
'active-border-color': getCssVar('color-primary'),
'active-bg-color': getCssVar('button', 'hover-bg-color'),
'outline-color': getCssVar('color-primary', 'light-5'),
'hover-link-text-color': getCssVar('color-info'),
'active-color': getCssVar('text-color', 'primary'),
),
$button
);

10
packages/theme-chalk/src/mixins/_button.scss
View File

@@ -77,6 +77,16 @@
'color',
$type,
),
'outline-color': (
'color',
$type,
'light-5',
),
'active-color': (
'color',
$type,
'dark-2',
),
),
'hover': (
'text-color': (