5861f9a811
fix: adapt modal header to look like design * fix: adapt modal header to look like design Approved-by: Chuma Mcphoy (We Ahead) Approved-by: Matilda Landström
106 lines
1.8 KiB
CSS
106 lines
1.8 KiB
CSS
.title {
|
|
color: var(--Text-Accent-Primary);
|
|
}
|
|
|
|
.cardContainer {
|
|
position: relative;
|
|
perspective: 1000px;
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
.shimmer {
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
z-index: 3;
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
mix-blend-mode: overlay;
|
|
}
|
|
|
|
.card {
|
|
touch-action: none;
|
|
overflow: hidden;
|
|
border-radius: var(--Corner-radius-lg);
|
|
padding: var(--Space-x2);
|
|
height: 400px;
|
|
width: 327px;
|
|
max-width: 100%;
|
|
color: var(--Text-Brand-OnPrimary-3-Accent);
|
|
background-color: var(--Surface-Brand-Primary-1-OnSurface-Default);
|
|
box-shadow: 0 2px 1px rgb(255 255 255 / 11%) inset;
|
|
transition: transform 0.3s ease-out;
|
|
will-change: transform;
|
|
user-select: none;
|
|
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
z-index: 2;
|
|
bottom: 158px;
|
|
left: 132px;
|
|
width: 360px;
|
|
height: 360px;
|
|
opacity: 0.3;
|
|
background-color: var(--Scandic-Peach-40);
|
|
box-shadow: 192px 192px 192px;
|
|
border-radius: 9999px;
|
|
filter: blur(96px);
|
|
}
|
|
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: 60px;
|
|
left: -210px;
|
|
width: 2465px;
|
|
height: 459px;
|
|
background-image: url("/_static/img/scandic-logotype.svg");
|
|
background-repeat: no-repeat;
|
|
opacity: 0.2;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
position: relative;
|
|
z-index: 4;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.employeeNumber {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
color: var(--Base-Text-Inverted);
|
|
}
|
|
|
|
.icon {
|
|
stroke: var(--Text-Brand-OnPrimary-3-Accent);
|
|
}
|
|
|
|
.top,
|
|
.bottom {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.middle {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 50px;
|
|
}
|
|
|
|
.footer {
|
|
text-align: center;
|
|
}
|
|
|
|
@media screen and (min-width: 768px) {
|
|
.modal {
|
|
max-width: 375px;
|
|
}
|
|
}
|