summaryrefslogtreecommitdiffstats
path: root/src/styles
diff options
context:
space:
mode:
authorHumberto Alfonso Díaz <humberto.alfonso@asvito.es>2019-07-01 12:10:15 +0200
committerHumberto Alfonso Díaz <humberto.alfonso@asvito.es>2019-07-01 12:10:15 +0200
commite5b45e034eb954c10bc545f72e7e0c986c1e3fd1 (patch)
treeb16d12a4b7143bf382d34d8d4af8431ed8bbd84f /src/styles
parentaac66099e68d635cbb5945366e00232abf868bdb (diff)
FUNCT Add custom icons with animation
Diffstat (limited to 'src/styles')
-rw-r--r--src/styles/app.scss1
-rw-r--r--src/styles/main.scss22
-rw-r--r--src/styles/svg.scss18
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