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/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;
-}