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;
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 @@
.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 @@
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 @@
}
}
.logo__wrapper {
- padding-top: .5em;
+ padding-top: 0.5em;
}
.header__logo {
@@ -97,7 +102,7 @@
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 @@
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 @@
display: block;
font-size: 1rem;
font-weight: bold;
- margin-top: .5em;
+ margin-top: 0.5em;
}
}
}
@@ -137,7 +143,7 @@
.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 @@
}
.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 @@
}
.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 @@
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;
+}