src/modules/common/components/nav-panel/nav-panel.styles.less
@import (reference) '~assets/styles/shared';
.NavPanel {
display: flex;
min-height: 100%;
min-width: 15em;
}
.NavPanel__controls {
display: flex;
flex: 1;
flex-direction: column;
@media @breakpoint-mobile {
& {
flex-flow: row wrap;
}
}
}
.NavPanel__control {
align-items: center;
background: @color-purple;
border-bottom: 1px solid @color-grayish-purple;
color: @color-white;
cursor: pointer;
display: flex;
flex: 1;
font-size: @font-size-medium;
font-weight: 300;
padding: 0 2rem;
&:hover {
background: @color-grayish-purple;
}
&:last-child {
border-bottom: none;
}
@media @breakpoint-mobile {
& {
border-left: 1px solid @color-grayish-purple;
flex-basis: 33%;
flex-flow: wrap column;
height: 6em;
padding: 1em;
&:nth-child(1),
&:nth-child(4) {
border-left-width: 0;
}
&:nth-child(4),
&:nth-child(5),
&:nth-child(6) {
border-bottom-width: 0;
}
}
}
}
.NavPanel__control--active {
background: @color-grayish-purple;
}
.NavPanel__icon {
color: @color-text-light;
margin-right: 1.5em;
vertical-align: middle;
width: 2.25em;
@media @breakpoint-mobile {
align-items: center;
display: flex;
flex: 1;
height: 100%;
justify-content: center;
margin-bottom: 0.5em;
margin-right: 0;
svg {
height: 100%;
}
}
}
.NavPanel__title {
flex: 1;
@media @breakpoint-mobile {
flex: none;
}
}