Details popup now has proper RTL layout

peripleo · Feb 28, 2024 · 26b6934 · 26b6934
1 parent 1d57a3c
commit 26b6934
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 3 deletions.
diff --git a/src/components/KimaPopup/SelectedCard.css b/src/components/KimaPopup/SelectedCard.css
@@ -174,10 +174,15 @@
   padding: 14px 14px 14px 20px;
   font-weight: 500;
   display: flex;
+  flex-direction: row-reverse;
   justify-content: space-between;
   align-items: center;
 }
 
+.kima-selected-card footer section.details .chevron {
+  transform: rotateZ(180deg);
+}
+
 .kima-selected-card footer section.details svg {
   font-size: 24px;
   vertical-align: bottom;
@@ -188,7 +193,7 @@
   border-radius: 0 0 6px 6px;
   border-bottom:10px solid transparent;
   display: flex;
-  justify-content: flex-end;
+  justify-content: flex-start;
 }
 
 .kima-selected-card footer section.close button.close {

diff --git a/src/components/KimaPopup/SelectedCard.jsx b/src/components/KimaPopup/SelectedCard.jsx
@@ -130,7 +130,7 @@ export const SelectedCard = props => {
           <a href={id} target="_blank">
             <section className="details">
               <span>פרטים נוספים</span>
-              <span>
+              <span className="chevron">
                 <HiChevronRight />
               </span>
             </section>

diff --git a/src/peripleo/controls/Info/InfoControl.css b/src/peripleo/controls/Info/InfoControl.css
@@ -38,11 +38,15 @@
   right: auto;
 }
 
-
 .p6o-info-modal-close.mobile {
   right: 10px;
 }
 
+.rtl .p6o-info-modal-close.mobile {
+  left: 10px;
+  right: auto;
+}
+
 .p6o-info-modal-main {
   width: 90%;
   max-height: calc(100% - 140px);