Switch to another buttons CSS (cleaner)

git-svn-id: https://redmine.imt-atlantique.fr/svn/xaal/code/Python/branches/0.7@2941 b32b6428-25c9-4566-ad07-03861ab6144f

apps/dashboard/xaal/dashboard/static/css/btns.css

-.onoffswitch {
-    position: relative; width: 60px;
-    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
-}
-.onoffswitch-checkbox {
-    display: none;
-}
-.onoffswitch-label {
-    display: block; overflow: hidden; cursor: pointer;
-    border: 1px solid #999999; border-radius: 20px;
-}
-.onoffswitch-inner {
-    display: block; width: 200%; margin-left: -100%;
-    transition: margin 0.1s ease-in 0s;
-}
-.onoffswitch-inner:before, .onoffswitch-inner:after {
-    display: block; float: left; width: 50%; height: 20px; padding: 0; line-height: 20px;
-    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
-    box-sizing: border-box;
-}
-.onoffswitch-inner:before {
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 55px;
+    height: 20px;
+}
+
+.switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--color1);
+    transition: .3s;
+}
+
+.slider:before {
+    position: absolute;
     content: "";
-    padding-left: 10px;
-    background-color: #ED054E; color: #FFFFFF;
-}
-.onoffswitch-inner:after {
-    content: "";
-    padding-right: 10px;
-    background-color: #00bbd7; color: #DEDEDE;
-    text-align: right;
-}
-.onoffswitch-switch {
-    display: block; width: 16px; margin: 2px;
-    background: #FFFFFF;
-    position: absolute; top: 0; bottom: 0;
-    right: 36px;
-    border: 1px solid #999999; border-radius: 20px;
-    transition: all 0.1s ease-in 0s; 
-}
-.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
-    margin-left: 0;
-}
-.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
-    right: 0px; 
-}
+    height: 20px;
+    width: 20px;
+    left: 0px;
+    bottom: 0px;
+    background-color: var(--color4);
+    -webkit-transition: .4s;
+    transition: .4s;
+}
+
+input:checked+.slider {
+    background-color: var(--color3);
+}
+
+input:checked+.slider:before {
+    transform: translateX(35px);
+}
+
+/* Rounded sliders */
+.slider.round {
+    border-radius: 24px;
+}
+
+.slider.round:before {
+    border-radius: 50%;
+}
\ No newline at end of file

apps/dashboard/xaal/dashboard/static/tags/lamp.tag

 <lamp>
 
-<div class="onoffswitch">
-  <input type="checkbox" class="onoffswitch-checkbox" id={ tag_id } onchange={ chk } checked={checked}>
-    <label class="onoffswitch-label" for={ tag_id }>
-        <span class="onoffswitch-inner"></span>
-        <span class="onoffswitch-switch"></span>
-    </label>
-</div>
+<label class="switch">
+  <input type="checkbox" id="{ tag_id }" onchange={ chk } checked={checked}>
+  <span class="slider round" ></span>
+</label>
 
 <script>
   this.addr = opts.xaal_addr

apps/dashboard/xaal/dashboard/static/tags/powerrelay.tag

 <powerrelay>
 
-<div class="onoffswitch">
-  <input type="checkbox" class="onoffswitch-checkbox" id={ tag_id } onchange={ chk } checked={checked}>
-    <label class="onoffswitch-label" for={ tag_id }>
-        <span class="onoffswitch-inner"></span>
-        <span class="onoffswitch-switch"></span>
-    </label>
-</div>
+<label class="switch">
+  <input type="checkbox" id="{ tag_id }" onchange={ chk } checked={checked}>
+  <span class="slider round" ></span>
+</label>
 
 <script>
   this.addr = opts.xaal_addr