mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-16 02:11:48 +08:00
81 lines
1.6 KiB
SCSS
81 lines
1.6 KiB
SCSS
|
@import './mixins';
|
||
|
|
// @import './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);
|
||
|
|
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);
|
||
|
|
}
|
||
|
|
|
||
|
|
// .nav.sponsors {
|
||
|
|
// padding: 2rem 1.5rem 0 1.5rem;
|
||
|
|
|
||
|
|
// .sponsors-list {
|
||
|
|
// display: flex;
|
||
|
|
// align-items: center;
|
||
|
|
// padding: 0;
|
||
|
|
// margin: 0;
|
||
|
|
// }
|
||
|
|
|
||
|
|
// .sponsors-title {
|
||
|
|
// margin-top: 0;
|
||
|
|
// color: #777;
|
||
|
|
// font-weight: 300;
|
||
|
|
// font-size: 0.9rem;
|
||
|
|
// }
|
||
|
|
|
||
|
|
// .sponsor-item {
|
||
|
|
// margin-right: 0.5rem;
|
||
|
|
// }
|
||
|
|
|
||
|
|
// img {
|
||
|
|
// width: 2.2rem;
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
|
||
|
|
.sidebar-groups {
|
||
|
|
padding: 0.75rem 0 5rem;
|
||
|
|
|
||
|
|
.sidebar-group__title {
|
||
|
|
padding: 0.35rem 1.5rem 0.35rem 1.25rem;
|
||
|
|
font-size: 1rem;
|
||
|
|
font-weight: 700;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sidebar-group + .sidebar-group {
|
||
|
|
padding-top: 24px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@include respond-to('md') {
|
||
|
|
width: var(--sidebar-width-sm);
|
||
|
|
}
|
||
|
|
|
||
|
|
@include respond-to('md') {
|
||
|
|
width: var(--sidebar-width-md);
|
||
|
|
}
|
||
|
|
|
||
|
|
@include respond-to('lg') {
|
||
|
|
top: var(--header-height);
|
||
|
|
transform: translate(0);
|
||
|
|
border-right: 1px solid var(--border-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
@include respond-to('xxl') {
|
||
|
|
padding: 24px 32px 96px calc((100% - var(--app-max-width)) / 2);
|
||
|
|
width: calc((100% - var(--app-max-width)) / 2 + var(--sidebar-width-md));
|
||
|
|
}
|
||
|
|
}
|