mirror of
https://github.com/element-plus/element-plus.git
synced 2024-11-21 01:02:59 +08:00
refactor(docs): adjust style details & fix pages width (#6624)
* refactor(docs): adjust style details * refactor(docs): add toc width * refactor(docs): remove unused var * fix(docs): typography & button etc pages width unify
This commit is contained in:
云游君
GitHub
parent
9605146f23
commit
2caac7906e
@ -25,7 +25,6 @@ const { url, text } = useEditLink()
|
||||
.link {
|
||||
display: inline-block;
|
||||
font-weight: 500;
|
||||
color: var(--text-color-light);
|
||||
}
|
||||
|
||||
.link:hover {
|
||||
|
||||
@ -11,7 +11,7 @@ const { hasLinks, prev, next } = usePageNav()
|
||||
<div class="container">
|
||||
<div class="prev">
|
||||
<a v-if="prev" class="link" :href="withBase(prev.link)">
|
||||
<ElIcon>
|
||||
<ElIcon class="mr-1">
|
||||
<ArrowLeft />
|
||||
</ElIcon>
|
||||
<span class="text">{{ prev.text }}</span>
|
||||
@ -20,7 +20,7 @@ const { hasLinks, prev, next } = usePageNav()
|
||||
<div class="next">
|
||||
<a v-if="next" class="link" :href="withBase(next.link)">
|
||||
<span class="text">{{ next.text }}</span>
|
||||
<ElIcon>
|
||||
<ElIcon class="ml-1">
|
||||
<ArrowRight />
|
||||
</ElIcon>
|
||||
</a>
|
||||
@ -60,23 +60,26 @@ const { hasLinks, prev, next } = usePageNav()
|
||||
|
||||
.link {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
max-width: 100%;
|
||||
font-size: 1rem;
|
||||
height: 24px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.text {
|
||||
display: block;
|
||||
display: inline-flex;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.el-icon {
|
||||
display: block;
|
||||
display: inline-flex;
|
||||
flex-shrink: 0;
|
||||
font-size: 1rem;
|
||||
font-size: 12px;
|
||||
color: var(--text-color);
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
@ -3,6 +3,8 @@ import { ref } from 'vue'
|
||||
import { useToc } from '../../composables/use-toc'
|
||||
import { useActiveSidebarLinks } from '../../composables/active-bar'
|
||||
|
||||
import SponsorsButton from '../sponsors/sponsors-button.vue'
|
||||
|
||||
const headers = useToc()
|
||||
const marker = ref()
|
||||
const container = ref()
|
||||
@ -32,6 +34,8 @@ useActiveSidebarLinks(container, marker)
|
||||
</li>
|
||||
</ul>
|
||||
<div ref="marker" class="toc-marker" />
|
||||
|
||||
<sponsors-button class="mt-8" />
|
||||
</nav>
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
@ -105,6 +105,11 @@ const handleScroll = useThrottleFn(() => {
|
||||
}, 10)
|
||||
|
||||
useEventListener(window, 'scroll', handleScroll)
|
||||
|
||||
function jumpTo(path: string) {
|
||||
// vitepress has not router
|
||||
location.href = `/${lang.value}/${path}`
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -127,6 +132,8 @@ useEventListener(window, 'scroll', handleScroll)
|
||||
:style="peopleLayer"
|
||||
src="/images/home/people.svg"
|
||||
alt="banner"
|
||||
class="cursor-pointer"
|
||||
@click="jumpTo('/guide/quickstart.html')"
|
||||
/>
|
||||
<img
|
||||
:style="leftLayer"
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue'
|
||||
import { isDark } from '../../composables/dark'
|
||||
import { useLang } from '../../composables/lang'
|
||||
import { sponsors } from '../../../config/sponsors'
|
||||
import homeLocale from '../../../i18n/pages/home.json'
|
||||
|
||||
import SponsorsButton from '../sponsors/sponsors-button.vue'
|
||||
|
||||
const lang = useLang()
|
||||
|
||||
const homeLang = computed(() => homeLocale[lang.value])
|
||||
const langZhCN = 'zh-CN'
|
||||
|
||||
const getSponsorName = (sponsor) => {
|
||||
@ -48,19 +48,7 @@ const getSponsorSlogan = (sponsor) => {
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="join">
|
||||
<el-tooltip placement="top" :hide-after="1000" :offset="20">
|
||||
<template #content>
|
||||
{{ homeLang['21'] }}
|
||||
<a href="mailto:element-plus@outlook.com" target="_blank">
|
||||
element-plus@outlook.com
|
||||
</a>
|
||||
</template>
|
||||
<a href="mailto:element-plus@outlook.com" target="_blank">
|
||||
<el-button round>{{ homeLang['20'] }}</el-button>
|
||||
</a>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<sponsors-button round />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<div class="join">
|
||||
<el-tooltip placement="top" :hide-after="1000" :offset="20">
|
||||
<template #content>
|
||||
{{ homeLang['21'] }}
|
||||
<a href="mailto:element-plus@outlook.com" target="_blank">
|
||||
element-plus@outlook.com
|
||||
</a>
|
||||
</template>
|
||||
<a href="mailto:element-plus@outlook.com" target="_blank">
|
||||
<el-button :round="round">{{ homeLang['20'] }}</el-button>
|
||||
</a>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue'
|
||||
import { useLang } from '../../composables/lang'
|
||||
import homeLocale from '../../../i18n/pages/home.json'
|
||||
const lang = useLang()
|
||||
const homeLang = computed(() => homeLocale[lang.value])
|
||||
|
||||
defineProps<{ round?: boolean }>()
|
||||
</script>
|
||||
@ -76,6 +76,7 @@ h6:focus .header-anchor {
|
||||
|
||||
h1 {
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
font-size: 1.9rem;
|
||||
}
|
||||
|
||||
@ -127,6 +128,7 @@ textarea {
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
text-decoration: inherit;
|
||||
color: var(--brand-color);
|
||||
|
||||
@ -204,7 +206,7 @@ li > ol {
|
||||
|
||||
blockquote {
|
||||
margin: 1rem 0;
|
||||
border-left: 0.2rem solid var(--border-color-light);
|
||||
border-left: 0.2rem solid var(--el-border-color);
|
||||
padding: 0.25rem 0 0.25rem 1rem;
|
||||
font-size: 1rem;
|
||||
color: var(--text-color-lighter);
|
||||
|
||||
@ -62,12 +62,17 @@ html.dark {
|
||||
|
||||
code {
|
||||
margin: 0;
|
||||
border-radius: 3px;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
padding: 0.15rem 0.5rem;
|
||||
font-family: var(--code-font-family);
|
||||
font-size: var(--code-font-size);
|
||||
color: var(--code-text-color);
|
||||
background-color: var(--code-bg-color);
|
||||
line-height: var(--code-line-height);
|
||||
}
|
||||
|
||||
a > code {
|
||||
color: var(--code-link-color);
|
||||
}
|
||||
|
||||
code .token.deleted {
|
||||
|
||||
@ -9,11 +9,12 @@
|
||||
&.has-sidebar {
|
||||
padding-left: var(--sidebar-width-sm);
|
||||
@include respond-to('xlg') {
|
||||
padding-left: var(--sidebar-width-md);
|
||||
padding-left: var(--vp-sidebar-width-small);
|
||||
}
|
||||
@include respond-to('xxl') {
|
||||
padding-left: calc(
|
||||
(100vw - var(--app-max-width)) / 2 + var(--sidebar-width-md)
|
||||
(100vw - var(--vp-screen-max-width)) / 2 +
|
||||
var(--vp-sidebar-width-small)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,11 +2,24 @@
|
||||
@use './table-of-content';
|
||||
|
||||
.doc-content-wrapper {
|
||||
--toc-width: 144px;
|
||||
--vp-content-width: 800px;
|
||||
|
||||
padding: 32px 24px 96px;
|
||||
|
||||
.doc-content-container {
|
||||
max-width: 60rem;
|
||||
margin: 0 auto;
|
||||
max-width: var(--vp-content-width);
|
||||
|
||||
.doc-content {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include respond-to('xlg') {
|
||||
width: var(--vp-content-width);
|
||||
}
|
||||
|
||||
@include respond-to('xxl') {
|
||||
width: var(--vp-content-width);
|
||||
}
|
||||
}
|
||||
|
||||
@include respond-to('md') {
|
||||
@ -18,9 +31,5 @@
|
||||
@include respond-to('xlg') {
|
||||
padding: 64px 0 96px 64px;
|
||||
display: flex;
|
||||
.doc-content-container {
|
||||
min-width: 38.75rem;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,13 +3,15 @@
|
||||
.toc-wrapper {
|
||||
display: none;
|
||||
padding-left: 64px;
|
||||
|
||||
.toc-content {
|
||||
position: sticky;
|
||||
top: calc(var(--header-height) + 32px);
|
||||
margin-top: 32px;
|
||||
padding: 4px 8px 4px 12px;
|
||||
margin-bottom: 32px;
|
||||
width: var(--toc-width);
|
||||
width: 200px;
|
||||
|
||||
.toc-marker {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 0 auto;
|
||||
max-width: var(--app-max-width);
|
||||
max-width: var(--vp-screen-max-width);
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
|
||||
@ -64,17 +64,20 @@
|
||||
}
|
||||
|
||||
@include respond-to('md') {
|
||||
width: var(--sidebar-width-md);
|
||||
width: var(--vp-sidebar-width-small);
|
||||
}
|
||||
|
||||
@include respond-to('lg') {
|
||||
top: var(--header-height);
|
||||
transform: translate(0);
|
||||
border-right: 1px solid var(--border-color);
|
||||
width: var(--vp-sidebar-width-small);
|
||||
}
|
||||
|
||||
@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));
|
||||
padding: 0 32px 96px calc((100% - var(--vp-screen-max-width)) / 2.2);
|
||||
width: calc(
|
||||
(100% - var(--vp-screen-max-width)) / 2 + var(--vp-sidebar-width-small)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,7 +14,9 @@
|
||||
--border-color: var(--el-border-color);
|
||||
--border-color-light: var(--el-border-color-lighter);
|
||||
|
||||
--font-family: Inter, Roboto, Oxygen, Fira Sans, Helvetica Neue, sans-serif;
|
||||
--font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
|
||||
Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
|
||||
--font-family-mono: 'JetBrains Mono', source-code-pro, Menlo, Monaco, Consolas,
|
||||
'Courier New', monospace;
|
||||
@ -27,7 +29,14 @@
|
||||
// header vars
|
||||
--header-height: 55px;
|
||||
--nav-height: 55px; // alias of --header-height
|
||||
--sidebar-width-md: 18rem;
|
||||
|
||||
/* Screen Size */
|
||||
--vp-screen-max-width: 1376px;
|
||||
|
||||
// sidebar
|
||||
--vp-sidebar-width-mobile: 320px;
|
||||
--vp-sidebar-width-small: 272px;
|
||||
|
||||
--sidebar-width-sm: 16rem;
|
||||
--sidebar-width-xs: 20rem;
|
||||
--content-min-width: 16rem;
|
||||
@ -58,8 +67,9 @@
|
||||
--link-active-bg-color: rgba(var(--el-color-primary-rgb), 0.1);
|
||||
}
|
||||
|
||||
// layouts
|
||||
:root {
|
||||
--app-max-width: 1376px;
|
||||
--vp-screen-max-width: 1376px;
|
||||
}
|
||||
|
||||
.dark {
|
||||
|
||||
@ -7,8 +7,9 @@ lang: en-US
|
||||
|
||||
Element Plus uses BEM-styled CSS so that you can override styles easily. But if
|
||||
you need to replace styles at a large scale, e.g. change the theme color from
|
||||
blue to orange or green, maybe overriding them one by one is not a good idea. We
|
||||
provide four ways to change the style variables.
|
||||
blue to orange or green, maybe overriding them one by one is not a good idea.
|
||||
|
||||
We provide four ways to change the style variables.
|
||||
|
||||
## Change theme color
|
||||
|
||||
@ -24,7 +25,7 @@ You can find SCSS variables in [`packages/theme-chalk/src/common/var.scss`](http
|
||||
|
||||
::: warning
|
||||
|
||||
We use sass modules ([sass:map](https://sass-lang.com/documentation/values/maps)...) to refactor all SCSS variables.
|
||||
We use sass modules ([sass:map](https://sass-lang.com/documentation/values/maps)...) and `@use` to refactor all SCSS variables.
|
||||
|
||||
> [Introducing Sass Modules | CSS-TRICKS](https://css-tricks.com/introducing-sass-modules/)
|
||||
|
||||
@ -69,6 +70,16 @@ $colors: map.deep-merge(
|
||||
|
||||
If your project also uses SCSS, you can directly change Element Plus style variables. Create a new style file, e.g. `styles/element/index.scss`:
|
||||
|
||||
::: warning
|
||||
|
||||
You should use `@use 'xxx.scss' as *;` instead of `@import 'xxx.scss';`.
|
||||
|
||||
Because the sass team said they will remove it eventually.
|
||||
|
||||
> [Sass: @use](https://sass-lang.com/documentation/at-rules/use) vs [Sass: @import](https://sass-lang.com/documentation/at-rules/import)
|
||||
|
||||
:::
|
||||
|
||||
```scss
|
||||
// styles/element/index.scss
|
||||
/* just override what you need */
|
||||
|
||||
Loading…
Reference in New Issue
Block a user