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

css: refactor <button> and <input> element styling.

Browse Source 
* Style <button> and <input> elements explicitly instead of relying on browser defaults.
* Style jquery ui buttons the same way as regular buttons.
* Add color variables so we can restyle form inputs in dark mode.
This commit is contained in:
evazion
2019-09-19 02:12:03 -05:00
parent 162ca0782a
commit 9359797a00
3 changed files with 50 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
app/javascript/src/styles/common/jquery_ui_custom.scss
View File

@@ -57,8 +57,9 @@ div.ui-dialog {
.ui-button {
margin: 0;
padding: 0.25em 1em;
border: var(--jquery-ui-button-border);
background: var(--jquery-ui-button-background);
border: var(--form-button-border);
background: var(--form-button-background);
color: var(--form-button-text-color);
&.sub {
font-size: 90%;
@@ -68,11 +69,17 @@ div.ui-dialog {
font-size: 90%;
padding: 0.25em 0.5em;
}
}
.ui-button:hover {
box-shadow: var(--jquery-ui-button-hover-box-shadow);
background: var(--jquery-ui-button-hover-background);
&:hover {
box-shadow: var(--form-button-hover-box-shadow);
background: var(--form-button-hover-background);
}
&:active {
box-shadow: var(--form-button-hover-box-shadow);
background: var(--form-button-active-background);
color: var(--form-button-text-color);
}
}
.ui-front {