[Kimchi-devel] [PATCH] [Wok] Wok Toggle-Switch checkbox UI
sguimaraes943 at gmail.com
sguimaraes943 at gmail.com
Fri May 6 20:12:07 UTC 2016
From: Samuel Guimarães <sguimaraes943 at gmail.com>
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 at gmail.com>
---
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
+ at 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
More information about the Kimchi-devel
mailing list