kavehhn/gameno-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(styles): add RTL overrides for InputGroup and InputGroupAddon

Browse Source
This commit is contained in:
kavehhn
2026-08-23 16:41:57 +03:30
parent de87412bb1
commit 966b066358
1 changed files with 116 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/styles/rtl-overrides.scss
+116
View File
@@ -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 */ /* Vue FilePond RTL adjustment */
.filepond--root { .filepond--root {
direction: rtl; direction: rtl;