hubl/src/styles/components/sidebar.scss

111 lines
2.0 KiB
SCSS
Raw Normal View History

2019-05-14 15:32:42 +00:00
.no-sidebar {
flex: 1;
@extend %padding-main;
}
.with-sidebar {
flex-grow: 1;
display: flex;
2019-05-14 16:19:30 +00:00
flex-direction: row;
2019-05-14 15:32:42 +00:00
align-items: stretch;
overflow-x: hidden;
.views-container {
flex: 1 0 0;
overflow-y: auto;
2019-05-14 16:19:30 +00:00
-webkit-backface-visibility: hidden;
&.sidebar-is-closed {
margin-left: -15.5rem;
transform: translate(15.5rem);
}
2019-05-14 15:32:42 +00:00
}
>div {
transition: all 0.5s;
}
nav {
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;
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;
2019-05-14 15:32:42 +00:00
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 {
2019-05-14 15:32:42 +00:00
@include ci('information');
}
2019-06-05 09:45:41 +00:00
&[name$='drive']>li {
@include ci('file');
}
2019-05-14 15:32:42 +00:00
}
}
}
&.offsite-is-closed {
transform: translate(15.5rem);
& .jsOffsiteToggle::before {
transform: rotate(180deg);
}
}
}
}