adding new on, off and standby svg icons. Color change to IBM logo.
Change-Id: I9a9aa63802beac60a30e35a130a7ad73a3e80f0f
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
diff --git a/app/common/styles/directives/app-navigation.scss b/app/common/styles/directives/app-navigation.scss
index 2d818a9..997ab7c 100644
--- a/app/common/styles/directives/app-navigation.scss
+++ b/app/common/styles/directives/app-navigation.scss
@@ -1,6 +1,29 @@
$nav__toplvlWidth: 125px;
$nav__seclvlWidth: 240px;
+//Navigation icons
+@mixin navIcons {
+ color: $white;
+ fill: $white;
+ max-height: 40px;
+ stroke-width: .5;
+ display: block;
+ width: 40px;
+ margin: 0 auto .5em auto;
+ .st0 {
+ fill: none;
+ stroke: $white;
+ stroke-width: 2;
+ stroke-miterlimit: 10;
+ }
+ .st1 {
+ fill: none;
+ stroke: $white;
+ stroke-width: 4;
+ stroke-miterlimit: 10;
+ }
+}
+
.nav__wrapper {
height: 100%;
position: fixed;
@@ -11,7 +34,6 @@
// Top level navigation
#nav__top-level {
background: $nav__top-level-color;
- //height: 100%;
position: absolute;
left: 0;
top: 0;
@@ -44,7 +66,7 @@
border-radius: 0;
text-decoration: none;
border-top: 1px solid transparent;
- border-bottom: 1px solid transparent;
+ border-bottom: 1px solid $darkgrey;
a {
margin-bottom: 5px;
}
@@ -52,27 +74,16 @@
margin: 1em 0 0 0;
display: block;
font-size: .9em;
- font-weight: 700;
+ font-weight: 400;
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: $medblue;
padding: 1em;
border-radius: 0;
- border-top: 1px solid $medgrey;
- border-bottom: 1px solid $medgrey;
+ border-bottom: 1px solid $lightgrey;
.nav__icon-help__outer {
stroke: $black;
}
@@ -96,10 +107,8 @@
.opened {
background: $nav__second-level-color;
fill: $black;
- color: $medblue;
- .nav__icon-help__outer {
- stroke: $lightbg__primary;
- }
+ color: darken($medblue, 10%);
+ border-bottom: 1px solid $lightgrey;
.nav-icon {
fill: $medblue;
color: $medblue;