scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(SW-350): update classes for booking widget input

Browse Source
This commit is contained in:
Pontus Dreij
2024-10-08 10:49:26 +02:00
parent 3160174701
commit 2b20172b73
3 changed files with 8 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/Forms/BookingWidget/FormContent/Input/index.tsx
View File

@@ -10,11 +10,7 @@ const Input = forwardRef<
>(function InputComponent(props, ref) {
return (
<Body asChild>
<input
{...props}
ref={ref}
className={`${styles.input} ${props.className}`}
/>
<input {...props} ref={ref} className={styles.input} />
</Body>
)
})

1
components/Forms/BookingWidget/FormContent/Search/index.tsx
View File

@@ -145,7 +145,6 @@ export default function Search({ locations }: SearchProps) {
<div {...getRootProps({}, { suppressRefError: true })}>
<Input
{...getInputProps({
className: styles.input,
id: name,
onFocus(evt) {
handleOnFocus(evt)

14
components/Forms/BookingWidget/FormContent/Search/search.module.css
View File

@@ -7,24 +7,24 @@
}
.container:hover,
.container:has(input:active, .input:focus, .input:focus-within) {
.container:has(input:active, input:focus, input:focus-within) {
background-color: var(--Base-Surface-Primary-light-Hover-alt);
}
.container:has(input:active, .input:focus, .input:focus-within) {
.container:has(input:active, input:focus, input:focus-within) {
border-color: 1px solid var(--UI-Input-Controls-Border-Focus);
}
.label:has(
~ .inputContainer .input:active,
~ .inputContainer .input:focus,
~ .inputContainer .input:focus-within
~ inputContainer input:active,
~ inputContainer input:focus,
~ inputContainer input:focus-within
)
p {
color: var(--UI-Text-Active);
}
.container:hover:has(.input:not(:active, :focus, :focus-within))
.input::-webkit-search-cancel-button {
.container:hover:has(input:not(:active, :focus, :focus-within))
input::-webkit-search-cancel-button {
display: none;
}