src/app/lore/component/element/popup.component.scss
:host {
position: absolute;
z-index: 100;
transform-origin: top left;
margin-top: -40px;
margin-left: 10px;
width: 26rem;
h1 {
margin: 0;
}
> div {
pointer-events: all;
border-radius: 15px;
flex-direction: column;
padding: 10px;
position: relative;
grid-gap: 0.2rem;
}
> div::after {
position: absolute;
top: 30px;
left: -10px;
width: 20px;
height: 20px;
transform: rotate(45deg);
z-index: -50;
clip-path: polygon(0 0, 0% 100%, 100% 100%);
content: '';
}
.popup {
overflow: visible;
// display: grid;
justify-content: center;
.name {
margin-top: 1rem;
}
.accumulated {
display: grid;
justify-content: center;
grid-template-columns: 13rem 9rem;
grid-gap: 0.2rem;
margin-bottom: 0.4rem;
}
.propertiesContainer {
overflow: hidden;
height: 10rem;
grid-column: 1 / -1;
}
}
.navigation {
display: grid;
grid-gap: 0.275rem;
grid-template-columns: 1fr 1fr 1fr 1fr !important;
align-items: center;
}
}