hubl/src/styles/menu-right.scss

92 lines
1.9 KiB
SCSS

#mainContainer {
> div {
nav {
transition: all 0.5s;
> sib-router {
background-color: $color-222-52-90;
color: $color-purple-dark;
flex: 0 0 auto;
font-weight: 600;
> ul {
cursor: pointer;
list-style: none;
margin: 0;
padding-left: 0;
li {
align-items: center;
border-bottom: 1px solid $color-lavender-gray;
display: flex;
margin: 0;
padding: 2.55rem 2.55rem;
position: relative;
width: 12em;
&::before {
float: left;
font-size: 4rem;
margin-left: 0;
margin-right: 2.55rem;
}
}
> li {
@include icon('arrow-right-circle');
}
> sib-route {
&[active] {
background-color: $color-purple-dark;
color: $color-mustard;
display: inline-block;
}
&[name^='circle'],
&[name^='project'] {
> li::before {
font-size: 4rem;
}
}
&[name$='chat'] > li {
@include ci('chat');
}
&[name$='create'] > li {
@include ci('offer');
}
&[name$='edit'] > li {
@include ci('list');
}
&[name$='profile'] > li {
@include ci('information');
}
}
}
}
&.offsite-is-closed {
transform: translate(15.5rem);
& .jsOffsiteToggle::before {
transform: rotate(180deg);
}
& ~ #views-container {
margin-left: -15.5rem;
transform: translate(15.5rem);
}
}
}
}
}