diff options
author | Humberto Alfonso Díaz <humberto.alfonso@asvito.es> | 2019-07-01 12:10:15 +0200 |
---|---|---|
committer | Humberto Alfonso Díaz <humberto.alfonso@asvito.es> | 2019-07-01 12:10:15 +0200 |
commit | e5b45e034eb954c10bc545f72e7e0c986c1e3fd1 (patch) | |
tree | b16d12a4b7143bf382d34d8d4af8431ed8bbd84f /src/styles | |
parent | aac66099e68d635cbb5945366e00232abf868bdb (diff) |
FUNCT Add custom icons with animation
Diffstat (limited to 'src/styles')
-rw-r--r-- | src/styles/app.scss | 1 | ||||
-rw-r--r-- | src/styles/main.scss | 22 | ||||
-rw-r--r-- | src/styles/svg.scss | 18 |
3 files changed, 19 insertions, 22 deletions
diff --git a/src/styles/app.scss b/src/styles/app.scss index f08ff56..5e7fbd4 100644 --- a/src/styles/app.scss +++ b/src/styles/app.scss @@ -4,6 +4,5 @@ $colors: ( ); @import "main.scss"; -@import "svg.scss"; @import "portrait.scss"; @import "landscape.scss";
\ No newline at end of file diff --git a/src/styles/main.scss b/src/styles/main.scss index a72b94b..2fcff94 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -8,6 +8,20 @@ html { -webkit-overflow-scrolling: touch; } +@-webkit-keyframes animation { + from { + opacity: 0; + transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + } + + 60% { + opacity: 1; + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + } +} + body { font-size: 1.2rem; font-family: Arial; @@ -26,16 +40,18 @@ body { color: map-get($colors, font); text-decoration: none; + -webkit-animation-name: animation; + -webkit-animation-duration: 2s; + .icon { - width: 100%; - height: 100%; + width: 70%; + margin: 5% 15%; } .name { width: 100%; text-align: center; text-transform: uppercase; - margin-top: -20%; } } } diff --git a/src/styles/svg.scss b/src/styles/svg.scss deleted file mode 100644 index 2aa0441..0000000 --- a/src/styles/svg.scss +++ /dev/null @@ -1,18 +0,0 @@ -body { - svg { - path, - polygon, - linearGradient, - rect { - fill: map-get($colors, primary) !important; - } - - circle { - fill: none !important; - } - - text { - display: none !important; - } - } -}
\ No newline at end of file |