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/base/icons.scss b/app/common/styles/base/icons.scss
index 7b7e981..2c803d2 100644
--- a/app/common/styles/base/icons.scss
+++ b/app/common/styles/base/icons.scss
@@ -78,6 +78,11 @@
background-image: url(/assets/images/icon-on.svg);
}
+.icon__off {
+ @include status-icon;
+ background-image: url(/assets/images/icon-off.svg);
+}
+
.icon__info{
margin-top: -4px;
margin-right: .5em;
diff --git a/app/common/styles/base/mixins.scss b/app/common/styles/base/mixins.scss
index d13f2ce..79b0f34 100644
--- a/app/common/styles/base/mixins.scss
+++ b/app/common/styles/base/mixins.scss
@@ -40,28 +40,6 @@
font-weight: 700;
}
-//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: #fff;
- stroke-width: 2;
- stroke-miterlimit: 10;
- }
- .st1 {
- fill: none;
- stroke: #fff;
- stroke-width: 4;
- stroke-miterlimit: 10;
- }
-}
//Transitions mixin
@mixin fastTransition-all {
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;