jaculabilis/danbooru
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

css: fix disabled buttons appearing clickable.

Browse Source 
Fix buttons appearing to be clickable when in the disabled state.

Submit buttons are normally disabled after a form is submitted. Before
these buttons would still look clickable. Now disabled buttons are greyed
out instead of looking the same as normal buttons.
This commit is contained in:
evazion
2022-02-07 18:26:34 -06:00
parent 3f64808432
commit a5b92dc9e6
3 changed files with 17 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/javascript/src/styles/base/010_reset.scss
View File

@@ -34,7 +34,3 @@ ol, ul {
a:focus {
outline: thin dotted;
}
button, input[type="button"], input[type="submit"] {
cursor: pointer;
}

2
app/javascript/src/styles/base/040_colors.css
View File

@@ -129,6 +129,7 @@ html {
--form-input-validation-error-text-color: var(--red-5);
--form-button-text-color: var(--text-color);
--form-button-disabled-text-color: var(--grey-5);
--form-button-background: var(--grey-1);
--form-button-border-color: var(--grey-2);
--form-button-hover-background: var(--grey-0);
@@ -337,6 +338,7 @@ body[data-current-user-theme="dark"] {
--form-input-validation-error-text-color: var(--red-5);
--form-button-text-color: var(--grey-9);
--form-button-disabled-text-color: var(--grey-5);
--form-button-background: var(--grey-2);
--form-button-border-color: var(--grey-4);
--form-button-hover-background: var(--grey-0);

21
app/javascript/src/styles/common/buttons.scss
View File

@@ -13,18 +13,27 @@ input[type="button"], input[type="submit"], button {
border-radius: 3px;
padding: 0.25em 1em;
background: var(--form-button-background);
cursor: pointer;
border: 1px solid var(--form-button-border-color);
background: var(--form-button-background);
color: var(--form-button-text-color);
&:hover {
box-shadow: 0 0 2px var(--form-button-hover-box-shadow-color);
&:disabled {
cursor: wait;
background: var(--form-button-hover-background);
color: var(--form-button-disabled-text-color);
}
&:active {
box-shadow: 0 0 2px var(--form-button-hover-box-shadow-color);
background: var(--form-button-active-background);
&:not(:disabled) {
&:hover {
box-shadow: 0 0 2px var(--form-button-hover-box-shadow-color);
background: var(--form-button-hover-background);
}
&:active {
box-shadow: 0 0 2px var(--form-button-hover-box-shadow-color);
background: var(--form-button-active-background);
}
}
}