64 lines
1.3 KiB
SCSS
64 lines
1.3 KiB
SCSS
|
|
@mixin button-color($color, $background-color, $hover-color: darken($background-color, 10%)) {
|
|
|
|
&:not(.button-ghost) {
|
|
|
|
color: $color;
|
|
background-color: $background-color;
|
|
|
|
&:hover {
|
|
color: $color;
|
|
background-color: $hover-color;
|
|
}
|
|
}
|
|
|
|
/* .button-ghost& {
|
|
border: 2px solid $background-color;
|
|
color: $background-color;
|
|
} */
|
|
}
|
|
|
|
@mixin button-variant($color, $background, $hover: darken($background, 10%)) {
|
|
|
|
color: $color;
|
|
background-color: $background;
|
|
|
|
&:hover,
|
|
&:active {
|
|
color: $color;
|
|
background-color: $hover;
|
|
}
|
|
}
|
|
|
|
@mixin button-outline-variant($color, $background) {
|
|
|
|
box-shadow: inset 0 0 0 2px $background;
|
|
color: $background;
|
|
|
|
&:hover,
|
|
&:active {
|
|
color: $color;
|
|
background-color: $background;
|
|
}
|
|
}
|
|
|
|
@mixin button-circle($width) {
|
|
display: block;
|
|
text-align: center;
|
|
width: $width;
|
|
height: $width;
|
|
line-height: $width;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
// Rectangular button.
|
|
@mixin rect-button($color, $hover-color: darken($color, 20%)) {
|
|
border-radius: 0;
|
|
border: 2px solid $color;
|
|
color: $color;
|
|
&:hover {
|
|
color: $hover-color;
|
|
border-color: $hover-color;
|
|
}
|
|
}
|
|
|