kamen
/
graphicek
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improved styling of modals and buttons

This commit is contained in:
Jan Zípek 2022-08-28 20:14:30 +02:00
parent 3c96bfa73e
commit 4b0220027e
Signed by: kamen
GPG Key ID: A17882625B33AC31
3 changed files with 48 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
client/src/assets/components/_button.scss
View File

@ -8,24 +8,29 @@ button {
display: inline-flex;
align-items: center;
justify-content: center;
}
button > .svg-icon {
display: flex;
align-items: center;
margin-top: 1px;
margin-right: 0.2rem;
}
&:hover {
background-color: var(--button-hover-bg-color);
color: var(--button-hover-fg-color);
}
button:hover {
background-color: var(--button-hover-bg-color);
color: var(--button-hover-fg-color);
}
&.icon {
padding: 0.25rem;
button.icon {
padding: 0.25rem;
}
> .svg-icon {
margin-right: 0;
}
}
button.icon > .svg-icon {
margin-right: 0;
}
&.cancel {
background-color: var(--button-cancel-bg-color);
color: var(--button-cancel-fg-color);
}
> .svg-icon {
display: flex;
align-items: center;
margin-top: 1px;
margin-right: 0.2rem;
}
}

20
client/src/assets/components/_modal.scss
View File

@ -17,11 +17,23 @@
&.confirm {
background-color: var(--confirm-overlay-bg-color);
.inner {
width: 25rem;
}
.actions {
margin-top: 1rem;
> button {
margin-left: 0.5rem;
}
}
}
.inner {
background-color: var(--box-bg-color);
color: var(--box-fg-color);
background-color: var(--modal-bg-color);
color: var(--modal-fg-color);
margin-top: 5vh;
box-shadow: var(--box-shadow);
border-radius: 0.5rem;
@ -40,6 +52,10 @@
align-items: center;
justify-content: flex-end;
button {
padding: 0.5rem 1rem;
}
.remove {
margin-right: auto;
background-color: var(--button-remove-bg-color);

11
client/src/assets/style.scss
View File

@ -20,8 +20,10 @@
--box-action-fg-color: #666;
--box-preview-bg-color: #3988ff;
--box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
--modal-overlay-bg-color: rgba(0, 0, 0, 0.5);
--confirm-overlay-bg-color: rgba(0, 0, 0, 0.8);
--modal-overlay-bg-color: rgba(0, 0, 0, 0.3);
--modal-bg-color: #222;
--modal-fg-color: #eee;
--confirm-overlay-bg-color: rgba(0, 0, 0, 0.5);
--graph-axis-fg-color: #777;
--graph-grid-color: rgb(238, 238, 238);
--link-fg-color: #3988ff;
@ -37,13 +39,16 @@
--header-spacer-color: #333;
--header-shadow: none;
--box-bg-color: #111;
--modal-bg-color: #222;
--box-fg-color: #eee;
--box-shadow: none;
--box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.3);
--graph-axis-fg-color: #666;
--graph-grid-color: rgb(25, 25, 25);
--button-bg-color: #0b3c9f;
--button-fg-color: #eee;
--button-cancel-fg-color: #ccc;
--modal-overlay-bg-color: rgba(128, 128, 128, 0.3);
--confirm-overlay-bg-color: rgba(128, 128, 128, 0.5);
}
select,