more styling

frontend/styles/form/switch.less

@@ -0,0 +1,58 @@
+/* The switch - the box around the slider */
+.switch {
+    position: relative;
+    display: inline;
+    
+    input {display:none;}
+  
+    /* The slider */
+    .slider {
+      position: absolute;
+      cursor: pointer;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: @color-grey;
+      -webkit-transition: .4s;
+      transition: .4s;
+      margin-left: -40px;
+    }
+    
+    .slider:before {
+      position: absolute;
+      content: "";
+      height: 26px;
+      width: 26px;
+      left: 4px;
+      bottom: 4px;
+      background-color: white;
+      -webkit-transition: .4s;
+      transition: .4s;
+    }
+    
+    input:checked + .slider {
+      background-color: @color-main;
+    }
+    
+    input:focus + .slider {
+      box-shadow: 0 0 1px @color-main-light;
+    }
+    
+    input:checked + .slider:before {
+      -webkit-transform: translateX(26px);
+      -ms-transform: translateX(26px);
+      transform: translateX(26px);
+    }
+    
+    /* Rounded sliders */
+    .slider.round {
+      border-radius: 34px;
+      height: 34px;
+      width: 60px;
+    }
+    
+    .slider.round:before {
+      border-radius: 50%;
+    }
+}