improve dashboard UI

[portal/ric-dashboard.git] / webapp-frontend / src / app / rd.component.scss

diff --git a/webapp-frontend/src/app/rd.component.scss b/webapp-frontend/src/app/rd.component.scss
index 7245077..35fbb1b 100644 (file)
--- a/webapp-frontend/src/app/rd.component.scss
+++ b/webapp-frontend/src/app/rd.component.scss
@@ -28,15 +28,15 @@
 
 /* Header */
 mat-sidenav-container, mat-sidenav-content, mat-sidenav {
-    height: 100%;
+  height: 100%;
 }
 
 mat-sidenav {
-    width: 250px;
+  width: 250px;
 }
 
 main {
-    padding: 10px;
+  padding: 10px;
 }
 
 /* Slide Menu */
@@ -102,6 +102,7 @@ main {
 .slide-menu-active {
   transform: none;
 }
+
 .menu-header.menu-header__dark {
   background: #2B244D;
 }
@@ -128,7 +129,7 @@ mat-drawer-content {
 }
 
 .menumargin-top {
-    margin-top: 10px;
+  margin-top: 10px;
 }
 
 .greeting__text {
@@ -183,12 +184,12 @@ mat-drawer-content {
   max-width: 4rem;
 }
 
-.home_bg_image{
-    height:40em;
-    background-size:cover;
-    width:auto;
-    background-image:url('../assets/intelligence.png');
-    background-position:50% 50%;
+.home_bg_image {
+  height: 40em;
+  background-size: cover;
+  width: auto;
+  background-image: url('../assets/intelligence.png');
+  background-position: 50% 50%;
 }
 
 /*Header*/
@@ -352,12 +353,28 @@ mat-drawer-content {
   color: white;
 }
 
+.main-footer-licence {
+  float: left;
+}
+
 .main-footer__bg-dark {
   opacity: 1;
   background: linear-gradient(to bottom, #B290FF, #2E1D65);
   transition: opacity 300ms linear;
 }
 
+.main-footer-instance {
+  margin-right: 10px;
+  float: right;
+  color: white;
+  letter-spacing: 0.1rem;
+  font-size: 15px;
+}
+
+.main-footer-instance:hover {
+  color: lightgray;
+}
+
 @media only screen and (max-width: 300px) {
   .slide-menu {
     width: 100%;
@@ -365,5 +382,30 @@ mat-drawer-content {
 }
 
 .selector-label {
-    margin-right: 20px;
-}
\ No newline at end of file
+  margin-right: 20px;
+}
+
+.menu-footer {
+  display: grid;
+  width: 100%;
+  position: absolute;
+  bottom: 10px;
+}
+
+a {
+  text-decoration: none;
+  color: black;
+}
+
+.dark a {
+  color: white;
+}
+
+a:hover, a:active {
+  color: lightgray;
+}
+
+.nav-caption {
+  display: inline-block;
+  padding-left: 6px;
+}