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

Merged in fix/SW-1524-clickable-area (pull request #2125)

Browse Source 
Fix/SW-1524: Enter details- expand clickable area

* fix(SW-1524): make whole price area clickable

* fix(SW-1524): add div as fake button


Approved-by: Bianca Widstam
Approved-by: Erik Tiekstra
This commit is contained in:
Matilda Landström
2025-05-21 07:38:27 +00:00
parent e48e90dee4
commit 6be599e687
5 changed files with 98 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
apps/scandic-web/components/HotelReservation/HotelCard/hotelCard.module.css
View File

@@ -71,10 +71,6 @@
gap: var(--Spacing-x-half);
}
.button {
min-width: 160px;
}
.specialAlerts {
display: flex;
flex-direction: column;
@@ -87,6 +83,22 @@
gap: var(--Spacing-x-one-and-half);
}
.link:hover {
.fakeButton {
background-color: var(--Component-Button-Brand-Primary-Fill-Hover);
border-color: var(--Component-Button-Brand-Primary-Border-Hover);
color: var(--Component-Button-Brand-Primary-On-fill-Hover);
}
.priceCard {
background: linear-gradient(
0deg,
var(--Surface-Primary-Hover) 0%,
var(--Surface-Primary-Hover) 100%
);
}
}
.strikedText {
text-decoration: line-through;
}
@@ -97,6 +109,28 @@
border-radius: var(--Corner-radius-md);
}
.fakeButton {
min-width: 160px;
border-radius: var(--Corner-radius-rounded);
border-width: 2px;
border-style: solid;
display: flex;
align-items: center;
justify-content: center;
gap: var(--Space-x05);
padding: 10px var(--Space-x2);
background-color: var(--Component-Button-Brand-Primary-Fill-Default);
border-color: var(--Component-Button-Brand-Primary-Border-Default);
color: var(--Component-Button-Brand-Primary-On-fill-Default);
}
.fakeButton.disabled {
background-color: var(--Component-Button-Brand-Primary-Fill-Disabled);
border-color: var(--Component-Button-Brand-Primary-Border-Disabled);
color: var(--Component-Button-Brand-Primary-On-fill-Disabled);
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
.imageContainer {
height: 180px;
@@ -140,7 +174,7 @@
margin-bottom: var(--Spacing-x-one-and-half);
}
.pageListing .button {
.pageListing .fakeButton {
width: 100%;
}