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/common/styles/elements/quicklinks.scss

diff --git a/app/common/styles/elements/quicklinks.scss b/app/common/styles/elements/quicklinks.scss
index 9d6ea48..c1bff93 100644
--- a/app/common/styles/elements/quicklinks.scss
+++ b/app/common/styles/elements/quicklinks.scss
@@ -50,12 +50,14 @@
     &:after {
       display: none;
     }
+    .toggle-container {
+      float: right;
+    }
   }
   &:last-child {
     border-bottom: 0;
   }
   .float-right {
-    display:inline-block;
     float: right;
     @media(min-width: 1024px) and (max-width: 1140px) {
       display: block;
@@ -77,9 +79,3 @@
     color: $status-error;
   }
 }
-
-//toggle switch
-.quick-links__item .toggle label {
-  transform: translateY(-2px);
-  margin-right: 0;
-}

app/common/styles/elements/toggle-switch.scss

diff --git a/app/common/styles/elements/toggle-switch.scss b/app/common/styles/elements/toggle-switch.scss
index ae8c276..814da91 100644
--- a/app/common/styles/elements/toggle-switch.scss
+++ b/app/common/styles/elements/toggle-switch.scss
@@ -1,8 +1,5 @@
 @mixin marginTransition {
-  -webkit-transition: margin 0.4s, background 0.4s;
-  -moz-transition: margin 0.4s, background 0.4s;
-  -o-transition: margin 0.4s, background 0.4s;
-  transition: margin 0.4s, background 0.4s;
+  transition: margin $duration--moderate-01, background $duration--moderate-01;
 }
 
 @mixin borderRadius {
@@ -11,11 +8,13 @@
   border-radius: 60px;
 }
 
+.toggle-container {
+  display: flex;
+}
+
 .toggle-switch {
   position: absolute;
-  left: 20px;
-  height: 1px;
-  width: 1px;
+  top: 0;
   opacity: 0;
 }
 
@@ -32,22 +31,25 @@
 
 .toggle label {
   text-indent: -9999px;
-  transform: translateY(-50%); // keeps switch centered
+  margin-right: 0.3rem;
+}
+
+input.toggle-switch__round-flat:focus + label {
+  outline: 1px solid $primary-accent;
+  outline-offset: 3px;
 }
 
 input.toggle-switch__round-flat + label {
   padding: 2px;
-  width: 50px;
-  height: 30px;
+  width: 43px;
+  height: 22px;
   background-color: $border-color-02;
   @include borderRadius;
   @include marginTransition;
 }
 
-input.toggle-switch__round-flat:focus + label {
-  box-shadow: 0 0 4px 4px $primary-accent;
-}
-input.toggle-switch__round-flat + label:before, input.toggle-switch__round-flat + label:after {
+input.toggle-switch__round-flat + label:before,
+input.toggle-switch__round-flat + label:after {
   display: block;
   position: absolute;
   content: "";
@@ -65,7 +67,7 @@
   top: 4px;
   left: 4px;
   bottom: 4px;
-  width: 20px;
+  width: 15px;
   background-color: $border-color-02;
   -webkit-border-radius: 52px;
   -moz-border-radius: 52px;
@@ -76,9 +78,9 @@
   background-color: $primary-accent;
 }
 input.toggle-switch__round-flat:checked + label:before {
-  background-color: $background-02;
+  background-color: $primary-accent;
 }
 input.toggle-switch__round-flat:checked + label:after {
   margin-left: 20px;
-  background-color: $primary-accent;
-}
\ No newline at end of file
+  background-color: $primary-light;
+}