power-operations: add page and styles
Change-Id: I7196e3791b103dfba74bfa66b0b4040a0ed1048d
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
diff --git a/src/scss/layout/_navigation.scss b/src/scss/layout/_navigation.scss
index 024e869..0b07e5f 100644
--- a/src/scss/layout/_navigation.scss
+++ b/src/scss/layout/_navigation.scss
@@ -1,5 +1,9 @@
+$nav__toplvlWidth: 120px;
+$nav__seclvlWidth: 240px;
+
+// Top level navigation
#nav__top-level {
- background: $black;
+ background: $nav__top-level-color;
height: 100%;
position: fixed;
left: 0;
@@ -8,7 +12,11 @@
z-index: 99;
list-style-type: none;
margin: 0;
- li { margin: 0; }
+ padding: 0;
+ width: $nav__toplvlWidth;
+ li {
+ margin: 0;
+ }
.button, button, a {
background: transparent;
height: auto;
@@ -21,6 +29,7 @@
text-align: center;
margin-bottom: 0;
white-space: normal;
+ border-radius: 0;
.nav__icon {
color: $white;
max-height: 40px;
@@ -33,7 +42,7 @@
p {
margin: 0;
font-size: .9em;
- line-height:1.2rem;
+ line-height: 1.2rem;
}
.nav__icon-help__outer {
@@ -46,7 +55,7 @@
fill: $white;
}
&:hover {
- background: $white;
+ background: $nav__second-level-color;
fill: $black;
color: $black;
padding: 1em;
@@ -55,32 +64,74 @@
stroke: $black;
}
.nav__icon-help__inner {
- fill: $black;
+ fill: $lightbg__primary;
}
}
}
.opened {
- background: $white;
+ 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;
+ left: -$nav__toplvlWidth;
+ width: $nav__seclvlWidth;
z-index: 97;
- display: block;
- background: $white;
- padding: 10px .6em;
+ display: none;
+ padding: 0;
margin: 0;
list-style-type: none;
- transition: all ease-out 0.5s;
- box-shadow: 0 2px 5px 0 $black;
+ transition: left .5s ease;
+ @include mediaQuery(medium) {
+ left: $nav__toplvlWidth;
+ }
+ &.btn-dashboard {
+ display: block;
+ }
&.opened {
- transition: all ease-out .8s;
+ left: $nav__toplvlWidth;
+ @include fastTransition-all;
+ }
+ a {
+ padding: 1.2em .6em 1.2em 1.9em;
+ display: block;
+ color: $black;
+ text-decoration: none;
+ position: relative;
+ }
+ li {
+ a:after{
+ content: '\203A';
+ position: absolute;
+ font-size: 2em;
+ font-weight: 700;
+ top: 50%;
+ right: 2em;
+ transform: translateY(-59%);
+ color: #4b5d78;
+ opacity: 0;
+ }
+ &.active,
+ &:focus,
+ &:hover {
+ background: $white;
+ a {font-weight: bold; color: #4b5d78;}
+ a:after {
+ opacity: 1;
+ right: .5em;
+ @include fastTransition-all;
+ }
+ }
}
}