unit-id: start support
Change-Id: Icb00b5b3178b2ea0a3996b3e7ee50bc4f9a54198
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
diff --git a/src/scss/base/_colors.scss b/src/scss/base/_colors.scss
index 2fa98e8..e7fdd47 100644
--- a/src/scss/base/_colors.scss
+++ b/src/scss/base/_colors.scss
@@ -15,7 +15,7 @@
// Light Background
$lightbg__grey: #b8c1c1;
-$lightbg__accent: #ebf0fc;
+$lightbg__accent: #d8e2fc;
$lightbg__primary: #3c6df0;
// Primary Button colors
diff --git a/src/scss/base/_forms.scss b/src/scss/base/_forms.scss
index 134537d..f899e0c 100644
--- a/src/scss/base/_forms.scss
+++ b/src/scss/base/_forms.scss
@@ -126,4 +126,4 @@
.checkbox-custom:focus + .checkbox-custom-label, .radio-custom:focus + .radio-custom-label {
outline: 1px solid $lightbg__grey; /* focus style */
-}
\ No newline at end of file
+}
diff --git a/src/scss/base/_utility.scss b/src/scss/base/_utility.scss
index cedac11..8f17403 100644
--- a/src/scss/base/_utility.scss
+++ b/src/scss/base/_utility.scss
@@ -64,6 +64,10 @@
margin-top: 0px !important;
}
+.btm-border-grey {
+ border-bottom: 1px solid $lightbg__grey;
+}
+
.transitionAll {
transition: all .5s ease;
}
\ No newline at end of file
diff --git a/src/scss/components/_all.scss b/src/scss/components/_all.scss
index 7fad716..d9e8d34 100644
--- a/src/scss/components/_all.scss
+++ b/src/scss/components/_all.scss
@@ -1,5 +1,4 @@
-@import "status";
@import "systemUser";
@import "login";
-@import "alerts";
-@import "power-ops";
\ No newline at end of file
+@import "power-ops";
+@import "uid-light";
\ No newline at end of file
diff --git a/src/scss/components/_uid-light.scss b/src/scss/components/_uid-light.scss
new file mode 100644
index 0000000..cd7a9fe
--- /dev/null
+++ b/src/scss/components/_uid-light.scss
@@ -0,0 +1,19 @@
+// UI Light
+
+#uid-switch {
+ .switch {margin-left: 1.7em;}
+ .uid-switch__label {
+ padding-bottom: 1.5em;
+ }
+ .uid-switch__label p {
+ margin: 0;
+ &:first-child {font-weight: 700;}
+ }
+ .h4 {
+ border-bottom: 1px solid $lightbg__grey;
+ margin: 2.625em 0 1.2em 0;
+ padding: 0 0 .85em;
+ font-weight: 700;
+ }
+
+}
\ No newline at end of file
diff --git a/src/scss/components/_alerts.scss b/src/scss/elements/_alerts.scss
similarity index 100%
rename from src/scss/components/_alerts.scss
rename to src/scss/elements/_alerts.scss
diff --git a/src/scss/elements/_all.scss b/src/scss/elements/_all.scss
new file mode 100644
index 0000000..2913202
--- /dev/null
+++ b/src/scss/elements/_all.scss
@@ -0,0 +1,4 @@
+
+@import "toggle-switch";
+@import "status";
+@import "alerts";
\ No newline at end of file
diff --git a/src/scss/components/_status.scss b/src/scss/elements/_status.scss
similarity index 93%
rename from src/scss/components/_status.scss
rename to src/scss/elements/_status.scss
index 0cba22f..7d9b57a 100644
--- a/src/scss/components/_status.scss
+++ b/src/scss/elements/_status.scss
@@ -29,7 +29,7 @@
@mixin status-light__warn {
@include status-light;
- color: $darkgrey;
+ color: $status-warn;
}
@@ -56,6 +56,6 @@
.status-light__warn {
color: $status-warn;
&::before {
- @include status-light__error;
+ @include status-light__warn;
}
}
\ No newline at end of file
diff --git a/src/scss/elements/_toggle-switch.scss b/src/scss/elements/_toggle-switch.scss
new file mode 100644
index 0000000..4c0faea
--- /dev/null
+++ b/src/scss/elements/_toggle-switch.scss
@@ -0,0 +1,74 @@
+@mixin marginTransition {
+ -webkit-transition: margin 0.4s, background 0.4s;
+ -moz-transition: margin 0.4s, background 0.4s;
+ -o-transition: margin 0.4s, background 0.4s;
+ transition: margin 0.4s, background 0.4s;
+}
+
+@mixin borderRadius {
+ -webkit-border-radius: 60px;
+ -moz-border-radius: 60px;
+ -ms-border-radius: 60px;
+ border-radius: 60px;
+}
+
+.toggle-switch {
+ position: absolute;
+ margin-left: -9999px;
+ visibility: hidden;
+}
+.toggle-switch + label {
+ display: block;
+ position: relative;
+ cursor: pointer;
+ outline: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+input.toggle-switch__round-flat + label {
+ padding: 2px;
+ width: 50px;
+ height: 30px;
+ background-color: $lightgrey;
+ @include borderRadius;
+ @include marginTransition;
+}
+input.toggle-switch__round-flat + label:before, input.toggle-switch__round-flat + label:after {
+ display: block;
+ position: absolute;
+ content: "";
+}
+input.toggle-switch__round-flat + label:before {
+ top: 2px;
+ left: 2px;
+ bottom: 2px;
+ right: 2px;
+ background-color: $white;
+ @include borderRadius;
+ @include marginTransition;
+}
+input.toggle-switch__round-flat + label:after {
+ top: 4px;
+ left: 4px;
+ bottom: 4px;
+ width: 20px;
+ background-color: $lightgrey;
+ -webkit-border-radius: 52px;
+ -moz-border-radius: 52px;
+ -ms-border-radius: 52px;
+ border-radius: 52px;
+ @include marginTransition;
+}
+input.toggle-switch__round-flat:checked + label {
+ background-color: $primebtn__bg;
+}
+input.toggle-switch__round-flat:checked + label:before {
+ background-color: $lightbg__accent;
+}
+input.toggle-switch__round-flat:checked + label:after {
+ margin-left: 20px;
+ background-color: $primebtn__bg;
+}
\ No newline at end of file
diff --git a/src/scss/main.scss b/src/scss/main.scss
index e0bd509..30249cf 100755
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -2,6 +2,7 @@
@import 'base/all';
@import 'utils/all';
@import 'layout/all';
+@import 'elements/all';
@import 'components/all';
@import 'vendor/all';
diff --git a/src/unit-id.html b/src/unit-id.html
new file mode 100644
index 0000000..ce1bbc8
--- /dev/null
+++ b/src/unit-id.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>openBMC</title>
+ <link rel="icon" href="favicon.ico?v=2"/>
+ <link rel="stylesheet" href="css/main.css">
+ <script src="js/vendor/vendor.min.js"></script>
+</head>
+<body>
+
+<!-- Header & Navigation includes -->
+<div id="header__wrapper"></div>
+<div id="navigation"></div>
+
+<!-- Power Operations Content -->
+<main id="uid-switch" class="content__container" role="main">
+ <div class="row column">
+ <h1>Unit ID Indicator</h1>
+ </div>
+
+ <div class="row column">
+ <h2 class="h4">Unit ID control</h2>
+ </div>
+
+ <div class="row column">
+ <div class="btm-border-grey">
+ <div class="switch inline">
+ <input id="toggle__round" class="toggle-switch toggle-switch__round-flat" type="checkbox" tabindex="0">
+ <label for="toggle__round"></label>
+ </div>
+ <div class="uid-switch__label inline">
+ <p>Unit ID indicator is <span class="uid-switch__status">off</span></p>
+ <p>Control unit indicator to identify server unit.</p>
+ </div>
+ </div>
+ </div>
+</main>
+
+</body>
+<script src="js/app.min.js"></script>
+
+<!-- FOR DEMO ONLY __ DO NOT COPY BELOW -->
+<script>
+ $('.toggle-switch').on('click', function(){
+ console.log($(this).parents('.row'));
+ $(this).parents('.row').find('.uid-switch__status').html('on');
+ });
+</script>
+</html>