flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Rework a little the toggle buttons animations

Browse Source
This commit is contained in:
Félix Péault
2020-03-02 22:25:31 +01:00
parent 905fbb3bfe
commit 6a58938e71
2 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/style/_animations.scss
View File

@@ -174,19 +174,19 @@
// List // List
@keyframes layoutListOdd { @keyframes layoutListOdd {
0% { transform: translateX(0); } 0% { transform: translateX(0); }
100% { transform: translateX(4px); } 50% { transform: translateX(2px); }
} }
@keyframes layoutListEven { @keyframes layoutListEven {
0% { transform: translateX(0); } 0% { transform: translateX(0); }
100% { transform: translateX(-4px); } 50% { transform: translateX(-4px); }
} }
// Grid // Grid
@keyframes layoutGridOdd { @keyframes layoutGridOdd {
0% { transform: translateY(0); } 0% { transform: translateY(0); }
100% { transform: translateY(3px); } 50% { transform: translateY(2px); }
} }
@keyframes layoutGridEven { @keyframes layoutGridEven {
0% { transform: translateY(0); } 0% { transform: translateY(0); }
100% { transform: translateY(-3px); } 50% { transform: translateY(-3px); }
} }

8
src/style/atoms/_toggle.scss
View File

@@ -54,19 +54,19 @@
// List icon // List icon
&[data-layout="list"]:hover { &[data-layout="list"]:hover {
rect:nth-of-type(even) { rect:nth-of-type(even) {
animation: layoutListEven 400ms $ease-cubic infinite alternate forwards; animation: layoutListEven 600ms $ease-cubic infinite alternate forwards;
} }
rect:nth-of-type(odd) { rect:nth-of-type(odd) {
animation: layoutListOdd 400ms $ease-cubic infinite alternate forwards; animation: layoutListOdd 600ms $ease-cubic infinite alternate forwards;
} }
} }
// Grid icon // Grid icon
&[data-layout="grid"]:hover { &[data-layout="grid"]:hover {
rect:nth-of-type(even) { rect:nth-of-type(even) {
animation: layoutGridEven 400ms $ease-cubic infinite alternate forwards; animation: layoutGridEven 600ms $ease-cubic infinite alternate forwards;
} }
rect:nth-of-type(odd) { rect:nth-of-type(odd) {
animation: layoutGridOdd 400ms $ease-cubic infinite alternate forwards; animation: layoutGridOdd 600ms $ease-cubic infinite alternate forwards;
} }
} }
} }