fix: checkbox alignment in ios (#197)

ForkbombEu · Dec 23, 2024 · e1a51d5 · e1a51d5
1 parent 0e3373f
commit e1a51d5
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 6 deletions.
diff --git a/src/components/checkbox/d-checkbox.css b/src/components/checkbox/d-checkbox.css
@@ -6,12 +6,9 @@ ion-checkbox {
   --checkbox-background-checked: var(--accent);
   width: 48px;
   height: 48px;
-  justify-items: center;
-  margin-left: -12px;
-
 }
 ion-checkbox::part(container) {
-  border-radius: 1px;
+  border-radius: 2px;
   border: 2px solid;
   border-color: var(--on-alt);
   --checkmark-color: var(--stroke);

diff --git a/src/components/checkbox/d-checkbox.tsx b/src/components/checkbox/d-checkbox.tsx
@@ -20,7 +20,7 @@ export class DCheckbox {
         <d-vertical-stack>
           <d-horizontal-stack class="items-center" gap={0}>
             <ion-checkbox onIonChange={e => this.updateValue(e.detail.checked)} checked={this.checked}></ion-checkbox>
-            <div>
+            <div class="-ml-3">
               <slot />
             </div>
           </d-horizontal-stack>

diff --git a/src/components/checkbox/test/d-checkbox.spec.tsx b/src/components/checkbox/test/d-checkbox.spec.tsx
@@ -13,7 +13,7 @@ describe('d-checkbox', () => {
           <d-vertical-stack>
            <d-horizontal-stack class="items-center" gap="0">
              <ion-checkbox></ion-checkbox>
-             <div>
+             <div class="-ml-3">
                <slot></slot>
              </div>
            </d-horizontal-stack>