158 lines
2.4 KiB
CSS
158 lines
2.4 KiB
CSS
.details,
|
|
.guest,
|
|
.header,
|
|
.hgroup,
|
|
.hotel,
|
|
.list,
|
|
.main,
|
|
.section,
|
|
.receipt,
|
|
.total {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.main {
|
|
gap: var(--Spacing-x5);
|
|
margin: 0 auto;
|
|
width: min(calc(100dvw - (var(--Spacing-x3) * 2)), 708px);
|
|
}
|
|
|
|
.header,
|
|
.hgroup {
|
|
align-items: center;
|
|
}
|
|
|
|
.header {
|
|
gap: var(--Spacing-x3);
|
|
}
|
|
|
|
.hgroup {
|
|
gap: var(--Spacing-x-half);
|
|
}
|
|
|
|
.body {
|
|
max-width: 560px;
|
|
}
|
|
|
|
.section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--Spacing-x9);
|
|
}
|
|
|
|
.booking {
|
|
display: grid;
|
|
gap: var(--Spacing-x-one-and-half);
|
|
grid-template-areas:
|
|
"image"
|
|
"details"
|
|
"actions";
|
|
}
|
|
|
|
.actions,
|
|
.details {
|
|
background-color: var(--Base-Surface-Subtle-Normal);
|
|
border-radius: var(--Corner-radius-Medium);
|
|
}
|
|
|
|
.details {
|
|
gap: var(--Spacing-x3);
|
|
grid-area: details;
|
|
padding: var(--Spacing-x2);
|
|
}
|
|
|
|
.tempImage {
|
|
align-items: center;
|
|
background-color: lightgrey;
|
|
border-radius: var(--Corner-radius-Medium);
|
|
display: flex;
|
|
grid-area: image;
|
|
justify-content: center;
|
|
}
|
|
|
|
.actions {
|
|
display: grid;
|
|
grid-area: actions;
|
|
padding: var(--Spacing-x1) var(--Spacing-x2);
|
|
}
|
|
|
|
.list {
|
|
gap: var(--Spacing-x-one-and-half);
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.listItem {
|
|
align-items: center;
|
|
display: flex;
|
|
gap: var(--Spacing-x1);
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.summary {
|
|
display: grid;
|
|
gap: var(--Spacing-x3);
|
|
}
|
|
|
|
.guest,
|
|
.hotel {
|
|
gap: var(--Spacing-x-half);
|
|
}
|
|
|
|
.receipt,
|
|
.total {
|
|
gap: var(--Spacing-x2);
|
|
}
|
|
|
|
.divider {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
@media screen and (max-width: 767px) {
|
|
.actions {
|
|
& > button[class*="btn"][class*="icon"][class*="small"] {
|
|
border-bottom: 1px solid var(--Base-Border-Subtle);
|
|
border-radius: 0;
|
|
justify-content: space-between;
|
|
|
|
&:last-of-type {
|
|
border-bottom: none;
|
|
}
|
|
|
|
& > svg {
|
|
order: 2;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tempImage {
|
|
min-height: 250px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 768px) {
|
|
.booking {
|
|
grid-template-areas:
|
|
"details image"
|
|
"actions actions";
|
|
grid-template-columns: 1fr minmax(256px, min(256px, 100%));
|
|
}
|
|
|
|
.actions {
|
|
gap: var(--Spacing-x7);
|
|
grid-template-columns: repeat(auto-fit, minmax(50px, auto));
|
|
justify-content: center;
|
|
padding: var(--Spacing-x1) var(--Spacing-x3);
|
|
}
|
|
|
|
.details {
|
|
padding: var(--Spacing-x3) var(--Spacing-x3) var(--Spacing-x2);
|
|
}
|
|
|
|
.summary {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
}
|