switch slider changes

public/app/core/components/switch.ts

@@ -1,7 +1,7 @@
 import coreModule from 'app/core/core_module';
 
 const template = `
-<label for="check-{{ctrl.id}}" class="gf-form-switch-container pointer">
+<label for="check-{{ctrl.id}}" class="gf-form-switch-container">
   <div class="gf-form-label {{ctrl.labelClass}}" ng-show="ctrl.label">
     {{ctrl.label}}
     <info-popover mode="right-normal" ng-if="ctrl.tooltip" position="top center">
@@ -16,8 +16,14 @@ const template = `
 `;
 
 const checkboxTemplate = `
-<label for="check-{{ctrl.id}}" class="gf-form-check-container">
-  <div class="gf-form-switch {{ctrl.switchClass}}" ng-if="ctrl.show">
+<label for="check-{{ctrl.id}}" class="gf-form-switch-container">
+   <div class="gf-form-label {{ctrl.labelClass}}" ng-show="ctrl.label">
+    {{ctrl.label}}
+    <info-popover mode="right-normal" ng-if="ctrl.tooltip" position="top center">
+      {{ctrl.tooltip}}
+    </info-popover>
+  </div>
+  <div class="gf-form-checkbox {{ctrl.switchClass}}" ng-if="ctrl.show">
     <input id="check-{{ctrl.id}}" type="checkbox" ng-model="ctrl.checked" ng-change="ctrl.internalOnChange()">
     <span class="gf-form-switch__checkbox"></span>
   </div>

public/app/features/plugins/partials/ds_http_settings.html

@@ -71,15 +71,21 @@
 	<h3 class="page-heading">Auth</h3>
 	<div class="gf-form-group">
 		<div class="gf-form-inline">
-			<gf-form-switch class="gf-form" label="Basic Auth" checked="current.basicAuth" label-class="width-10" switch-class="max-width-6"></gf-form-switch>
-			<gf-form-switch class="gf-form" label="With Credentials" tooltip="Whether credentials such as cookies or auth headers should be sent with cross-site requests." checked="current.withCredentials" label-class="width-11" switch-class="max-width-6"></gf-form-switch>
+			<gf-form-checkbox class="gf-form" label="Basic Auth" checked="current.basicAuth" label-class="width-10" switch-class="max-width-6"></gf-form-checkbox>
+			<gf-form-checkbox class="gf-form" label="With Credentials" tooltip="Whether credentials such as cookies or auth
+			  headers should be sent with cross-site requests." checked="current.withCredentials" label-class="width-11"
+			  switch-class="max-width-6"></gf-form-checkbox>
 		</div>
 		<div class="gf-form-inline">
-			<gf-form-switch class="gf-form" ng-if="current.access=='proxy'" label="TLS Client Auth" label-class="width-10" checked="current.jsonData.tlsAuth" switch-class="max-width-6"></gf-form-switch>
-			<gf-form-switch class="gf-form" ng-if="current.access=='proxy'" label="With CA Cert" tooltip="Needed for verifing self-signed TLS Certs" checked="current.jsonData.tlsAuthWithCACert" label-class="width-11" switch-class="max-width-6"></gf-form-switch>
+			<gf-form-checkbox class="gf-form" ng-if="current.access=='proxy'" label="TLS Client Auth" label-class="width-10"
+			  checked="current.jsonData.tlsAuth" switch-class="max-width-6"></gf-form-checkbox>
+			<gf-form-checkbox class="gf-form" ng-if="current.access=='proxy'" label="With CA Cert" tooltip="Needed for
+			  verifing self-signed TLS Certs" checked="current.jsonData.tlsAuthWithCACert" label-class="width-11"
+			  switch-class="max-width-6"></gf-form-checkbox>
 		</div>
 		<div class="gf-form-inline">
-			<gf-form-switch class="gf-form" ng-if="current.access=='proxy'" label="Skip TLS Verify" label-class="width-10" checked="current.jsonData.tlsSkipVerify" switch-class="max-width-6"></gf-form-switch>
+			<gf-form-checkbox class="gf-form" ng-if="current.access=='proxy'" label="Skip TLS Verify" label-class="width-10"
+			  checked="current.jsonData.tlsSkipVerify" switch-class="max-width-6"></gf-form-checkbox>
 		</div>
 	</div>
 

public/sass/components/_switch.scss

@@ -33,35 +33,6 @@ gf-form-switch[disabled] {
     width: 0;
     height: 0;
   }
-
-  &--transparent {
-    background: transparent;
-    border: none;
-  }
-
-  &--search-result__section {
-    width: 3.05rem;
-    height: auto;
-    position: relative;
-    top: -5px;
-    left: 3px;
-  }
-
-  &--search-result__item {
-    width: 2.7rem;
-    height: auto;
-    position: relative;
-    top: 3px;
-  }
-
-  &--table-cell {
-    width: 40px;
-    background: transparent;
-    height: auto;
-    border: none;
-    position: relative;
-    top: -5px;
-  }
 }
 
 /* The slider */
@@ -98,6 +69,52 @@ input:checked + .gf-form-switch__slider::before {
   transform: translateX(14px);
 }
 
+.gf-form-checkbox {
+  position: relative;
+  display: inline-block;
+  width: 50px;
+  height: $gf-form-input-height;
+  background: $switch-bg;
+  border: 1px solid $input-border-color;
+  border-left: none;
+  border-radius: $input-border-radius;
+
+  input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  &--transparent {
+    background: transparent;
+    border: none;
+  }
+
+  &--search-result__section {
+    width: 3.05rem;
+    height: auto;
+    position: relative;
+    top: -5px;
+    left: 3px;
+  }
+
+  &--search-result__item {
+    width: 2.7rem;
+    height: auto;
+    position: relative;
+    top: 3px;
+  }
+
+  &--table-cell {
+    width: 40px;
+    background: transparent;
+    height: auto;
+    border: none;
+    position: relative;
+    top: -5px;
+  }
+}
+
 .gf-form-switch__checkbox {
   position: absolute;
   left: 16px;