Repository URL to install this package:
/** TOOLBAR **/
app-root nav * {
transition: none !important;
}
nav {
width:2.5rem;
/*height:calc(100% - 4rem);*/
display:flex;
flex-direction:column;
overflow-x: hidden;
overflow: hidden;
}
nav div {
padding:1rem .5rem;
font-size:.8rem;
}
nav a {
display:block;
padding:.75rem .5rem;
position:relative;
text-transform:uppercase;
font-size:.7rem;
font-family:montserrat;
white-space:nowrap;
display:flex;
align-items:center;
flex:1;
text-decoration:none;
max-height: 60px;
}
nav a svg {
fill:currentColor;
width:1.5rem;
height:1.5rem;
opacity:.3;
position:relative;
z-index: 99999;
}
nav:hover a svg {
opacity:1;
}
nav a:hover {
transform:scale(1.1);
transform-origin:left;
border-color:transparent;
z-index:9999;
}
nav a span {
transform:scale(0);
white-space:nowrap;
display:none;
opacity:0;
position:absolute;
left:0;
padding-left:40px;
z-index: 99999;
}
nav a:hover span {
transform:scale(1);
display:flex;
align-items:center;
padding-right:1rem;
opacity:.1;
top:0;
bottom:0;
z-index:99999;
}
nav a + a {
}
nav a.current + a {
border:0;
}
nav a.current {
border:0;
}
nav a.current:hover span {
}
nav a.current svg {
opacity:1;
}
nav a.current {
background: $main_background_color;
}
nav a.current:hover span {
background: $main_background_color;
}
nav div {
background: $part_background_color;
}
/*
nav a:hover {
background: $part_background_color;
}
*/
nav {
background:$nav_background_color;
}
nav div {
background:$nav_background_color;
color:$nav_color;
}
nav a {
color:$nav_color;
}
nav a:hover {
/*background: $nav_hover_background_color;*/
color:$nav_hover_color;
}
nav a:hover span {
background: $nav_hover_background_color;
color:$nav_hover_color;
box-shadow:0 0 10px $nav_a_hover_box_shadow_color;
}
nav a + a {
border-top:1px solid $nav_a_a_border_color;
}
nav a.current {
color:$nav_a_current_color;
background:$nav_a_current_background_color;
}
nav a.current:hover span {
background:$nav_hover_background_color;
}
nav a .main-menu-icon-container {
color: $nav_color;
/* width: 1.5rem; */
/* height: 1.5rem; */
/*transition: all .1s;*/
//opacity: 1;//.3;
position: relative;
z-index: 2;
padding: 0;
}
nav:hover a .main-menu-icon-container {
opacity:1;
}
nav a:hover span {
transform:scale(1);
display:flex;
align-items:center;
padding-right:1rem;
opacity:1; top:0;
bottom:0;
box-shadow:0 0 10px rgba(0,0,0,.5); z-index:1;
}
nav a:hover .main-menu-icon-container {
color: $nav_hover_color;
}
/*
nav a:hover { transition:all .1s; }
*/
.button-icon {
padding-right: 4px;
}
.wc-nav-scrollbar-view {
overflow-x: hidden;
}
.main-toolbar-button-tooltip {
font-family:montserrat;
text-transform:uppercase;
font-size:.7rem;
color: #dadada !important;
opacity: 0.8 !important;
}
.wc-nav-scrollbar {
height: calc(100% - 4rem) !important;
}
/******* DEBUG PURPOSE ONLY ********/
/*
.wc-nav-scrollbar {
border: solid 1px red;
}
*/
/** END TOOLBAR **/