button组件调整样式定义
parent
1e9264c452
commit
07d9e1a08e
|
@ -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)
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue