unit-id: start support
Change-Id: Icb00b5b3178b2ea0a3996b3e7ee50bc4f9a54198
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
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