[Kimchi-devel] [PATCH] [Wok] Wok Toggle-Switch checkbox UI

From: Samuel Guimarães <sguimaraes943(a)gmail.com&gt; This commit adds a toggle switch inspired by iOS and Material Design checkboxes. HTML syntax: <input type="checkbox" id="checkboxid" checked="" class="wok-toggleswitch-checkbox"> <label for="checkboxid" class="wok-toggleswitch-label"> <span class="sr-only">Checkbox label hidden from UI</span></label> Signed-off-by: Samuel Guimarães <sguimaraes943(a)gmail.com&gt; --- ui/css/src/modules/_wok-toggleswitch.scss | 80 +++++++++++++++++++++++++++++++ ui/css/src/modules/_wok-variables.scss | 3 ++ ui/css/src/wok.scss | 2 + ui/css/wok.css | 77 +++++++++++++++++++++++++++++ 4 files changed, 162 insertions(+) create mode 100644 ui/css/src/modules/_wok-toggleswitch.scss diff --git a/ui/css/src/modules/_wok-toggleswitch.scss b/ui/css/src/modules/_wok-toggleswitch.scss new file mode 100644 index 0000000..324a37c --- /dev/null +++ b/ui/css/src/modules/_wok-toggleswitch.scss @@ -0,0 +1,80 @@ +// +// Project Wok +// +// Copyright IBM Corp, 2015-2016 +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// + +.wok-toggleswitch-label { + position: relative; + display: inline-block; + height: 20px; + width: 44px; + background: $toggle-checkbox-label-bg; + border-radius: 100px; + cursor: pointer; + @include transition(all 0.3s ease); + @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.275)); +} + +.wok-toggleswitch-label:after { + position: absolute; + left: -2px; + top: -3px; + display: block; + width: 26px; + height: 26px; + border-radius: 100px; + background: $toggle-checkbox-trigger-bg; + @include box-shadow (0px 3px 3px rgba(0,0,0,0.05)); + content: ''; + @include transition(all 0.3s ease); +} + +.wok-toggleswitch-label:active:after { + @include transform(scale(1.05,1.05)); +} + +.wok-toggleswitch-checkbox:focus ~ label { + background: $toggle-checkbox-label-bg; +} + +.wok-toggleswitch-checkbox:focus ~ label:after { + @include box-shadow (0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6)); + border: 1px solid $input-border-focus; + outline: 0; +} + +.wok-toggleswitch-checkbox { + position: absolute; + top: 0; + left: 0; + @include opacity(0); +} + +.wok-toggleswitch-checkbox:checked ~ label:after { + left: 20px; + background: $toggle-checkbox-trigger-checked-bg; +} + +.wok-toggleswitch-checkbox:disabled ~ label { + background: $toggle-checkbox-label-bg; + pointer-events: none; + @include opacity(.75); +} + +.wok-toggleswitch-checkbox:disabled ~ label:after { + background: $disabled-color; + @include opacity(.75); +} \ No newline at end of file diff --git a/ui/css/src/modules/_wok-variables.scss b/ui/css/src/modules/_wok-variables.scss index c58feba..61d4216 100644 --- a/ui/css/src/modules/_wok-variables.scss +++ b/ui/css/src/modules/_wok-variables.scss @@ -46,6 +46,9 @@ $kimchi-dropdown: #4d4c4e !default; $storages-low: #8BC53E !default; $fa-green: #a8d46f !default; $vnc-blue: #5ab3d4; +$toggle-checkbox-trigger-bg: #a7a7a8; +$toggle-checkbox-trigger-checked-bg: $brand-primary; +$toggle-checkbox-label-bg: #d6d6d6; $guestCharts: ( lightGray: #e6e7e8, diff --git a/ui/css/src/wok.scss b/ui/css/src/wok.scss index 4b706ae..50fb06b 100755 --- a/ui/css/src/wok.scss +++ b/ui/css/src/wok.scss @@ -133,6 +133,8 @@ body { @import "modules/loaders"; // Wok Forms @import "modules/wok-forms"; +// Wok Toggle Switch +@import "modules/wok-toggleswitch"; // Wok Confirm Dialog @import "modules/wok-confirm"; // Form validation classes diff --git a/ui/css/wok.css b/ui/css/wok.css index 55308c0..9c26c77 100644 --- a/ui/css/wok.css +++ b/ui/css/wok.css @@ -1161,6 +1161,83 @@ input[type=radio].wok-radio + label { margin-right: 10px; } +.wok-toggleswitch-label { + position: relative; + display: inline-block; + height: 20px; + width: 44px; + background: #d6d6d6; + border-radius: 100px; + cursor: pointer; + -webkit-transition: all 0.3s ease; + -o-transition: all 0.3s ease; + transition: all 0.3s ease; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.275); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.275); +} + +.wok-toggleswitch-label:after { + position: absolute; + left: -2px; + top: -3px; + display: block; + width: 26px; + height: 26px; + border-radius: 100px; + background: #a7a7a8; + -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.05); + box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.05); + content: ''; + -webkit-transition: all 0.3s ease; + -o-transition: all 0.3s ease; + transition: all 0.3s ease; +} + +.wok-toggleswitch-label:active:after { + -webkit-transform: scale(1.05, 1.05); + -moz-transform: scale(1.05, 1.05); + -ms-transform: scale(1.05, 1.05); + -o-transform: scale(1.05, 1.05); + transform: scale(1.05, 1.05); +} + +.wok-toggleswitch-checkbox:focus ~ label { + background: #d6d6d6; +} + +.wok-toggleswitch-checkbox:focus ~ label:after { + -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); + border: 1px solid #66afe9; + outline: 0; +} + +.wok-toggleswitch-checkbox { + position: absolute; + top: 0; + left: 0; + opacity: 0; + filter: alpha(opacity=0); +} + +.wok-toggleswitch-checkbox:checked ~ label:after { + left: 20px; + background: #3a393b; +} + +.wok-toggleswitch-checkbox:disabled ~ label { + background: #d6d6d6; + pointer-events: none; + opacity: 0.75; + filter: alpha(opacity=75); +} + +.wok-toggleswitch-checkbox:disabled ~ label:after { + background: #999; + opacity: 0.75; + filter: alpha(opacity=75); +} + #wok-confirm-modal .modal-title .fa { font-size: 47px; color: #fdb813; -- 1.9.3