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