power-operations: add indeterminate status bar
Change-Id: I400aa855e4e9dd6b00f665083a7ba0fa4843825d
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
diff --git a/src/scss/base/_buttons.scss b/src/scss/base/_buttons.scss
index 5f239df..7bad975 100644
--- a/src/scss/base/_buttons.scss
+++ b/src/scss/base/_buttons.scss
@@ -3,9 +3,9 @@
font-size: 1em;
text-transform: none;
border-radius: 3px;
- padding: .8rem 3.5rem;
+ padding: .8rem 3.5rem .5rem;
height: auto;
- border: 0px;
+ border: 0;
&:hover {
cursor: pointer;
}
@@ -26,6 +26,7 @@
input[type="submit"] {
color: $primebtn__text;
background: $primebtn__bg;
+ min-height: 50px;
&:hover {
background: lighten($primebtn__bg, 8%);
@include fastTransition-all;
@@ -38,11 +39,24 @@
cursor: default;
}
}
+ i { // button symbol
+ font-style: normal;
+ text-transform: none;
+ font-size: 1.5em;
+ transform: rotate(80deg);
+ display: inline-block;
+ }
+ img{
+ width: 18px;
+ height: 18px;
+ display: inline-block;
+ }
}
.btn-secondary {
color: $secbtn__text;
background: transparent;
border: 2px solid $secbtn__border;
+ min-height: 50px;
&:hover {
background: $lightbg__accent;
cursor: pointer;
@@ -57,4 +71,20 @@
background: $btn__disabled-bg;
}
}
+ i { // button symbol
+ font-style: normal;
+ font-weight: 400;
+ text-transform: none;
+ font-size: 1.5em;
+ transform: rotate(80deg) translate(-2px);
+ display: inline-block;
+ vertical-align: middle;
+ }
+ img{
+ width: 18px;
+ height: 18px;
+ display: inline-block;
+ margin-right: .5em;
+ margin-top: -3px;
+ }
}
diff --git a/src/scss/base/_colors.scss b/src/scss/base/_colors.scss
index e7fdd47..94ef663 100644
--- a/src/scss/base/_colors.scss
+++ b/src/scss/base/_colors.scss
@@ -46,4 +46,5 @@
// Status colors
$error-color: #FF5C49;
$status-ok: #34bc6e;
-$status-ok-light: #bcefce;
\ No newline at end of file
+$status-ok-light: #bcefce;
+$status-warn: #ffb000;
\ No newline at end of file
diff --git a/src/scss/base/_mixins.scss b/src/scss/base/_mixins.scss
index 578a866..71d8f39 100644
--- a/src/scss/base/_mixins.scss
+++ b/src/scss/base/_mixins.scss
@@ -51,3 +51,47 @@
@mixin bgImage__arrowDown-grey {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: #b8c1c1'></polygon></svg>");
}
+
+@mixin indeterminate-bar {
+ background-image: repeating-linear-gradient(-45deg, rgba(251, 234, 174, 0.35), rgba(251, 234, 174, 0.35) 25px, rgba(244, 176, 0, 0.45) 25px, rgba(244, 176, 0, 0.45) 50px);
+ -webkit-animation: progress 2s linear infinite;
+ -moz-animation: progress 2s linear infinite;
+ animation: progress 2s linear infinite;
+ background-size: 130% 100%;
+
+ @-webkit-keyframes progress {
+ 0% {
+ background-position: 0 0;
+ }
+ 100% {
+ background-position: -70px 0;
+ }
+ }
+
+ @-moz-keyframes progress {
+ 0% {
+ background-position: 0 0;
+ }
+ 100% {
+ background-position: -70px 0;
+ }
+ }
+
+ @-ms-keyframes progress {
+ 0% {
+ background-position: 0 0;
+ }
+ 100% {
+ background-position: -70px 0;
+ }
+ }
+
+ @keyframes progress {
+ 0% {
+ background-position: 0 0;
+ }
+ 100% {
+ background-position: -70px 0;
+ }
+ }
+}
diff --git a/src/scss/base/_typography.scss b/src/scss/base/_typography.scss
index 8c70067..461304c 100644
--- a/src/scss/base/_typography.scss
+++ b/src/scss/base/_typography.scss
@@ -23,7 +23,8 @@
}
h1, .h1 {
- font-size: 2.3rem;
+ font-size: 3rem;
+ font-weight: 500;
}
h2, .h2 {
diff --git a/src/scss/components/_power-ops.scss b/src/scss/components/_power-ops.scss
index 8cd7aa8..1a517be 100644
--- a/src/scss/components/_power-ops.scss
+++ b/src/scss/components/_power-ops.scss
@@ -69,6 +69,15 @@
}
}
}
+ &.power__state-indet {
+ color: $darkgrey;
+ @include indeterminate-bar;
+ .power__state {
+ span:before {
+ color: $status-warn;
+ }
+ }
+ }
}
// Power button options
diff --git a/src/scss/elements/_inline-confirm.scss b/src/scss/elements/_inline-confirm.scss
index 863b606..cb4c7e3 100644
--- a/src/scss/elements/_inline-confirm.scss
+++ b/src/scss/elements/_inline-confirm.scss
@@ -3,8 +3,9 @@
.inline__confirm {
position: absolute;
top: 0;
- transform: translateY(-100%);
+ transform: translateY(-103%);
width: 100%;
+ height: 100%;
margin-left: -1.8em;
z-index: 5;
background: $darkbg__primary;
@@ -44,7 +45,7 @@
// Power confirmation message icon
.inline__confirm-message i::before {
content: '\26A0';
- color: $white;
+ color: $status-warn;
display: inline-block;
font-size: 2em;
vertical-align: middle;
diff --git a/src/scss/elements/_toggle-switch.scss b/src/scss/elements/_toggle-switch.scss
index 6ea5054..88b1def 100644
--- a/src/scss/elements/_toggle-switch.scss
+++ b/src/scss/elements/_toggle-switch.scss
@@ -8,7 +8,6 @@
@mixin borderRadius {
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
- -ms-border-radius: 60px;
border-radius: 60px;
}
@@ -19,6 +18,7 @@
width: 1px;
opacity: 0;
}
+
.toggle-switch + label {
display: block;
position: relative;
@@ -30,6 +30,11 @@
user-select: none;
}
+.toggle label {
+ text-indent: -9999px;
+ transform: translateY(-50%); // keeps switch centered
+}
+
input.toggle-switch__round-flat + label {
padding: 2px;
width: 50px;
diff --git a/src/scss/layout/_content.scss b/src/scss/layout/_content.scss
index 3d80960..b06175b 100644
--- a/src/scss/layout/_content.scss
+++ b/src/scss/layout/_content.scss
@@ -3,7 +3,7 @@
.content__container {
margin-left: $nav__toplvlWidth;
padding: 1em .1em;
- @include fastTransition-all;
+ transition: left 1s ease;
@include mediaQuery(x-small){
margin-left: $nav__toplvlWidth + $nav__seclvlWidth;
padding: 1rem 2rem;
diff --git a/src/scss/layout/_navigation.scss b/src/scss/layout/_navigation.scss
index d914b7b..6a2bbfe 100644
--- a/src/scss/layout/_navigation.scss
+++ b/src/scss/layout/_navigation.scss
@@ -93,7 +93,7 @@
margin: 0;
display: none;
list-style-type: none;
- transition: left .5s ease;
+ @include fastTransition-all;
@include mediaQuery(medium) {
left: $nav__toplvlWidth;
&.btn-overview {