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

12 files changed, 254 insertions, 89 deletions

diff --git a/app/common/styles/base/forms.scss b/app/common/styles/base/forms.scss
index 3699521..f04e827 100644
--- a/app/common/styles/base/forms.scss
+++ b/app/common/styles/base/forms.scss
@@ -1,28 +1,31 @@
-label, legend {
-  font-size:1em;
+label,
+legend {
+  font-size: 1em;
   font-weight: 300;
   margin: 0;
   .error {
-    font-size: .9em;
+    font-size: 0.9em;
   }
 }
 
-.label__helper-text {
+// TODO: Start replacing use of label__helper-text
+.label__helper-text,
+.form__helper-text {
   color: $text-02;
   line-height: 1.2;
   font-size: 0.9em;
   margin-bottom: 0.4em;
 }
 
-input[type='email'],
-input[type='number'],
-input[type='password'],
-input[type='search'],
-input[type='tel'],
-input[type='url'],
-input[type='text'],
-input[type='date'],
-input[type='time'],
+input[type="email"],
+input[type="number"],
+input[type="password"],
+input[type="search"],
+input[type="tel"],
+input[type="url"],
+input[type="text"],
+input[type="date"],
+input[type="time"],
 textarea {
   border-radius: 0px;
   border: 1px solid $border-color-02;
@@ -66,37 +69,56 @@ textarea {
 }
 
 .form-error {
-  margin-bottom: .7em;
+  margin-bottom: 0.7em;
   font-size: 0.8rem;
   color: $status-error;
-  height:1rem;
+  height: 1rem;
   display: block;
   visibility: hidden;
+  // TODO: Create state rulesets rather than relying on one off solutions
   .visible {
     visibility: visible;
   }
 }
 //Foundation overwrite
-[type=color], [type=date], [type=datetime-local], [type=datetime], [type=email], [type=month], [type=number], [type=password], [type=search], [type=tel], [type=text], [type=time], [type=url], [type=week], textarea {
+[type="color"],
+[type="date"],
+[type="datetime-local"],
+[type="datetime"],
+[type="email"],
+[type="month"],
+[type="number"],
+[type="password"],
+[type="search"],
+[type="tel"],
+[type="text"],
+[type="time"],
+[type="url"],
+[type="week"],
+textarea {
   border-color: $border-color-02;
 }
 
 input[readonly],
-input[readonly]:focus{
+input[readonly]:focus {
   box-shadow: 0 0 0;
   background: $background-03;
   border: 1px solid $border-color-02;
 }
 
-textarea { padding: .2em;
-  height: auto;}
-input[type="submit"], .submit {
+textarea {
+  padding: 0.2em;
+  height: auto;
+}
+
+input[type="submit"],
+.submit {
   margin: 1em 0;
   width: 100%;
 }
 
-//Custom select
-select{
+// Custom select
+select {
   border-radius: 0px;
   height: auto;
   padding-right: 0.5rem; //override inherited Foundation style
@@ -121,3 +143,70 @@ select{
   color: $status-error;
   font-size: 0.9em;
 }
+
+/**
+ * Used for basic vertically stacked forms
+ * that do not need a grid for layout
+ * Should only wrap form elements and label
+ * Helper text shoul not be wrapped in the
+ * form-field container
+ * EX: Manage Power Usage
+ * Markup
+    <div class="section-content">
+      <p class="form__helper-text">Some helper text</p>
+      <div class=" form__field">
+        <label for="power-cap" class="content-label">POWER CAP VALUE IN WATTS</label>
+        <input id="power-cap type="number" />
+      </div>
+    </div>
+  */
+
+.form__field {
+  min-width: 150px;
+  max-width: 240px;
+}
+
+.form__field--large {
+  max-width: 330px;
+}
+
+// TODO Replace form-actions with form__actions. see below
+.form-actions {
+  width: 100%;
+  margin-top: 3rem;
+  padding-top: 1rem;
+  border-top: 1px solid $border-color-01;
+
+  button {
+    display: block;
+    float: right;
+    margin: 0.5em 0 0 1em;
+  }
+}
+
+/**
+ * Use to wrap the cancel and submit buttons on
+ * a form to create the top border and white space
+ * Markup
+  <div class="form-actions">
+    <button type="submit" class="btn-primary" ng-click="setPowerCap()">
+      Save settings
+    </button>
+    <button type="button" class="btn btn-secondary" ng-click="refresh()">
+      Cancel
+    </button>
+  </div>
+ */
+
+.form__actions {
+  margin-top: 3rem;
+  padding-top: 1rem;
+  border-top: 1px solid $border-color-01;
+  display: flex;
+  justify-content: flex-end;
+
+  button:first-of-type {
+    order: 1;
+    margin-left: 1rem;
+  }
+}
diff --git a/app/common/styles/base/mixins.scss b/app/common/styles/base/mixins.scss
index 87708da..4c5bfb1 100644
--- a/app/common/styles/base/mixins.scss
+++ b/app/common/styles/base/mixins.scss
@@ -191,3 +191,11 @@
     animation: row-flash 1s infinite; /* IE 10+ */
   }
 }
+
+@mixin label {
+  color: $text-02;
+  text-transform: uppercase;
+  font-weight: 700;
+  font-size: 0.75em;
+  margin-bottom: 0.5rem;
+}
diff --git a/app/common/styles/base/typography.scss b/app/common/styles/base/typography.scss
index f0a5e20..baa6a60 100644
--- a/app/common/styles/base/typography.scss
+++ b/app/common/styles/base/typography.scss
@@ -20,29 +20,35 @@ h5 {
   color: $text-01;
 }
 
-h1, .h1 {
+h1,
+.h1 {
   font-size: 2.25rem;
   font-weight: 500;
-  padding-top: .5rem;
+  padding-top: 0.5rem;
+  margin-bottom: 3rem;
 }
 
-h2, .h2 {
+h2,
+.h2 {
   font-size: 1.25rem;
   font-weight: bold;
 }
 
-h3, .h3 {
+h3,
+.h3 {
   font-size: 1rem;
   font-weight: bold;
 }
 
-h4, .h4 {
-  font-size: .875rem;
+h4,
+.h4 {
+  font-size: 0.875rem;
   font-weight: bold;
 }
 
-h5, .h5 {
-  font-size: .875rem;
+h5,
+.h5 {
+  font-size: 0.875rem;
   font-weight: 500;
   color: $text-02;
 }
@@ -55,4 +61,4 @@ h5, .h5 {
   font-family: "Courier New", Helvetica, arial, sans-serif;
   font-weight: 700;
   margin-bottom: 0;
-}
\ No newline at end of file
+}
diff --git a/app/common/styles/base/utility.scss b/app/common/styles/base/utility.scss
index 7297628..26f138a 100644
--- a/app/common/styles/base/utility.scss
+++ b/app/common/styles/base/utility.scss
@@ -75,10 +75,6 @@
   margin-top: 0 !important;
 }
 
-.btm-border-grey {
-  border-bottom: 1px solid $border-color-02;
-}
-
 .transitionAll {
   transition: all .5s ease;
 }
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;
-}
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 @@ input.toggle-switch__round-flat + label:after {
   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 @@ input.toggle-switch__round-flat:checked + label {
   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;
+}
diff --git a/app/common/styles/layout/content.scss b/app/common/styles/layout/content.scss
index 61e082b..8c8b916 100644
--- a/app/common/styles/layout/content.scss
+++ b/app/common/styles/layout/content.scss
@@ -2,15 +2,6 @@
 $nav__toplvlWidth: 120px;
 $nav__seclvlWidth: 240px;
 
-// Page header
-.page-header {
-  width: 100%;
-  position: relative;
-  border-bottom: 1px solid $border-color-02;
-  margin: 0.5em 0 2.2em;
-  padding-left: 0;
-}
-
 // Main element class
 .content__container {
   margin-left: $nav__toplvlWidth;
@@ -41,15 +32,22 @@ $nav__seclvlWidth: 240px;
   margin-top: 2em;
 }
 
+// TODO: Determine if label and content-label are the same - remove generic element selector
 .content-label,
 label {
-  color: $text-02;
-  text-transform: uppercase;
-  font-weight: 700;
-  font-size: 0.75em;
-  margin-bottom: 0;
+  @include label;
 }
 
+// TODO: Remove and replace with page and page-title pattern
+// Page header
+.page-header {
+  width: 100%;
+  position: relative;
+  border-bottom: 1px solid $border-color-02;
+  margin: 0.5em 0 2.2em;
+  padding-left: 0;
+}
+// TODO: Remove and replace with the .section and .section-title pattern
 .subhead {
   width: 100%;
   border-bottom: 1px solid $border-color-01;
diff --git a/app/common/styles/layout/header.scss b/app/common/styles/layout/header.scss
index 3593780..3e0f0da 100644
--- a/app/common/styles/layout/header.scss
+++ b/app/common/styles/layout/header.scss
@@ -1,3 +1,8 @@
+/**
+ * Application header styles
+ * Should only be used for the application header
+ */
+
 $logoHeight: 30px;
 $logoMaxHeight: 100px;
 $logoMaxWidth: 125px;
@@ -38,7 +43,7 @@ $logoMaxWidth: 125px;
 .header__logout {
   float: right;
   color: $primary-light;
-  font-size: .9em;
+  font-size: 0.9em;
   text-decoration: none;
   padding: 1em;
   font-weight: 400;
@@ -61,7 +66,7 @@ $logoMaxWidth: 125px;
     font-size: 1.5em;
     font-weight: 500;
     color: $text-02;
-    padding: .4em 0 0 1em;
+    padding: 0.4em 0 0 1em;
     height: 100%;
     background: transparent;
     max-width: 600px;
@@ -78,7 +83,7 @@ $logoMaxWidth: 125px;
     }
   }
   .logo__wrapper {
-    padding-top: .5em;
+    padding-top: 0.5em;
   }
 
   .header__logo {
@@ -97,7 +102,7 @@ $logoMaxWidth: 125px;
     right: -480px;
     bottom: 0;
     z-index: 100;
-    margin: .3em 0;
+    margin: 0.3em 0;
     background: $primary-light;
     @include fastTransition-all;
     &.active {
@@ -111,12 +116,13 @@ $logoMaxWidth: 125px;
       color: $primary-dark;
       font-size: 1em;
     }
-    a, p {
+    a,
+    p {
       display: block;
       float: left;
       text-decoration: none;
       color: $text-02;
-      padding: 1.250em;
+      padding: 1.25em;
       height: 100%;
       font-size: 0.875em;
       font-weight: 400;
@@ -125,7 +131,7 @@ $logoMaxWidth: 125px;
         display: block;
         font-size: 1rem;
         font-weight: bold;
-        margin-top: .5em;
+        margin-top: 0.5em;
       }
     }
   }
@@ -137,7 +143,7 @@ $logoMaxWidth: 125px;
   .header__multi-server {
     background: $background-02;
     @include round-corners;
-    margin: 0 .3em;
+    margin: 0 0.3em;
     height: 100%;
     border: 1px solid $border-color-01;
     opacity: 1;
@@ -148,8 +154,8 @@ $logoMaxWidth: 125px;
   }
 
   .header__multi-server {
-    padding: .5em;
-    padding-top: .8em;
+    padding: 0.5em;
+    padding-top: 0.8em;
     float: left;
     margin-top: 10px;
     margin-right: -10px;
@@ -167,12 +173,12 @@ $logoMaxWidth: 125px;
   }
   .header__functions {
     .header__info {
-      padding: .3em;
+      padding: 0.3em;
       min-width: 40px;
       text-align: center;
       float: left;
       span {
-        padding: .7em 0 .3em;
+        padding: 0.7em 0 0.3em;
         font-size: 1em;
         font-weight: 400;
         color: $text-02;
@@ -214,7 +220,7 @@ $logoMaxWidth: 125px;
       font-weight: 400;
       color: $text-02;
       display: block;
-      margin-bottom: .2em;
+      margin-bottom: 0.2em;
     }
     .icon {
       display: block;
diff --git a/app/common/styles/layout/index.scss b/app/common/styles/layout/index.scss
index 4183519..8a33213 100644
--- a/app/common/styles/layout/index.scss
+++ b/app/common/styles/layout/index.scss
@@ -1,2 +1,5 @@
-@import 'header';
-@import 'content';
+@import "header";
+@import "page";
+@import "section";
+@import "content";
+@import "list";
diff --git a/app/common/styles/layout/list.scss b/app/common/styles/layout/list.scss
new file mode 100644
index 0000000..9be7522
--- /dev/null
+++ b/app/common/styles/layout/list.scss
@@ -0,0 +1,18 @@
+/**
+ * Used for any key value pair
+ * Markup
+   <dl class="list-pair">
+     <dt>Term</dt>
+     <dd>Definition associated with the term</dd>
+   </dl>
+ */
+
+.list-pair {
+  dt {
+    @include label;
+  }
+  dd {
+    @include fontCourierBold;
+    margin-bottom: 0;
+  }
+}
diff --git a/app/common/styles/layout/page.scss b/app/common/styles/layout/page.scss
new file mode 100644
index 0000000..2ce98d5
--- /dev/null
+++ b/app/common/styles/layout/page.scss
@@ -0,0 +1,15 @@
+/**
+ * Used for page layout. This should be used for the page container
+ * Mark up
+ <div class="page">
+   <h1 class="page-title">Page Title</h1>
+   ...
+ </div>
+ */
+.page {
+  max-width: 1080px;
+}
+
+.page-title {
+  margin-bottom: 3rem;
+}
diff --git a/app/common/styles/layout/section.scss b/app/common/styles/layout/section.scss
new file mode 100644
index 0000000..e92b096
--- /dev/null
+++ b/app/common/styles/layout/section.scss
@@ -0,0 +1,28 @@
+/**
+ * Used for section layout. This should be used for the page container
+ * Mark up
+ <div class="section">
+   <h2 class="section-title">Section Title</h2>
+   <div class="section-content">
+     ...
+    </div>
+    <div class="section-content">
+     ...
+    </div>
+ </div>
+ */
+
+.section {
+  margin-bottom: 3rem;
+}
+
+.section-title {
+  border-bottom: 1px solid $border-color-01;
+  padding-bottom: 0.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.section-content {
+  margin-bottom: 1.5rem;
+  margin-top: 0;
+}