Proper handling of disabled buttons (#32)

* Proper handling of disabled buttons

* Proper handling of disabled buttons

* Proper handling of disabled buttons

---------

Co-authored-by: Cristobal Andrada <kandrelczyk@gmail.com>
This commit is contained in:
kandrelczyk 2023-12-02 18:15:03 +01:00 committed by GitHub
parent c8228aa470
commit cd70d80795
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 3 deletions

View file

@ -12,7 +12,7 @@
user-select: none;
}
.thaw-button:hover {
.thaw-button:hover:not(.thaw-button--disabled) {
border-color: var(--thaw-border-color-hover);
background-color: var(--thaw-background-color-hover);
cursor: pointer;
@ -20,6 +20,10 @@
transition: all 0.3s;
}
.thaw-button--disabled:not(.thaw-button--text) {
cursor: not-allowed;
}
.thaw-button:active:not(.thaw-button--disabled) {
transition: all 0.3s;
border-color: var(--thaw-border-color-hover);
@ -31,16 +35,20 @@
border: none;
}
.thaw-button--text:hover {
.thaw-button--text:hover:not(.thaw-button--disabled) {
color: var(--thaw-font-color-hover);
}
.thaw-button--text.thaw-button--disabled {
cursor: not-allowed;
}
.thaw-button--link {
height: auto;
padding: inherit;
}
.thaw-button--link:hover {
.thaw-button--link:hover:not(.thaw-button--disabled) {
color: var(--thaw-font-color-hover);
}

View file

@ -144,6 +144,7 @@ pub fn Button(
class=("thaw-button--round", move || round.get())
class=("thaw-button--disabled", move || disabled.get())
style=move || format!("{}{}", css_vars.get(), style.get())
disabled=move || disabled.get()
on:click=on_click
>
<Wave comp_ref=wave_ref/>