fix(docs): fix styles

akveo · Jun 28, 2017 · d309cce · d309cce
1 parent d5f1a6a
commit d309cce
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 41 deletions.
diff --git a/docs/app/components/header/react-header.component.scss b/docs/app/components/header/react-header.component.scss
@@ -70,10 +70,14 @@
     height: 0;
     overflow: hidden;
     background: nga-theme(color-bg);
-    transition: height 0.5s ease;
-    a, a:hover, a:focus, a:active, &.active {
-      color: nga-theme(header-fg);
+    transition: height 0.3s ease-out;
+    a, a:hover, a:focus, a:active {
+      color: nga-theme(color-fg);
       font-weight: bold;
+      &.active {
+        color: nga-theme(menu-fg);
+        font-weight: bold;
+      }
     }
     & > ul > li > a:first-child {
       &:not([ng-reflect-router-link]) {
@@ -83,40 +87,13 @@
     i {
       display: none;
     }
-
-    /deep/ nga-menu.mobile-menu {
-      position: fixed;
-      top: nga-theme(header-height);
-      left: 0;
-      width: 100vw;
-      height: 0;
-      overflow: hidden;
-      background: nga-theme(color-bg);
-      transition: height 0.3s ease-out;
-      a, a:hover, a:focus, a:active {
-        color: nga-theme(color-fg);
-        font-weight: bold;
-        &.active {
-          color: nga-theme(menu-fg);
-          font-weight: bold;
-        }
-      }
-      & > ul > li > a:first-child {
-        &:not([ng-reflect-router-link]) {
-          pointer-events: none;
-        }
-      }
-      i {
-        display: none;
-      }
-      .menu-collapsed, .menu-expanded {
-        visibility: visible;
-        opacity: 1;
-        height: 100%;
-        a {
-          padding-left: 1rem;
-          font-weight: normal;
-        }
+    .menu-collapsed, .menu-expanded {
+      visibility: visible;
+      opacity: 1;
+      height: 100%;
+      a {
+        padding-left: 1rem;
+        font-weight: normal;
       }
     }
   }

diff --git a/docs/app/components/header/react-header.component.ts b/docs/app/components/header/react-header.component.ts
@@ -20,7 +20,7 @@ import { DocsService } from '../../docs/docs.service';
       <a routerLink="/docs" routerLinkActive="active-link">DOCUMENTATION</a>
     </div>
     <span> Need some help? Let us meow! 
-      <a href="mailto:contact@akveo.com"><b>contact@akveo.com</b></a>
+      <a class="contact-us" href="mailto:contact@akveo.com"><b>contact@akveo.com</b></a>
     </span>
     <i class="menu-icon ion-navicon" (click)="toggleMenu()"></i>
     <nga-menu class="mobile-menu" [class.active]="isMenuActive" [items]="menuItems"></nga-menu>

diff --git a/docs/app/homepage/homepage.component.scss b/docs/app/homepage/homepage.component.scss
@@ -12,7 +12,7 @@
     }
 
     /deep/ {
-      nav, a, .svg-logo .cls-1, .svg-logo .cls-2, .active-link::before {
+      nav, .menu a, .logo-container a, a.contact-us, .svg-logo .cls-1, .svg-logo .cls-2, .active-link::before {
         transition: all ease-in .2s;
       }
     }
@@ -23,7 +23,7 @@
         background: transparent;
         color: white;
       }
-      .menu a, .logo-container a {
+      .menu a, .logo-container a, a.contact-us {
         color: white;
       }
       .active-link::before {
@@ -35,7 +35,7 @@
         }
       }
 
-      nav, a, .svg-logo .cls-1, .svg-logo .cls-2, .active-link::before {
+      nav, .menu a, .logo-container a, a.contact-us, .svg-logo .cls-1, .svg-logo .cls-2, .active-link::before {
         transition: all ease-in .2s;
       }
     }