mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2024-11-21 01:02:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(docs): small screen docs sidebar layout

Browse Source 
- Fix sidebar size on small screen
- Fix sidebar size on extra large screen
This commit is contained in:
JeremyWuuuuu 2022-04-05 10:21:14 +08:00 committed by zouhang
parent a460a1f889
commit 5025b2704c
3 changed files with 20 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
docs/.vitepress/vitepress/components/vp-sponsor-large.vue
View File

@ -36,6 +36,11 @@ defineProps({
height: 72px;
}
@media (max-width: 767px) {
width: 236px;
height: 72px;
}
img {
border-radius: 8px;
overflow: hidden;

5
docs/.vitepress/vitepress/components/vp-sponsor-small.vue
View File

@ -36,6 +36,11 @@ import { goldSponsors } from '../../config/sponsors'
width: 44px;
}
@media (max-width: 767px) {
width: 44px;
height: 44px;
}
img {
height: 100%;
width: 100%;

20
docs/.vitepress/vitepress/styles/sidebar.scss
View File

@ -35,33 +35,33 @@
}
}
@include respond-to('md') {
width: var(--sidebar-width-sm);
@media (max-width: 767px) {
width: calc(var(--vp-sidebar-width-mobile) - 14px);
}
@include respond-to('md') {
width: var(--vp-sidebar-width-small);
width: calc(var(--vp-sidebar-width-small) - $scrollbar-size);
}
@include respond-to('lg') {
top: var(--header-height);
transform: translate(0);
width: var(--vp-sidebar-width-small);
}
@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) - $scrollbar-size) / 2);
padding: 48px 48px 96px calc((100% - var(--vp-screen-max-width)) / 2);
width: calc(
(100% - var(--vp-screen-max-width) - $scrollbar-size) / 2 +
var(--vp-sidebar-width-small)
(100% - var(--vp-screen-max-width) - 32px) / 2 +
var(--vp-sidebar-width-small) - $scrollbar-size
);
}
@include respond-to('max') {
padding: 48px 48px 96px
calc((100% - var(--vp-screen-max-width) - $scrollbar-size) / 2 - 18px);
width: calc(
(100% - var(--vp-screen-max-width) + 48px) / 2 +
var(--vp-sidebar-width-small) - $scrollbar-size
);
}
}