diff --git a/src/components/atoms/IconEarth.svelte b/src/components/atoms/IconEarth.svelte index 9b48c5c..be5ccd2 100644 --- a/src/components/atoms/IconEarth.svelte +++ b/src/components/atoms/IconEarth.svelte @@ -1,10 +1,36 @@ - - + {#if animate} + + + + + + + + + + + + + + {:else} + + + + + + + + + + + {/if} \ No newline at end of file diff --git a/src/routes/photos.svelte b/src/routes/photos.svelte index 4ed3a65..17cb8e1 100644 --- a/src/routes/photos.svelte +++ b/src/routes/photos.svelte @@ -410,7 +410,7 @@ on:change={handleSortChange} value={filterSort} > - + diff --git a/src/style/_animations.scss b/src/style/_animations.scss index 126ba00..564270b 100644 --- a/src/style/_animations.scss +++ b/src/style/_animations.scss @@ -10,3 +10,15 @@ box-shadow: 0 0 0 32px rgba(#fff, 0); } } + + +/* +** Earth icon +*/ +.anim-earth { + animation: moveEarth 3.5s linear infinite; +} +@keyframes moveEarth { + 0% { transform: translate3d(0,0,0); } + 100% { transform: translate3d(-88px, 0, 0); } +} \ No newline at end of file diff --git a/src/style/atoms/_button.scss b/src/style/atoms/_button.scss index 6f8364d..82c4cbd 100644 --- a/src/style/atoms/_button.scss +++ b/src/style/atoms/_button.scss @@ -22,11 +22,17 @@ img, svg { display: block; margin-right: 12px; + color: $color-gray; + transition: color 0.3s; } // Hover effect &:not([disabled]):hover { background: $color-secondary; + + svg { + color: #fff; + } } .text-split__line { &:last-child { diff --git a/src/style/atoms/_icon.scss b/src/style/atoms/_icon.scss new file mode 100644 index 0000000..dd83213 --- /dev/null +++ b/src/style/atoms/_icon.scss @@ -0,0 +1,8 @@ +.icon { + // Earth icon + &-earth { + width: 24px; + height: 24px; + color: $color-gray; + } +} \ No newline at end of file diff --git a/src/style/pages/_homepage.scss b/src/style/pages/_homepage.scss index 7597c6e..e051365 100644 --- a/src/style/pages/_homepage.scss +++ b/src/style/pages/_homepage.scss @@ -59,7 +59,9 @@ margin-bottom: 40px; svg { - transition: fill 0.3s; + width: 24px; + height: 24px; + color: $color-gray; } .text-split__line { &:last-child { @@ -70,10 +72,6 @@ // Hover &:hover { background-color: $color-primary-tertiary20; - - svg { - fill: $color-tertiary; - } } } } diff --git a/src/style/pages/_photos.scss b/src/style/pages/_photos.scss index cb6337e..9f1a8be 100644 --- a/src/style/pages/_photos.scss +++ b/src/style/pages/_photos.scss @@ -102,9 +102,9 @@ height: 20px; overflow: hidden; margin-right: 12px; - fill: #fff; + color: #fff; border-radius: 100%; - transition: fill 0.2s; + transition: color 0.3s; @include bp (sm) { width: 26px; @@ -145,7 +145,7 @@ // Hover li:hover { .icon { - fill: $color-secondary-light; + color: $color-secondary-light; } .select { background-color: $color-primary-tertiary20; diff --git a/src/style/style.scss b/src/style/style.scss index 22fb60a..9750ae3 100644 --- a/src/style/style.scss +++ b/src/style/style.scss @@ -39,6 +39,7 @@ @import "atoms/button"; @import "atoms/button-circle"; @import "atoms/button-cart"; +@import "atoms/icon"; @import "atoms/badge"; @import "atoms/arrow"; @import "atoms/discover";