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

feat(SW-718): Animation on selection of multiple room

Browse Source
This commit is contained in:
Pontus Dreij
2025-01-21 15:59:16 +01:00
parent 328cbbe0e1
commit 98793c58e3
11 changed files with 195 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
components/HotelReservation/SelectRate/Rooms/rooms.module.css
View File

@@ -15,3 +15,44 @@
border-radius: var(--Corner-radius-Large);
padding: var(--Spacing-x2) var(--Spacing-x2) 0 var(--Spacing-x2);
}
.roomSelectionPanel {
display: grid;
grid-template-rows: 0fr;
opacity: 0;
transition:
opacity 0.3s ease,
grid-template-rows 0.5s ease;
height: 0;
}
.roomSelectionPanel > * {
overflow: hidden;
}
.selectedRoomPanel {
display: grid;
grid-template-rows: 0fr;
opacity: 0;
transition:
opacity 0.3s ease,
grid-template-rows 0.3s ease;
height: 0;
}
.selectedRoomPanel > * {
overflow: hidden;
}
.roomSelectionPanelContainer[data-selected="true"] .selectedRoomPanel {
grid-template-rows: 1fr;
opacity: 1;
height: auto;
padding-bottom: var(--Spacing-x2);
}
.roomSelectionPanelContainer[data-active-panel="true"] .roomSelectionPanel {
grid-template-rows: 1fr;
opacity: 1;
height: auto;
}