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
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 @@
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;