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