fixed responsiveness for smaller screens

Change-Id: I1175801c27d66436be257365436bb484515b83c3
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>

1 files changed, 13 insertions, 12 deletions

diff --git a/app/server-control/styles/power-operations.scss b/app/server-control/styles/power-operations.scss
index 52bec2b..c5b580f 100644
--- a/app/server-control/styles/power-operations.scss
+++ b/app/server-control/styles/power-operations.scss
@@ -27,30 +27,30 @@
     font-weight: 700;
     margin-top: -.3em;
     span:before {
-      content: '\25CF';
-      display: inline-block;
-      font-size: 1.8em;
-      color: $darkgrey;
-      margin-right: .1em;
-      vertical-align: middle;
-      transform: translateY(-4px);
-      @include slowTransition-all;
+      content: '';
+      position: absolute;
+      margin-left: -25px;
+      @extend .icon__off;
     }
   }
 
   // Power bar indicator
   .power__indicator-bar {
     font-weight: bold;
-    padding: 1.4em 3em 0;
+    padding: 1em 2em .7em;
     margin-bottom: 3em;
     background-size: 200% 100%;
-    background-image: linear-gradient(to right, $lightgrey 50%, $status-ok-light 50%);
+    background-image: linear-gradient(to right, darken($lightgrey,3%) 50%, $status-ok-light 50%);
     background-position: 0;
     transition: background-position 2s ease;
     overflow: hidden;
+    display:flex;
+    justify-content: space-between;
+    align-items:center;
     p {
       padding: 0;
       margin: 0;
+      font-size: 1.2em;
     }
     &.power__state-on {
       background-position: -100%;
@@ -63,10 +63,11 @@
     }
     &.power__state-off {
       background-position: 0;
-      color: $darkgrey;
+      color: $black;
       .power__state {
         span:before {
-          color: $darkgrey;
+          content: '';
+          @extend .icon__off;
         }
       }
     }