Ticket #3899 - Developer: Switcher form element doesn't work.

modules/boonex/artificer/data/template/system/css/forms.css

@@ -185,12 +185,6 @@ import url(../../../../../../../template/css/forms.css);
 }
 
 
-/*-- Form field: Switcher --*/
-.bx-switcher-cont input {
-   display: none !important;
-}
-
-
 /*-- Form field: Checkbox/Radio Set --*/
 .bx-form-input-wrapper-checkbox_set label,
 .bx-artificer .bx-form-input-wrapper-radio_set label {

modules/boonex/artificer/data/template/system/form_field_switcher.html

@@ -1,6 +0,0 @@
-<div class="bx-switcher-cont __class__ relative">
-    <button type="button" class="relative inline-flex flex-shrink-0 h-6 w-11 ring-1 ring-gray-300 dark:ring-gray-700 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" role="switch" aria-checked="false">
-        <span aria-hidden="true" class="inline-block h-5 w-5 rounded-full shadow transform ring-0 transition ease-in-out duration-200 pointer-events-none"></span>
-    </button>
-    __checkbox__
-</div>  

modules/boonex/decorous/data/template/system/css/default.less

@@ -806,15 +806,8 @@
         border-color: @bx-color-border-form-input-active;
         background-color: @bx-color-form-input-active;
     }
-    .bx-form-value .bx-switcher-cont {
-        border-color: @bx-color-border-form-input;
-        border-width: @bx-border-width-form-input;
-
+    .bx-form-value .bx-switcher-cont.on > button {
         background-color: @bx-color-form-input;
-
-        -webkit-box-shadow: @bx-shadow-form-input;
-        -moz-box-shadow: @bx-shadow-form-input;
-        box-shadow: @bx-shadow-form-input;
     }
 
     /* button large */

modules/boonex/lucid/data/template/system/css/default.less

@@ -833,15 +833,8 @@
         border-color: @bx-color-border-form-input-active;
         background-color: @bx-color-form-input-active;
     }
-    .bx-form-value .bx-switcher-cont {
-        border-color: @bx-color-border-form-input;
-        border-width: @bx-border-width-form-input;
-
+    .bx-form-value .bx-switcher-cont.on > button {
         background-color: @bx-color-form-input;
-
-        -webkit-box-shadow: @bx-shadow-form-input;
-        -moz-box-shadow: @bx-shadow-form-input;
-        box-shadow: @bx-shadow-form-input;
     }
 
 

modules/boonex/ocean/data/template/studio/css/forms.css

@@ -27,9 +27,4 @@
 .bx-form-input-text:focus,
 .bx-form-input-wrapper-password.bx-form-input-focus {
     border-color:#57889e;
-}
-
-/* switcher */
-.bx-switcher-cont {
-    border-color: #6097b0;
 }

modules/boonex/ocean/data/template/system/css/forms.css

@@ -30,9 +30,4 @@
 .bx-form-input-price:focus,
 .bx-form-input-wrapper-password.bx-form-input-focus {
     border-color:#57889e;
-}
-
-/* switcher */
-.bx-switcher-cont {
-    border-color: #6097b0;
 }

modules/boonex/protean/data/template/system/css/default.less

@@ -775,16 +775,9 @@
         background-color: @bx-color-form-input-active;
     }
 
-    .bx-form-value .bx-switcher-cont,
-    .bx-grid-table .bx-switcher-cont {
-        border-color: @bx-color-border-form-input;
-        border-width: @bx-border-width-form-input;
-
+    .bx-form-value .bx-switcher-cont.on > button,
+    .bx-grid-table .bx-switcher-cont.on > button {
         background-color: @bx-color-form-input;
-
-        -webkit-box-shadow: @bx-shadow-form-input;
-        -moz-box-shadow: @bx-shadow-form-input;
-        box-shadow: @bx-shadow-form-input;
     }
 
     /* button normal */

plugins_public/tailwind/css/tailwind.css

@@ -721,16 +721,16 @@
 
 
     /* Common elements: Forms: Switcher Input */
-    .bx-artificer .bx-switcher-cont.on button {
+    .bx-switcher-cont.on button {
         @apply bg-white dark:bg-gray-800;
     }
-    .bx-artificer .bx-switcher-cont.on button span {
+    .bx-switcher-cont.on button span {
         @apply bg-green-500 dark:bg-green-500 translate-x-5;
     }
-    .bx-artificer .bx-switcher-cont.off button {
+    .bx-switcher-cont.off button {
         @apply bg-gray-200 dark:bg-gray-900;
     }
-    .bx-artificer .bx-switcher-cont.off button span {
+    .bx-switcher-cont.off button span {
         @apply bg-white dark:bg-gray-500 translate-x-0;
     }
 

studio/template/css/forms.css

@@ -65,13 +65,6 @@
     background-color: rgba(255, 255, 255, 1);
 }
 
-.bx-form-value .bx-switcher-cont {
-    border-color: rgba(136, 143, 153, 1);
-    border-width: 1px;
-
-    background-color: rgba(255, 255, 255, 1);
-}
-
 .bx-form-value .bx-form-input-select_multiple,
 .bx-form-value .bx-form-input-radio_set,
 .bx-form-value .bx-form-input-checkbox_set {

template/css/forms.css

@@ -379,104 +379,12 @@
     overflow: auto;
 }
 
-/* switcher */
-.bx-switcher-cont {
-    position:relative;
-    box-sizing: content-box;
-
-    width:60px;
-    width:3.8rem;
-    height:24px;
-    height:1.5rem;
-    overflow:hidden;
-    cursor:pointer;
-
-    background-color:#fff;
-
-    border:2px solid #79bd9a;
-    border:0.125rem solid #79bd9a;
-    -moz-border-radius: 1rem;
-    -webkit-border-radius: 1rem;
-    border-radius: 1rem;
-}
+/* switcher element */
 .bx-switcher-cont input {
-    position:absolute; 
-    top:-32px;
-    top:-2rem;
-}
-.bx-switcher-canvas {
-    position:relative;
-    width:90px;
-    width:5.7rem;
-
-    -webkit-transition: left 0.2s ease-in-out;
-    -moz-transition: left 0.2s ease-in-out;
-    -ms-transition: left 0.2s ease-in-out;
-    -o-transition: left 0.2s ease-in-out;
-}
-.bx-switcher-cont.on .bx-switcher-canvas {
-    left:3px;
-    left:0.2rem;
-}
-.bx-switcher-cont.off .bx-switcher-canvas {
-    left:-34px;
-    left:-2.1rem;
-}
-.bx-switcher-on,
-.bx-switcher-off,
-.bx-switcher-handler {
-    position:absolute;	
-    top:0rem;
-    line-height:24px;
-    line-height:1.5rem;
-    color:#999;
-}
-.bx-switcher-on {
-    left:0rem;
-    width:34px;
-    width:2.1rem;
-    height:24px;
-    height:1.5rem;
-    margin-left:8px;
-    margin-left:0.5rem;
-}
-.bx-switcher-off {	
-    left:65px;
-    left:4.05rem;
-    width:34px;
-    width:2.1rem;
-    height:24px;
-    height:1.5rem;
-    margin-left:3px;
-    margin-left:0.2rem;
-}
-.bx-switcher-handler {
-    left:36px;
-    left:2.23rem;
-    top:2px;
-    top:0.13rem;
-    width:20px;
-    width:1.25rem;
-	height:20px;
-	height:1.25rem;
-	margin:0rem;
-
-    -moz-border-radius: 1rem;
-    -webkit-border-radius: 1rem;
-    border-radius: 1rem;
-
-    -webkit-transition: background-color 0.2s ease-in-out;
-    -moz-transition: background-color 0.2s ease-in-out;
-    -ms-transition: background-color 0.2s ease-in-out;
-    -o-transition: background-color 0.2s ease-in-out;
-    transition: background-color 0.2s ease-in-out;
-}
-.bx-switcher-cont.on .bx-switcher-handler {
-    background-color:#d0efa2;
-}
-.bx-switcher-cont.off .bx-switcher-handler {
-    background-color:#e7938a;
+   display: none !important;
 }
+
+/* oneline element */
 .bx-form-element-wrapper-oneline .bx-form-element {
     display: -webkit-flex;
     display: flex;
@@ -494,13 +402,10 @@
 .bx-form-caption-oneline {
     margin-bottom: 0;
 }
-.bx-form-caption-oneline-switcher {
-    line-height:26px;
-}
+
 .bx-form-input-wrapper-submit .bx-btn {
     float: none;
 }
-
 .bx-form-input-wrapper-input_set .bx-btn {
     float:left;
 }

template/form_field_switcher.html

@@ -1,7 +1,6 @@
-<div class="bx-switcher-cont __class__">__checkbox__
-    <div class="bx-switcher-canvas">
-        <div class="bx-switcher-on"><i class="sys-icon check"></i></div>
-        <div class="bx-switcher-off"><i class="sys-icon times"></i></div>
-        <div class="bx-switcher-handler">&nbsp;</div>
-    </div>
+<div class="bx-switcher-cont __class__ relative">
+    <button type="button" class="relative inline-flex flex-shrink-0 h-6 w-11 ring-1 ring-gray-300 dark:ring-gray-700 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" role="switch" aria-checked="false">
+        <span aria-hidden="true" class="inline-block h-5 w-5 rounded-full shadow transform ring-0 transition ease-in-out duration-200 pointer-events-none"></span>
+    </button>
+    __checkbox__
 </div>