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