From 1aa5ba6b96549ab10d3f974504788edee596d3f3 Mon Sep 17 00:00:00 2001 From: Jade-Keina POGNON Date: Wed, 14 May 2025 17:40:01 +0200 Subject: [PATCH 1/3] Fix: Added the RTL for the input-select --- src/components/inputs.scss | 25 +++++++++++++++---------- 1 file changed, 15 insertions(+), 10 deletions(-) diff --git a/src/components/inputs.scss b/src/components/inputs.scss index 76f4e2a..4dd3f6e 100644 --- a/src/components/inputs.scss +++ b/src/components/inputs.scss @@ -116,7 +116,12 @@ } .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-[url('../icon-dropdown.svg')] 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-[url('../icon-dropdown.svg')] bg-no-repeat bg-right ; + + [dir="rtl"] & { + background-position: left 0.5rem center; + } + &.success { @apply border-success text-success hover:border-success-500 focus:border-success-900; } @@ -128,28 +133,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 { @@ -162,10 +167,10 @@ } } &.input-icon-left { - @apply pl-11; + @apply ps-11; } &.input-icon-right { - @apply pr-11; + @apply pe-11; } } @@ -228,7 +233,7 @@ before:transition-all before:absolute before:content-[''] before:bg-transparent before:h-0 before:w-0 before:top-[10px] before:left-[10px] 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] + after:transition-all after:absolute after:content-[''] after:h-0 after:w-0 after:top-[16px] after:left-[10px] 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 peer-disabled:opacity-35 peer-disabled:cursor-not-allowed; From 0fa1c0d342640a3706b6f56d98c4215babea80b4 Mon Sep 17 00:00:00 2001 From: "Jade-Keina P." <127255892+jadekeina@users.noreply.github.com> Date: Mon, 19 May 2025 15:33:12 +0200 Subject: [PATCH 2/3] Apply suggestions from code review MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: David Négrier --- src/components/inputs.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/inputs.scss b/src/components/inputs.scss index f2a28e5..7d6d1ab 100644 --- a/src/components/inputs.scss +++ b/src/components/inputs.scss @@ -116,7 +116,7 @@ } .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-[url('../icon-dropdown.svg')] 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; @@ -234,7 +234,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: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 + 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-disabled:opacity-35 peer-disabled:cursor-not-allowed; From d3de3a740971a1d111a4d92b7c4841c6b60dd81c Mon Sep 17 00:00:00 2001 From: Jade-Keina POGNON Date: Mon, 19 May 2025 16:50:29 +0200 Subject: [PATCH 3/3] Fixed some details --- src/components/inputs.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/inputs.scss b/src/components/inputs.scss index f2a28e5..0a754f7 100644 --- a/src/components/inputs.scss +++ b/src/components/inputs.scss @@ -116,8 +116,10 @@ } .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-[url('../icon-dropdown.svg')] 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; } @@ -234,7 +236,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: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 + 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-disabled:opacity-35 peer-disabled:cursor-not-allowed;