[Kimchi-devel] [PATCH] [Wok] Wok Toggle-Switch checkbox UI
joserz at linux.vnet.ibm.com
joserz at linux.vnet.ibm.com
Fri May 6 21:15:01 UTC 2016
Reviewed-by: Jose Ricardo Ziviani <joserz at linux.vnet.ibm.com>
On Fri, May 06, 2016 at 05:12:07PM -0300, sguimaraes943 at gmail.com wrote:
> 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
>
> _______________________________________________
> Kimchi-devel mailing list
> Kimchi-devel at ovirt.org
> http://lists.ovirt.org/mailman/listinfo/kimchi-devel
More information about the Kimchi-devel
mailing list