Merge pull request #78 from shuhaib-aot/nav-bar-design

new navbar design

forms-flow-nav/src/Navbar.css

@@ -1,142 +1,33 @@
-.btn-primary {
-  background-color: var(--button-primary-background);
-}
 
-.logo {
-  height: 1.9em;
-}
-h4 {
-  font-size: 1.2rem;
-}
-body {
-  font-size: var(--navbar-items-font-size);
-  font-family: Nunito Sans, SemiBold;
-}
-h5,
-.h5 {
-  font-size: 16px !important;
-}
-
-.navbar {
+.navbar-background{
   background-color: var(--navbar-background);
 }
-.nav-dropdown .dropdown-menu {
-  width: 15rem;
-  height: 14rem;
-  padding: 15px 20px 0 20px;
-  right: 0;
-  top: 2rem;
-  left: auto;
-  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
-}
-
-.nav-dropdown :hover {
-  text-decoration: none !important;
-}
-.nav-custom-tab {
-  padding-left: 60px !important;
-}
-.main-nav {
-  text-decoration: none !important;
-  /* font-size: var(--navbar-items-font-size) !important; */
+.nav-menu-item{
+  font-size: var(--navbar-items-font-size);
   font-weight: var(--navbar-items-font-weight);
+  transition: 0.2s ease-in-out;
+  position: relative;
 }
-.inactive-tab {
-  color: var(--navbar-items) !important;
-}
-.active-tab {
-  color: var(--navbar-active) !important;
-}
-
-.active-tab-dropdown > #dashboard-dropdown {
-  background-color: transparent;
-  filter: invert(36%) sepia(38%) saturate(7152%) hue-rotate(227deg)
-    brightness(101%) contrast(98%);
-}
-.active-tab-dropdown > #task-dropdown {
-  background-color: transparent;
-  filter: invert(36%) sepia(38%) saturate(7152%) hue-rotate(227deg)
-    brightness(101%) contrast(98%);
-}
-
-.nav-dropdown .dropdown-menu {
-  height: auto !important;
-}
-.navbar-dark .navbar-toggler {
-  border-color: white;
-}
-.navbar-brand {
-  align-items: center;
-}
-
-.navbar-brand .img-fluid,
-.navbar-brand .img-thumbnail {
-  max-width: 100%;
-  height: 100%;
-}
-
-header nav {
-  border-bottom: var(--color-white);
-}
-
-.topheading-border-bottom {
-  z-index: 2000;
-  border-bottom: 2px solid var(--color-primary) !important;
-  padding: 0 0.5rem !important;
-  box-shadow: 0 3px 3px -2px rgba(0, 0, 0, 0.2),
-    0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
+
+.nav-menu-item.active {
+  font-size: 18px !important;
+  border-bottom: 3px solid var(--color-primary) !important;
+  color: var(--color-primary) !important;
+  font-weight: calc(var(--navbar-items-font-weight) + 100) !important;
 }
+
+
 
 .custom-app-name {
   font-size: 30px;
-  font-weight: 600;
+  font-weight: 700;
   color: var(--navbar-app-name);
   margin-left: var(--appname-margin-left);
   margin-right: var(--appname-margin-right);
   margin-top: var(--appname-margin-top);
   margin-bottom: var(--appname-margin-bottom);
 }
 
-.navbar-light .navbar-nav .nav-link {
-  color: var(--navbar-items);
-}
-
-.navbar-collapse{
-  justify-content: space-evenly !important;
-
-}
-.nav-user {
-  margin-left: auto;
-}
-
-.navbar-nav .nav-link:hover,
-.navbar-nav .nav-link:focus {
-  text-decoration: none !important;
-}
 .custom-logo{
   width: var(--navbar-logo-width);
-}
-@media (max-width: 768px) {
-  .head-item {
-    padding-bottom: 0rem;
-  }
-  .padding-left-60 {
-    margin-left: 0px;
-  }
-  .main-header {
-    flex-wrap: nowrap;
-  }
-  .admin-container > .header-container {
-    margin-left: -1rem;
-  }
-  .head-rule {
-    margin-top: -25px;
-    margin-left: -15px;
-    margin-right: -86px;
-}
-} 
-@media (max-width: 992px) and (max-height: 590px) {
-  .nav-user {
-    margin-left: inherit;
-  }
 }