refactoring some scss

code/moya-angular/src/app/app.component.scss

@@ -4,11 +4,6 @@
   min-height: 100%;
 }
 
-#left-menu {
-}
-
-
-
 #contentarea {
   flex-grow: 1;
   display: flex;
@@ -22,7 +17,7 @@
 #content {
   display: flex;
   flex-direction: row;
-  background-color: white;
+  background-color: $color-bg-content;
   margin-left: 30px;
   padding: 20px;
   flex-grow: 1;

code/moya-angular/src/app/menu/left-menu/left-menu.component.scss

-@import "../../scss/main.scss";
-
 #leftNavTop {
   min-height: 100vh;
   width: 255px;
@@ -14,7 +12,6 @@
   margin-bottom: 20px;
 }
 
-
 #leftNav {
   display: flex;
   flex-direction: column;
@@ -22,7 +19,7 @@
 }
 
 .leftNavItem {
-  font-family: Roboto;
+  font-family: $font-menu;
   font-size: 14px;
   color: #FFFFFF;
   text-align: center;
@@ -32,23 +29,20 @@
   left: 0px;
   right: 0px;
   width: auto;
-}
 
-.leftNavItem.active {
+  &.:active {
     background-image: linear-gradient(90deg, rgba(126, 142, 218,0.13) 0%, rgba(255,255,255,0.00) 92%);
     border-left: 3px solid #69B1A1;
     text-decoration: none;
-}
+  }
 
-.leftNavItem:hover {
+  &:hover {
     //background-image: linear-gradient(90deg, rgba(126, 142, 218,0.13) 0%, rgba(255,255,255,0.00) 92%);
     border-left: 3px solid #69B1A1;
     text-decoration: none;
+  }
 }
 
-
-
-
 .leftNavGroup {
   display: flex;
   flex-direction: column;
@@ -64,25 +58,21 @@
   text-align: center;
   padding-bottom: 12px;
   padding-top: 12px;
-
 }
 
 .adminMenu  .leftNavGroup {
   color: $user-color;
 }
 
-
-
-
 .userMenu {
-//  background-color: $user-color;
+  //  background-color: $user-color;
   background-image: linear-gradient(0deg, #485173 0%, #141721 100%);
 }
 .adminMenu {
-//  background-color: $info-color;
+  //  background-color: $info-color;
   background-image: linear-gradient(0deg, #fad9b1 0%, #de821f 100%);
 }
 .infoMenu{
-//  background-color: $admin-color;
+  //  background-color: $admin-color;
   background-image: linear-gradient(0deg, #569f8e 0%, #11141b 100%);
 }

code/moya-angular/src/app/menu/top-menu/top-menu.component.scss

-@import "../../scss/main.scss";
-
 #topNav {
   padding: 10px 10px 10px 30px;
   display: flex;
-  background-color: white;
+  background-color: $color-bg-nav;
 }
 
 .topNavItem {
@@ -11,7 +9,7 @@
   padding: 10px 20px 10px 20px;
   margin-right: 10px;
 
-  font-family: Roboto;
+  font-family: $font-nav;
 
 
   font-size: 14px;
@@ -22,10 +20,9 @@
   min-width: 100px;
   text-align: center;
 
-}
-
-.topNavItem.active {
+  &:active {
     opacity: 1.0;
+  }
 }
 
 #userTopNav {

code/moya-angular/src/app/scss/main.scss

-
-$user-color: #2b2c3a;
-$admin-color: #de821f;
-$info-color: #69B1A1;
-

code/moya-angular/src/common.scss

+// Add common styling used by components here. E.g. variables.
+// Import this file to component styles.
+
+@import 'mixins';
+
+// Colors
+$color-bg: #f2f3f9;
+$color-bg-nav: #fff;
+$color-bg-content: #fff;
+
+// role colors
+$user-color: #2b2c3a;
+$admin-color: #de821f;
+$info-color: #69b1a1;
+
+// fonts
+$font-text: Roboto, sans-serif;
+$font-menu: Roboto, sans-serif;
+//$font-title: ;

code/moya-angular/src/styles.scss

@@ -3,13 +3,12 @@
 @import url('https://fonts.googleapis.com/css?family=Roboto');
 @import '~@angular/material/prebuilt-themes/indigo-pink.css';
 
-body {
-  background-color: #f2f3f9;
-
-
-}
-
+@import 'common';
 
 html, body {
   height: 100%;
 }
+
+body {
+  background-color: $color-bg;
+}