Diffstat (limited to 'frontend/delta/scss/web/checkbox.scss') (more/less context) (ignore whitespace changes)
-rw-r--r-- | frontend/delta/scss/web/checkbox.scss | 96 |
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; + } +} |