mirror of
https://github.com/Theaninova/TheaninovOS.git
synced 2025-12-16 05:26:20 +00:00
70 lines
1.3 KiB
SCSS
70 lines
1.3 KiB
SCSS
@mixin button-focus() {
|
|
box-shadow: inset 0 0 0 $border-width $accent;
|
|
background-color: $hover;
|
|
color: $hover-fg;
|
|
}
|
|
|
|
@mixin button-hover() {
|
|
box-shadow: inset 0 0 0 $border-width $border-color;
|
|
background-color: $hover;
|
|
color: $hover-fg;
|
|
}
|
|
|
|
@mixin button-active() {
|
|
box-shadow: inset 0 0 0 $border-width $border-color;
|
|
background-image: $active-gradient;
|
|
background-color: $accent;
|
|
color: $accent-fg;
|
|
}
|
|
|
|
@mixin button-disabled() {
|
|
box-shadow: none;
|
|
background-color: transparent;
|
|
color: transparentize($fg-color, 0.7);
|
|
}
|
|
|
|
@mixin button($flat: false, $reactive: true, $radii: $radii, $focusable: true) {
|
|
all: unset;
|
|
transition: $transition;
|
|
border-radius: $radii;
|
|
color: $fg-color;
|
|
|
|
@if $flat {
|
|
background-color: transparent;
|
|
background-image: none;
|
|
box-shadow: none;
|
|
} @else {
|
|
background-color: $widget-bg;
|
|
box-shadow: inset 0 0 0 $border-width $border-color;
|
|
}
|
|
|
|
@if $reactive {
|
|
@if $focusable {
|
|
&:focus {
|
|
@include button-focus;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
@include button-hover;
|
|
}
|
|
|
|
&:active,
|
|
&.on,
|
|
&.active,
|
|
&:checked {
|
|
@include button-active;
|
|
|
|
&:hover {
|
|
box-shadow:
|
|
inset 0 0 0 $border-width $border-color,
|
|
inset 0 0 0 99px $hover;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:disabled {
|
|
@include button-disabled;
|
|
}
|
|
}
|