61 lines
1.0 KiB
CSS
61 lines
1.0 KiB
CSS
.panel {
|
|
display: grid;
|
|
border-right: 1px solid black;
|
|
height: 100%;
|
|
max-height: 100vh;
|
|
justify-items: center;
|
|
padding: 2rem;
|
|
overflow-y: auto;
|
|
grid-row-gap: 0.5em;
|
|
place-content: start center;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.panel::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.panel > hr {
|
|
height: 0;
|
|
width: 100%;
|
|
border: none;
|
|
border-top: 0.3rem dotted black;
|
|
margin: 2rem;
|
|
}
|
|
|
|
.menuOption {
|
|
justify-self: start;
|
|
display: grid;
|
|
grid-template-areas: 'img title' '. subtitle';
|
|
grid-template-columns: auto 1fr;
|
|
align-items: center;
|
|
border-radius: 1em;
|
|
grid-column-gap: 1em;
|
|
cursor: pointer;
|
|
padding: 0.6em 1.2em;
|
|
width: 100%;
|
|
transition: .1s background-color;
|
|
}
|
|
|
|
.menuOption:hover, .menuOption.active {
|
|
background-color: var(--color-main-base);
|
|
}
|
|
|
|
.menuOption > * {
|
|
margin: 0;
|
|
}
|
|
|
|
.menuOption > img {
|
|
width: 1.2em;
|
|
height: auto;
|
|
grid-area: img;
|
|
}
|
|
|
|
.menuOption > h3 {
|
|
grid-area: title;
|
|
font-size: 150%;
|
|
}
|
|
|
|
.menuOption > p {
|
|
grid-area: subtitle;
|
|
} |