Add collapsing animation for 2nd level nav menu

Change-Id: Ie60d6c9d0aaff1e6db785a678e38c626925c8799
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>

2 files changed, 39 insertions, 7 deletions

diff --git a/app/common/styles/layout/content.scss b/app/common/styles/layout/content.scss
index e36fa66..84b613c 100644
--- a/app/common/styles/layout/content.scss
+++ b/app/common/styles/layout/content.scss
@@ -1,11 +1,23 @@
 // Content layout styles
 
+// Page header
+.page-header {
+  position: relative;
+  border-bottom: 1px solid $lightbg__grey;
+  margin: 1.625em 0 1.2em 0;
+  .h4 {
+    padding: 0;
+    margin: 0 0 .5em 0;
+    font-weight: bold;
+  }
+}
+
 .content__container {
   margin-left: $nav__toplvlWidth;
   padding: 1em .1em;
   transition: left 1s ease;
   @include mediaQuery(x-small){
-    margin-left: $nav__toplvlWidth + $nav__seclvlWidth;
+    //margin-left: $nav__toplvlWidth + $nav__seclvlWidth;
     padding: 1rem 2rem;
   }
 }
@@ -13,4 +25,22 @@
 section.row {
   padding-left: 0;
   padding-right: 0;
-}
\ No newline at end of file
+}
+
+.content-header {
+  font-weight: 700;
+  margin-bottom: 0;
+  margin-top: 2em;
+}
+
+.content-label {
+  color: darken($lightgrey, 10%);
+  text-transform: uppercase;
+  font-weight: 700;
+  font-size: .75em;
+  margin-bottom: 0;
+}
+
+.content__container h1 {
+  margin-left: -.3em;
+}
diff --git a/app/common/styles/layout/navigation.scss b/app/common/styles/layout/navigation.scss
index 6a2bbfe..2568637 100644
--- a/app/common/styles/layout/navigation.scss
+++ b/app/common/styles/layout/navigation.scss
@@ -14,6 +14,7 @@ $nav__seclvlWidth: 240px;
   margin: 0;
   padding: 0;
   width: $nav__toplvlWidth;
+  display: block;
   li {
     margin: 0;
   }
@@ -30,6 +31,7 @@ $nav__seclvlWidth: 240px;
     margin-bottom: 0;
     white-space: normal;
     border-radius: 0;
+    text-decoration: none;
     .nav__icon {
       color: $white;
       max-height: 40px;
@@ -86,22 +88,23 @@ $nav__seclvlWidth: 240px;
   background: $nav__second-level-color;
   top: 0;
   bottom: 0;
-  left: -$nav__toplvlWidth;
+  left: 0;
   width: $nav__seclvlWidth;
-  z-index: 97;
+  z-index: 0;
   padding: 0;
   margin: 0;
   display: none;
   list-style-type: none;
   @include fastTransition-all;
   @include mediaQuery(medium) {
-    left: $nav__toplvlWidth;
+    left: 0;
     &.btn-overview {
-      display: block;
+      display: none;
     }
   }
   &.opened {
     left: $nav__toplvlWidth;
+    z-index: 100;
     display: block;
     @include fastTransition-all;
   }
@@ -114,7 +117,6 @@ $nav__seclvlWidth: 240px;
     position: relative;
     font-weight: 400;
   }
-
   li {
     a:after{
       content: '\203A';