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/assets/images/icon-off.svg b/app/assets/images/icon-off.svg
new file mode 100644
index 0000000..6f77d02
--- /dev/null
+++ b/app/assets/images/icon-off.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
+<style type="text/css">
+ .st0{fill:#999999;}
+</style>
+<path class="st0" d="M2.3,2.3c-3.1,3.1-3.1,8.2,0,11.3s8.2,3.1,11.3,0s3.1-8.2,0-11.3S5.5-0.8,2.3,2.3z M12,9L4,9V7l8,0V9z"/>
+</svg>
diff --git a/app/assets/images/icon-on.svg b/app/assets/images/icon-on.svg
new file mode 100644
index 0000000..e66df7d
--- /dev/null
+++ b/app/assets/images/icon-on.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
+<style type="text/css">
+ .st0{fill:#34BC6E;}
+</style>
+<path class="st0" d="M8,0C3.6,0,0,3.6,0,8s3.6,8,8,8s8-3.6,8-8S12.4,0,8,0z M7,12L3.5,8.5L5,7l2,2l4-4l1.5,1.5L7,12z"/>
+</svg>
diff --git a/app/assets/images/icon-standby.svg b/app/assets/images/icon-standby.svg
new file mode 100644
index 0000000..7d08b3e
--- /dev/null
+++ b/app/assets/images/icon-standby.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="Isolation_Mode" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+ y="0px" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
+<style type="text/css">
+ .st0{fill:#FE8500;}
+</style>
+<path class="st0" d="M2.3,13.7c3.1,3.1,8.2,3.1,11.3,0s3.1-8.2,0-11.3s-8.2-3.1-11.3,0S-0.8,10.5,2.3,13.7z M7,5l0,6H5l0-6H7z M11,5
+ l0,6H9l0-6H11z"/>
+</svg>
diff --git a/app/assets/images/logo.svg b/app/assets/images/logo.svg
index d0fa158..79dac09 100644
--- a/app/assets/images/logo.svg
+++ b/app/assets/images/logo.svg
@@ -1 +1,18 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 241.23 240.05"><defs><style>.cls-1{fill:#a6a8ab;}.cls-2{fill:url(#linear-gradient);}.cls-3{fill:url(#linear-gradient-2);}.cls-4{fill:url(#linear-gradient-3);}.cls-5{fill:url(#linear-gradient-4);}.cls-6{fill:#626366;}</style><linearGradient id="linear-gradient" x1="82.9" y1="11.55" x2="82.9" y2="154.54" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#00b0da"/><stop offset="1" stop-color="#008abf"/></linearGradient><linearGradient id="linear-gradient-2" x1="81.55" y1="27.55" x2="81.55" y2="158.66" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="156.66" y1="51.54" x2="156.66" y2="154.8" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#a5d440"/><stop offset="1" stop-color="#8cce3f"/></linearGradient><linearGradient id="linear-gradient-4" x1="158.41" y1="51.54" x2="158.41" y2="154.8" xlink:href="#linear-gradient-3"/></defs><title>Asset 1</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M241.23,205.77a18.66,18.66,0,1,0-.24,16L237.26,220a14.51,14.51,0,1,1,.21-12.46Z"/><path class="cls-2" d="M65.85,81.86a53.68,53.68,0,0,0,11.61,33.41c-.1.29-.15.6-.22.9a10.81,10.81,0,0,0-.34,2.57,11,11,0,1,0,11-11,10.75,10.75,0,0,0-1.2.07c-.31,0-.61.08-.91.13A42.82,42.82,0,0,1,99.95,43.86h0V2.07l-.77.21q-3.63.94-7.12,2.2c-1.29.47-2.58,1-3.84,1.48h0V38.19l-.13.1A53.79,53.79,0,0,0,65.85,81.86Z"/><path class="cls-3" d="M120.28,96.58a14.54,14.54,0,0,1-14.55-14.37H93.59v0a26.29,26.29,0,0,0,21,25.65v45.35A71.13,71.13,0,0,1,63.9,38.1c.31.06.63.1,1,.13s.64,0,1,0a10.83,10.83,0,1,0-10.25-7.41,82.23,82.23,0,0,0,64.18,133.6c1.41,0,2.81-.06,4.2-.14l1.63-.09h0V95.57A14.47,14.47,0,0,1,120.28,96.58Z"/><path class="cls-4" d="M171.95,68.54a53.78,53.78,0,0,0-9.85-19.71,11.31,11.31,0,0,0,.32-1.3,10.78,10.78,0,0,0,.24-2.17,11,11,0,1,0-8.89,10.8,42.83,42.83,0,0,1-14.17,64.08V162c1.08-.27,2.14-.56,3.2-.87a82.35,82.35,0,0,0,8.53-3V125.91a53.91,53.91,0,0,0,20.6-57.37Z"/><path class="cls-5" d="M184.63,132.75A82.21,82.21,0,0,0,119.79,0c-1.64,0-3.26.06-4.87.16h-.11V68.55h0A14.53,14.53,0,0,1,120,67.48h.27A14.56,14.56,0,0,1,134.87,82s0,.07,0,.11,0,.08,0,.13h11.08A26.21,26.21,0,0,0,125.81,56.8V11.3A71.14,71.14,0,0,1,176,125.83h-.07a11,11,0,0,0-12.58,10.88,11,11,0,0,0,11,11h0a11,11,0,0,0,10.54-14.13C184.82,133.3,184.73,133,184.63,132.75Z"/><polygon class="cls-1" points="201.22 231.42 201.22 195.65 196.53 195.65 182 225.14 167.47 195.65 162.72 195.65 162.72 231.42 166.89 231.42 166.89 204.21 180.33 231.42 183.67 231.42 197.1 204.21 197.1 231.42 201.22 231.42"/><path class="cls-6" d="M119.82,208.4a10.6,10.6,0,0,0-7.9-3.34,10.15,10.15,0,0,0-4.16.83,15.94,15.94,0,0,0-3.62,2.24v-2.7H99.91v26h4.23V216.64a7.74,7.74,0,0,1,2.08-5.5,7.48,7.48,0,0,1,10.66,0,7.76,7.76,0,0,1,2.08,5.48v14.78h4.11v-15a11.12,11.12,0,0,0-3.24-8"/><path class="cls-6" d="M63.68,224.4a12.41,12.41,0,0,1-4.86,5.17,13.54,13.54,0,0,1-7,1.85H45.54V240h-4V205.43H51.64a13.41,13.41,0,0,1,9.57,3.76,12.73,12.73,0,0,1,2.47,15.21m-18.14,3.24h5.77A9.48,9.48,0,0,0,58.05,225a8.59,8.59,0,0,0,2.76-6.54,8.38,8.38,0,0,0-2.7-6.41,9.43,9.43,0,0,0-6.68-2.51H45.54Z"/><path class="cls-6" d="M96.44,219.75a4.56,4.56,0,0,0,.14-1.36c0-7.38-6.27-13.36-14-13.36s-14,6-14,13.36,6.27,13.36,14,13.36a14,14,0,0,0,11.93-6.52l-3.25-2.45a9.89,9.89,0,0,1-8.68,5,9.43,9.43,0,1,1,0-18.83,9.8,9.8,0,0,1,9.35,6.54c0,.07.15.63.17.7H76.59v3.52Z"/><path class="cls-6" d="M33.19,213.53A14.53,14.53,0,1,1,18.66,199a14.53,14.53,0,0,1,14.53,14.53m4.12,0a18.66,18.66,0,1,0-18.66,18.66,18.66,18.66,0,0,0,18.66-18.66"/><path class="cls-1" d="M154.37,220.69a6.77,6.77,0,0,1-6.75,6.79H132.14V213.9h15.49a6.78,6.78,0,0,1,6.75,6.79m-2.29-15.93a5.08,5.08,0,0,1-5.05,5.08l-14.89,0V199.67H147a5.07,5.07,0,0,1,5.05,5.08m.94,6.7a9,9,0,0,0-5.69-15.75H128v35.75h20.14l.28,0v0A10.73,10.73,0,0,0,153,211.46"/></g></g></svg>
\ No newline at end of file
+<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 356.5 142.8" style="enable-background:new 0 0 356.5 142.8;" xml:space="preserve">
+<style type="text/css">
+ .st0{fill:#737373;}
+</style>
+<path class="st0" d="M-0.5,0v9.8H69V0H-0.5z M78.8,0v9.8h99c0,0-10.1-9.8-23.5-9.8H78.8z M197.2,0v9.8h59.9L253.6,0H197.2z M300.1,0
+ l-3.6,9.8h59.4V0H300.1z M-0.5,19v9.8H69V19H-0.5z M78.8,19v9.8h110.5c0,0-1.3-7.5-3.5-9.8H78.8z M197.2,19v9.8h66.5l-3.3-9.8H197.2
+ z M293,19l-3.3,9.8h66.2V19H293z M19.4,38v9.8h30.1V38H19.4z M98.8,38v9.8h30.1V38H98.8z M158.1,38v9.8h30.1c0,0,1.9-5.2,1.9-9.8
+ H158.1z M217.2,38v9.8h53.4L267,38H217.2z M286.4,38l-3.6,9.8h53.6V38H286.4z M19.4,57v9.8h30.1V57H19.4z M98.8,57v9.8h76.9
+ c0,0,6.4-5,8.5-9.8C184.2,57,98.8,57,98.8,57z M217.2,57v9.8h30.1v-5.4l1.9,5.4h55.1l2.1-5.4v5.4h30.1V57H280l-3,8.3l-3-8.3
+ C274,57,217.2,57,217.2,57z M19.4,76v9.8h30.1V76H19.4z M98.8,76v9.8h85.3c-2.1-4.7-8.5-9.8-8.5-9.8H98.8z M217.2,76v9.8h30.1V76
+ H217.2z M252.8,76l3.6,9.8h41.3l3.5-9.8H252.8z M306.4,76v9.8h30.1V76H306.4z M19.4,95v9.8h30.1V95H19.4z M98.8,95v9.8h30.1V95H98.8
+ z M158.1,95v9.8h32c0-4.6-1.9-9.8-1.9-9.8H158.1z M217.2,95v9.8h30.1V95H217.2z M259.6,95l3.5,9.8h27.7l3.6-9.8H259.6z M306.4,95
+ v9.8h30.1V95H306.4z M0,114v9.8h69.5V114H0z M78.8,114v9.8h107c2.3-2.2,3.5-9.8,3.5-9.8H78.8z M197.8,114v9.8h49.5V114H197.8z
+ M266.4,114l3.6,9.8h14.1l3.4-9.8H266.4z M306.4,114v9.8h50.1V114H306.4z M0,133v9.8h69.5V133H0z M78.8,133v9.8h75.5
+ c13.4,0,23.5-9.8,23.5-9.8H78.8z M197.8,133v9.8h49.5V133H197.8z M273.3,133l3.5,9.7h0.6l3.5-9.8h-7.6V133z M306.4,133v9.8h50.1V133
+ H306.4z"/>
+</svg>
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;
