mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-14 01:11:25 +08:00
68 lines
1.5 KiB
SCSS
68 lines
1.5 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 48px 96px calc((100% - var(--vp-screen-max-width)) / 2);
|
|
|
|
width: calc(
|
|
(100% - var(--vp-screen-max-width) - 32px) / 2 +
|
|
var(--vp-sidebar-width-small) - $scrollbar-size
|
|
);
|
|
}
|
|
|
|
@include respond-to('max') {
|
|
width: calc(
|
|
(100% - var(--vp-screen-max-width) + 48px) / 2 +
|
|
var(--vp-sidebar-width-small) - $scrollbar-size
|
|
);
|
|
}
|
|
}
|