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

1 files changed, 12 insertions, 14 deletions

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;