fortytwo/me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

css: add some mild animations to color picker

Browse source 
Signed-off-by: Naman Sood <mail@nsood.in>
This commit is contained in:
Naman Sood 2023-03-11 13:11:22 -05:00
parent 9d29138147
commit 0a0451ee8b
2 changed files with 27 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

14
css/style.css
View file

@ -266,6 +266,16 @@ body.blue-mode {
overflow: scroll; overflow: scroll;
box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.3), 0 0.15rem 1rem rgba(0, 0, 0, 0.1); box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.3), 0 0.15rem 1rem rgba(0, 0, 0, 0.1);
font-size: 1.33rem; font-size: 1.33rem;
opacity: 0;
transform: translateY(-10%);
pointer-events: none;
transition: all 0.2s ease;
display: block;
}
.main dialog.change-color-dialog[open] {
opacity: 1;
transform: translateY(0%);
pointer-events: all;
} }
.main dialog.change-color-dialog h4 { .main dialog.change-color-dialog h4 {
margin: 0 0 1rem; margin: 0 0 1rem;
@ -319,7 +329,9 @@ body.blue-mode {
border: 0; border: 0;
} }
.main dialog.change-color-dialog[open] + button.change-color-button { .main dialog.change-color-dialog[open] + button.change-color-button {
display: none; transition: all 0.2s ease;
opacity: 0;
pointer-events: none;
} }
@media (max-width: 69rem), (orientation: portrait) { @media (max-width: 69rem), (orientation: portrait) {

15
css/style.scss
View file

@ -297,6 +297,17 @@ body {
0 0.15rem 1rem rgba(0, 0, 0, 0.1); 0 0.15rem 1rem rgba(0, 0, 0, 0.1);
font-size: 1.33rem; font-size: 1.33rem;
opacity: 0;
transform: translateY(-10%);
pointer-events: none;
transition: all 0.2s ease;
display: block;
&[open] {
opacity: 1;
transform: translateY(0%);
pointer-events: all;
}
h4 { h4 {
margin: 0 0 1rem; margin: 0 0 1rem;
@ -360,7 +371,9 @@ body {
} }
dialog.change-color-dialog[open] + button.change-color-button { dialog.change-color-dialog[open] + button.change-color-button {
display: none; transition: all 0.2s ease;
opacity: 0;
pointer-events: none;
} }
} }