frostace / December-UI

A UI Component Library based on VUE

Home Page:https://december-ui.netlify.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Button missing active css && default plain button font color on hover

YH-Shen opened this issue · comments

  1. 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%);
        }
    }
}
  1. 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;
            }
        }