Adding styles for Checkbox and RadioButton

index.html

@@ -139,6 +139,25 @@
                 <input class="inp" type="text" placeholder="Name2" value="Test01" />
                 <input class="inp" type="text" placeholder="Name" disabled />
 
+                <div class="input-group">
+
+                </div>
+
+                <label class="input-checkbox">Checkbox
+                    <input type="checkbox" />
+                    <span></span>
+                </label>
+
+                <label class="input-checkbox">Radio 1
+                    <input type="radio" name="rad" checked />
+                    <span></span>
+                </label>
+
+                <label class="input-checkbox">Radio 2
+                    <input type="radio" name="rad" />
+                    <span></span>
+                </label>
+
                 <select class="inp">
                     <option>Opt1</option>
                     <option>Opt2</option>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hibas123/theme",
-  "version": "1.0.7",
+  "version": "1.1.0",
   "description": "",
   "main": " ",
   "files": [
@@ -18,6 +18,6 @@
     "less": "^3.9.0"
   },
   "dependencies": {
-    "sass": "^1.21.0"
+    "sass": "^1.22.7"
   }
-}
+}

src/base/_input.scss

@@ -30,4 +30,86 @@ textarea.inp {
         margin-bottom: .3rem;
         margin-left: .5rem;
     }
+}
+
+.input-checkbox {
+
+    @extend .margin;
+
+    display: block;
+    position: relative;
+    padding-left: 35px;
+    margin-bottom: 12px;
+    cursor: pointer;
+    font-size: 22px;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+
+
+    /* Hide the browser's default checkbox */
+    input {
+        position: absolute;
+        opacity: 0;
+        cursor: pointer;
+        height: 0;
+        width: 0;
+    }
+
+    /* Create a custom checkbox */
+    span {
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 25px;
+        width: 25px;
+        transition: background-color .2s;
+    }
+
+    /* On mouse-over, add a grey background color */
+    :hover input~span {
+        background-color: #ccc;
+    }
+
+    /* When the checkbox is checked, add a blue background */
+    input:checked~span {
+        background-color: $primary;
+    }
+
+    /* Create the checkmark/indicator (hidden when not checked) */
+    span:after {
+        content: "";
+        position: absolute;
+        display: none;
+    }
+
+    /* Show the checkmark when checked */
+    input:checked~span:after {
+        display: block;
+    }
+
+    input[type=checkbox]+span:after {
+        /* Style the checkmark/indicator */
+        left: 9px;
+        top: 5px;
+        width: 5px;
+        height: 10px;
+        border: solid white;
+        border-width: 0 3px 3px 0;
+        transform: rotate(45deg);
+    }
+
+    input[type=radio]+span {
+        border-radius: 50%;
+
+        &:after {
+            top: 9px;
+            left: 9px;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background-color: white;
+        }
+    }
 }

src/theme/_input.scss

@@ -5,4 +5,10 @@
         background: $background;
         color: $on-background;
     }
+}
+
+.input-checkbox {
+    span {
+        background-color: $button-color;
+    }
 }