diff options
| author | srdusr <trevorgray@srdusr.com> | 2024-06-13 13:11:05 +0200 |
|---|---|---|
| committer | srdusr <trevorgray@srdusr.com> | 2024-06-13 13:11:05 +0200 |
| commit | d0fbb19623e4fb6097e1ff3ee49c6a76a0928d0e (patch) | |
| tree | 937531ddf423d3935c6e20c8a9227e39ce782241 /.config/ags/style/mixins/button.scss | |
| parent | 4ccbe0270c25ecab492508b5b0209ae53b9c35bd (diff) | |
| download | dotfiles-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.scss | 70 |
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; + } +} |
