Fixed Radio Button Checked

undp · Sep 28, 2021 · 30c0c22 · 30c0c22
1 parent 752b6b2
commit 30c0c22
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 19 deletions.
diff --git a/stories/Atom/Form/Checkbox/checkbox.scss b/stories/Atom/Form/Checkbox/checkbox.scss
@@ -5,10 +5,11 @@
 /* checkbox */
 .checkbox-wrapper {
     position: relative;
-    padding-left: 20px;
     display: inline-block;
+    margin-right: $spacing-16;
+    padding-left: $spacing-24;
     input[type=checkbox] {
-        top: 2px;
+        top: 5px;
         left: 0;
         opacity: 0;
         z-index: 1;

diff --git a/stories/Atom/Form/Radio/Radio.jsx b/stories/Atom/Form/Radio/Radio.jsx
@@ -3,9 +3,15 @@ import './radio.scss';
 
 export const Radio = ({ label }) => {
   return (
-    <div className="radio-wrapper">
-      <input type="radio" id="edit-radio" className="custom-control-input"/>
-      <label id="checkmark" for="edit-radio" name="radioone" className="custom-control-label">{ label }</label>
-    </div>
+    <>
+      <div className="radio-wrapper">
+        <input type="radio" id="undp" name="fav_language" value="undp" className="custom-control-input"/>
+        <label for="undp" className="custom-control-label"><span className="radio_border"></span>{ label }</label>
+      </div>
+      <div className="radio-wrapper">
+        <input type="radio" id="undp2" name="fav_language" value="undp2" className="custom-control-input"/>
+        <label for="undp2" className="custom-control-label"><span className="radio_border"></span>{ label }</label>
+      </div>
+    </>
   );
 };
diff --git a/stories/Atom/Form/Radio/radio.scss b/stories/Atom/Form/Radio/radio.scss
@@ -5,30 +5,34 @@
 /* radio */
 .radio-wrapper {
     position: relative;
-    padding-left: 20px;
     display: inline-block;
+    margin-right: $spacing-16;
+    padding-left: $spacing-24;
     input[type=radio] {
         top: 2px;
         left: 0;
         opacity: 0;
         position: absolute;
         & + label {
             cursor: pointer;
-            &:hover::before {
-                border-color: $color-light-pink;
-            }
-            &::before {
-                @extend %checbox-radio-before;
+            .radio_border {
                 border-radius: 50%;
+                @extend %checbox-radio-before;
+            }
+            &:hover .radio_border {
+                border-color: $color-light-pink;
             }
         }
-        &:checked + label::after {
-            top: -3px;
+        &:checked + label .radio_border::after {
+            top: 50%;
             left: 3px;
-            content: "•";
-            color: $color-dark-red;
-            font-size: 19px;
+            content: "";
+            width: 6px;
+            height: 6px;
             position: absolute;
+            background: $color-dark-red;
+            border-radius: 50%;
+            transform: translateY(-50%);
         }
     }
 }
diff --git a/stories/assets/scss/_mixins.scss b/stories/assets/scss/_mixins.scss
@@ -85,9 +85,9 @@
   }
 }
 
-%checbox-radio-before{
+%checbox-radio-before {
   left: 0;
-  top: 2px;
+  top: 5px;
   content: "";
   width: 12px;
   height: 12px;