fix(RadioButtons): scale positioning with user font size

narmi · Jun 3, 2024 · 018c23f · 018c23f
1 parent d4dd099
commit 018c23f
Showing 1 changed file with 9 additions and 9 deletions.
diff --git a/src/RadioButtons/index.scss b/src/RadioButtons/index.scss
@@ -28,7 +28,7 @@
 
     &.nds-radiobutton-details--checked {
       margin-top: var(--space-xs);
-      max-height: 300px;
+      max-height: rem(300px);
     }
   }
 }
@@ -38,14 +38,14 @@
   display: inline-block;
 
   .nds-radiobuttons-option {
-    padding-left: 28px;
+    padding-left: rem(28px);
 
     .nds-radio {
       position: absolute;
       top: 0;
       left: 0;
-      height: 20px;
-      width: 20px;
+      height: rem(20px);
+      width: rem(20px);
       background-color: var(--color-white);
       border: 1px solid var(--color-lightGrey);
       border-radius: 50%;
@@ -56,8 +56,8 @@
         display: none;
         top: 50%;
         left: 50%;
-        width: 12px;
-        height: 12px;
+        width: rem(12px);
+        height: rem(12px);
         transform: translate(-50%, -50%);
         border-radius: 50%;
         background: var(--theme-primary);
@@ -102,7 +102,7 @@
 
     &.nds-radiobutton-details--checked {
       line-height: var(--font-lineHeight-default);
-      max-height: 300px;
+      max-height: rem(300px);
       opacity: 1;
       margin-top: var(--space-s);
     }
@@ -147,8 +147,8 @@
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      width: var(--space-default);
-      height: var(--space-default);
+      width: rem(20px); // the circle should scale with the icon
+      height: rem(20px);
       border-radius: 100%;
       background-color: var(--theme-primary);
       color: var(--color-white);