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

Merged in fix/SW-2118-breadcrumbs (pull request #1721)

Browse Source 
fix(SW-2118): changed variants for breadcrumbs to handle different background-colors and widths

* fix(SW-2118): changed variants for breadcrumbs to handle different background-colors and widths


Approved-by: Christian Andolf
Approved-by: Linus Flood
This commit is contained in:
Erik Tiekstra
2025-04-07 14:02:39 +00:00
committed by Linus Flood
parent a9c6901752
commit 85a90baa12
16 changed files with 141 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,30 +2,33 @@
padding: var(--Spacing-x4) 0 var(--Spacing-x3);
margin: 0 auto;
width: 100%;
max-width: var(--max-width-page);
}
.breadcrumbs.fullWidth {
max-width: var(--max-width-page);
.breadcrumbs.transparent {
background-color: transparent;
}
.breadcrumbs.surfaceSecondaryDefault {
background-color: var(--Surface-Secondary-Default);
}
.breadcrumbs.surfacePrimaryOnSurfaceDefault {
background-color: var(--Surface-Primary-On-Surface-Default);
}
.breadcrumbs.contentWidth {
max-width: var(--max-width-content);
}
.breadcrumbs.contentWidth {
background-color: var(--Base-Surface-Subtle-Normal);
padding-bottom: 0;
}
.breadcrumbs.headerWidth {
max-width: min(var(--max-width-page), calc(100% - var(--max-width-spacing)));
}
.list {
.breadcrumbs .list {
display: flex;
gap: var(--Spacing-x-quarter);
padding-inline-start: 0;
margin: 0 auto;
}
.breadcrumbs.contentWidth .list {
max-width: var(--max-width-content);
}
.breadcrumbs.headerWidth .list {
max-width: min(var(--max-width-page), calc(100% - var(--max-width-spacing)));
}
.breadcrumbs.pageWidth .list {
max-width: var(--max-width-page);
}
.list .listItem:last-of-type {
@@ -58,6 +61,16 @@
/* this increases the width of the button for tapping */
padding: 0 5px;
margin: 0 -5px;
color: var(--Base-Text-High-contrast);
}
.link {
color: var(--Text-Interactive-Secondary);
}
.link:hover,
.button:hover {
color: var(--Text-Interactive-Hover-Secondary);
}
.dialog {
@@ -76,6 +89,7 @@
display: block;
border-radius: var(--Corner-radius-Medium);
padding: var(--Spacing-x1);
color: var(--Text-Default);
}
.dialogLink:focus,