test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-03 19:58:09 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

chore(docs): update document site style (#7052)

Browse Source 
* chore(docs): update document site style

- enhance document site css rules

* fix: update docs/.vitepress/vitepress/styles/content/table-of-content.scss

Co-authored-by: 三咲智子 <sxzz@sxzz.moe>
This commit is contained in:
黄忠忠 2022-04-08 17:16:10 +08:00 committed by GitHub
parent 5e68255e11
commit 4442ca31ec
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 28 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
docs/.vitepress/vitepress/styles/content.scss
View File

@ -14,14 +14,8 @@
} }
@include respond-to('xxl') { @include respond-to('xxl') {
padding-left: calc( padding-left: calc(
(100vw - var(--vp-screen-max-width)) / 2 + (100% - var(--vp-screen-max-width)) / 2 +
var(--vp-sidebar-width-small) - 42px var(--vp-sidebar-width-small)
);
}
@include respond-to('max') {
padding-left: calc(
(100vw - var(--vp-screen-max-width)) / 2 +
var(--vp-sidebar-width-small) - 4px
); );
} }
} }

4
docs/.vitepress/vitepress/styles/content/doc-content.scss
View File

@ -26,4 +26,8 @@
padding: 64px 0 96px 64px; padding: 64px 0 96px 64px;
display: flex; display: flex;
} }
@include respond-to('max') {
padding: 64px 0 96px 96px;
display: flex;
}
} }

7
docs/.vitepress/vitepress/styles/content/table-of-content.scss
View File

@ -7,7 +7,7 @@
.toc-content { .toc-content {
position: sticky; position: sticky;
top: calc(var(--header-height) + 32px); top: calc(var(--header-height) + 32px);
margin-top: 32px; margin-top: 0;
padding: 4px 8px 4px 12px; padding: 4px 8px 4px 12px;
margin-bottom: 32px; margin-bottom: 32px;
width: 200px; width: 200px;
@ -68,4 +68,9 @@
@include respond-to('xxl') { @include respond-to('xxl') {
display: block; display: block;
} }
@include respond-to('max') {
padding-left: 96px;
display: block;
}
} }

14
docs/.vitepress/vitepress/styles/css-vars.scss
View File

@ -1,3 +1,4 @@
@use './mixins' as *;
// css variables // css variables
:root { :root {
// layouts // layouts
@ -32,11 +33,20 @@
--nav-height: 55px; // alias of --header-height --nav-height: 55px; // alias of --header-height
/* Screen Size */ /* Screen Size */
--vp-screen-max-width: 1376px; --vp-screen-max-width: 1362px;
@include respond-to('xxl') {
--vp-sidebar-width-small: 234px;
}
@include respond-to('max') {
--vp-screen-max-width: 1482px;
--vp-sidebar-width-small: 290px;
}
// sidebar // sidebar
--vp-sidebar-width-mobile: 320px; --vp-sidebar-width-mobile: 320px;
--vp-sidebar-width-small: 272px; --vp-sidebar-width-small: 266px;
--sidebar-width-sm: 16rem; --sidebar-width-sm: 16rem;
--sidebar-width-xs: 20rem; --sidebar-width-xs: 20rem;

2
docs/.vitepress/vitepress/styles/navbar.scss
View File

@ -38,7 +38,7 @@
@include respond-to('max') { @include respond-to('max') {
// 36 = 2 * 18 for each side. // 36 = 2 * 18 for each side.
max-width: calc(var(--vp-screen-max-width) + 36px); max-width: calc(var(--vp-screen-max-width));
} }
} }

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

@ -40,7 +40,7 @@
} }
@include respond-to('md') { @include respond-to('md') {
width: calc(var(--vp-sidebar-width-small) - $scrollbar-size); width: calc(var(--vp-sidebar-width-small));
} }
@include respond-to('lg') { @include respond-to('lg') {
@ -53,13 +53,12 @@
padding: 48px 32px 96px calc((100% - var(--vp-screen-max-width)) / 2); padding: 48px 32px 96px calc((100% - var(--vp-screen-max-width)) / 2);
width: calc( width: calc(
(100% - var(--vp-screen-max-width)) / 2 + var(--vp-sidebar-width-small) - (100% - var(--vp-screen-max-width)) / 2 + var(--vp-sidebar-width-small)
$scrollbar-size - 32px
); );
} }
@include respond-to('max') { @include respond-to('max') {
padding: 48px 48px 96px calc((100% - var(--vp-screen-max-width)) / 2 - 18px); padding: 48px 48px 96px calc((100% - var(--vp-screen-max-width)) / 2);
width: calc( width: calc(
(100% - var(--vp-screen-max-width)) / 2 + var(--vp-sidebar-width-small) (100% - var(--vp-screen-max-width)) / 2 + var(--vp-sidebar-width-small)