From a8de59132163718fcb1fba47b5e396dcac7355b6 Mon Sep 17 00:00:00 2001 From: Gabriel Albo Date: Tue, 1 Mar 2016 15:17:54 -0300 Subject: Adding new svg and dummy animation Issue #238 --- web-ui/app/scss/_mixins.scss | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) (limited to 'web-ui/app/scss/_mixins.scss') diff --git a/web-ui/app/scss/_mixins.scss b/web-ui/app/scss/_mixins.scss index a623366d..c4cc234b 100644 --- a/web-ui/app/scss/_mixins.scss +++ b/web-ui/app/scss/_mixins.scss @@ -308,4 +308,35 @@ } } +@mixin logo { + @keyframes hideshow { + 0% { fill: #2ba6cb; } + 25% { opacity: 1; } + 100% { opacity: 0; } +} + +.logo-part { + animation: hideshow 0.6s ease infinite; + opacity: 1; + + &:nth-child(2) { + opacity: 0; + animation-delay: 0.1s; + } + + &:nth-child(3) { + animation-delay: 0.2s; + } + &:nth-child(4) { + animation-delay: 0.3s; + } + &:nth-child(5) { + animation-delay: 0.4s; + } + &:nth-child(6) { + animation-delay: 0.5s; + } +} +} + @include tt-hint; -- cgit v1.2.3 From da63a4c8e563a330c54ee73dcc0bc3d8c8b46fc3 Mon Sep 17 00:00:00 2001 From: Gabriel Albo Date: Tue, 1 Mar 2016 19:08:24 -0300 Subject: Adding sass function to lighten the logo color for the spinner Issue #238 --- web-ui/app/scss/_mixins.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'web-ui/app/scss/_mixins.scss') diff --git a/web-ui/app/scss/_mixins.scss b/web-ui/app/scss/_mixins.scss index c4cc234b..4360b886 100644 --- a/web-ui/app/scss/_mixins.scss +++ b/web-ui/app/scss/_mixins.scss @@ -310,7 +310,7 @@ @mixin logo { @keyframes hideshow { - 0% { fill: #2ba6cb; } + 0% { fill: lighten($logo_color, 30); } 25% { opacity: 1; } 100% { opacity: 0; } } -- cgit v1.2.3 From bfa9686b400ba09f8eec59046bc907baf7c229a6 Mon Sep 17 00:00:00 2001 From: Gislene Pereira Date: Thu, 10 Mar 2016 14:57:12 -0300 Subject: Creating events to spin and stop spinning the logo. Logo will spin when user selects another tag on the left bar and stops when the list of mails is rendered. Issue #238 --- web-ui/app/scss/_mixins.scss | 52 ++++++++++++++++++++++++-------------------- 1 file changed, 28 insertions(+), 24 deletions(-) (limited to 'web-ui/app/scss/_mixins.scss') diff --git a/web-ui/app/scss/_mixins.scss b/web-ui/app/scss/_mixins.scss index 4360b886..6d0bb1a3 100644 --- a/web-ui/app/scss/_mixins.scss +++ b/web-ui/app/scss/_mixins.scss @@ -310,33 +310,37 @@ @mixin logo { @keyframes hideshow { - 0% { fill: lighten($logo_color, 30); } - 25% { opacity: 1; } - 100% { opacity: 0; } -} - -.logo-part { - animation: hideshow 0.6s ease infinite; - opacity: 1; - - &:nth-child(2) { - opacity: 0; - animation-delay: 0.1s; - } + 0% { fill: lighten($logo_color, 30); } + 25% { opacity: 1; } + 100% { opacity: 0; } + } - &:nth-child(3) { - animation-delay: 0.2s; - } - &:nth-child(4) { - animation-delay: 0.3s; - } - &:nth-child(5) { - animation-delay: 0.4s; + .logo-part-animation-off { + animation: none; } - &:nth-child(6) { - animation-delay: 0.5s; + + .logo-part-animation-on { + animation: hideshow 0.6s ease infinite; + opacity: 1; + + &:nth-child(2) { + opacity: 0; + animation-delay: 0.1s; + } + + &:nth-child(3) { + animation-delay: 0.2s; + } + &:nth-child(4) { + animation-delay: 0.3s; + } + &:nth-child(5) { + animation-delay: 0.4s; + } + &:nth-child(6) { + animation-delay: 0.5s; + } } } -} @include tt-hint; -- cgit v1.2.3