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

feat(SW-498): added sitewide alert

Browse Source
This commit is contained in:
Erik Tiekstra
2024-10-17 11:23:50 +02:00
parent e41bf86993
commit db9f31e2c3
17 changed files with 226 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
components/TempDesignSystem/Alert/alert.module.css
View File

@@ -1,6 +1,4 @@
.alert {
display: flex;
gap: var(--Spacing-x2);
overflow: hidden;
}
@@ -12,34 +10,26 @@
}
.content {
width: 100%;
max-width: var(--max-width-navigation);
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--Spacing-x2);
padding: var(--Spacing-x-one-and-half) var(--Spacing-x2)
var(--Spacing-x-one-and-half) 0;
}
.innerContent {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
gap: var(--Spacing-x1);
padding: var(--Spacing-x2) 0;
flex-grow: 1;
}
.textWrapper {
display: grid;
gap: var(--Spacing-x-half);
padding: var(--Spacing-x1) 0;
}
.sidepeekCta {
flex-shrink: 0;
}
.closeButton {
border-width: 0;
padding: 0;
margin: 0;
background-color: transparent;
display: flex;
align-items: center;
flex-shrink: 0;
cursor: pointer;
}
/* Intent: inline */
@@ -48,59 +38,64 @@
border: 1px solid var(--Base-Border-Subtle);
background-color: var(--Base-Surface-Primary-light-Normal);
}
.inline .innerContent {
padding-right: var(--Spacing-x3);
}
.inline .iconWrapper {
padding: var(--Spacing-x-one-and-half);
}
.inline.alarm .iconWrapper {
background-color: var(--Main-Red-70);
background-color: var(--UI-Semantic-Error);
}
.inline.warning .iconWrapper {
background-color: var(--Main-Yellow-60);
background-color: var(--UI-Semantic-Warning);
}
.inline.info .iconWrapper {
background-color: var(--Scandic-Blue-70);
background-color: var(--UI-Semantic-Information);
}
.inline .icon,
.inline .icon * {
fill: var(--Base-Surface-Primary-light-Normal);
}
.inline .closeButton {
border-left: 1px solid var(--Base-Border-Subtle);
padding: var(--Spacing-x-one-and-half);
}
/* Intent: banner */
.banner {
padding: 0 var(--Spacing-x5);
padding: 0 var(--Spacing-x3);
border-left-width: 6px;
border-left-style: solid;
}
.banner.alarm {
border-left-color: var(--Main-Red-70);
background-color: var(--Main-Red-00);
border-left-color: var(--UI-Semantic-Error);
background-color: var(--Scandic-Red-00);
}
.banner.warning {
border-left-color: var(--Main-Yellow-60);
background-color: var(--Main-Yellow-00);
border-left-color: var(--UI-Semantic-Warning);
background-color: var(--Scandic-Yellow-00);
}
.banner.info {
border-left-color: var(--Scandic-Blue-70);
border-left-color: var(--UI-Semantic-Information);
background-color: var(--Scandic-Blue-00);
}
.banner.alarm .icon,
.banner.alarm .icon * {
fill: var(--Main-Red-70);
fill: var(--UI-Semantic-Error);
}
.banner.warning .icon,
.banner.warning .icon * {
fill: var(--Main-Yellow-60);
fill: var(--UI-Semantic-Warning);
}
.banner.info .icon,
.banner.info .icon * {
fill: var(--Scandic-Blue-70);
fill: var(--UI-Semantic-Information);
}
.banner .closeButton {
align-self: center;
padding-left: var(--Spacing-x-one-and-half);
@media screen and (min-width: 768px) {
.banner {
padding: 0 var(--Spacing-x5);
}
.innerContent {
flex-direction: row;
align-items: center;
gap: var(--Spacing-x2);
}
}