cinny/src/app/organisms/navigation/SideBar.scss

69 lines
1.2 KiB
SCSS
Raw Normal View History

2021-07-28 13:15:52 +00:00
.sidebar__flexBox {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.sidebar {
@extend .sidebar__flexBox;
width: var(--navigation-sidebar-width);
height: 100%;
border-right: 1px solid var(--bg-surface-border);
[dir=rtl] & {
border-right: none;
border-left: 1px solid var(--bg-surface-border);
}
&__scrollable,
&__sticky {
width: 100%;
}
&__scrollable {
flex: 1;
min-height: 0px;
}
&__sticky {
align-items: center;
}
}
.scrollable-content {
&::after {
content: "";
display: block;
width: 100%;
height: 8px;
background: transparent;
2021-09-03 12:28:01 +00:00
background-image: linear-gradient(
to top,
var(--bg-surface-low),
var(--bg-surface-low-transparent));
2021-07-28 13:15:52 +00:00
position: sticky;
2021-09-05 13:26:34 +00:00
bottom: -1px;
2021-07-28 13:15:52 +00:00
left: 0;
}
}
.featured-container,
.space-container,
.sticky-container {
@extend .sidebar__flexBox;
padding: var(--sp-ultra-tight) 0;
& > .sidebar-avatar,
& > .avatar-container {
margin: calc(var(--sp-tight) / 2) 0;
}
}
.sidebar-divider {
margin: auto;
width: 24px;
height: 1px;
background-color: var(--bg-surface-border);
}