SCSS Sidebar Menu
SCSS
@import url(https://fonts.googleapis.com/css?family=Open+Sans:800);
$menu-items: 5;
$background-color: #fff;
$indicator-color: #fff;
margin-left: -3px;
background-color: #924382;
right: -7px;
width: 23px;
height: 23px;
border-top-left-radius: 50%;
border: 7px solid #fff;
border-bottom-left-radius: 50%;
margin-top: -12px;
}
}
}
@for $i from 1 through $menu-items-loop-offset {
.menu-item:nth-child(#{$i}).is-active ~ .menu-item:last-child:after,
.menu-item:nth-child(#{$i}).is-active ~ .menu-item:last-child:before {
top: ($height * $i) + ($height/2)-$height;
}
}
@for $i from 1 through $menu-items-loop-offset {
.menu-item:nth-child(#{$i}):hover ~ .menu-item:last-child:after,
.menu-item:nth-child(#{$i}):hover ~ .menu-item:last-child:before {
top: ($height * $i) + ($height/2)-$height !important;
}
}
.menu-item {
&:last-child {
&:hover,
&.is-active {
&::before,
&::after {
top: (100% - $height) + ($height/2) !important;
}
}
}
}
}