Modified Switch component based on Material Guidelines.

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Switch/switch.css

@@ -20,8 +20,8 @@
 .switch {
     position: relative;
     display: inline-block;
-    width: 40px;
-    height: 24px;
+    width: 36px;
+    height: 14px;
 }
 
 /* Hide default HTML checkbox */
@@ -35,7 +35,7 @@
     left: 0;
     right: 0;
     bottom: 0;
-    background-color: #ccc;
+    background-color: #a0a0a0;
     -webkit-transition: .4s;
     transition: .4s;
 }
@@ -43,17 +43,17 @@
 .slider:before {
     position: absolute;
     content: "";
-    height: 16px;
-    width: 16px;
-    left: 4px;
-    bottom: 4px;
+    top: -3px;
+    height: 20px;
+    width: 20px;
     background-color: white;
     -webkit-transition: .4s;
     transition: .4s;
+    box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 6px, rgba(0, 0, 0, 0.117647) 0px 1px 4px;
 }
 
 input:checked + .slider {
-    background-color: #2196F3;
+    background-color: rgba(33, 150, 243, 0.51);
 }
 
 input:focus + .slider {
@@ -61,9 +61,10 @@ input:focus + .slider {
 }
 
 input:checked + .slider:before {
-    -webkit-transform: translateX(16px);
-    -ms-transform: translateX(16px);
-    transform: translateX(16px);
+    -webkit-transform: translateX(20px);
+    -ms-transform: translateX(20px);
+    transform: translateX(20px);
+    background-color: #2196F3;
 }
 
 /* Rounded sliders */