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) { >(function InputComponent(props, ref) {
return ( return (
<Body asChild> <Body asChild>
<input <input {...props} ref={ref} className={styles.input} />
{...props}
ref={ref}
className={`${styles.input} ${props.className}`}
/>
</Body> </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 })}> <div {...getRootProps({}, { suppressRefError: true })}>
<Input <Input
{...getInputProps({ {...getInputProps({
className: styles.input,
id: name, id: name,
onFocus(evt) { onFocus(evt) {
handleOnFocus(evt) handleOnFocus(evt)

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

@@ -7,24 +7,24 @@
} }
.container:hover, .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); 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); border-color: 1px solid var(--UI-Input-Controls-Border-Focus);
} }
.label:has( .label:has(
~ .inputContainer .input:active, ~ inputContainer input:active,
~ .inputContainer .input:focus, ~ inputContainer input:focus,
~ .inputContainer .input:focus-within ~ inputContainer input:focus-within
) )
p { p {
color: var(--UI-Text-Active); color: var(--UI-Text-Active);
} }
.container:hover:has(.input:not(:active, :focus, :focus-within)) .container:hover:has(input:not(:active, :focus, :focus-within))
.input::-webkit-search-cancel-button { input::-webkit-search-cancel-button {
display: none; display: none;
} }