wikijs-fork/client/scss/components/collapsable-nav.scss

123 lines
2.2 KiB
SCSS

.has-collapsable-nav {
background-color: mc('blue-grey', '50');
display: flex;
justify-content: flex-start;
align-items: stretch;
}
.collapsable-nav {
width: 300px;
background-color: mc('blue-grey', '900');
color: #FFF;
min-height: 80vh;
transition: all .6s ease;
border-left: 1px solid darken(mc('blue-grey', '900'), 5%);
&:last-child {
border-bottom-right-radius: 5px;
}
&.has-children {
width: 50px;
background-color: mc($primary, '500');
border-left: 1px solid mc($primary, '700');
&:nth-child(2) {
border-left: 1px solid darken(mc('blue-grey', '900'), 5%);
}
li {
border-top: none;
display: none;
}
}
li {
display: flex;
border-top: 1px solid darken(mc('blue-grey', '900'), 5%);
&.is-title {
background-color: mc('blue-grey', '800');
padding: 8px 15px;
color: mc('blue-grey', '300');
font-size: 13px;
letter-spacing: 1px;
text-transform: uppercase;
box-shadow: 0 0 5px rgba(0,0,0,0.3);
margin-right:1px;
}
&.is-active {
display: flex;
height: 50px;
width: 300px;
min-width: 80vh;
@include prefix(transform, rotate(90deg) translate(0, -50px));
transform-origin: 0 0;
a {
height: 50px;
&:nth-child(2) {
display: none;
}
}
}
}
a {
display: flex;
flex: 1 1 auto;
min-height: 40px;
width: 100%;
align-items: center;
padding: 0 15px;
color: #FFF;
cursor: pointer;
transition: all .4s ease;
background-color: rgba(0,0,0,0);
&.is-pagelink {
flex: 0 1 70px;
justify-content: center;
}
&:hover {
background-color: rgba(0,0,0,.1);
text-decoration: none;
}
i {
font-size: 14px;
&:first-of-type {
margin-right: 10px;
}
}
span {
display: block;
padding: 5px 0;
}
}
}
/* THEME OVERRIDE - START */
@each $color, $colorvalue in $material-colors {
.is-primary-#{$color} .collapsable-nav {
&.has-children {
background-color: mc($color, '500');
border-left-color: mc($color, '700');
}
}
}
/* THEME OVERRIDE - END */