2022-02-22 20:22:41 +01:00

81 lines
2.1 KiB
Plaintext

@buttonSize: 26vw;
@buttonBorderRadius: 8px;
.navigation {
display: inline-flex;
flex-direction: column;
width: 100%;
overflow: hidden;
.group {
display: inline-flex;
flex-direction: column;
.items {
display: flex;
align-items: center;
justify-content: space-around;
flex-wrap: wrap;
.item {
--ignore-dragger: true;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px;
margin: 10px 0;
width: @buttonSize;
min-width: @buttonSize;
height: @buttonSize;
min-height: @buttonSize;
border-radius: @buttonBorderRadius;
background-color: var(--background-color-accent);
transition: all 80ms ease-in-out;
.icon {
svg {
margin: 0 !important;
font-size: 2rem;
}
}
.name {
width: 100%;
word-break: break-all;
text-overflow: ellipsis;
text-align: center;
color: var(--background-color-contrast);
padding-top: 10px;
h1 {
word-break: break-all;
width: 100%;
font-size: 1.1rem;
margin: 0!important;
}
}
}
.item:active {
background-color: var(--background-color-primary);
color: var(--background-color-contrast);
transform: scale(0.9);
}
}
> div {
margin-bottom: 20px;
}
}
}