moved slider into label to make it clickable, styled slider in dark and light…

moved slider into label to make it clickable, styled slider in dark and light theme, created variables for slider

public/app/core/components/switch.ts

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

public/sass/_variables.dark.scss

@@ -355,3 +355,11 @@ $diff-json-icon: $gray-7;
 
 
 //Submenu
 //Submenu
 $variable-option-bg: $blue-dark;
 $variable-option-bg: $blue-dark;
+
+//Switch Slider
+// -------------------------
+$switch-bg: $black;
+$switch-slider-color: $dark-2;
+$switch-slider-off-bg: $gray-1;
+$switch-slider-on-bg: linear-gradient(90deg, $orange, $red);
+$switch-slider-shadow: 0 0 3px black;

public/sass/_variables.light.scss

@@ -364,3 +364,11 @@ $diff-json-icon: $gray-4;
 
 
 //Submenu
 //Submenu
 $variable-option-bg: $blue-light;
 $variable-option-bg: $blue-light;
+
+//Switch Slider
+// -------------------------
+$switch-bg: $white;
+$switch-slider-color: $gray-7;
+$switch-slider-off-bg: $gray-5;
+$switch-slider-on-bg: linear-gradient(90deg, $yellow, $red);
+$switch-slider-shadow: 0 0 3px $dark-5;

public/sass/components/_switch.scss

@@ -88,12 +88,16 @@ gf-form-switch[disabled] {
   }
   }
 }
 }
 
 
+.gf-form-switch-container {
+  display: flex;
+}
+
 .gf-form-switch {
 .gf-form-switch {
   position: relative;
   position: relative;
   display: inline-block;
   display: inline-block;
   width: 60px;
   width: 60px;
   height: 34px;
   height: 34px;
-  background: black;
+  background: $switch-bg;
 
 
   input {
   input {
     opacity: 0;
     opacity: 0;
@@ -105,37 +109,36 @@ gf-form-switch[disabled] {
 /* The slider */
 /* The slider */
 .gf-form-switch__slider {
 .gf-form-switch__slider {
   position: absolute;
   position: absolute;
-  cursor: pointer;
   top: 8px;
   top: 8px;
-  left: 14px;
-  right: 10px;
+  left: 16px;
+  right: 14px;
   bottom: 10px;
   bottom: 10px;
-  background: #1d1d1d;
-  transition: 0.4s;
-  border-radius: 34px;
+  background: $switch-slider-off-bg;
+  border-radius: 8px;
+  height: 16px;
 
 
   &::before {
   &::before {
     position: absolute;
     position: absolute;
     content: '';
     content: '';
-    height: 16px;
-    width: 16px;
+    height: 12px;
+    width: 12px;
     left: 2px;
     left: 2px;
-    bottom: 0px;
-    background: #333333;
+    bottom: 2px;
+    background: $switch-slider-color;
     transition: 0.4s;
     transition: 0.4s;
     border-radius: 50%;
     border-radius: 50%;
+    box-shadow: $switch-slider-shadow;
   }
   }
 }
 }
 
 
 input:checked + .gf-form-switch__slider {
 input:checked + .gf-form-switch__slider {
-  background: linear-gradient(90deg, $orange, $red);
+  background: $switch-slider-on-bg;
 }
 }
 
 
 /* input:focus + .gf-form-switch__slider { */
 /* input:focus + .gf-form-switch__slider { */
 /*   box-shadow: 0 0 1px #2196f3; */
 /*   box-shadow: 0 0 1px #2196f3; */
 /* } */
 /* } */
 
 
-input:checked + .gf-form-switch__slider:before {
-  transform: translateX(20px);
-  box-shadow: 0 0 5px black;
+input:checked + .gf-form-switch__slider::before {
+  transform: translateX(14px);
 }
 }