7fb95f436b
feat(BOOK-522): align items in topmenu, header and booking widget * feat(BOOK-522): align items in topmenu, header and booking widget * Delete old css variable and use new * Fixed underline on icons Approved-by: Erik Tiekstra
115 lines
1.9 KiB
CSS
115 lines
1.9 KiB
CSS
.room {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--Spacing-x2);
|
|
}
|
|
|
|
.header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--Spacing-x2);
|
|
}
|
|
|
|
.benefits {
|
|
align-items: center;
|
|
border: 1px solid var(--Base-Border-Subtle);
|
|
border-radius: var(--Corner-radius-md);
|
|
display: flex;
|
|
gap: var(--Spacing-x1);
|
|
padding: var(--Spacing-x1) var(--Space-x15);
|
|
width: min(max-content, 100%);
|
|
}
|
|
|
|
.guaranteeText {
|
|
color: var(--Text-Feedback-Succes);
|
|
}
|
|
|
|
.booking {
|
|
background-color: var(--Background-Primary);
|
|
border-radius: var(--Corner-radius-lg);
|
|
display: grid;
|
|
gap: var(--Spacing-x2);
|
|
padding: var(--Spacing-x2) var(--Spacing-x2) var(--Spacing-x3)
|
|
var(--Spacing-x2);
|
|
}
|
|
|
|
.img {
|
|
width: 100%;
|
|
}
|
|
|
|
.roomDetails {
|
|
display: grid;
|
|
gap: var(--Spacing-x2);
|
|
}
|
|
|
|
.roomName {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: var(--Spacing-x-half);
|
|
grid-column: 1/-1;
|
|
}
|
|
|
|
.details {
|
|
display: grid;
|
|
gap: var(--Spacing-x-half) var(--Spacing-x3);
|
|
list-style: none;
|
|
}
|
|
|
|
.listItem {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
justify-content: space-between;
|
|
gap: var(--Space-x3);
|
|
}
|
|
|
|
.guest {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--Spacing-x-half);
|
|
}
|
|
|
|
.label {
|
|
color: var(--Text-Tertiary);
|
|
}
|
|
|
|
.details p:nth-of-type(even) {
|
|
text-align: right;
|
|
}
|
|
|
|
@media screen and (max-width: 1366px) {
|
|
.details {
|
|
padding-bottom: var(--Space-x1);
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 1367px) {
|
|
.header {
|
|
grid-template-columns: 1fr auto;
|
|
}
|
|
|
|
.details p:nth-of-type(even) {
|
|
text-align: left;
|
|
}
|
|
|
|
.img {
|
|
width: 204px;
|
|
}
|
|
|
|
.booking {
|
|
gap: var(--Spacing-x3);
|
|
grid-template-columns: auto 1fr;
|
|
padding: var(--Spacing-x2) var(--Spacing-x3) var(--Spacing-x2)
|
|
var(--Spacing-x2);
|
|
}
|
|
|
|
.roomDetails {
|
|
grid-template-columns: 1fr auto;
|
|
}
|
|
|
|
.guest {
|
|
align-items: flex-end;
|
|
align-self: flex-end;
|
|
}
|
|
}
|