You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
wiki/client/scss/components/sidebar.scss

192 lines
3.5 KiB

.sidebar {
background-color: mc('blue-grey', '900');
color: mc('blue-grey', '50');
width: 250px;
max-width: 250px;
min-height: calc(100vh - 120px);
transition: background-color 1s ease;
aside {
padding: 1px 0 15px 0;
&:last-child {
padding-bottom: 20px;
}
.sidebar-label {
padding: 8px;
color: mc('blue-grey', '300');
font-size: 13px;
letter-spacing: 1px;
text-transform: uppercase;
background-color: mc('blue-grey', '800');
margin: 0 0 15px 0;
text-align: center;
box-shadow: 0 0 5px rgba(0,0,0,0.3);
transition: background-color 1s ease;
i {
margin-right: 5px;
}
}
.sidebar-menu {
li {
display: block;
a {
display: flex;
min-height: 30px;
align-items: center;
padding: 5px 20px;
color: mc('blue-grey', '50');
font-size: 14px;
transition: all .4s ease;
line-height: 14px;
cursor: pointer;
&.is-multiline {
flex-wrap: wrap;
}
&.is-active {
border-left: 5px solid mc('blue', '500');
color: mc('blue', '300');
padding-left: 15px;
.is-small {
color: mc('blue', '500');
}
}
i {
margin-right: 7px;
color: mc('blue-grey', '300');
}
&:hover {
color: mc('blue-grey', '400');
text-decoration: none;
}
.is-small {
flex: 1 0 100%;
display: block;
font-size: 11px;
color: rgba(255,255,255,.5)
}
}
> ul {
border-top: 1px solid lighten(mc('blue-grey', '900'), 3%);
border-bottom: 1px solid lighten(mc('blue-grey', '900'), 2%);
background-color: darken(mc('blue-grey', '900'), 2%);
margin-bottom: 10px;
padding: 10px 0;
li {
padding-left: 10px;
//border-left: 5px solid mc('blue-grey', '800');
a {
min-height: 24px;
color: mc('blue-grey', '100');
}
}
}
}
}
}
&.is-collapsed {
width: 50px;
aside {
.sidebar-menu li a {
padding: 10px 0;
justify-content: center;
i {
margin: 0;
font-size: 20px;
transition: color .6s ease;
}
span {
display: none;
}
&:hover {
i {
color: #FFF;
}
}
}
}
}
}
/* THEME OVERRIDE - START */
@each $color, $colorvalue in $material-colors {
.is-alternate-#{$color} .sidebar {
background-color: mc($color, '900');
color: mc($color, '50');
aside {
.sidebar-label {
color: mc($color, '300');
background-color: mc($color, '800');
}
.sidebar-menu {
li {
a {
color: mc($color, '50');
&.is-active {
border-left-color: mc($color, '500');
color: mc($color, '300');
.is-small {
color: mc($color, '500');
}
}
&:hover {
color: mc($color, '400');
}
i {
color: mc($color, '300');
}
}
> ul {
border-top-color: lighten(mc($color, '900'), 3%);
border-bottom-color: lighten(mc($color, '900'), 2%);
background-color: darken(mc($color, '900'), 2%);
li a {
color: mc($color, '100');
}
}
}
}
}
}
}
/* THEME OVERRIDE - END */