62 lines
No EOL
1.3 KiB
CSS
62 lines
No EOL
1.3 KiB
CSS
.healthWrapper {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 1rem;
|
|
> {
|
|
.healthContainer {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, auto);
|
|
justify-items: center;
|
|
gap: 0px;
|
|
justify-content: start;
|
|
> {
|
|
* {
|
|
margin: -1px;
|
|
}
|
|
/* TODO: Refactor to use Labels !!!! */
|
|
label {
|
|
&.healthTrackerBox {
|
|
cursor: pointer;
|
|
order: 1;
|
|
background-color: red;
|
|
z-index: 1;
|
|
position: relative;
|
|
border: 2px solid #550000;
|
|
border-radius: 0px;
|
|
appearance: none;
|
|
width: 6rem;
|
|
height: 6rem;
|
|
border-radius: 3px;
|
|
|
|
&.reset {
|
|
order: 2;
|
|
background-color: brown;
|
|
}
|
|
|
|
&:after {
|
|
position: absolute;
|
|
content: "-1";
|
|
top: 2px;
|
|
right: 4px;
|
|
}
|
|
|
|
&:checked {
|
|
position: absolute;
|
|
opacity: 0;
|
|
z-index: 0;
|
|
}
|
|
|
|
&:checked ~ .healthTrackerBox {
|
|
order: 3;
|
|
background-color: #444444;
|
|
}
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} |