hubl/src/styles/components/sidebar.scss

117 lines
2.2 KiB
SCSS

.no-sidebar {
flex: 1;
@extend %padding-main;
}
.with-sidebar {
flex-grow: 1;
display: flex;
flex-direction: row;
align-items: stretch;
overflow: hidden;
.views-container {
flex: 1 0 0;
-webkit-backface-visibility: hidden;
&.sidebar-is-closed {
margin-left: -15.5rem;
transform: translate(15.5rem);
}
}
>div {
transition: all 0.5s;
}
nav {
background: $color-210-25-95;
transition: all 0.5s;
>sib-router {
background-color: $color-222-52-90;
color: $color-233-18-29;
flex: 0 0 auto;
font-weight: 600;
>ul {
cursor: pointer;
display: flex;
flex-direction: column;
list-style: none;
margin: 0;
padding-left: 0;
li {
align-items: center;
border-bottom: 1px solid $color-229-25-79;
display: flex;
margin: 0;
padding: 2.15rem 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-233-18-29;
color: $color-46-100-67;
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, &[name$='information']>li {
@include ci('information');
}
&[name$='drive']>li {
@include ci('file');
}
&[name='admin-circles']>li {
@include ci('bubble-add');
}
}
}
}
&.offsite-is-closed {
transform: translate(15.5rem);
& .jsOffsiteToggle::before {
transform: rotate(180deg);
}
}
}
}