power-operations: add page and styles
Change-Id: I7196e3791b103dfba74bfa66b0b4040a0ed1048d
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
diff --git a/src/scss/base/_all.scss b/src/scss/base/_all.scss
index bc61b44..5e10e93 100644
--- a/src/scss/base/_all.scss
+++ b/src/scss/base/_all.scss
@@ -5,4 +5,5 @@
@import 'core';
@import 'typography';
@import 'utility';
+@import 'buttons';
@import 'forms';
diff --git a/src/scss/base/_buttons.scss b/src/scss/base/_buttons.scss
new file mode 100644
index 0000000..3703722
--- /dev/null
+++ b/src/scss/base/_buttons.scss
@@ -0,0 +1,40 @@
+button, .button, input[type="submit"] {
+ font-weight: bold;
+ font-size: 1em;
+ text-transform: none;
+ border-radius: 3px;
+ padding: .8rem 3.5rem;
+ height: auto;
+ &:hover {
+ cursor: pointer;
+ }
+ &.disabled {
+ border: 2px solid $lightgrey;
+ color: $lightgrey;
+ }
+}
+
+.disabled {
+ button, .button, input[type="submit"] {
+ opacity: 0.2;
+ &:hover {
+ cursor: default;
+ background: transparent;
+ }
+ }
+}
+
+.btn-primary {
+ color: $primebtn__text;
+ background: $primebtn__bg;
+}
+.btn-secondary {
+ color: $secbtn__text;
+ background: transparent;
+ border: 2px solid $secbtn__border;
+ &:hover {
+ background: $lightbg__accent;
+ cursor: pointer;
+ background: $secbtn__bg;
+ }
+}
diff --git a/src/scss/base/_colors.scss b/src/scss/base/_colors.scss
index fe9f2dc..c013e08 100644
--- a/src/scss/base/_colors.scss
+++ b/src/scss/base/_colors.scss
@@ -1,20 +1,30 @@
// Global
$white: #fff;
$black: #333;
+$darkgrey: #666;
+$lightgrey: #ccc;
$field__disabled: #F4F8F8;
-$error: #FF5C49;
-$status-ok: #098145;
+
// Dark background
$darkbg__grey: #E3ECEC;
$darkbg__accent: #79a6f6;
-$darkbg__primary: #1d3458;
+$darkbg__primary: #19273c;
$active: #648FFF;
-// White Background
+// Light Background
$lightbg__grey: #b8c1c1;
-$lightbg__accent: #3c6df0;
-$lightbg__primary: #19273c;
+$lightbg__accent: #ebf0fc;
+$lightbg__primary: #1a273b;
+
+// Primary Button colors
+$primebtn__bg: #3c6df0;
+$primebtn__text: $white;
+
+// Secondary Button colors
+$secbtn__bg: #ebf0fc;
+$secbtn__border: #3f71ec;
+$secbtn__text: #3f71ec;
// Alerts
$alert__error: rgba(230, 35, 37, 0.3);
@@ -25,4 +35,13 @@
$links: #648FFF;
$links__hover: $lightbg__accent;
$links__visited: #5A3EC8;
-$links__disabled: rgba(27, 40, 52, 0.70);
\ No newline at end of file
+$links__disabled: rgba(27, 40, 52, 0.70);
+
+// Navigation
+$nav__top-level-color: #1a273b;
+$nav__second-level-color: #e6e9ed;
+
+// Status colors
+$error-color: #FF5C49;
+$status-ok: #34bc6e;
+$status-ok-light: #bcefce;
\ No newline at end of file
diff --git a/src/scss/base/_core.scss b/src/scss/base/_core.scss
index 37aaf46..13ba9e6 100644
--- a/src/scss/base/_core.scss
+++ b/src/scss/base/_core.scss
@@ -5,32 +5,9 @@
color: $black;
}
-.container {
- max-width: 1440px;
-}
-
p {
margin-bottom: .8em;
- @include fastTransition-all;
-}
-
-button, .button, input[type="submit"] {
- color: $white;
- background: $lightbg__primary;
- border: 1px solid $lightbg__primary;
- font-weight: normal;
- font-size: 1em;
- text-transform: none;
- border-radius: 0;
- padding: .5rem 2rem;
- height: auto;
- line-height: 2.5em;
- &:hover {
- background: $lightbg__accent;
- //box-shadow: inset 0 0 0 2px $lightbg__primary;
- cursor: pointer;
- @include fastTransition-all;
- }
+ transition: margin .05s;
}
a {
@@ -41,7 +18,7 @@
&:hover {
color: $links__hover;
}
- focus {
+ :focus {
color: $links;
}
}
\ No newline at end of file
diff --git a/src/scss/base/_forms.scss b/src/scss/base/_forms.scss
index c4f7eed..97c24eb 100644
--- a/src/scss/base/_forms.scss
+++ b/src/scss/base/_forms.scss
@@ -34,7 +34,7 @@
border: 1px solid $lightbg__grey;
}
&.input__error {
- border-color: $error;
+ border-color: $error-color;
background: rgba(230, 35, 37, 0.1);
}
}
diff --git a/src/scss/base/_mixins.scss b/src/scss/base/_mixins.scss
index 4b7a1eb..e26c10d 100644
--- a/src/scss/base/_mixins.scss
+++ b/src/scss/base/_mixins.scss
@@ -1,8 +1,3 @@
-
-$lightbg__grey: #b8c1c1;
-$lightbg__accent: #3c6df0;
-$lightbg__primary: #19273c;
-
//Breakpoints mixin
@mixin mediaQuery($breakpoint) {
@if $breakpoint == "x-small" {
diff --git a/src/scss/base/_typography.scss b/src/scss/base/_typography.scss
index b20397f..8c70067 100644
--- a/src/scss/base/_typography.scss
+++ b/src/scss/base/_typography.scss
@@ -19,26 +19,28 @@
font-weight: 300;
margin: 0 0 .8rem;
line-height: 1;
+ color: #333;
}
-h1 {
+h1, .h1 {
font-size: 2.3rem;
}
-h2 {
+h2, .h2 {
font-size: 1.8rem;
}
-h3 {
+h3, .h3 {
font-size: 1.3rem;
-}
-
-h4 {
- font-size: 1.125rem;
letter-spacing: -.08rem;
}
-h5 {
+h4, .h4 {
+ font-size: 1.125rem;
+ letter-spacing: -.04rem;
+}
+
+h5, .h5 {
font-size: 1rem;
letter-spacing: -.05rem;
}
diff --git a/src/scss/base/_utility.scss b/src/scss/base/_utility.scss
index 2886bf1..3d5a8ce 100644
--- a/src/scss/base/_utility.scss
+++ b/src/scss/base/_utility.scss
@@ -1,6 +1,5 @@
.inline {
display: inline-block;
- line-height: 2;
}
.disabled {
@@ -14,7 +13,7 @@
clear: both;
}
.error {
- color: $error;
+ color: $error-color;
}
.hide {
@@ -47,10 +46,18 @@
margin: 0px !important;
}
+.no-padding {
+ padding:0px !important;
+}
+
.no-bottom-margin {
margin-bottom: 0px !important;
}
.no-top-margin {
margin-top: 0px !important;
+}
+
+.transitionAll {
+ transition: all .5s ease;
}
\ No newline at end of file
diff --git a/src/scss/components/_all.scss b/src/scss/components/_all.scss
index 98ede4a..81974ba 100644
--- a/src/scss/components/_all.scss
+++ b/src/scss/components/_all.scss
@@ -1,3 +1,4 @@
@import "systemUser";
@import "login";
-@import "alerts";
\ No newline at end of file
+@import "alerts";
+@import "power-ops";
\ No newline at end of file
diff --git a/src/scss/components/_login.scss b/src/scss/components/_login.scss
index ed2626c..f5d73d8 100644
--- a/src/scss/components/_login.scss
+++ b/src/scss/components/_login.scss
@@ -59,7 +59,7 @@
.login__status {
color: $status-ok;
- &.error {color: $error;}
+ &.error {color: $error-color;}
}
.login__error-msg {
@@ -67,7 +67,7 @@
padding: 1em;
text-align: center;
font-size: .95em;
- border: 1px solid $error;
+ border: 1px solid $error-color;
@include mediaQuery(medium){
diff --git a/src/scss/components/_power-ops.scss b/src/scss/components/_power-ops.scss
new file mode 100644
index 0000000..1d4d2d8
--- /dev/null
+++ b/src/scss/components/_power-ops.scss
@@ -0,0 +1,133 @@
+// Power Operations SCSS
+
+#power-operations {
+
+ .h4 {
+ font-weight: bold;
+ }
+
+ // Power op time stamp
+ .power__status-log {
+ color: $darkgrey;
+ }
+
+ // Power Curernt status wrapper
+ .power__current-status {
+ border-bottom: 1px solid $lightbg__grey;
+ margin: 3.625em 0 1.2em 0;
+ .h4 {
+ padding: 0;
+ margin: 0 0 .5em 0;
+ }
+ }
+
+ // Power state indicator on/off
+ .power__state {
+ span:before {
+ content: '\25CF';
+ display: inline-block;
+ font-size: 1.2em;
+ color: $darkgrey;
+ margin-right: .3em;
+ @include slowTransition-all;
+ }
+ }
+
+ // Power bar indicator
+ .power__indicator-bar {
+ font-weight: bold;
+ padding: 1.4em 3em;
+ margin-bottom: 3.750em;
+ background-size: 200% 100%;
+ background-image: linear-gradient(to right, $status-ok-light 50%, $lightgrey 50%);
+ background-position: 100%;
+ transition: background-position 2s ease;
+ p {
+ padding: 0;
+ margin: 0;
+ }
+ &.power__state-on {
+ background-position: -200%;
+ .power__state {
+ span:before {
+ color: $status-ok;
+ }
+ }
+ }
+ &.power__state-off {
+ background-position: -100%;
+ color: $darkgrey;
+ .power__state {
+ span:before {
+ color: $darkgrey;
+ }
+ }
+ }
+ }
+
+ // Power button options
+ .power-option {
+ border-top: 1px solid $lightgrey;
+ padding: 1.8em 0 1em 1.8em;
+ position: relative;
+ overflow: hidden;
+ min-height: 1px;
+ .btn-secondary {
+ margin-bottom: .5em;
+ }
+ // Confirmation message for power option
+ .power__confirm {
+ position: absolute;
+ top: 0;
+ transform: translateY(-100%);
+ width: 100%;
+ margin-left: -1.8em;
+ z-index: 5;
+ background: $darkbg__primary;
+ color: $white;
+ padding: 2em 2em 1.55em 2em;
+ &.active {
+ transform: translateY(0);
+ @include fastTransition-all;
+ }
+ }
+ &.disabled {
+ @include fastTransition-all;
+ }
+ }
+}
+
+// Power confirmation buttons
+.power__confirm-buttons {
+ .btn-primary {
+ background: transparent;
+ border: 2px solid $white;
+ padding: 1em 2.2em;
+ margin: 0 10px;
+ border-radius: 4px;
+ &:focus,
+ &:hover {
+ background: $primebtn__bg;
+ border: 2px solid $primebtn__bg;
+ }
+ }
+ @include mediaQuery(large) {
+ float: right;
+ }
+}
+
+// Power confirmation message
+.power__confirm-message {
+ display: inline-block;
+}
+
+// Power confirmation message icon
+.power__confirm-message i::before {
+ content: '\26A0';
+ color: $white;
+ display: inline-block;
+ font-size: 2em;
+ vertical-align: middle;
+ font-style: normal;
+ margin-right: 15px;
+}
diff --git a/src/scss/components/_systemUser.scss b/src/scss/components/_systemUser.scss
index 8ab1535..beb96f0 100644
--- a/src/scss/components/_systemUser.scss
+++ b/src/scss/components/_systemUser.scss
@@ -16,8 +16,5 @@
width: 20px;
border-radius: 10px;
vertical-align: middle;
- //position: relative;
- //top: 50%;
- //transform: translateY(-50%);
}
}
diff --git a/src/scss/layout/_all.scss b/src/scss/layout/_all.scss
index 1122ffe..f78538c 100644
--- a/src/scss/layout/_all.scss
+++ b/src/scss/layout/_all.scss
@@ -1,2 +1,3 @@
@import 'header';
@import 'navigation';
+@import 'content';
diff --git a/src/scss/layout/_content.scss b/src/scss/layout/_content.scss
new file mode 100644
index 0000000..5c690c6
--- /dev/null
+++ b/src/scss/layout/_content.scss
@@ -0,0 +1,10 @@
+// Content layout styles
+
+.content__container {
+ padding-top: 3.75em;
+ margin-left: $nav__toplvlWidth;
+ @include fastTransition-all;
+ @include mediaQuery(medium){
+ margin-left: $nav__toplvlWidth + $nav__seclvlWidth;
+ }
+}
diff --git a/src/scss/layout/_header.scss b/src/scss/layout/_header.scss
index 9bbe7e8..b86fcd7 100644
--- a/src/scss/layout/_header.scss
+++ b/src/scss/layout/_header.scss
@@ -22,7 +22,7 @@
}
header {
position: relative;
- background: $black;
+ background: $lightbg__primary;
color: $white;
padding: .8em;
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;
+ }
+ }
}
}