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:18:04 +02:00
parent f8127c4875
commit 836ab559f0
1 changed files with 15 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,24 +7,32 @@
} }
.container:hover, .container:hover,
.container:has(.input:active, .input:focus, .input:focus-within) { .container:has(
.searchInput:active,
.searchInput:focus,
.searchInput: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(
.searchInput:active,
.searchInput:focus,
.searchInput: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 .searchInput:active,
~ .inputContainer .input:focus, ~ .inputContainer .searchInput:focus,
~ .inputContainer .input:focus-within ~ .inputContainer .searchInput: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(.searchInput:not(:active, :focus, :focus-within))
.input::-webkit-search-cancel-button { .searchInput::-webkit-search-cancel-button {
display: none; display: none;
} }