1 files changed, 96 insertions, 0 deletions

diff --git a/frontend/delta/scss/web/checkbox.scss b/frontend/delta/scss/web/checkbox.scss
new file mode 100644
index 0000000..75b5de8
--- a/dev/null
+++ b/frontend/delta/scss/web/checkbox.scss
@@ -0,0 +1,96 @@
+div.checkbox {
+        display: block;
+        margin-bottom: 20px;
+        @include border-radius(4px);
+        border: 2px solid white;
+        background-color: white;
+        width: 80px;
+        position: relative;
+        height: 32px;
+
+        &:before {
+                content: "ON";
+                padding-left: 9px;
+                line-height: 32px;
+                color: $solarize-Accent-Cyan;
+                font-size: 14px;
+                font-weight: 600;
+
+        }
+
+        &:after {
+                content: "OFF";
+        //      padding-left: 12px;
+                padding-left: 25px;
+                line-height: 32px;
+                color: $solarize-Accent-Cyan;
+                font-size: 14px;
+                font-weight: 600;
+        }
+
+
+
+        label.check { 
+                display: block;
+                width: 40px;
+                height: 30px;
+                @include border-radius(3px);
+                background-color: $solarize-Accent-Magenta;
+                border: 1px solid $solarize-Accent-Magenta;
+                position: absolute;
+                top: 0px;
+                left: 0px;
+        }
+
+
+
+        input[type=checkbox] {
+                display: none;
+        }
+
+        input[type=checkbox]:checked + label.check {
+                top: 0px;
+                left: 38px;
+                @include animation(labelON, .2s, ease-in, 1);
+        }
+
+        input[type=checkbox] + label.check {
+                top: 0px;
+                left: 0px;
+                @include animation(labelOFF, .2s, ease-in, 1);
+        }
+
+        label.info {
+                position: absolute;
+                color: white;
+                top: 0px;
+                left: 100px;
+                line-height: 32px;
+                width: 200px;
+                font-size: 16pt;
+        }
+}
+
+@include keyframes(labelON) {
+        0% {
+                top: 0px;
+                left: 0px;
+        }
+        
+        100% { 
+                top: 0px;
+                left: 38px;
+        }
+}
+
+@include keyframes(labelOFF) {
+        0% {
+                top: 0px;
+                left: 38px;
+        }
+        
+        100% { 
+                top: 0px;
+                left: 0px;
+        }
+}