fix(checkbox): update checkbox design (#291)

* fix(Checkbox): Fix checkbox design bugs

* fix(Checkbox): fix cursor pointer issue on checkbox

#287

* fix(Checkbox): fix checked state position

Author: KRRISH96

doc/src/components/common/componentData/Checkbox/theme.scss

@@ -3,16 +3,16 @@
 }
 
 :local(.checkbox) {
-  border-color: #6b76ff;
+  border-color: #8b104e;
   .check-item {
-    border-color: #6b76ff !important;
+    border-color: #8b104e !important;
   }
 }
 
 
 :local(.inverted) {
-  background-color: #0b409c !important;
+  background-color: #8b104e !important;
   .check-item {
-    border-color: #f18a9b !important;
+    border-color: #fefefe !important;
   }
 }

lib/checkbox/theme.module.scss

@@ -1,14 +1,19 @@
 @import '../globals/theme.scss';
 :local(.checkbox) {
+    display: inline-block;
     background-color: $secondary-white;
     padding: 2px;
-    border: 1px solid $secondary-blue;
-    &:hover {
-        cursor: pointer;
-    }
+    border: 2px solid $secondary-blue;
+    height: 25px;
+    width: 25px;
+    box-sizing: border-box;
+    border-radius: 3px;
+    cursor: pointer;
     input {
         /* Disable the HTML input */
         opacity: 0;
+        margin: 0;
+        cursor: pointer;
     }
     /* Fixes width issue in safari */
     @media not all and (min-resolution:.001dpcm) {
@@ -24,14 +29,13 @@
 }
 
 :local(.checked) {
-    height: 200px;
     position: relative;
     .check-item {
         /* Check Item adds the tick */
         /* Builds a rectange with border width and rotates it 45 Degree */
         position: absolute;
         left: 32%;
-        top: 12%;
+        top: 5%;
         width: 5px;
         height: 12px;
         border: solid $secondary-blue;