button组件调整样式定义

master
yutent 2023-08-03 17:43:07 +08:00
parent 1e9264c452
commit 07d9e1a08e
1 changed files with 22 additions and 7 deletions

View File

@ -56,7 +56,7 @@ class Button extends Component {
border: 1px solid transparent;
border-radius: inherit;
white-space: nowrap;
background: #fff;
background: var(--wc-button-background, #fff);
font-size: inherit;
font-family: inherit;
outline: none;
@ -168,18 +168,33 @@ class Button extends Component {
@loop $t, $c in $colors {
:host([type='#{$t}']) {
button {
color: var(--color-#{$c}-2);
border-color: var(--color-#{$c}-1);
color: var(--wc-button-color, var(--color-#{$c}-2));
border-color: var(--wc-button-border-color, var(--color-#{$c}-1));
&:hover {
color: var(--color-#{$c}-1);
border-color: var(--color-#{$c}-2);
color: var(--wc-button-color-hover, var(--color-#{$c}-1));
border-color: var(
--wc-button-border-color-hover,
var(--color-#{$c}-2)
);
background: var(
--wc-button-background-hover,
var(--wc-button-background, #fff)
);
}
&:active {
color: var(--color-#{$c}-3);
color: var(--wc-button-color-active, var(--color-#{$c}-3));
background: var(
--wc-button-background-active,
var(--wc-button-background, #fff)
);
}
&:disabled {
color: var(--color-#{$c}-2);
color: var(--wc-button-color-disabled, var(--color-#{$c}-2));
background: var(
--wc-button-background-disabled,
var(--wc-button-background, #fff)
);
}
}