socialnetworknews-web

commit 5f687506092aa8b17aa6eef314498d0048c53b49
parent 96aa7e1dca3c76b6ef7d78b7bbcc49e1e6ce76b0
Author: MTRNord <mtrnord1@gmail.com>
Date:   Sat, 31 Mar 2018 19:39:53 +0200

scss or angular 5 don't like css3 :hover::after which causes the optimization to fail

Diffstat:
M
src/app/login/login.component.scss
 | 
48
++++++------------------------------------------

1 file changed, 6 insertions(+), 42 deletions(-)
diff --git a/src/app/login/login.component.scss b/src/app/login/login.component.scss
@@ -14,19 +14,11 @@ body {
   position: relative;
 }
 
-/* Pre-render the shadow, but hide it */
-.login-box::after {
+.login-box:hover {
   box-shadow: 0 5px 15px rgba(0,0,0,0.3);
-  opacity: 0;
   transition: opacity 0.3s ease-in-out;
 }
 
-/* Transition to showing the shadow on hover */
-.login-box:hover::after {
-  opacity: 1;
-}
-
-
 .login-box h2 {
   margin: 20px 0 20px;
   padding: 0;
@@ -35,7 +27,7 @@ body {
 }
 
 .social-button {
-  background-position: 25px 0px;
+  background-position: 25px 0;
   box-sizing: border-box;
   color: rgb(255, 255, 255);
   cursor: pointer;
@@ -59,19 +51,12 @@ body {
   border: 1px solid rgb(220, 74, 61);
 }
 
-/* Pre-render the border, but hide it */
-#google-connect::after {
+#google-connect:hover {
   background-color: rgb(220, 74, 61);
   border-color: rgb(220, 74, 61);
-  opacity: 0;
   transition: all .3s ease-out;
 }
 
-/* Transition to showing the border on hover */
-#google-connect:hover::after {
-  opacity: 1;
-}
-
 #google-connect span {
   box-sizing: border-box;
   color: rgb(220, 74, 61);
@@ -83,36 +68,22 @@ body {
   transition: all .3s ease;
 }
 
-/* Pre-render the border, but hide it */
-#google-connect::after span {
+#google-connect:hover span {
   color: #FFF;
-  opacity: 0;
   transition: all .3s ease-out;
 }
 
-/* Transition to showing the border on hover */
-#google-connect:hover::after span {
-  opacity: 1;
-}
-
 #twitter-connect {
   background-color: rgb(255, 255, 255);
   border: 1px solid rgb(85, 172, 238);
 }
 
-/* Pre-render the border, but hide it */
-#twitter-connect::after {
+#twitter-connect:hover {
   background-color: rgb(85, 172, 238);
   border-color: rgb(85, 172, 238);
-  opacity: 0;
   transition: all .3s ease-out;
 }
 
-/* Transition to showing the border on hover */
-#twitter-connect:hover::after {
-  opacity: 1;
-}
-
 #twitter-connect span {
   box-sizing: border-box;
   color: rgb(85, 172, 238);
@@ -124,18 +95,11 @@ body {
   transition: all .3s ease;
 }
 
-/* Pre-render the border, but hide it */
-#twitter-connect::after span {
+#twitter-connect:hover span {
   color: #FFF;
-  opacity: 0;
   transition: all .3s ease-out;
 }
 
-/* Transition to showing the border on hover */
-#twitter-connect:hover::after span {
-  opacity: 1;
-}
-
 .tblue {
   color: rgb(85, 172, 238);
 }