Reorganize navigation and header scss

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

4 files changed, 2 insertions, 309 deletions

diff --git a/app/common/styles/layout/content.scss b/app/common/styles/layout/content.scss
index 84b613c..1547e30 100644
--- a/app/common/styles/layout/content.scss
+++ b/app/common/styles/layout/content.scss
@@ -1,4 +1,6 @@
 // Content layout styles
+$nav__toplvlWidth: 120px;
+$nav__seclvlWidth: 240px;
 
 // Page header
 .page-header {
diff --git a/app/common/styles/layout/header.scss b/app/common/styles/layout/header.scss
deleted file mode 100644
index 9b7dff5..0000000
--- a/app/common/styles/layout/header.scss
+++ /dev/null
@@ -1,163 +0,0 @@
-$logoHeight: 30px;
-$logoMaxHeight: 100px;
-$logoMaxWidth: 125px;
-
-#header__wrapper {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 100;
-}
-
-.app__version {
-  margin-left: 1em;
-  display: none;
-  @include mediaQuery(x-small) {
-    display: inline-block;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-}
-
-header {
-  position: relative;
-  background: #000;
-  color: $white;
-  overflow: hidden;
-}
-
-.header__logout {
-  float: right;
-  display: inline-block;
-  color: $white;
-  font-size: .9em;
-  text-decoration: none;
-  padding: 1em;
-  &:visited {
-    color: $white;
-  }
-}
-
-.header__functions-wrapper {
-  color: $white;
-  background: $darkbg__primary;
-  padding: 0 1.1em;
-  box-sizing: border-box;
-  display: block;
-  position: relative;
-  overflow: hidden;
-  min-height: 5em;
-  #header__server-name {
-    //margin-top: .8em;
-    font-size: 1.5em;
-    font-weight: 500;
-    color: $white;
-    padding: .9em;
-    height: 100%;
-    background: transparent;
-    max-width: 350px;
-    white-space: nowrap;
-  }
-  .logo__wrapper {
-    padding-top: .5em;
-    //position: absolute;
-    //top: 50%;
-    //transform: translateY(-50%);
-  }
-
-  #header__logo {
-    vertical-align: middle;
-    margin: 1em;
-    float: left;
-    height: $logoHeight; //required for <SVG> logos - can remove if using img
-    max-height: $logoMaxHeight;
-    max-width: $logoMaxWidth;
-    width: auto;
-  }
-  #header__funct-icon {
-    display: block;
-    font-size: 2.3em;
-    color: $white;
-    padding: 0;
-    &:before {
-      content: '\2261';
-      line-height: .5;
-      font-size: 2em;
-      padding: 0 .3em;
-    }
-    @include mediaQuery(medium) {
-      display: none;
-    }
-  }
-
-  .header__functions {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    background: $darkbg__primary;
-    z-index: 100;
-    @include fastTransition-all;
-    span {
-      display: block;
-      color: $white;
-      font-size: 1em;
-    }
-    a, p, button {
-      display: block;
-      float: left;
-      text-decoration: none;
-      border-left: 1px solid #384456;
-      color: $lightgrey;
-      margin: 0;
-      padding: 1.250em 1.688em;
-      height: 100%;
-      font-size: 0.875em;
-      line-height: 1;
-      > span {
-        font-size: 1rem;
-        font-weight: bold;
-      }
-    }
-  }
-
-  // hide/show header functions based on screen size
-  .header__functions > #header__server-health {
-    display: none;
-    @include mediaQuery(small) {
-      display: block;
-    }
-  }
-
-  .header__functions > .header__refresh {
-    display: none;
-    @include mediaQuery(medium) {
-      display: block;
-    }
-  }
-
-  .header__functions {
-    .header__refresh {
-      color: $lightgrey;
-      line-height: 1.8;
-      margin-top: -4px;
-    }
-  }
-  .header__server-power,
-  .header__page-refresh {
-    &:hover {
-      background: rgba(60, 109, 240, .4);
-    }
-  }
-  .header__page-refresh {
-    img {
-      stroke: $white;
-      height: 22px;
-      width: 24px;
-    }
-  }
-}
-
-// end header__functions-wrapper
diff --git a/app/common/styles/layout/index.scss b/app/common/styles/layout/index.scss
index f78538c..6c33f26 100644
--- a/app/common/styles/layout/index.scss
+++ b/app/common/styles/layout/index.scss
@@ -1,3 +1 @@
-@import 'header';
-@import 'navigation';
 @import 'content';
diff --git a/app/common/styles/layout/navigation.scss b/app/common/styles/layout/navigation.scss
deleted file mode 100644
index 2568637..0000000
--- a/app/common/styles/layout/navigation.scss
+++ /dev/null
@@ -1,144 +0,0 @@
-$nav__toplvlWidth: 120px;
-$nav__seclvlWidth: 240px;
-
-// Top level navigation
-#nav__top-level {
-  background: $nav__top-level-color;
-  height: 100%;
-  position: fixed;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  z-index: 99;
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-  width: $nav__toplvlWidth;
-  display: block;
-  li {
-    margin: 0;
-  }
-  .button, button, a {
-    background: transparent;
-    height: auto;
-    border: 0;
-    color: $white;
-    fill: $white;
-    width: 100%;
-    padding: 1em;
-    display: block;
-    text-align: center;
-    margin-bottom: 0;
-    white-space: normal;
-    border-radius: 0;
-    text-decoration: none;
-    .nav__icon {
-      color: $white;
-      max-height: 40px;
-      stroke-width: .5;
-      margin-bottom: -.5em;
-    }
-    a {
-      margin-bottom: 5px;
-    }
-    span {
-      margin: 1em 0 0 0;
-      display: block;
-      font-size: .9em;
-      font-weight: normal;
-      line-height: 1rem;
-    }
-
-    .nav__icon-help__outer {
-      fill: transparent;
-      stroke: $white;
-      stroke-miterlimit: 10;
-      stroke-width: 1px;
-    }
-    .nav__icon-help__Inner {
-      fill: $white;
-    }
-    &:hover {
-      background: $nav__second-level-color;
-      fill: $black;
-      color: $black;
-      padding: 1em;
-      border-radius: 0;
-      .nav__icon-help__outer {
-        stroke: $black;
-      }
-      .nav__icon-help__inner {
-        fill: $lightbg__primary;
-      }
-    }
-  }
-  .opened {
-    background: $nav__second-level-color;
-    fill: $black;
-    color: $black;
-    .nav__icon-help__outer {
-      stroke: $lightbg__primary;
-    }
-  }
-}
-
-// Second Level Navigation
-.nav__second-level {
-  position: fixed;
-  background: $nav__second-level-color;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: $nav__seclvlWidth;
-  z-index: 0;
-  padding: 0;
-  margin: 0;
-  display: none;
-  list-style-type: none;
-  @include fastTransition-all;
-  @include mediaQuery(medium) {
-    left: 0;
-    &.btn-overview {
-      display: none;
-    }
-  }
-  &.opened {
-    left: $nav__toplvlWidth;
-    z-index: 100;
-    display: block;
-    @include fastTransition-all;
-  }
-
-  a {
-    padding: 1.2em 1em 1.2em 1em;
-    display: block;
-    color: $black;
-    text-decoration: none;
-    position: relative;
-    font-weight: 400;
-  }
-  li {
-    a:after{
-      content: '\203A';
-      position: absolute;
-      font-size: 2em;
-      font-weight: 700;
-      top: 50%;
-      right: .6em;
-      transform: translateY(-59%);
-      color: #4b5d78;
-      opacity: 0;
-    }
-    &.active {background: $white;}
-    &.active,
-    &:focus,
-    &:hover {
-      a {color: #4b5d78;}
-      a:after {
-        opacity: 1;
-        right: .3em;
-        @include fastTransition-all;
-      }
-    }
-  }
-}