github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

doc: refactor doc

pull/6316/head
tangjinzhou 2023-02-24 23:58:46 +08:00
parent 2b80870461
commit b393a0a2dd
31 changed files with 368 additions and 276 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/index.ts
View File

@ -3,7 +3,7 @@ import type { App } from 'vue';
import * as components from './components'; import * as components from './components';
import { default as version } from './version'; import { default as version } from './version';
export * from './components'; export * from './components';
export { default as theme } from './theme';
export const install = function (app: App) { export const install = function (app: App) {
Object.keys(components).forEach(key => { Object.keys(components).forEach(key => {
const component = components[key]; const component = components[key];

2
site/src/App.vue
View File

@ -10,6 +10,7 @@ import type { Ref } from 'vue';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import useMediaQuery from './hooks/useMediaQuery'; import useMediaQuery from './hooks/useMediaQuery';
import useSiteToken from './hooks/useSiteToken';
import { GLOBAL_CONFIG } from './SymbolKey'; import { GLOBAL_CONFIG } from './SymbolKey';
import enUS from '../../components/locale/en_US'; import enUS from '../../components/locale/en_US';
import zhCN from '../../components/locale/zh_CN'; import zhCN from '../../components/locale/zh_CN';
@ -27,6 +28,7 @@ export interface GlobalConfig {
} }
export default defineComponent({ export default defineComponent({
setup() { setup() {
useSiteToken();
const route = useRoute(); const route = useRoute();
const i18n = useI18n(); const i18n = useI18n();
const colSize = useMediaQuery(); const colSize = useMediaQuery();

4
site/src/components/surelyVue.vue
View File

@ -37,7 +37,8 @@ export default defineComponent({
.wrap { .wrap {
display: flex; display: flex;
background-color: #f4f8fa; background-color: #f4f8fa;
padding: 10px 30px; padding: 0px 30px;
box-sizing: border-box;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -45,6 +46,7 @@ export default defineComponent({
width: 100%; width: 100%;
height: 100px; height: 100px;
overflow: hidden; overflow: hidden;
align-items: center;
} }
.placeholder { .placeholder {
height: 100px; height: 100px;

96
site/src/hooks/useSiteToken.ts Normal file
View File

@ -0,0 +1,96 @@
import { TinyColor } from '@ctrl/tinycolor';
import { computed, watch } from 'vue';
import { theme } from '../../../components';
import { useConfigContextInject } from '../../../components/config-provider/context';
const { useToken } = theme;
const useSiteToken = () => {
const result = useToken();
const { getPrefixCls, iconPrefixCls } = useConfigContextInject();
const rootPrefixCls = computed(() => getPrefixCls());
const { token } = result;
const mergedToken = computed(() => ({
theme: result.theme.value,
hashId: result.hashId.value,
token: {
...token.value,
headerHeight: 64,
menuItemBorder: 2,
mobileMaxWidth: 767.99,
siteMarkdownCodeBg: token.value.colorFillTertiary,
antCls: `.${rootPrefixCls.value}`,
iconCls: `.${iconPrefixCls.value}`,
/** 56 */
marginFarXS: (token.value.marginXXL / 6) * 7,
/** 80 */
marginFarSM: (token.value.marginXXL / 3) * 5,
/** 96 */
marginFar: token.value.marginXXL * 2,
codeFamily: `'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace`,
},
}));
let styleDom: HTMLStyleElement | null = null;
watch(
mergedToken,
() => {
styleDom = styleDom || document.createElement('style');
const tokenValue = mergedToken.value.token;
const demoGridColor = token.colorPrimary;
styleDom.innerHTML = `
:root {
--header-height: ${tokenValue.headerHeight}px;
--menu-item-border: ${tokenValue.menuItemBorder}px;
--mobile-max-width: ${tokenValue.mobileMaxWidth}px;
--primary-color: ${tokenValue.colorPrimary};
--component-background: ${tokenValue.colorBgContainer};
--body-background: ${tokenValue.colorBgContainer};
--site-text-color: ${tokenValue.colorText};
--demo-grid-color: ${demoGridColor};
--demo-grid-color-65: ${new TinyColor(demoGridColor).setAlpha(0.75).toHex8String()};
--demo-grid-color-75: ${new TinyColor(demoGridColor).setAlpha(0.75).toHex8String()};
--site-text-color-secondary: ${tokenValue.colorTextSecondary};
--site-border-color-split: ${tokenValue.colorSplit};
--border-radius-base: ${tokenValue.borderRadius};
--font-size-base: ${tokenValue.fontSize};
--font-size-max: ${Math.max(tokenValue.fontSize - 1, 12)}px;
--font-family: ${tokenValue.fontFamily};
--code-family: ${tokenValue.codeFamily};
--border-color-base: ${tokenValue.colorBorder};
--purple-3: ${tokenValue['purple-3']};
--purple-6: ${tokenValue['purple-6']};
--text-color: ${tokenValue.colorText};
--search-icon-color: #ced4d9;
--ease-in-out-circ: ${tokenValue.motionEaseInOutCirc};
--shadow-2: ${tokenValue.boxShadowSecondary};
--link-color: ${tokenValue.colorLink};
--error-color: ${tokenValue.colorError};
--white: ${tokenValue.colorWhite};
--green-6: ${tokenValue['green-6']};
--gray-8: ${tokenValue['gray-8']};
--magenta-7: ${tokenValue['magenta-7']};
--line-height-base: ${tokenValue.lineHeight};
--screen-md-min: ${tokenValue.screenMDMin}px;
--screen-sm-min: ${tokenValue.screenSMMin}px;
--screen-lg: ${tokenValue.screenLG}px;
--mobile-max-width: ${tokenValue.mobileMaxWidth}px;
--box-shadow-base: ${tokenValue.boxShadow}
--animation-duration-base: ${tokenValue.motionDurationSlow};
--ease-in-out: ${tokenValue.motionEaseInOut};
--shadow-1-down: ${tokenValue.boxShadowCard};
}
`;
if (styleDom && !document.body.contains(styleDom)) {
document.body.appendChild(styleDom);
}
},
{ immediate: true },
);
return mergedToken;
};
export default useSiteToken;

69
site/src/layouts/UserLayout.less
View File

@ -1,69 +0,0 @@
.container {
display: flex;
flex-direction: column;
height: 100vh;
overflow: auto;
background: @layout-body-background;
}
.lang {
width: 100%;
height: 40px;
line-height: 44px;
text-align: right;
:global(.ant-dropdown-trigger) {
margin-right: 24px;
}
}
.content {
flex: 1;
padding: 32px 0;
}
@media (min-width: @screen-md-min) {
.container {
background-image: url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg');
background-repeat: no-repeat;
background-position: center 110px;
background-size: 100%;
}
.content {
padding: 32px 0 24px 0;
}
}
.top {
text-align: center;
}
.header {
height: 44px;
line-height: 44px;
a {
text-decoration: none;
}
}
.logo {
height: 44px;
margin-right: 16px;
vertical-align: top;
}
.title {
position: relative;
top: 2px;
color: @heading-color;
font-weight: 600;
font-size: 33px;
font-family: Avenir, 'Helvetica Neue', Arial, Helvetica, sans-serif;
}
.desc {
margin-top: 12px;
margin-bottom: 40px;
color: @text-color-secondary;
font-size: @font-size-base;
}

27
site/src/layouts/UserLayout.vue
View File

@ -1,27 +0,0 @@
<template>
<div :class="$style.container">
<div :class="$style.lang">中文</div>
<div :class="$style.content">
<div :class="$style.top">
<div :class="$style.header">
<a to="/">
<img alt="logo" :class="$style.logo" :src="logo" />
<span :class="$style.title">Ant Design Vue</span>
</a>
</div>
</div>
<router-view />
</div>
</div>
</template>
<script>
import logo from '../assets/logo.svg';
export default {
components: {},
beforeCreate() {
this.logo = logo;
},
};
</script>
<style lang="less" src="./UserLayout.less" module />

9
site/src/layouts/header/Logo.vue
View File

@ -23,13 +23,12 @@ export default defineComponent({
@import './index.less'; @import './index.less';
#logo { #logo {
height: @header-height; height: var(--header-height);
padding-left: 40px; padding-left: 40px;
overflow: hidden; overflow: hidden;
color: @site-heading-color; color: var(--site-text-color);
font-size: 18px; font-size: 18px;
font-family: Avenir, @font-family, sans-serif; line-height: var(--header-height);
line-height: @header-height;
white-space: nowrap; white-space: nowrap;
text-decoration: none; text-decoration: none;
@ -52,7 +51,7 @@ export default defineComponent({
} }
} }
@media only screen and (max-width: @mobile-max-width) { @media only screen and (max-width: var(--mobile-max-width)) {
#logo { #logo {
padding-right: 0; padding-right: 0;
padding-left: 0; padding-left: 0;

13
site/src/layouts/header/Navigation.vue
View File

@ -130,7 +130,6 @@ export default defineComponent({
#nav { #nav {
height: 100%; height: 100%;
font-size: 14px; font-size: 14px;
font-family: Avenir, @font-family, sans-serif;
border: 0; border: 0;
&.ant-menu-horizontal { &.ant-menu-horizontal {
@ -139,17 +138,17 @@ export default defineComponent({
& > .ant-menu-item, & > .ant-menu-item,
& > .ant-menu-submenu { & > .ant-menu-submenu {
min-width: (40px + 12px * 2); min-width: (40px + 12px * 2);
height: @header-height; height: var(--header-height);
padding-right: 12px; padding-right: 12px;
padding-left: 12px; padding-left: 12px;
line-height: @header-height; line-height: var(--header-height);
&::after { &::after {
top: 0; top: 0;
right: 12px; right: 12px;
bottom: auto; bottom: auto;
left: 12px; left: 12px;
border-width: @menu-item-border; border-width: var(--menu-item-border);
} }
} }
@ -159,7 +158,7 @@ export default defineComponent({
& > .ant-menu-item-selected { & > .ant-menu-item-selected {
a { a {
color: @primary-color; color: var(--primary-color);
} }
} }
} }
@ -171,11 +170,11 @@ export default defineComponent({
} }
.header-link { .header-link {
color: @site-text-color; color: var(--site-text-color);
} }
.ant-menu-item-active .header-link { .ant-menu-item-active .header-link {
color: @primary-color; color: var(--primary-color);
} }
// Popover menu is only used for mobile // Popover menu is only used for mobile

12
site/src/layouts/header/SearchBox.less
View File

@ -1,5 +1,3 @@
@search-icon-color: #ced4d9;
#search-box { #search-box {
position: relative; position: relative;
display: flex; display: flex;
@ -10,14 +8,14 @@
padding-left: 16px; padding-left: 16px;
line-height: 22px; line-height: 22px;
white-space: nowrap; white-space: nowrap;
border-left: 1px solid @site-border-color-split; border-left: 1px solid var(--site-border-color-split);
transition: width 0.5s; transition: width 0.5s;
.ant-row-rtl & { .ant-row-rtl & {
margin: 0 0 0 auto !important; margin: 0 0 0 auto !important;
padding-right: 16px; padding-right: 16px;
padding-left: 0; padding-left: 0;
border-right: 1px solid @site-border-color-split; border-right: 1px solid var(--site-border-color-split);
border-left: none; border-left: none;
} }
@ -30,7 +28,7 @@
top: 50%; top: 50%;
z-index: 1; z-index: 1;
flex: none; flex: none;
color: @search-icon-color; color: var(--search-icon-color);
transform: translateY(-50%); transform: translateY(-50%);
pointer-events: none; pointer-events: none;
} }
@ -91,7 +89,7 @@
width: 500px; width: 500px;
.anticon { .anticon {
color: @search-icon-color; color: var(--search-icon-color);
} }
input { input {
@ -127,7 +125,7 @@
} }
} }
@media only screen and (max-width: @mobile-max-width) { @media only screen and (max-width: var(--mobile-max-width)) {
#search-box { #search-box {
display: none; display: none;
} }

12
site/src/layouts/header/index.less
View File

@ -1,14 +1,10 @@
@import './SearchBox.less'; @import './SearchBox.less';
@header-height: 64px;
@menu-item-border: 2px;
@mobile-max-width: 767.99px;
#header { #header {
position: relative; position: relative;
z-index: 10; z-index: 10;
max-width: 100%; max-width: 100%;
background: @component-background; background: var(--component-background);
box-shadow: 0 2px 8px rgba(240, 241, 242, 65); box-shadow: 0 2px 8px rgba(240, 241, 242, 65);
.menu-row { .menu-row {
@ -41,12 +37,12 @@
// Buttons // Buttons
.header-button { .header-button {
color: @text-color; color: var(--text-color);
border-color: @border-color-base; border-color: var(--border-color-base);
} }
} }
@media only screen and (max-width: @mobile-max-width) { @media only screen and (max-width: var(--mobile-max-width)) {
#header { #header {
text-align: center; text-align: center;
} }

35
site/src/theme/static/common.less
View File

@ -6,10 +6,10 @@ html {
body { body {
overflow-x: hidden; overflow-x: hidden;
color: @site-text-color; color: var(--site-text-color);
font-size: @font-size-base; font-size: var(--font-size-base);
font-family: @font-family; font-family: var(--font-family);
background: @body-background; background: var(--body-background);
transition: background 1s cubic-bezier(0.075, 0.82, 0.165, 1); transition: background 1s cubic-bezier(0.075, 0.82, 0.165, 1);
} }
@ -20,14 +20,14 @@ a {
.main-wrapper { .main-wrapper {
position: relative; position: relative;
padding: 40px 0 0; padding: 40px 0 0;
background: @component-background; background: var(--component-background);
} }
.main-container { .main-container {
position: relative; position: relative;
min-height: 500px; min-height: 500px;
padding: 0 170px 32px 64px; padding: 0 170px 32px 64px;
background: @component-background; background: var(--component-background);
.ant-row-rtl & { .ant-row-rtl & {
padding: 0 64px 144px 170px; padding: 0 64px 144px 170px;
@ -56,7 +56,6 @@ a {
.aside-container { .aside-container {
min-height: 100%; min-height: 100%;
padding-bottom: 48px; padding-bottom: 48px;
font-family: Avenir, @font-family, sans-serif;
&.ant-menu-inline { &.ant-menu-inline {
.ant-menu-submenu-title h4, .ant-menu-submenu-title h4,
@ -78,7 +77,7 @@ a {
display: block; display: block;
width: calc(100% - 20px); width: calc(100% - 20px);
height: 1px; height: 1px;
background: @border-color-split; background: var(--site-border-color-split);
content: ''; content: '';
} }
} }
@ -134,7 +133,7 @@ a {
position: absolute; position: absolute;
top: 16px; top: 16px;
right: -10px; right: -10px;
color: @primary-color; color: var(--primary-color);
font-size: 12px; font-size: 12px;
opacity: 0; opacity: 0;
transition: all 0.3s; transition: all 0.3s;
@ -170,24 +169,24 @@ a {
// reset menu text color // reset menu text color
.menu-site { .menu-site {
.ant-menu-item > a { .ant-menu-item > a {
color: @site-text-color; color: var(--site-text-color);
} }
.ant-menu-item-selected > a, .ant-menu-item-selected > a,
.ant-menu-item > a:hover { .ant-menu-item > a:hover {
color: @primary-color; color: var(--primary-color);
} }
} }
#app { #app {
height: 100%; height: 100%;
transition: transform 0.3s @ease-in-out-circ; transition: transform 0.3s var(--ease-in-out-circ);
} }
.drawer-content { .drawer-content {
padding: 40px 0; padding: 40px 0;
&-wrapper { &-wrapper {
background-color: @component-background; background-color: var(--component-background);
} }
} }
@ -197,7 +196,7 @@ a {
#_hj_feedback_container { #_hj_feedback_container {
[class$='icon_emotion_path1']::before { [class$='icon_emotion_path1']::before {
color: @primary-color !important; color: var(--primary-color) !important;
} }
} }
@ -218,15 +217,15 @@ a {
display: block; display: block;
} }
&-active { &-active {
color: @primary-color; color: var(--primary-color);
} }
& &-avatar { & &-avatar {
color: #000; color: #000;
background-color: #fff; background-color: #fff;
box-shadow: @shadow-2; box-shadow: var(--shadow-2);
transition: color 0.3s; transition: color 0.3s;
&:hover { &:hover {
color: @primary-color; color: var(--primary-color);
} }
} }
} }
@ -254,7 +253,7 @@ a {
> .ant-menu-item-group-title::after, > .ant-menu-item-group-title::after,
.main-wrapper .main-container, .main-wrapper .main-container,
#demo-toc.toc { #demo-toc.toc {
transition: all 0.3s @ease-in-out-circ; transition: all 0.3s var(--ease-in-out-circ);
} }
// remove margin-bottom from dark theme (why need margin-bottom in dark theme?) // remove margin-bottom from dark theme (why need margin-bottom in dark theme?)

58
site/src/theme/static/demo.less
View File

@ -12,19 +12,19 @@
display: inline-block; display: inline-block;
width: 100%; width: 100%;
margin: 0 0 16px; margin: 0 0 16px;
border: 1px solid @site-border-color-split; border: 1px solid var(--site-border-color-split);
border-radius: @border-radius-base; border-radius: var(--border-radius-base);
transition: all 0.2s; transition: all 0.2s;
.code-box-title { .code-box-title {
&, &,
a { a {
color: @site-text-color; color: var(--site-text-color);
background: @component-background; background: var(--component-background);
} }
} }
&, &,
.code-box-demo { .code-box-demo {
background-color: @component-background; background-color: var(--component-background);
} }
.markdown { .markdown {
pre { pre {
@ -37,7 +37,7 @@
} }
} }
&:target { &:target {
border: 1px solid @primary-color; border: 1px solid var(--primary-color);
} }
&-expand-trigger { &-expand-trigger {
@ -65,21 +65,21 @@
margin-left: 16px; margin-left: 16px;
padding: 1px 8px; padding: 1px 8px;
color: #777; color: #777;
background: @body-background; background: var(--body-background);
border-radius: @border-radius-base @border-radius-base 0 0; border-radius: var(--border-radius-base) var(--border-radius-base) 0 0;
transition: background-color 0.4s; transition: background-color 0.4s;
.ant-row-rtl & { .ant-row-rtl & {
margin-right: 16px; margin-right: 16px;
margin-left: 0; margin-left: 0;
border-radius: @border-radius-base 0 0 @border-radius-base; border-radius: var(--border-radius-base) 0 0 var(--border-radius-base);
} }
a, a,
a:hover { a:hover {
color: @site-text-color; color: var(--site-text-color);
font-weight: 500; font-weight: 500;
font-size: @font-size-base; font-size: var(--font-size-base);
} }
} }
@ -98,10 +98,10 @@
transform: scale(0.9); transform: scale(0.9);
.anticon { .anticon {
color: @site-text-color-secondary; color: var(--site-text-color-secondary);
transition: all 0.3s; transition: all 0.3s;
&:hover { &:hover {
color: @site-text-color; color: var(--site-text-color);
} }
} }
@ -116,8 +116,8 @@
&-demo { &-demo {
padding: 42px 24px 50px; padding: 42px 24px 50px;
color: @site-text-color; color: var(--site-text-color);
border-bottom: 1px solid @site-border-color-split; border-bottom: 1px solid var(--site-border-color-split);
} }
iframe { iframe {
@ -129,8 +129,8 @@
&.markdown { &.markdown {
position: relative; position: relative;
width: 100%; width: 100%;
font-size: @font-size-base; font-size: var(--font-size-base);
border-radius: 0 0 @border-radius-base @border-radius-base; border-radius: 0 0 var(--border-radius-base) var(--border-radius-base);
transition: background-color 0.4s; transition: background-color 0.4s;
} }
@ -158,7 +158,7 @@
} }
&.expand &-meta { &.expand &-meta {
border-bottom: 1px dashed @site-border-color-split; border-bottom: 1px dashed var(--site-border-color-split);
border-radius: 0; border-radius: 0;
} }
@ -204,7 +204,7 @@
.highlight-wrapper { .highlight-wrapper {
display: none; display: none;
overflow: auto; overflow: auto;
border-radius: 0 0 @border-radius-base @border-radius-base; border-radius: 0 0 var(--border-radius-base) var(--border-radius-base);
&-expand { &-expand {
display: block; display: block;
@ -221,10 +221,10 @@
pre { pre {
margin: 0; margin: 0;
padding: 0; padding: 0;
background: @component-background; background: var(--component-background);
} }
&:not(:first-child) { &:not(:first-child) {
border-top: 1px dashed @site-border-color-split; border-top: 1px dashed var(--site-border-color-split);
} }
} }
@ -232,7 +232,7 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: 12px 0; padding: 12px 0;
border-top: 1px dashed @site-border-color-split; border-top: 1px dashed var(--site-border-color-split);
opacity: 0.7; opacity: 0.7;
transition: opacity 0.3s; transition: opacity 0.3s;
@ -248,7 +248,7 @@
width: 16px; width: 16px;
height: 16px; height: 16px;
margin-left: 16px; margin-left: 16px;
color: @site-text-color-secondary; color: var(--site-text-color-secondary);
cursor: pointer; cursor: pointer;
transition: all 0.24s; transition: all 0.24s;
@ -266,7 +266,7 @@
} }
&:hover { &:hover {
color: @site-text-color; color: var(--site-text-color);
} }
} }
@ -275,7 +275,7 @@
height: 14px; height: 14px;
font-size: 14px; font-size: 14px;
text-align: center; text-align: center;
background: @component-background; background: var(--component-background);
cursor: pointer; cursor: pointer;
transition: transform 0.24s; transition: transform 0.24s;
@ -283,7 +283,7 @@
transform: scale(1.2); transform: scale(1.2);
} }
&.anticon-check { &.anticon-check {
color: @green-6 !important; color: var(--green-6) !important;
font-weight: bold; font-weight: bold;
} }
} }
@ -326,17 +326,17 @@
width: auto; width: auto;
margin: 0; margin: 0;
code { code {
background: @component-background; background: var(--component-background);
border: none; border: none;
} }
} }
&-debug { &-debug {
border-color: @purple-3; border-color: var(--purple-3);
} }
&-debug &-title a { &-debug &-title a {
color: @purple-6; color: var(--purple-6);
} }
} }

10
site/src/theme/static/docsearch.less
View File

@ -1,13 +1,13 @@
.algolia-autocomplete { .algolia-autocomplete {
.ds-dropdown-menu { .ds-dropdown-menu {
border: none; border: none;
box-shadow: @box-shadow-base; box-shadow: var(--box-shadow-base);
[class^='ds-dataset-'] { [class^='ds-dataset-'] {
background: @component-background; background: var(--component-background);
border: none; border: none;
.algolia-docsearch-suggestion { .algolia-docsearch-suggestion {
background: @component-background; background: var(--component-background);
} }
} }
@ -17,10 +17,10 @@
} }
.algolia-docsearch-suggestion--title { .algolia-docsearch-suggestion--title {
color: @site-text-color; color: var(--site-text-color);
} }
.algolia-docsearch-suggestion--highlight { .algolia-docsearch-suggestion--highlight {
color: @primary-color; color: var(--primary-color);
} }
} }

5
site/src/theme/static/footer.less
View File

@ -39,16 +39,15 @@
} }
.footer-wrap { .footer-wrap {
position: relative; position: relative;
padding: 86px @padding-space 93px @padding-space; padding: 86px 144px 93px 144px;
border-bottom: 1px solid rgba(255, 255, 255, 0.25); border-bottom: 1px solid rgba(255, 255, 255, 0.25);
} }
.bottom-bar { .bottom-bar {
text-align: center; text-align: center;
padding: 16px @padding-space; padding: 16px 144px;
margin: 0; margin: 0;
line-height: 32px; line-height: 32px;
overflow: hidden; overflow: hidden;
font-family: Avenir, @font-family;
font-size: 16px; font-size: 16px;
font-variant: tabular-nums; font-variant: tabular-nums;
a { a {

2
site/src/theme/static/header.less
View File

@ -27,7 +27,7 @@
} }
} }
@media (max-width: @screen-sm-min) { @media (max-width: var(--screen-sm-min)) {
#header.home-header { #header.home-header {
.ant-row { .ant-row {
.ant-col { .ant-col {

6
site/src/theme/static/highlight.less
View File

@ -7,14 +7,14 @@
pre code { pre code {
display: block; display: block;
padding: 16px 32px; padding: 16px 32px;
color: @site-text-color; color: var(--site-text-color);
font-size: @font-size-base; font-size: var(--font-size-base);
font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
line-height: 2; line-height: 2;
white-space: pre; white-space: pre;
background: white; background: white;
border: 1px solid #e9e9e9; border: 1px solid #e9e9e9;
border-radius: @border-radius-base; border-radius: var(--border-radius-base);
} }
code[class*='language-'], code[class*='language-'],

2
site/src/theme/static/home.less
View File

@ -1,2 +0,0 @@
@home-bg-color: #2f54eb;
@home-text-color: #314659;

2
site/src/theme/static/icons.less
View File

@ -42,7 +42,7 @@ ul.anticons-list {
&:hover { &:hover {
color: #fff; color: #fff;
background-color: @primary-color; background-color: var(--primary-color);
.anticon { .anticon {
transform: scale(1.4); transform: scale(1.4);
} }

20
site/src/theme/static/index.less
View File

@ -1,2 +1,18 @@
html { @import './reset.css';
} @import './var';
@import './common';
@import './header';
@import './footer';
@import './page-nav';
@import './markdown';
@import './preview-img';
@import './toc';
@import './not-found';
@import './highlight';
@import './demo';
@import './icons';
@import './mock-browser';
@import './responsive';
@import './resource';
@import './docsearch';
@import './nprogress';

74
site/src/theme/static/markdown.less
View File

@ -1,5 +1,5 @@
.markdown { .markdown {
color: @site-text-color; color: var(--site-text-color);
font-size: 14px; font-size: 14px;
line-height: 2; line-height: 2;
} }
@ -25,10 +25,10 @@
.markdown h1 { .markdown h1 {
margin-top: 8px; margin-top: 8px;
margin-bottom: 20px; margin-bottom: 20px;
color: @site-heading-color; color: var(--site-text-color);
font-weight: 500; font-weight: 500;
font-size: 30px; font-size: 30px;
font-family: Avenir, @font-family, sans-serif; font-family: var(--font-family);
line-height: 38px; line-height: 38px;
.subtitle { .subtitle {
@ -48,9 +48,9 @@
.markdown h6 { .markdown h6 {
clear: both; clear: both;
margin: 1.6em 0 0.6em; margin: 1.6em 0 0.6em;
color: @site-heading-color; color: var(--site-text-color);
font-weight: 500; font-weight: 500;
font-family: Avenir, @font-family, sans-serif; font-family: var(--font-family);
} }
.markdown h3 { .markdown h3 {
@ -70,7 +70,7 @@
clear: both; clear: both;
height: 1px; height: 1px;
margin: 56px 0; margin: 56px 0;
background: @site-border-color-split; background: var(--site-border-color-split);
border: 0; border: 0;
} }
@ -121,23 +121,23 @@
margin: 0 1px; margin: 0 1px;
padding: 0.2em 0.4em; padding: 0.2em 0.4em;
font-size: 0.9em; font-size: 0.9em;
background: @site-markdown-code-bg; background: var(--site-markdown-code-bg);
border: 1px solid @border-color-split; border: 1px solid var(--site-border-color-split);
border-radius: 3px; border-radius: 3px;
} }
.markdown pre { .markdown pre {
font-family: @code-family; font-family: var(--code-family);
background: @site-markdown-code-bg; background: var(--site-markdown-code-bg);
border-radius: @border-radius-base; border-radius: var(--border-radius-base);
} }
.markdown pre code { .markdown pre code {
margin: 0; margin: 0;
padding: 0; padding: 0;
overflow: auto; overflow: auto;
color: @site-text-color; color: var(--site-text-color);
font-size: max(@font-size-base - 1px, 12px); font-size: var(--font-size-max);
direction: ltr; direction: ltr;
text-align: left; text-align: left;
background: #f5f5f5; background: #f5f5f5;
@ -154,7 +154,7 @@
margin: 8px 0 16px; margin: 8px 0 16px;
direction: ltr; direction: ltr;
empty-cells: show; empty-cells: show;
border: 1px solid @site-border-color-split; border: 1px solid var(--site-border-color-split);
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; border-spacing: 0;
} }
@ -170,7 +170,7 @@
.markdown > table td { .markdown > table td {
padding: 16px 24px; padding: 16px 24px;
text-align: left; text-align: left;
border: 1px solid @site-border-color-split; border: 1px solid var(--site-border-color-split);
} }
.markdown table td > a:not(:last-child) { .markdown table td > a:not(:last-child) {
@ -183,14 +183,14 @@
.markdown blockquote { .markdown blockquote {
margin: 1em 0; margin: 1em 0;
padding-left: 0.8em; padding-left: 0.8em;
color: @site-text-color-secondary; color: var(--site-text-color-secondary);
font-size: 90%; font-size: 90%;
border-left: 4px solid @site-border-color-split; border-left: 4px solid var(--site-border-color-split);
.rtl & { .rtl & {
padding-right: 0.8em; padding-right: 0.8em;
padding-left: 0; padding-left: 0;
border-right: 4px solid @site-border-color-split; border-right: 4px solid var(--site-border-color-split);
border-left: none; border-left: none;
} }
} }
@ -228,12 +228,12 @@
.anticon { .anticon {
display: block; display: block;
color: @site-text-color-secondary; color: var(--site-text-color-secondary);
font-size: 16px; font-size: 16px;
transition: all 0.3s; transition: all 0.3s;
&:hover { &:hover {
color: @site-text-color; color: var(--site-text-color);
} }
} }
} }
@ -259,24 +259,24 @@
margin: 2em 0; margin: 2em 0;
overflow-x: auto; overflow-x: auto;
overflow-y: hidden; overflow-y: hidden;
font-size: max(@font-size-base - 1px, 12px); font-size: var(--font-size-max);
font-family: @code-family; font-family: var(--code-family);
line-height: @line-height-base; line-height: var(--line-height-base);
border: 0; border: 0;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
th, th,
td { td {
padding: 12px; padding: 12px;
border-color: @border-color-split; border-color: var(--site-border-color-split);
border-width: 1px 0; border-width: 1px 0;
&:first-child { &:first-child {
border-left: 1px solid @border-color-split; border-left: 1px solid var(--site-border-color-split);
} }
&:last-child { &:last-child {
border-right: 1px solid @border-color-split; border-right: 1px solid var(--site-border-color-split);
} }
} }
@ -295,7 +295,7 @@
td { td {
&:first-child { &:first-child {
width: 18%; width: 18%;
color: @gray-8; color: var(--gray-8);
font-weight: 600; font-weight: 600;
white-space: nowrap; white-space: nowrap;
} }
@ -304,16 +304,16 @@
} }
&:nth-child(3) { &:nth-child(3) {
width: 22%; width: 22%;
color: @magenta-7; color: var(--magenta-7);
font-size: max(@font-size-base - 1px, 12px); font-size: var(--font-size-max);
} }
&:nth-child(4) { &:nth-child(4) {
width: 15%; width: 15%;
font-size: max(@font-size-base - 1px, 12px); font-size: var(--font-size-max);
} }
&:nth-child(5) { &:nth-child(5) {
width: 8%; width: 8%;
font-size: max(@font-size-base - 1px, 12px); font-size: var(--font-size-max);
} }
&:nth-last-child(3):first-child { &:nth-last-child(3):first-child {
width: 38%; width: 38%;
@ -398,9 +398,9 @@
} }
.code-box-demo .ant-row > div:not(.gutter-row) { .code-box-demo .ant-row > div:not(.gutter-row) {
padding: 16px 0; padding: 16px 0;
background: @demo-grid-color; background: var(--demo-grid-color);
&:nth-child(2n + 1) { &:nth-child(2n + 1) {
background: fade(@demo-grid-color, 75%); background: var(--demo-grid-color-75);
} }
} }
.ant-row .demo-col, .ant-row .demo-col,
@ -408,17 +408,17 @@
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
padding: 30px 0; padding: 30px 0;
color: @white; color: var(--white);
font-size: 18px; font-size: 18px;
text-align: center; text-align: center;
border: none; border: none;
} }
.ant-row .demo-col-1 { .ant-row .demo-col-1 {
background: fade(@demo-grid-color, 75%); background: var(--demo-grid-color-75);
} }
.ant-row .demo-col-2, .ant-row .demo-col-2,
.code-box-demo .ant-row .demo-col-2 { .code-box-demo .ant-row .demo-col-2 {
background: fade(@demo-grid-color, 50%); background: var(--demo-grid-color-75);
} }
.ant-row .demo-col-3, .ant-row .demo-col-3,
.code-box-demo .ant-row .demo-col-3 { .code-box-demo .ant-row .demo-col-3 {
@ -427,7 +427,7 @@
} }
.ant-row .demo-col-4, .ant-row .demo-col-4,
.code-box-demo .ant-row .demo-col-4 { .code-box-demo .ant-row .demo-col-4 {
background: fade(@demo-grid-color, 60%); background: var(--demo-grid-color-60);
} }
.ant-row .demo-col-5, .ant-row .demo-col-5,
.code-box-demo .ant-row .demo-col-5 { .code-box-demo .ant-row .demo-col-5 {

4
site/src/theme/static/not-found.less
View File

@ -22,13 +22,13 @@
} }
h1 { h1 {
color: @primary-color; color: var(--primary-color);
font-weight: 500; font-weight: 500;
font-size: 120px; font-size: 120px;
} }
p { p {
color: @site-text-color; color: var(--site-text-color);
font-size: 18px; font-size: 18px;
} }
} }

8
site/src/theme/static/nprogress.less
View File

@ -1,14 +1,14 @@
#nprogress { #nprogress {
.bar { .bar {
background: @primary-color; background: var(--primary-color);
} }
.peg { .peg {
box-shadow: 0 0 10px @primary-color, 0 0 5px @primary-color; box-shadow: 0 0 10px var(--primary-color), 0 0 5px var(--primary-color);
} }
.spinner-icon { .spinner-icon {
border-top-color: @primary-color; border-top-color: var(--primary-color);
border-left-color: @primary-color; border-left-color: var(--primary-color);
} }
} }

10
site/src/theme/static/page-nav.less
View File

@ -4,7 +4,7 @@
margin-left: 64px; margin-left: 64px;
overflow: hidden; overflow: hidden;
font-size: 14px; font-size: 14px;
border-top: 1px solid @site-border-color-split; border-top: 1px solid var(--site-border-color-split);
> .prev-page, > .prev-page,
> .next-page { > .next-page {
@ -29,7 +29,7 @@
position: relative; position: relative;
left: 0; left: 0;
margin-right: 1em; margin-right: 1em;
color: @site-text-color-secondary; color: var(--site-text-color-secondary);
font-size: 12px; font-size: 12px;
transition: all 0.3s; transition: all 0.3s;
@ -47,7 +47,7 @@
&:hover .footer-nav-icon-before { &:hover .footer-nav-icon-before {
left: -3px; left: -3px;
color: @primary-color; color: var(--primary-color);
.ant-row-rtl & { .ant-row-rtl & {
right: -3px; right: -3px;
@ -69,7 +69,7 @@
position: relative; position: relative;
right: 0; right: 0;
margin-left: 1em; margin-left: 1em;
color: @site-text-color-secondary; color: var(--site-text-color-secondary);
font-size: 12px; font-size: 12px;
transition: all 0.3s; transition: all 0.3s;
@ -87,7 +87,7 @@
&:hover .footer-nav-icon-after { &:hover .footer-nav-icon-after {
right: -3px; right: -3px;
color: @primary-color; color: var(--primary-color);
.ant-row-rtl & { .ant-row-rtl & {
right: auto; right: auto;

16
site/src/theme/static/preview-img.less
View File

@ -69,7 +69,7 @@
display: block; display: block;
width: 100%; width: 100%;
height: 3px; height: 3px;
background: @primary-color; background: var(--primary-color);
content: ''; content: '';
} }
@ -80,19 +80,19 @@
display: block; display: block;
width: 100%; width: 100%;
height: 3px; height: 3px;
background: @error-color; background: var(--error-color);
content: ''; content: '';
} }
.preview-image-title { .preview-image-title {
margin-top: 20px; margin-top: 20px;
color: @site-text-color; color: var(--site-text-color);
font-size: 12px; font-size: 12px;
} }
.preview-image-description { .preview-image-description {
margin-top: 2px; margin-top: 2px;
color: @site-text-color-secondary; color: var(--site-text-color-secondary);
font-size: 12px; font-size: 12px;
line-height: 1.5; line-height: 1.5;
} }
@ -106,8 +106,8 @@
.preview-image-box img { .preview-image-box img {
max-width: 100%; max-width: 100%;
padding: 12px; padding: 12px;
background: @body-background; background: var(--body-background);
border-radius: @border-radius-base; border-radius: var(--border-radius-base);
cursor: pointer; cursor: pointer;
transition: all 0.3s; transition: all 0.3s;
&.no-padding { &.no-padding {
@ -118,8 +118,8 @@
.preview-image-boxes.preview-image-boxes-with-carousel img { .preview-image-boxes.preview-image-boxes-with-carousel img {
padding: 0; padding: 0;
box-shadow: 0 1px 0 0 #ddd, 0 3px 0 0 @body-background, 0 4px 0 0 #ddd, 0 6px 0 0 @body-background, box-shadow: 0 1px 0 0 #ddd, 0 3px 0 0 var(--body-background), 0 4px 0 0 #ddd,
0 7px 0 0 #ddd; 0 6px 0 0 var(--body-background), 0 7px 0 0 #ddd;
} }
.preview-image-box img:hover { .preview-image-box img:hover {

49
site/src/theme/static/reset.css Normal file
View File

@ -0,0 +1,49 @@
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td,
hr,
button,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
margin: 0;
padding: 0;
}
ul,
ol {
list-style: none;
}
img {
vertical-align: middle;
border-style: none;
}

8
site/src/theme/static/resource.less
View File

@ -10,8 +10,8 @@
width: ~'calc(50% - 24px)'; width: ~'calc(50% - 24px)';
min-width: 400px; min-width: 400px;
height: 130px; height: 130px;
border: 1px solid @border-color-base; border: 1px solid var(--border-color-base);
border-radius: @border-radius-base; border-radius: var(--border-radius-base);
font-size: 12px; font-size: 12px;
color: #777; color: #777;
margin: 24px 24px 0 0; margin: 24px 24px 0 0;
@ -27,7 +27,7 @@
} }
.resource-card:hover .resource-card-title { .resource-card:hover .resource-card-title {
color: @primary-color; color: var(--primary-color);
} }
.resource-card.disabled { .resource-card.disabled {
@ -57,7 +57,7 @@
.resource-card-title { .resource-card-title {
display: block; display: block;
font-size: 16px; font-size: 16px;
color: @site-text-color; color: var(--site-text-color);
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;

12
site/src/theme/static/responsive.less
View File

@ -9,7 +9,7 @@
cursor: pointer; cursor: pointer;
} }
@media only screen and (max-width: @screen-lg) { @media only screen and (max-width: var(--screen-lg)) {
.toc-affix { .toc-affix {
display: none; display: none;
} }
@ -147,7 +147,7 @@
display: none; display: none;
} }
p { p {
color: @home-text-color; color: #314659;
font-size: 14px; font-size: 14px;
line-height: 28px; line-height: 28px;
} }
@ -189,7 +189,7 @@
} }
.page2 { .page2 {
min-height: 840px; min-height: 840px;
background: @body-background; background: var(--body-background);
&-content { &-content {
box-shadow: none; box-shadow: none;
} }
@ -202,7 +202,7 @@
.product-block { .product-block {
margin-bottom: 34px; margin-bottom: 34px;
padding-bottom: 35px; padding-bottom: 35px;
border-bottom: 1px solid @site-border-color-split; border-bottom: 1px solid var(--site-border-color-split);
&:last-child { &:last-child {
margin-bottom: 32px; margin-bottom: 32px;
border-bottom: none; border-bottom: none;
@ -242,7 +242,7 @@
a.more-mobile-react, a.more-mobile-react,
a.more-mobile-angular { a.more-mobile-angular {
margin-top: 0; margin-top: 0;
color: @link-color; color: var(--link-color);
} }
a.more-mobile-react:hover, a.more-mobile-react:hover,
a.more-mobile-angular:hover { a.more-mobile-angular:hover {
@ -262,7 +262,7 @@
.page3-block { .page3-block {
margin-bottom: 32px; margin-bottom: 32px;
padding: 24px; padding: 24px;
background: @body-background; background: var(--body-background);
border-radius: 4px; border-radius: 4px;
box-shadow: 0 8px 16px rgba(174, 185, 193, 0.3); box-shadow: 0 8px 16px rgba(174, 185, 193, 0.3);
&:nth-child(2) { &:nth-child(2) {

10
site/src/theme/static/theme.less
View File

@ -1,10 +0,0 @@
@import './home.less';
@input-icon-hover-color: rgba(0, 0, 0, 0.85);
@site-heading-color: @heading-color;
@site-text-color: @heading-color;
@site-text-color-secondary: @text-color-secondary;
@site-border-color-split: @border-color-split;
@site-header-box-shadow: 0 2px 8px rgba(240, 241, 242, 65);
@site-markdown-code-bg: #f2f4f5;

16
site/src/theme/static/toc.less
View File

@ -3,10 +3,10 @@
padding-left: 0; padding-left: 0;
font-size: 12px; font-size: 12px;
list-style: none; list-style: none;
border-left: 1px solid @site-border-color-split; border-left: 1px solid var(--site-border-color-split);
.ant-row-rtl & { .ant-row-rtl & {
border-right: 1px solid @site-border-color-split; border-right: 1px solid var(--site-border-color-split);
border-left: none; border-left: none;
} }
} }
@ -26,7 +26,7 @@ ul.toc > li {
} }
&.toc-debug a { &.toc-debug a {
color: @purple-6; color: var(--purple-6);
} }
} }
@ -42,7 +42,7 @@ ul.toc > li {
margin-left: -1px; margin-left: -1px;
padding-left: 16px; padding-left: 16px;
overflow: hidden; overflow: hidden;
color: @site-text-color; color: var(--site-text-color);
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
border-left: 1px solid transparent; border-left: 1px solid transparent;
@ -59,12 +59,12 @@ ul.toc > li {
} }
.toc a:hover { .toc a:hover {
color: @primary-color; color: var(--primary-color);
} }
.toc a.current { .toc a.current {
color: @primary-color; color: var(--primary-color);
border-color: @primary-color; border-color: var(--primary-color);
} }
.toc-affix { .toc-affix {
@ -98,7 +98,7 @@ ul.toc > li {
right: 20px; right: 20px;
bottom: 88px; bottom: 88px;
.ant-affix { .ant-affix {
background: @body-background; background: var(--body-background);
} }
.ant-row-rtl & { .ant-row-rtl & {
right: auto; right: auto;

45
site/src/theme/static/var.less Normal file
View File

@ -0,0 +1,45 @@
:root {
--header-height: 64px;
--menu-item-border: 2px;
--mobile-max-width: 767.99px;
--primary-color: #1890ff;
--component-background: #fff;
--body-background: #fff;
--site-text-color: #000;
--demo-grid-color: #000;
--demo-grid-color-65: #000;
--demo-grid-color-75: #000;
--layout-body-background: #000;
--site-text-color-secondary: #000;
--site-border-color-split: #000;
--border-radius-base: #000;
--font-size-base: 12px;
--font-size-max: 12px;
// --font-family: '';
// --code-family: '';
// --border-color-base: #fff;
// --purple-3: ''
// --purple-6: ''
// --text-color: ''
// --search-icon-color: ''
// --ease-in-out-circ: ''
// --shadow-2: ''
// --link-color: ''
// --error-color: ''
// --white: #fff
// --green-6: ''
// --gray-8: ''
// --magenta-7: ''
// --line-height-base: 1.2;
// --screen-md-min: 679px;
// --screen-sm-min: 679px;
// --screen-lg: 1400px;
// --mobile-max-width: 679px;
// --box-shadow-base: ''
// --padding-space: ''
// --animation-duration-base: .3s;
// --ease-in-out: ''
// --shadow-1-down: ''
}

6
site/src/views/ComponentOverview.less
View File

@ -7,7 +7,7 @@
&-title { &-title {
overflow: hidden; overflow: hidden;
color: @text-color; color: var(--text-color);
text-overflow: ellipsis; text-overflow: ellipsis;
} }
&-img { &-img {
@ -18,9 +18,9 @@
} }
&-card { &-card {
cursor: pointer; cursor: pointer;
transition: all @animation-duration-base @ease-in-out; transition: all var(--animation-duration-base) var(--ease-in-out);
&:hover { &:hover {
box-shadow: @shadow-1-down; box-shadow: var(--shadow-1-down);
} }
} }
} }