update src/index.scss

src/index.scss

@@ -1197,3 +1197,66 @@ $success: #23c933;
 }
 
 // * end Switch2 Component
+
+// TODO  Start Radio1 Component
+
+$radioColor1: #f4f4f4;
+$radkoColor2: #3197ee;
+
+.radio {
+  input[type="radio"] {
+    position: absolute;
+    opacity: 0;
+    + .radio-label {
+      &:before {
+        content: "";
+        background: $radioColor1;
+        border-radius: 100%;
+        border: 1px solid darken($radioColor1, 25%);
+        display: inline-block;
+        width: 1.4em;
+        height: 1.4em;
+        position: relative;
+        vertical-align: top;
+        margin-left: 0.5em;
+        cursor: pointer;
+        text-align: center;
+        transition: all 250ms ease;
+      }
+    }
+    &:checked {
+      + .radio-label {
+        &:before {
+          background-color: $radkoColor2;
+          box-shadow: inset 0 0 0 4px $radioColor1;
+        }
+      }
+    }
+    &:focus {
+      + .radio-label {
+        &:before {
+          outline: none;
+          border-color: $radkoColor2;
+        }
+      }
+    }
+    &:disabled {
+      + .radio-label {
+        &:before {
+          box-shadow: inset 0 0 0 4px $radioColor1;
+          border-color: darken($radioColor1, 25%);
+          background: darken($radioColor1, 25%);
+        }
+      }
+    }
+    + .radio-label {
+      &:empty {
+        &:before {
+          margin-right: 0;
+        }
+      }
+    }
+  }
+}
+
+// * end Radio1 Component