diff --git a/src/assets/styles/rtl-overrides.scss b/src/assets/styles/rtl-overrides.scss index c5f1062..6dfbf33 100644 --- a/src/assets/styles/rtl-overrides.scss +++ b/src/assets/styles/rtl-overrides.scss @@ -150,6 +150,122 @@ html[dir="rtl"] { } } + /* PrimeVue InputGroup RTL Fixes */ + .p-inputgroup { + direction: rtl; + + // Reset default border radius on all direct elements and child inputs + > .p-component, + > .p-inputgroupaddon, + > .p-inputwrapper, + > .p-inputwrapper > .p-inputtext, + > .p-inputwrapper > .p-inputnumber-input, + > .p-inputnumber, + > .p-inputnumber .p-inputnumber-input, + > .p-inputnumber .p-inputtext, + > .p-floatlabel > .p-component, + > .p-floatlabel input, + > .p-inputtext, + > .p-button, + > button, + > input { + border-radius: 0 !important; + margin: 0; + } + + // Default addon borders + .p-inputgroupaddon { + border-top: 1px solid var(--p-inputgroup-addon-border-color, var(--border-color)) !important; + border-bottom: 1px solid var(--p-inputgroup-addon-border-color, var(--border-color)) !important; + border-left: 1px solid var(--p-inputgroup-addon-border-color, var(--border-color)) !important; + border-right: 1px solid var(--p-inputgroup-addon-border-color, var(--border-color)) !important; + } + + // First child in DOM is visually on the RIGHT in RTL + > .p-inputgroupaddon:first-child, + > .p-button:first-child, + > button:first-child, + > input:first-child, + > .p-inputtext:first-child, + > .p-component:first-child, + > .p-inputwrapper:first-child, + > .p-inputwrapper:first-child > .p-inputtext, + > .p-inputwrapper:first-child > .p-inputnumber-input, + > .p-inputnumber:first-child, + > .p-inputnumber:first-child .p-inputnumber-input, + > .p-inputnumber:first-child .p-inputtext, + > .p-floatlabel:first-child > .p-component, + > .p-floatlabel:first-child input { + border-top-right-radius: var(--p-inputgroup-addon-border-radius, 6px) !important; + border-bottom-right-radius: var(--p-inputgroup-addon-border-radius, 6px) !important; + border-top-left-radius: 0 !important; + border-bottom-left-radius: 0 !important; + } + + > .p-inputgroupaddon:first-child { + border-left: 0 none !important; + border-right: 1px solid var(--p-inputgroup-addon-border-color, var(--border-color)) !important; + } + + // Last child in DOM is visually on the LEFT in RTL + > .p-inputgroupaddon:last-child, + > .p-button:last-child, + > button:last-child, + > input:last-child, + > .p-inputtext:last-child, + > .p-component:last-child, + > .p-inputwrapper:last-child, + > .p-inputwrapper:last-child > .p-inputtext, + > .p-inputwrapper:last-child > .p-inputnumber-input, + > .p-inputnumber:last-child, + > .p-inputnumber:last-child .p-inputnumber-input, + > .p-inputnumber:last-child .p-inputtext, + > .p-floatlabel:last-child > .p-component, + > .p-floatlabel:last-child input { + border-top-left-radius: var(--p-inputgroup-addon-border-radius, 6px) !important; + border-bottom-left-radius: var(--p-inputgroup-addon-border-radius, 6px) !important; + border-top-right-radius: 0 !important; + border-bottom-right-radius: 0 !important; + } + + > .p-inputgroupaddon:last-child { + border-right: 0 none !important; + border-left: 1px solid var(--p-inputgroup-addon-border-color, var(--border-color)) !important; + } + + // Component/input before addon (addon positioned to the left) + > .p-component + .p-inputgroupaddon, + > .p-inputwrapper + .p-inputgroupaddon, + > .p-inputnumber + .p-inputgroupaddon, + > .p-floatlabel + .p-inputgroupaddon, + > input + .p-inputgroupaddon { + border-right: 0 none !important; + border-left: 1px solid var(--p-inputgroup-addon-border-color, var(--border-color)) !important; + } + + // Addon before component/input (component positioned to the left) + > .p-inputgroupaddon + .p-component, + > .p-inputgroupaddon + .p-inputwrapper, + > .p-inputgroupaddon + .p-inputnumber, + > .p-inputgroupaddon + .p-floatlabel, + > .p-inputgroupaddon + input { + border-right: 0 none !important; + } + + // Focus state handling + > .p-component:focus, + > .p-component:focus-within, + > .p-inputwrapper:focus-within, + > .p-inputwrapper > .p-inputtext:focus, + > .p-inputwrapper > .p-inputnumber-input:focus, + > .p-inputnumber:focus-within, + > .p-inputnumber .p-inputnumber-input:focus, + > .p-floatlabel > .p-component:focus { + position: relative; + z-index: 1; + } + } + /* Vue FilePond RTL adjustment */ .filepond--root { direction: rtl;