fix: #2333 multidirection support for join (#2334)

saadeghi · Sep 19, 2023 · e8b3589 · e8b3589
1 parent e8f1907
commit e8b3589
Showing 1 changed file with 18 additions and 18 deletions.
diff --git a/src/components/unstyled/join.css b/src/components/unstyled/join.css
@@ -1,47 +1,47 @@
 .join {
   @apply inline-flex items-stretch;
   & :where(.join-item) {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
-    border-top-left-radius: 0;
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+    border-end-start-radius: 0;
+    border-start-start-radius: 0;
   }
   & .join-item:not(:first-child):not(:last-child),
   & *:not(:first-child):not(:last-child) .join-item {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
-    border-top-left-radius: 0;
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+    border-end-start-radius: 0;
+    border-start-start-radius: 0;
   }
 
   & .join-item:first-child:not(:last-child),
   & *:first-child:not(:last-child) .join-item {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
   }
 
   & .dropdown .join-item:first-child:not(:last-child),
   & *:first-child:not(:last-child) .dropdown .join-item {
-    border-top-right-radius: inherit;
-    border-bottom-right-radius: inherit;
+    border-start-end-radius: inherit;
+    border-end-end-radius: inherit;
   }
 
   & :where(.join-item:first-child:not(:last-child)),
   & :where(*:first-child:not(:last-child) .join-item) {
-    border-bottom-left-radius: inherit;
-    border-top-left-radius: inherit;
+    border-end-start-radius: inherit;
+    border-start-start-radius: inherit;
   }
 
   & .join-item:last-child:not(:first-child),
   & *:last-child:not(:first-child) .join-item {
-    border-bottom-left-radius: 0;
-    border-top-left-radius: 0;
+    border-end-start-radius: 0;
+    border-start-start-radius: 0;
   }
 
   & :where(.join-item:last-child:not(:first-child)),
   & :where(*:last-child:not(:first-child) .join-item) {
-    border-top-right-radius: inherit;
-    border-bottom-right-radius: inherit;
+    border-start-end-radius: inherit;
+    border-end-end-radius: inherit;
   }
 }
 :where(.join *) {