element-plus/docs/.vitepress/vitepress/styles/sidebar.scss
2022-04-05 10:55:48 +08:00

66 lines
1.4 KiB
SCSS

@use './mixins' as *;
@use './vars' as *;
// @use './sidebar-link.scss';
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: var(--sidebar-z-index);
width: var(--sidebar-width-xs);
background-color: var(--bg-color);
padding: 48px 32px 0;
overflow-y: auto;
transform: translate(-100%);
transition: background-color 0.5s, opacity 0.25s,
transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
&.open {
transform: translate(0);
}
.sidebar-groups {
padding: 0 0 5rem;
.sidebar-group__title {
font-size: 1rem;
font-weight: 700;
margin-bottom: 8px;
line-height: 24px;
}
.sidebar-group + .sidebar-group {
padding-top: 24px;
}
}
@media (max-width: 767px) {
width: calc(var(--vp-sidebar-width-mobile) - 14px);
}
@include respond-to('md') {
width: calc(var(--vp-sidebar-width-small) - $scrollbar-size);
}
@include respond-to('lg') {
top: var(--header-height);
transform: translate(0);
}
@include respond-to('xxl') {
// 6px stands for 3px sidebar scrollbar width + 3 content scrollbar width
padding: 48px 64px 96px calc((100% - var(--vp-screen-max-width)) / 2);
width: calc(
(100% - var(--vp-screen-max-width)) / 2 + var(--vp-sidebar-width-small) -
$scrollbar-size
);
}
@include respond-to('max') {
padding: 48px calc(48px - $scrollbar-size) 96px
calc((100% - var(--vp-screen-max-width)) / 2 - 18px);
}
}