socialnetworknews-web

commit 7928f275011295bca22e155e25590ccdc86e7bbc
parent 469fe4b8aefcd5c541dcc929cf6d5706766a0236
Author: MTRNord <mtrnord1@gmail.com>
Date:   Sat, 31 Mar 2018 19:09:18 +0200

Fix css and shadow animation

Diffstat:
M
src/app/login/login.component.scss
 | 
11
++++++++++-
M
src/app/login/login.component.ts
 | 
10
++++------

2 files changed, 14 insertions(+), 7 deletions(-)
diff --git a/src/app/login/login.component.scss b/src/app/login/login.component.scss
@@ -14,10 +14,19 @@ body {
   position: relative;
 }
 
-.login-box:hover::after {
+/* Pre-render the bigger shadow, but hide it */
+.make-it-fast::after {
   box-shadow: 0 5px 15px rgba(0,0,0,0.3);
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
 }
 
+/* Transition to showing the bigger shadow on hover */
+.make-it-fast:hover::after {
+  opacity: 1;
+}
+
+
 .login-box h2 {
   margin: 20px 0 20px;
   padding: 0;
diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts
@@ -1,15 +1,13 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, ViewEncapsulation} from '@angular/core';
 
 @Component({
   selector: 'app-login',
   templateUrl: './login.component.html',
-  styleUrls: ['./login.component.scss']
+  styleUrls: ['./login.component.scss'],
+  encapsulation: ViewEncapsulation.None,
 })
-export class LoginComponent implements OnInit {
+export class LoginComponent {
 
   constructor() { }
 
-  ngOnInit() {
-  }
-
 }