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

feat(SW-350): split input styles in booking widget

Browse Source
This commit is contained in:
Pontus Dreij
2024-10-07 15:17:18 +02:00
parent 2650b3d5d7
commit f8127c4875
6 changed files with 5 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/[lang]/(live)/layout.tsx
View File

@@ -2,7 +2,6 @@ import "@/app/globals.css"
import "@scandic-hotels/design-system/style.css" import "@scandic-hotels/design-system/style.css"
import Script from "next/script" import Script from "next/script"
import React from "react"
import { env } from "@/env/server" import { env } from "@/env/server"
import TrpcProvider from "@/lib/trpc/Provider" import TrpcProvider from "@/lib/trpc/Provider"

2
components/BookingWidget/MobileToggleButton/button.module.css
View File

@@ -31,7 +31,7 @@
width: 36px; width: 36px;
} }
@media screen and (min-width: 767px) { @media screen and (min-width: 768px) {
.complete, .complete,
.partial { .partial {
display: none; display: none;

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

@@ -16,6 +16,7 @@ import Caption from "@/components/TempDesignSystem/Text/Caption"
import { init, localStorageKey, reducer, sessionStorageKey } from "./reducer" import { init, localStorageKey, reducer, sessionStorageKey } from "./reducer"
import SearchList from "./SearchList" import SearchList from "./SearchList"
import inputStyles from "../Input/input.module.css"
import styles from "./search.module.css" import styles from "./search.module.css"
import type { BookingWidgetSchema } from "@/types/components/bookingWidget" import type { BookingWidgetSchema } from "@/types/components/bookingWidget"
@@ -145,7 +146,7 @@ export default function Search({ locations }: SearchProps) {
<Body asChild> <Body asChild>
<input <input
{...getInputProps({ {...getInputProps({
className: styles.input, className: `${styles.searchInput} ${inputStyles.input}`,
id: name, id: name,
onFocus(evt) { onFocus(evt) {
handleOnFocus(evt) handleOnFocus(evt)

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

@@ -24,30 +24,7 @@
color: var(--UI-Text-Active); color: var(--UI-Text-Active);
} }
.input {
background-color: transparent;
border: none;
height: 24px;
outline: none;
position: relative;
width: 100%;
z-index: 2;
}
.input::-webkit-search-cancel-button {
-webkit-appearance: none;
appearance: none;
background-image: url("/_static/icons/close.svg");
height: 20px;
width: 20px;
}
.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;
} }
.input:disabled,
.input:disabled::placeholder {
color: var(--Base-Text-Disabled);
}

2
components/Forms/BookingWidget/FormContent/formContent.module.css
View File

@@ -71,7 +71,7 @@
.inputContainer input[type="text"] { .inputContainer input[type="text"] {
border: none; border: none;
height: var(--Spacing-x3); height: 24px;
} }
.rooms, .rooms,

3
components/Forms/BookingWidget/FormContent/index.tsx
View File

@@ -1,5 +1,4 @@
"use client" "use client"
import React from "react"
import { useWatch } from "react-hook-form" import { useWatch } from "react-hook-form"
import { useIntl } from "react-intl" import { useIntl } from "react-intl"
@@ -15,7 +14,7 @@ import Search from "./Search"
import Voucher from "./Voucher" import Voucher from "./Voucher"
import styles from "./formContent.module.css" import styles from "./formContent.module.css"
import inputStyles from "./Search/search.module.css" import inputStyles from "./Input/input.module.css"
import type { BookingWidgetFormContentProps } from "@/types/components/form/bookingwidget" import type { BookingWidgetFormContentProps } from "@/types/components/form/bookingwidget"