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

Merged in feat/BOOK-61-refactor-hotel-page-css-variables (pull request #3014)

Browse Source 
Feat/BOOK-61 refactor hotel page css variables

* feat(BOOK-61): Breadcrumbs

* feat(BOOK-61): intro section

* feat(BOOK-61): show more button

* feat(BOOK-61): rooms section

* feat(BOOK-61): sidepeeks

* feat(BOOK-61): deprecated old Link component

* feat(BOOK-61): added new TextLink component to the design-system

* feat(BOOK-61): replaced deprecated links with new TextLink component

* feat(BOOK-61): miscellaneous changes


Approved-by: Bianca Widstam
Approved-by: Christel Westerberg
This commit is contained in:
Erik Tiekstra
2025-10-29 09:15:03 +00:00
parent bfe5c5f8bb
commit 333636c81a
122 changed files with 782 additions and 498 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
apps/scandic-web/components/TempDesignSystem/Breadcrumbs/breadcrumbs.module.css
View File

@@ -1,7 +1,8 @@
.breadcrumbs {
padding: var(--Spacing-x4) 0 var(--Spacing-x3);
padding: var(--Space-x4) 0 var(--Space-x3);
margin: 0 auto;
width: 100%;
color: var(--Text-Interactive-Secondary);
}
.breadcrumbs.transparent {
@@ -19,7 +20,7 @@
.breadcrumbs .list {
display: flex;
gap: var(--Spacing-x-quarter);
gap: var(--Space-x025);
padding-inline-start: 0;
margin: 0 auto;
}
@@ -43,7 +44,7 @@
.listItem {
align-items: center;
display: flex;
gap: var(--Spacing-x-quarter);
gap: var(--Space-x025);
flex-shrink: 0;
flex-grow: 0;
}
@@ -64,24 +65,31 @@
/* this increases the width of the button for tapping */
padding: 0 5px;
margin: 0 -5px;
color: var(--Base-Text-High-contrast);
color: var(--Text-Interactive-Default);
&.button:not(.lastBreadcrumb) {
cursor: pointer;
&:hover {
color: var(--Text-Interactive-Default-Hover);
}
}
}
.link {
color: var(--Text-Interactive-Secondary);
}
.link:hover,
.button:hover {
color: var(--Text-Interactive-Secondary-Hover);
&:hover {
color: var(--Text-Interactive-Secondary-Hover);
}
}
.dialog {
background-color: var(--Base-Surface-Primary-light-Normal);
padding: var(--Spacing-x1);
background-color: var(--Surface-Primary-Default);
padding: var(--Space-x1);
display: flex;
flex-direction: column;
gap: var(--Spacing-x-half);
gap: var(--Space-x05);
border-radius: var(--Corner-radius-md);
min-width: 169px;
outline: none;
@@ -91,16 +99,16 @@
.dialogLink {
display: block;
border-radius: var(--Corner-radius-md);
padding: var(--Spacing-x1);
padding: var(--Space-x1);
color: var(--Text-Default);
&:hover,
&:focus {
background-color: var(--Surface-Primary-Hover);
}
}
.dialogLink:focus,
.dialogLink:hover {
background-color: var(--Base-Surface-Primary-light-Hover);
}
.tooltipTrigger {
.lastBreadcrumb {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@@ -109,23 +117,57 @@
.tooltip {
background-color: var(--Surface-UI-Fill-Intense);
padding: var(--Spacing-x-half) var(--Spacing-x1);
padding: var(--Space-x05) var(--Space-x1);
border-radius: var(--Corner-radius-sm);
color: var(--Text-Inverted);
outline: none;
}
@media screen and (width <= 767px) {
@media screen and (max-width: 767px) {
.desktop {
display: none;
}
.breadcrumbs.isThemedMobile {
background-color: var(--Surface-Brand-Primary-1-Default);
color: var(--Text-Brand-OnPrimary-1-Default);
.link,
.button {
color: var(--Text-Brand-OnPrimary-1-Default);
}
.link:hover,
.button:not(.lastBreadcrumb):hover {
color: var(
--Text-Brand-OnPrimary-1-Default
); /* In need of a different variable for this */
}
}
}
@media screen and (width >= 768px) {
@media screen and (min-width: 768px) {
.mobile {
display: none;
}
.desktop {
display: flex;
}
.breadcrumbs.isThemedDesktop {
background-color: var(--Surface-Brand-Primary-1-Default);
color: var(--Text-Brand-OnPrimary-1-Default);
.link,
.button {
color: var(--Text-Brand-OnPrimary-1-Default);
}
.link:hover,
.button:not(.lastBreadcrumb):hover {
color: var(
--Text-Brand-OnPrimary-1-Default
); /* In need of a different variable for this */
}
}
}