Fixing toggle buttons and the motors tab

js/libraries/switchery/switchery.css

@@ -18,7 +18,7 @@
   vertical-align: middle;
   width: 45px;
   z-index:1000;
-
+  opacity:1 !important;
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;
@@ -35,14 +35,9 @@
   height: 14px;
   position: absolute;
   top: 0;
-  width: 14px;
-  
+  width: 14px; 
 }
 
-
-
-
-
 .switcherymid {
   background-color: #fff;
   border: 1px solid #fff;
@@ -70,22 +65,13 @@
   height: 14px;
   position: absolute;
   top: 0;
-  width: 14px;
-  
+  width: 14px;  
 }
 
-
-
-
-
-
-
-
 /* Switchery sizes. */
 
 .switchery-small {
   border: none !important;
-
   border-radius: 20px;
   height: 10px;
   width: 20px;

main.js

@@ -123,6 +123,17 @@ $(document).ready(function () {
                         $(html).removeClass('toggle');
                     });
                     
+                    $('.togglemedium').each(function(index, html) {
+                        var switchery = new Switchery(html,
+                        {
+                          className: 'switcherymid',
+                          color: '#59aa29', 
+                          secondaryColor: '#c4c4c4' 
+                        });
+                        
+                        $(html).removeClass('toggle');
+                    });
+                    
                     // Build link to in-use CF version documentation
                     var documentationButton = $('div#content #button-documentation');
                     documentationButton.html("Documentation for "+CONFIG.flightControllerVersion);

tabs/motors.css

@@ -197,14 +197,14 @@
 
 .tab-motors .titles li {
     float: left;
-    width: calc(( 100% / 9)- 10px);
+    width: calc(( 100% / 9) - 10px);
     margin-right: 10px;
     text-align: center;
 }
 
 .tab-motors .servos .titles li {
     float: right;
-    width: calc(( 100% / 8)- 10px);
+    width: calc(( 100% / 8) - 10px);
     margin: 0 0 0 10px;
 }
 
@@ -214,7 +214,7 @@
 
 .tab-motors .m-block {
     float: left;
-    width: calc(( 100% / 9)- 10px);
+    width: calc(( 100% / 9) - 10px);
     height: 100px;
     margin-right: 10px;
     text-align: center;
@@ -248,7 +248,7 @@
 
 .tab-motors .servos .m-block {
     float: right;
-    width: calc(( 100% / 8)- 10px);
+    width: calc(( 100% / 8) - 10px);
     margin: 0 0 0 10px;
     border-radius: 3px;
 }
@@ -271,7 +271,7 @@
 
 .tab-motors .motor_testing .sliders input {
     -webkit-appearance: slider-vertical;
-    width: calc(( 100% / 9)- 13px);
+    width: calc(( 100% / 9) - 13px);
     height: 73px;
     margin-left: 10px;
 }

tabs/motors.html

@@ -118,7 +118,7 @@
                     </div>
                     <div class="notice">
                         <p i18n="motorsNotice"></p>
-                        <label><input id="motorsEnableTestMode" class="toggle" type="checkbox" /><span
+                        <label><input id="motorsEnableTestMode" class="togglesmall" type="checkbox" /><span
                             class="motorsEnableTestMode" i18n="motorsEnableControl"></span></label>
                     </div>
                     <div class="cler-both"></div>

tabs/ports.js

@@ -163,7 +163,7 @@ TABS.ports.initialize = function (callback, scrollPosition) {
                     var select_e;
                     if (column != 'telemetry') {
                         var checkboxId = 'functionCheckbox-' + portIndex + '-' + columnIndex + '-' + i;
-                        functions_e.prepend('<span class="function"><input type="checkbox" class="togglesmall" id="' + checkboxId + '" value="' + functionName + '" /><label for="' + checkboxId + '"> ' + functionRule.displayName + '</label></span>');
+                        functions_e.prepend('<span class="function"><input type="checkbox" class="togglemedium" id="' + checkboxId + '" value="' + functionName + '" /><label for="' + checkboxId + '"> ' + functionRule.displayName + '</label></span>');
 
                         if (serialPort.functions.indexOf(functionName) >= 0) {
                             var checkbox_e = functions_e.find('#' + checkboxId);

tabs/servos.html

@@ -21,7 +21,7 @@
                 </tr>
             </table>
             <div class="live">
-                <input type="checkbox" class="toggle" /> <span i18n="servosLiveMode"></span>
+                <input type="checkbox" class="togglemedium" /> <span i18n="servosLiveMode"></span>
             </div>
         </div>
         <div class="note require-upgrade">