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;
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;
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 {
margin: 0 0 1rem;
@ -319,7 +329,9 @@ body.blue-mode {
border: 0;
}
.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) {

15
css/style.scss
View file

@ -297,6 +297,17 @@ body {
0 0.15rem 1rem rgba(0, 0, 0, 0.1);
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 {
margin: 0 0 1rem;
@ -360,7 +371,9 @@ body {
}
dialog.change-color-dialog[open] + button.change-color-button {
display: none;
transition: all 0.2s ease;
opacity: 0;
pointer-events: none;
}
}