8616e4ab76
Feat/SW-1276 implement design * feat(SW-1276) UI implementation Desktop part 1 for MyStay * feat(SW-1276) UI implementation Desktop part 2 for MyStay * feat(SW-1276) UI implementation Mobile part 1 for MyStay * refactor: move files from MyStay/MyStay to MyStay * feat(SW-1276) Sidepeek implementation * feat(SW-1276): Refactoring * feat(SW-1276) UI implementation Mobile part 2 for MyStay * feat(SW-1276): translations * feat(SW-1276) fixed skeleton * feat(SW-1276): Added missing translations * feat(SW-1276): Removed console log * feat(SW-1276) fixed translations * feat(SW-1276): Added translations * feat(SW-1276) fix dynamic ID:s * feat(SW-1276) removed createElement * feat(SW-1276): Fixed build errors * feat(SW-1276): Updated label * feat(SW-1276): Rewrite SummaryCard Approved-by: Niclas Edenvin
88 lines
1.4 KiB
CSS
88 lines
1.4 KiB
CSS
.container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--Spacing-x2);
|
|
}
|
|
|
|
.title {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.modalContent {
|
|
width: 100%;
|
|
}
|
|
|
|
.tabs {
|
|
display: flex;
|
|
gap: var(--Spacing-x1);
|
|
padding: var(--Spacing-x3) 0;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(251px, 1fr));
|
|
gap: var(--Spacing-x2);
|
|
max-height: 417px;
|
|
overflow-y: auto;
|
|
padding-right: var(--Spacing-x1);
|
|
margin-top: var(--Spacing-x2);
|
|
}
|
|
|
|
.chip {
|
|
border-radius: 28px;
|
|
padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
|
|
border: none;
|
|
cursor: pointer;
|
|
background: var(--Base-Surface-Subtle-Normal);
|
|
}
|
|
|
|
.chip.selected {
|
|
background: var(--Base-Text-High-contrast);
|
|
}
|
|
|
|
.ancillaries {
|
|
display: none;
|
|
}
|
|
|
|
.modal {
|
|
display: none;
|
|
}
|
|
|
|
.carouselContainer {
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
grid-auto-columns: 80%;
|
|
gap: var(--Spacing-x2);
|
|
}
|
|
|
|
@media screen and (min-width: 768px) {
|
|
.modalContent {
|
|
width: 600px;
|
|
}
|
|
|
|
.carouselContainer {
|
|
grid-auto-columns: calc((100% - var(--Spacing-x3)) / 2);
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 1052px) {
|
|
.mobileAncillaries {
|
|
display: none;
|
|
}
|
|
.modalContent {
|
|
width: 833px;
|
|
}
|
|
|
|
.ancillaries {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(251px, 1fr));
|
|
gap: var(--Spacing-x2);
|
|
}
|
|
|
|
.modal {
|
|
display: block;
|
|
}
|
|
}
|