0737f4fb78
Feat/LOY-354 L7 Progress Card * feat(LOY-354): Add Trophy icon * fix(LOY-354): include new tierPoints value * feat(LOY-354): L7 Progress Level Card support * refactor(LOY-354): Refactoring of component structure * fix(LOY-354): Remove intl prop drilling * fix(LOY-354): cleanup progress section code Approved-by: Erik Tiekstra
67 lines
1.3 KiB
CSS
67 lines
1.3 KiB
CSS
.progressSection {
|
|
padding: 0 var(--Space-x3);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--Space-x1);
|
|
}
|
|
|
|
.progressSection.hasMarker {
|
|
padding-bottom: var(--Space-x1);
|
|
}
|
|
|
|
.progressContainer {
|
|
position: relative;
|
|
}
|
|
|
|
.levelMarker {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 2;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.markerPin {
|
|
width: 6px;
|
|
height: 6px;
|
|
background: var(--Surface-Brand-Primary-1-OnSurface-Default);
|
|
border-radius: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.markerLine {
|
|
width: 1px;
|
|
height: 21px;
|
|
background: var(--Surface-Brand-Primary-1-OnSurface-Default);
|
|
margin-top: -3px;
|
|
}
|
|
|
|
.markerLabelContainer {
|
|
position: relative;
|
|
height: var(--Space-x3);
|
|
margin-top: var(--Space-x15);
|
|
}
|
|
|
|
.markerLabel {
|
|
position: absolute;
|
|
top: 0;
|
|
|
|
/* Define both edges - let browser calculate width automatically */
|
|
inset-inline-start: var(--Space-x3); /* respects card padding */
|
|
inset-inline-end: calc(100% - var(--marker-pos)); /* right edge under pin */
|
|
|
|
white-space: normal;
|
|
overflow-wrap: anywhere;
|
|
color: var(--Text-Secondary);
|
|
text-align: right;
|
|
}
|
|
|
|
@media screen and (min-width: 521px) {
|
|
.markerLabelContainer {
|
|
height: var(--Space-x2);
|
|
}
|
|
}
|