Merge pull request #60 from etchteam/feature/etch-580-1px-rendering-i…

…ssue-with-checkboxes Sub-pixel radio and checkbox rendering issues
etchteam · May 14, 2024 · 7e6e89a · 7e6e89a
2 parents 5fb93bd + 93b675f
commit 7e6e89a
Showing 1 changed file with 4 additions and 6 deletions.
diff --git a/components/control/RadioCheckbox/RadioCheckbox.css b/components/control/RadioCheckbox/RadioCheckbox.css
@@ -72,7 +72,7 @@ diamond-radio-checkbox {
 
   &::part(indicator) {
     align-items: center;
-    aspect-ratio: 1 / 1;
+    aspect-ratio: 1;
     background: var(--_background);
     border: 1px solid var(--_border-color);
     border-radius: var(--_border-radius);
@@ -91,15 +91,13 @@ diamond-radio-checkbox {
   }
 
   &::part(indicator)::before {
-    aspect-ratio: 1 / 1;
+    aspect-ratio: 1;
     background-color: var(--_border-color);
     border-radius: var(--_inner-border-radius);
     content: '';
-    left: 50%;
     opacity: 0;
     position: absolute;
-    top: 50%;
-    transform: translate(-50%, -50%) scale(0.5);
+    transform: scale(0.5);
     transition:
       background-color var(--diamond-transition),
       opacity var(--diamond-transition),
@@ -123,7 +121,7 @@ diamond-radio-checkbox {
 
     &::part(indicator)::before {
       opacity: 1;
-      transform: translate(-50%, -50%) scale(1);
+      transform: scale(1);
     }
 
     svg,