d0546926a9
fix(SW-3691): Setup one prettier config for whole repo * Setup prettierrc in root and remove other configs Approved-by: Joakim Jäderberg Approved-by: Linus Flood
131 lines
2.9 KiB
CSS
131 lines
2.9 KiB
CSS
.infoCard {
|
|
--background-color: var(--Surface-Brand-Primary-1-Default);
|
|
--topTitle-color: var(--Text-Brand-OnPrimary-1-Accent);
|
|
--heading-color: var(--Text-Brand-OnPrimary-1-Heading);
|
|
--text-color: var(--Text-Brand-OnPrimary-1-Default);
|
|
position: relative;
|
|
display: grid;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: var(--Corner-radius-md);
|
|
text-align: center;
|
|
width: 100%;
|
|
text-wrap: balance;
|
|
overflow: hidden;
|
|
background-color: var(--background-color);
|
|
z-index: 0;
|
|
}
|
|
|
|
.height-fixed {
|
|
height: 320px;
|
|
}
|
|
|
|
.height-dynamic {
|
|
height: 100%;
|
|
}
|
|
|
|
.theme-primary-1 {
|
|
--background-color: var(--Surface-Brand-Primary-1-Default);
|
|
--topTitle-color: var(--Text-Brand-OnPrimary-1-Accent);
|
|
--heading-color: var(--Text-Brand-OnPrimary-1-Heading);
|
|
--text-color: var(--Text-Brand-OnPrimary-1-Default);
|
|
}
|
|
.theme-primary-2 {
|
|
--background-color: var(--Surface-Brand-Primary-2-Default);
|
|
--topTitle-color: var(--Text-Brand-OnPrimary-2-Accent);
|
|
--heading-color: var(--Text-Brand-OnPrimary-2-Heading);
|
|
--text-color: var(--Text-Brand-OnPrimary-2-Default);
|
|
}
|
|
.theme-primary-3 {
|
|
--background-color: var(--Surface-Brand-Primary-3-Default);
|
|
--topTitle-color: var(--Text-Brand-OnPrimary-3-Accent);
|
|
--heading-color: var(--Text-Brand-OnPrimary-3-Heading);
|
|
--text-color: var(--Text-Brand-OnPrimary-3-Default);
|
|
}
|
|
.theme-accent {
|
|
--background-color: var(--Surface-Brand-Accent-Default);
|
|
--topTitle-color: var(--Text-Brand-OnAccent-Accent);
|
|
--heading-color: var(--Text-Brand-OnAccent-Heading);
|
|
--text-color: var(--Text-Brand-OnAccent-Default);
|
|
}
|
|
.theme-white {
|
|
--background-color: var(--Surface-Primary-Default);
|
|
--topTitle-color: var(--Text-Accent-Primary);
|
|
--heading-color: var(--Text-Heading);
|
|
--text-color: var(--Text-Default);
|
|
}
|
|
.theme-image {
|
|
--background-color: transparent;
|
|
--topTitle-color: var(--Text-Inverted);
|
|
--heading-color: var(--Text-Inverted);
|
|
--text-color: var(--Text-Inverted);
|
|
}
|
|
|
|
.titleWrapper {
|
|
display: grid;
|
|
gap: var(--Space-x1);
|
|
justify-items: center;
|
|
}
|
|
|
|
.topTitle {
|
|
color: var(--topTitle-color);
|
|
}
|
|
|
|
.top-title-angled .topTitle {
|
|
transform: rotate(-3deg);
|
|
transform-origin: left;
|
|
}
|
|
|
|
.heading {
|
|
color: var(--heading-color);
|
|
}
|
|
|
|
.bodyText {
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.backgroundImageWrapper {
|
|
position: absolute;
|
|
inset: 0;
|
|
overflow: hidden;
|
|
z-index: -1;
|
|
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgba(0, 0, 0, 0) 0%,
|
|
rgba(0, 0, 0, 0.36) 50%,
|
|
rgba(0, 0, 0, 0.75) 100%
|
|
);
|
|
}
|
|
}
|
|
|
|
.backgroundImage {
|
|
object-fit: cover;
|
|
width: 100%;
|
|
height: min(100%, 320px);
|
|
}
|
|
|
|
.content {
|
|
display: grid;
|
|
max-width: 800px;
|
|
padding: var(--Space-x4) var(--Space-x3);
|
|
gap: var(--Space-x2);
|
|
}
|
|
|
|
.buttonContainer {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--Space-x1);
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.primaryButton,
|
|
.secondaryButton {
|
|
flex-shrink: 0;
|
|
}
|
|
}
|