mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-14 01:11:25 +08:00
67 lines
1.4 KiB
SCSS
67 lines
1.4 KiB
SCSS
@use './mixins' as *;
|
|
@use './vars' as *;
|
|
// @use './sidebar-link.scss';
|
|
|
|
.sidebar {
|
|
position: fixed;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: var(--sidebar-width-xs);
|
|
background-color: var(--bg-color);
|
|
padding: 48px 32px;
|
|
overflow-y: auto;
|
|
transform: translate(-100%);
|
|
transition: background-color var(--el-transition-duration-fast), opacity 0.25s,
|
|
transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
|
|
|
|
&.open {
|
|
transform: translate(0);
|
|
}
|
|
|
|
.sidebar-groups {
|
|
padding: 0;
|
|
|
|
@include respond-to('lg') {
|
|
padding-bottom: 48px;
|
|
}
|
|
|
|
.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);
|
|
z-index: var(--sidebar-z-index-mobile);
|
|
}
|
|
|
|
@include respond-to('md') {
|
|
width: calc(var(--vp-sidebar-width-small));
|
|
z-index: var(--sidebar-z-index-mobile);
|
|
}
|
|
|
|
@include respond-to('lg') {
|
|
z-index: var(--sidebar-z-index);
|
|
top: var(--header-height);
|
|
transform: translate(0);
|
|
}
|
|
|
|
@include respond-to('xxl') {
|
|
padding: 48px 32px;
|
|
width: calc(var(--vp-sidebar-width-small) + 32px);
|
|
}
|
|
|
|
@include respond-to('max') {
|
|
padding: 48px;
|
|
width: calc(var(--vp-sidebar-width-small) + 48px);
|
|
}
|
|
}
|