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