Button missing active css && default plain button font color on hover
YH-Shen opened this issue · comments
- Button missing active css:
Add "@include set-color-with-active($--button-theme-color);" into set-button-styling mixin in button.vue.
Add something like following into presets.scss:
@function get-color-active($--baseColor) {
@if ($--baseColor != #fff) {
@return #ffffff;
} @else {
@return darken($color: $main-color, $amount: 5%);
}
}
@mixin set-color-with-active($--baseColor) {
background-color: $--baseColor;
&:active:not([disabled]) {
outline: none;
color: get-color-active($--baseColor);
@if ($--baseColor == #fff) {
border-color: darken($color: $main-color, $amount: 5%);
} @else {
background-color: darken($color: $--baseColor, $amount: 5%);
border-color: darken($color: $--baseColor, $amount: 5%);
}
}
}
- Default plain button font color on hover:
Problem Path:
set-button-styling mixin in button.vue >> &.is-plain section >>&:hover:not([disabled]) {}
&:hover:not([disabled]) {
background-color: $--button-theme-color;
@if ($--button-theme-color != #ffffff) {
color: white;
/// Add this also:
border-color: $--button-theme-color;
}
//Add this:
@else {
color: $main-color;
border-color: $main-color;
}
}