From 398cdfa57780b67885177379b1bebd94a3d2e327 Mon Sep 17 00:00:00 2001 From: MuK IT GmbH Date: Wed, 17 Oct 2018 02:00:53 +0000 Subject: [PATCH] publish muk_web_utils - 12.0 --- muk_web_utils/__manifest__.py | 2 +- muk_web_utils/static/src/scss/switch.scss | 155 +++++++++++++++++++ muk_web_utils/static/src/scss/variables.scss | 36 +++++ muk_web_utils/static/src/xml/switch.xml | 65 ++++++++ muk_web_utils/template/assets.xml | 19 +-- 5 files changed, 259 insertions(+), 18 deletions(-) create mode 100644 muk_web_utils/static/src/scss/switch.scss create mode 100644 muk_web_utils/static/src/scss/variables.scss create mode 100644 muk_web_utils/static/src/xml/switch.xml diff --git a/muk_web_utils/__manifest__.py b/muk_web_utils/__manifest__.py index 5c6e3fc..fc55344 100644 --- a/muk_web_utils/__manifest__.py +++ b/muk_web_utils/__manifest__.py @@ -20,7 +20,7 @@ { "name": "MuK Web Utils", "summary": """Utility Features""", - "version": "12.0.2.0.17", + "version": "12.0.2.0.19", "category": "Extra Tools", "license": "AGPL-3", "author": "MuK IT", diff --git a/muk_web_utils/static/src/scss/switch.scss b/muk_web_utils/static/src/scss/switch.scss new file mode 100644 index 0000000..c76e4f1 --- /dev/null +++ b/muk_web_utils/static/src/scss/switch.scss @@ -0,0 +1,155 @@ +/********************************************************************************** +* +* Copyright (C) 2017 MuK IT GmbH +* +* This program is free software: you can redistribute it and/or modify +* it under the terms of the GNU Affero General Public License as +* published by the Free Software Foundation, either version 3 of the +* License, or (at your option) any later version. +* +* This program is distributed in the hope that it will be useful, +* but WITHOUT ANY WARRANTY; without even the implied warranty of +* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +* GNU Affero General Public License for more details. +* +* You should have received a copy of the GNU Affero General Public License +* along with this program. If not, see . +* +**********************************************************************************/ + +.switch { + font-size: $font-size-base; + position: relative; + + input { + position: absolute; + height: 1px; + width: 1px; + background: none; + border: 0; + clip: rect(0 0 0 0); + clip-path: inset(50%); + overflow: hidden; + padding: 0; + + + label { + position: relative; + min-width: calc(#{$switch-height} * 2); + border-radius: $switch-border-radius; + height: $switch-height; + line-height: $switch-height; + display: inline-block; + cursor: pointer; + outline: none; + user-select: none; + vertical-align: middle; + text-indent: calc(calc(#{$switch-height} * 2) + .5rem); + } + + + label::before, + + label::after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: calc(#{$switch-height} * 2); + bottom: 0; + display: block; + } + + + label::before { + right: 0; + background-color: $switch-bg; + border-radius: $switch-border-radius; + transition: $switch-transition; + } + + + label::after { + top: $switch-thumb-padding; + left: $switch-thumb-padding; + width: calc(#{$switch-height} - calc(#{$switch-thumb-padding} * 2)); + height: calc(#{$switch-height} - calc(#{$switch-thumb-padding} * 2)); + border-radius: $switch-thumb-border-radius; + background-color: $switch-thumb-bg; + transition: $switch-transition; + } + + &:checked + label::before { + background-color: $switch-checked-bg; + } + + &:checked + label::after { + margin-left: $switch-height; + } + + &:focus + label::before { + outline: none; + box-shadow: $switch-focus-box-shadow; + } + + &:disabled + label { + color: $switch-disabled-color; + cursor: not-allowed; + } + + &:disabled + label::before { + background-color: $switch-disabled-bg; + } + } + + &.switch-sm { + font-size: $font-size-sm; + + input { + + label { + min-width: calc(#{$switch-height-sm} * 2); + height: $switch-height-sm; + line-height: $switch-height-sm; + text-indent: calc(calc(#{$switch-height-sm} * 2) + .5rem); + } + + + label::before { + width: calc(#{$switch-height-sm} * 2); + } + + + label::after { + width: calc(#{$switch-height-sm} - calc(#{$switch-thumb-padding} * 2)); + height: calc(#{$switch-height-sm} - calc(#{$switch-thumb-padding} * 2)); + } + + &:checked + label::after { + margin-left: $switch-height-sm; + } + } + } + + &.switch-lg { + font-size: $font-size-lg; + + input { + + label { + min-width: calc(#{$switch-height-lg} * 2); + height: $switch-height-lg; + line-height: $switch-height-lg; + text-indent: calc(calc(#{$switch-height-lg} * 2) + .5rem); + } + + + label::before { + width: calc(#{$switch-height-lg} * 2); + } + + + label::after { + width: calc(#{$switch-height-lg} - calc(#{$switch-thumb-padding} * 2)); + height: calc(#{$switch-height-lg} - calc(#{$switch-thumb-padding} * 2)); + } + + &:checked + label::after { + margin-left: $switch-height-lg; + } + } + } + + + .switch { + margin-left: 1rem; + } +} \ No newline at end of file diff --git a/muk_web_utils/static/src/scss/variables.scss b/muk_web_utils/static/src/scss/variables.scss new file mode 100644 index 0000000..6a4a5e9 --- /dev/null +++ b/muk_web_utils/static/src/scss/variables.scss @@ -0,0 +1,36 @@ +/********************************************************************************** +* +* Copyright (C) 2017 MuK IT GmbH +* +* This program is free software: you can redistribute it and/or modify +* it under the terms of the GNU Affero General Public License as +* published by the Free Software Foundation, either version 3 of the +* License, or (at your option) any later version. +* +* This program is distributed in the hope that it will be useful, +* but WITHOUT ANY WARRANTY; without even the implied warranty of +* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +* GNU Affero General Public License for more details. +* +* You should have received a copy of the GNU Affero General Public License +* along with this program. If not, see . +* +**********************************************************************************/ + +//---------------------------------------------------------- +// Switch +//---------------------------------------------------------- + +$switch-bg: #dee2e6; +$switch-disabled-bg: #e9ecef; +$switch-disabled-color: #868e96; +$switch-height: calc(#{$input-height} * .8) !default; +$switch-height-sm: calc(#{$input-height-sm} * .8) !default; +$switch-height-lg: calc(#{$input-height-lg} * .8) !default; +$switch-checked-bg: map-get($theme-colors, 'primary') !default; +$switch-thumb-bg: $white !default; +$switch-thumb-border-radius: 50% !default; +$switch-thumb-padding: 2px !default; +$switch-transition: .2s all !default; +$switch-border-radius: $switch-height; +$switch-focus-box-shadow: 0 0 0 $input-btn-focus-width rgba(map-get($theme-colors, 'primary'), .25); \ No newline at end of file diff --git a/muk_web_utils/static/src/xml/switch.xml b/muk_web_utils/static/src/xml/switch.xml new file mode 100644 index 0000000..67e7054 --- /dev/null +++ b/muk_web_utils/static/src/xml/switch.xml @@ -0,0 +1,65 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/muk_web_utils/template/assets.xml b/muk_web_utils/template/assets.xml index 5c61595..a1a16b6 100644 --- a/muk_web_utils/template/assets.xml +++ b/muk_web_utils/template/assets.xml @@ -18,29 +18,14 @@ --> - - - - \ No newline at end of file