fix: rtl issues

tablecheck · Oct 11, 2024 · 1cf863f · 1cf863f
1 parent ae3b2a0
commit 1cf863f
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 9 deletions.
diff --git a/system/core/src/components/InputWithIcons.ts b/system/core/src/components/InputWithIcons.ts
@@ -82,9 +82,19 @@ export const fullStyles = css`
         var(--tk-input-icon-end-padding)
     );
     --tk-icon-button-padding: 8px !important;
-    margin: 0 -9px 0 -6px;
+    margin-top: 0;
+    margin-bottom: 0;
+    margin-inline-start: -6px;
+    -webkit-margin-start: -6px;
+    margin-inline-end: -9px;
+    -webkit-margin-end: -9px;
   }
   &[data-size='small'] > [data-mode='input-append'] {
-    margin: 0 -9px 0 -3px;
+    margin-top: 0;
+    margin-bottom: 0;
+    margin-inline-start: -3px;
+    -webkit-margin-start: -3px;
+    margin-inline-end: -9px;
+    -webkit-margin-end: -9px;
   }
 `;
diff --git a/system/core/src/components/InputWithPrefix.ts b/system/core/src/components/InputWithPrefix.ts
@@ -90,9 +90,19 @@ export const fullStyles = css`
         var(--tk-input-icon-end-padding)
     );
     --tk-icon-button-padding: 8px !important;
-    margin: 0 -11px 0 -7px;
+    margin-top: 0;
+    margin-bottom: 0;
+    margin-inline-start: -7px;
+    -webkit-margin-start: -7px;
+    margin-inline-end: -11px;
+    -webkit-margin-end: -11px;
   }
   &[data-size='small'] > [data-mode='input-append'] {
-    margin: 0 -11px 0 -3px;
+    margin-top: 0;
+    margin-bottom: 0;
+    margin-inline-start: -3px;
+    -webkit-margin-start: -3px;
+    margin-inline-end: -11px;
+    -webkit-margin-end: -11px;
   }
 `;
diff --git a/system/core/src/components/TextAreaWithIcons.ts b/system/core/src/components/TextAreaWithIcons.ts
@@ -101,9 +101,19 @@ export const fullStyles = css`
         var(--tk-input-icon-end-padding)
     );
     --tk-icon-button-padding: 8px !important;
-    margin: 0 -9px 0 -6px;
+    margin-top: 0;
+    margin-bottom: 0;
+    margin-inline-start: -6px;
+    -webkit-margin-start: -6px;
+    margin-inline-end: -9px;
+    -webkit-margin-end: -9px;
   }
   &[data-size='small'] > [data-mode='input-append'] {
-    margin: 0 -9px 0 -3px;
+    margin-top: 0;
+    margin-bottom: 0;
+    margin-inline-start: -3px;
+    -webkit-margin-start: -3px;
+    margin-inline-end: -9px;
+    -webkit-margin-end: -9px;
   }
 `;
diff --git a/system/core/src/components/TextAreaWithPrefix.ts b/system/core/src/components/TextAreaWithPrefix.ts
@@ -106,9 +106,19 @@ export const fullStyles = css`
         var(--tk-input-icon-end-padding)
     );
     --tk-icon-button-padding: 8px !important;
-    margin: 0 -11px 0 -8px;
+    margin-top: 0;
+    margin-bottom: 0;
+    margin-inline-start: -8px;
+    -webkit-margin-start: -8px;
+    margin-inline-end: -11px;
+    -webkit-margin-end: -11px;
   }
   &[data-size='small'] > [data-mode='input-append'] {
-    margin: 0 -11px 0 -3px;
+    margin-top: 0;
+    margin-bottom: 0;
+    margin-inline-start: -3px;
+    -webkit-margin-start: -3px;
+    margin-inline-end: -11px;
+    -webkit-margin-end: -11px;
   }
 `;
diff --git a/system/stories/src/DatePicker/storyStyles.ts b/system/stories/src/DatePicker/storyStyles.ts
@@ -41,7 +41,12 @@ export const Table = styled.table`
     border-bottom: 1px solid var(--border);
   }
   td {
-    padding: var(--spacing-l2) var(--spacing-l4) var(--spacing-l2) 0px;
+    padding-top: var(--spacing-l2);
+    padding-bottom: var(--spacing-l2);
+    padding-inline-start: 0;
+    -webkit-padding-start: 0;
+    padding-inline-end: var(--spacing-l4);
+    -webkit-padding-end: var(--spacing-l4);
     line-height: 1.5;
   }
 `;