aboutsummaryrefslogtreecommitdiff
path: root/.config/ags/style/mixins/button.scss
diff options
context:
space:
mode:
authorsrdusr <trevorgray@srdusr.com>2024-06-13 13:11:05 +0200
committersrdusr <trevorgray@srdusr.com>2024-06-13 13:11:05 +0200
commitd0fbb19623e4fb6097e1ff3ee49c6a76a0928d0e (patch)
tree937531ddf423d3935c6e20c8a9227e39ce782241 /.config/ags/style/mixins/button.scss
parent4ccbe0270c25ecab492508b5b0209ae53b9c35bd (diff)
downloaddotfiles-d0fbb19623e4fb6097e1ff3ee49c6a76a0928d0e.tar.gz
dotfiles-d0fbb19623e4fb6097e1ff3ee49c6a76a0928d0e.zip
Add ags
Diffstat (limited to '.config/ags/style/mixins/button.scss')
-rw-r--r--.config/ags/style/mixins/button.scss70
1 files changed, 70 insertions, 0 deletions
diff --git a/.config/ags/style/mixins/button.scss b/.config/ags/style/mixins/button.scss
new file mode 100644
index 0000000..79ec275
--- /dev/null
+++ b/.config/ags/style/mixins/button.scss
@@ -0,0 +1,70 @@
+@mixin button-focus() {
+ box-shadow: inset 0 0 0 $border-width $primary-bg;
+ background-color: $hover-bg;
+ color: $hover-fg;
+}
+
+@mixin button-hover() {
+ box-shadow: inset 0 0 0 $border-width $border-color;
+ background-color: $hover-bg;
+ color: $hover-fg;
+}
+
+@mixin button-active() {
+ box-shadow: inset 0 0 0 $border-width $border-color;
+ background-image: $active-gradient;
+ background-color: $primary-bg;
+ color: $primary-fg;
+}
+
+@mixin button-disabled() {
+ box-shadow: none;
+ background-color: transparent;
+ color: transparentize($fg, 0.7);
+}
+
+@mixin button($flat: false, $reactive: true, $radius: $radius, $focusable: true) {
+ all: unset;
+ transition: $transition;
+ border-radius: $radius;
+ color: $fg;
+
+ @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-bg;
+ }
+ }
+ }
+
+ &:disabled {
+ @include button-disabled;
+ }
+}