commit c652ed1889599da3ca2a0e0d36979e099f9b3b8c
author Dixsie Wolmers <dixsiew@gmail.com> Fri Jul 19 13:03:28 2019 -0500
committer Gunnar Mills <gmills@us.ibm.com> Fri Aug 09 15:10:42 2019 +0000
tree 9dcd1d62691f1f268c7ac3d819586c59ce949f58
parent c81cdd4acceb7b284ebb9680b6e318ddf4f20542

Update toggle component

- Adds text to indicate the current state of the toggle button to meet
  accessibility guidelines
- Update size, color, and focus of toggle component to fix
  DAP violations
- Add page, section, and list-pair layout patterns established
  on the power usage page to begin a pattern for consistent
  page layout
- Add form__field and form__actions to help with form layout
  consistency.

Tested: Verified toggle functions in the GUI and tested with screen reader. Passes DAP.

Signed-off-by: Dixsie Wolmers <dixsiew@gmail.com>
Change-Id: Iaa8646b1179cc307971065c455f4b9448095d1ec

app/server-control/styles/index.scss

diff --git a/app/server-control/styles/index.scss b/app/server-control/styles/index.scss
index 5e8a995..7171a7e 100644
--- a/app/server-control/styles/index.scss
+++ b/app/server-control/styles/index.scss
@@ -2,5 +2,4 @@
 @import "./power-operations.scss";
 @import "./remote-console.scss";
 @import "./server-led.scss";
-@import "./power-usage.scss";
 @import "./kvm.scss";

app/server-control/styles/power-usage.scss

diff --git a/app/server-control/styles/power-usage.scss b/app/server-control/styles/power-usage.scss
deleted file mode 100644
index 0f612ae..0000000
--- a/app/server-control/styles/power-usage.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-// Power Usage SCSS
-.power-usage__form {
-
-  input {
-    margin-bottom: 0em;
-  }
-
-  fieldset {
-    padding-left: 1.8em;
-  }
-
-  .power-usage__switch-label {
-    padding-bottom: .5em;
-  }
-
-  .power-usage__switch-label p {
-    margin: 0;
-    &:first-child {font-weight: 700;}
-  }
-
-  .power-usage__metadata-wrapper {
-    margin: 0;
-    padding: 0;
-  }
-
-  .power-usage__metadata-block {
-    min-width: 47%;
-    margin-bottom: 1.8em;
-    margin-right: .7em;
-    display: inline-block;
-    white-space: normal;
-    word-break: break-all;
-    @include mediaQuery(small) {
-      float: left;
-    }
-  }
-
-  .power-usage__submit-wrapper {
-    width: 100%;
-    margin-top: 3em;
-    padding-top: 1em;
-    border-top: 1px solid $border-color-01;
-    button {
-      float: right;
-      margin: .5em;
-    }
-  }
-}

app/server-control/styles/server-led.scss

diff --git a/app/server-control/styles/server-led.scss b/app/server-control/styles/server-led.scss
index 9807c74..26136fa 100644
--- a/app/server-control/styles/server-led.scss
+++ b/app/server-control/styles/server-led.scss
@@ -1,12 +1,13 @@
 // Server LED
 
 #led-switch {
-  .switch {margin-left: 1.7em;}
   .led-switch__label {
     padding-bottom: 1.5em;
   }
   .led-switch__label p {
     margin: 0;
-    &:first-child {font-weight: 700;}
+    &:first-child {
+      font-weight: 700;
+    }
   }
 }