Skip to content

Fix: Added the RTL for the input-select #36

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jadekeina wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Fix: Added the RTL for the input-select #36

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1aa5ba6
Fix: Added the RTL for the input-select
jadekeina May 14, 2025
d2a2bf5
Fixed the rtl in the input select
jadekeina May 19, 2025
0fa1c0d
Apply suggestions from code review
jadekeina May 19, 2025
d3de3a7
Fixed some details
jadekeina May 19, 2025
78697cf
Fixed some details
jadekeina May 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 15 additions & 10 deletions src/components/inputs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,8 +116,13 @@
}

.input-select {
@apply appearance-none outline-none h-11 bg-contrast hover:bg-contrast-800 focus:bg-contrast-900 border border-solid border-contrast-400 font-bold px-4 rounded-md text-base placeholder:font-normal placeholder:text-contrast-400 hover:border-secondary-500 focus:border-secondary transition-all disabled:opacity-70 [&:user-invalid]:border-danger [&:user-invalid]:hover:border-danger-500 [&:user-invalid]:focus:border-danger-900 [&:user-invalid]:text-danger disabled:cursor-not-allowed bg-no-repeat bg-right;
@apply appearance-none outline-none h-11 bg-contrast hover:bg-contrast-800 focus:bg-contrast-900 border border-solid border-contrast-400 font-bold px-4 rounded-md text-base placeholder:font-normal placeholder:text-contrast-400 hover:border-secondary-500 focus:border-secondary transition-all disabled:opacity-70 [&:user-invalid]:border-danger [&:user-invalid]:hover:border-danger-500 [&:user-invalid]:focus:border-danger-900 [&:user-invalid]:text-danger disabled:cursor-not-allowed bg-no-repeat bg-right ;

background-image: svg-load('./icon-dropdown.svg');
[dir="rtl"] & {
background-position: left 0.5rem center;
Copy link

Copilot AI May 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[nitpick] Hardcoding 0.5rem for RTL positioning may drift if padding scales change. Use a theme spacing variable or match the existing px-4/ps-4 value (e.g., theme('spacing.4')) to ensure alignment stays consistent.

Copilot uses AI. Check for mistakes.
}

&.success {
@apply border-success text-success hover:border-success-500 focus:border-success-900;
}
Expand All @@ -129,28 +134,28 @@
&-lg {
@apply h-13 text-lg;
&.input-icon-left {
@apply pl-12;
@apply ps-12;
}
&.input-icon-right {
@apply pr-12;
@apply pe-12;
}
}
&-sm {
@apply h-10 text-sm;
&.input-icon-left {
@apply pl-10;
@apply ps-10;
}
&.input-icon-right {
@apply pr-10;
@apply pe-10;
}
}
&-xs {
@apply h-8 text-sm rounded;
&.input-icon-left {
@apply pl-10;
@apply ps-10;
}
&.input-icon-right {
@apply pr-10;
@apply pe-10;
}
}
&-light {
Expand All @@ -163,10 +168,10 @@
}
}
&.input-icon-left {
@apply pl-11;
@apply ps-11;
}
&.input-icon-right {
@apply pr-11;
@apply pe-11;
}
}

Expand Down Expand Up @@ -230,7 +235,7 @@
peer-checked:before:rounded-sm peer-checked:before:top-[-1px] peer-checked:before:left-[-1px] peer-checked:border-contrast peer-checked:before:bg-contrast peer-checked:before:h-5 peer-checked:before:w-5 peer-checked:before:content-[''] peer-checked:before:absolute

after:transition-all after:absolute after:content-[''] after:h-0 after:w-0 after:top-[10px] after:left-[10px]
peer-checked:after:rounded-sm peer-checked:after:top-[-1px] peer-checked:after:left-[-1px] peer-checked:after:h-5 peer-checked:after:w-5 peer-checked:after:content-[''] peer-checked:after:absolute
peer-checked:after:rounded-sm peer-checked:after:top-[-1px] peer-checked:after:left-[-1px] peer-checked:after:bg-[url('data:image/png;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xLjkxNjc1IDQuNjE4ODJMNC44MzM0MSA3LjUzNTQ4TDEwLjY2NjcgMS43MDIxNSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==')] peer-checked:after:h-5 peer-checked:after:w-5 peer-checked:after:content-[''] peer-checked:after:absolute
Comment thread
jadekeina marked this conversation as resolved.

peer-disabled:opacity-35 peer-disabled:cursor-not-allowed;

Expand Down