From e5b45e034eb954c10bc545f72e7e0c986c1e3fd1 Mon Sep 17 00:00:00 2001
From: Humberto Alfonso Díaz <humberto.alfonso@asvito.es>
Date: Mon, 1 Jul 2019 12:10:15 +0200
Subject: FUNCT Add custom icons with animation

---
 src/styles/app.scss  |  1 -
 src/styles/main.scss | 22 +++++++++++++++++++---
 src/styles/svg.scss  | 18 ------------------
 3 files changed, 19 insertions(+), 22 deletions(-)
 delete mode 100644 src/styles/svg.scss

(limited to 'src/styles')

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
-- 
cgit 1.2.3-korg