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
@keyframes layoutListOdd {
0% { transform: translateX(0); }
100% { transform: translateX(4px); }
50% { transform: translateX(2px); }
}
@keyframes layoutListEven {
0% { transform: translateX(0); }
100% { transform: translateX(-4px); }
50% { transform: translateX(-4px); }
}
// Grid
@keyframes layoutGridOdd {
0% { transform: translateY(0); }
100% { transform: translateY(3px); }
50% { transform: translateY(2px); }
}
@keyframes layoutGridEven {
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
&[data-layout="list"]:hover {
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) {
animation: layoutListOdd 400ms $ease-cubic infinite alternate forwards;
animation: layoutListOdd 600ms $ease-cubic infinite alternate forwards;
}
}
// Grid icon
&[data-layout="grid"]:hover {
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) {
animation: layoutGridOdd 400ms $ease-cubic infinite alternate forwards;
animation: layoutGridOdd 600ms $ease-cubic infinite alternate forwards;
}
}
}