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 { default as version } from './version';
export * from './components';
export { default as theme } from './theme';
export const install = function (app: App) {
Object.keys(components).forEach(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 { useI18n } from 'vue-i18n';
import useMediaQuery from './hooks/useMediaQuery';
import useSiteToken from './hooks/useSiteToken';
import { GLOBAL_CONFIG } from './SymbolKey';
import enUS from '../../components/locale/en_US';
import zhCN from '../../components/locale/zh_CN';
@ -27,6 +28,7 @@ export interface GlobalConfig {
}
export default defineComponent({
setup() {
useSiteToken();
const route = useRoute();
const i18n = useI18n();
const colSize = useMediaQuery();

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

@ -37,7 +37,8 @@ export default defineComponent({
.wrap {
display: flex;
background-color: #f4f8fa;
padding: 10px 30px;
padding: 0px 30px;
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
@ -45,6 +46,7 @@ export default defineComponent({
width: 100%;
height: 100px;
overflow: hidden;
align-items: center;
}
.placeholder {
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';
#logo {
height: @header-height;
height: var(--header-height);
padding-left: 40px;
overflow: hidden;
color: @site-heading-color;
color: var(--site-text-color);
font-size: 18px;
font-family: Avenir, @font-family, sans-serif;
line-height: @header-height;
line-height: var(--header-height);
white-space: nowrap;
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 {
padding-right: 0;
padding-left: 0;

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

@ -130,7 +130,6 @@ export default defineComponent({
#nav {
height: 100%;
font-size: 14px;
font-family: Avenir, @font-family, sans-serif;
border: 0;
&.ant-menu-horizontal {
@ -139,17 +138,17 @@ export default defineComponent({
& > .ant-menu-item,
& > .ant-menu-submenu {
min-width: (40px + 12px * 2);
height: @header-height;
height: var(--header-height);
padding-right: 12px;
padding-left: 12px;
line-height: @header-height;
line-height: var(--header-height);
&::after {
top: 0;
right: 12px;
bottom: auto;
left: 12px;
border-width: @menu-item-border;
border-width: var(--menu-item-border);
}
}
@ -159,7 +158,7 @@ export default defineComponent({
& > .ant-menu-item-selected {
a {
color: @primary-color;
color: var(--primary-color);
}
}
}
@ -171,11 +170,11 @@ export default defineComponent({
}
.header-link {
color: @site-text-color;
color: var(--site-text-color);
}
.ant-menu-item-active .header-link {
color: @primary-color;
color: var(--primary-color);
}
// 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 {
position: relative;
display: flex;
@ -10,14 +8,14 @@
padding-left: 16px;
line-height: 22px;
white-space: nowrap;
border-left: 1px solid @site-border-color-split;
border-left: 1px solid var(--site-border-color-split);
transition: width 0.5s;
.ant-row-rtl & {
margin: 0 0 0 auto !important;
padding-right: 16px;
padding-left: 0;
border-right: 1px solid @site-border-color-split;
border-right: 1px solid var(--site-border-color-split);
border-left: none;
}
@ -30,7 +28,7 @@
top: 50%;
z-index: 1;
flex: none;
color: @search-icon-color;
color: var(--search-icon-color);
transform: translateY(-50%);
pointer-events: none;
}
@ -91,7 +89,7 @@
width: 500px;
.anticon {
color: @search-icon-color;
color: var(--search-icon-color);
}
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 {
display: none;
}

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

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

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

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

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

@ -12,19 +12,19 @@
display: inline-block;
width: 100%;
margin: 0 0 16px;
border: 1px solid @site-border-color-split;
border-radius: @border-radius-base;
border: 1px solid var(--site-border-color-split);
border-radius: var(--border-radius-base);
transition: all 0.2s;
.code-box-title {
&,
a {
color: @site-text-color;
background: @component-background;
color: var(--site-text-color);
background: var(--component-background);
}
}
&,
.code-box-demo {
background-color: @component-background;
background-color: var(--component-background);
}
.markdown {
pre {
@ -37,7 +37,7 @@
}
}
&:target {
border: 1px solid @primary-color;
border: 1px solid var(--primary-color);
}
&-expand-trigger {
@ -65,21 +65,21 @@
margin-left: 16px;
padding: 1px 8px;
color: #777;
background: @body-background;
border-radius: @border-radius-base @border-radius-base 0 0;
background: var(--body-background);
border-radius: var(--border-radius-base) var(--border-radius-base) 0 0;
transition: background-color 0.4s;
.ant-row-rtl & {
margin-right: 16px;
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:hover {
color: @site-text-color;
color: var(--site-text-color);
font-weight: 500;
font-size: @font-size-base;
font-size: var(--font-size-base);
}
}
@ -98,10 +98,10 @@
transform: scale(0.9);
.anticon {
color: @site-text-color-secondary;
color: var(--site-text-color-secondary);
transition: all 0.3s;
&:hover {
color: @site-text-color;
color: var(--site-text-color);
}
}
@ -116,8 +116,8 @@
&-demo {
padding: 42px 24px 50px;
color: @site-text-color;
border-bottom: 1px solid @site-border-color-split;
color: var(--site-text-color);
border-bottom: 1px solid var(--site-border-color-split);
}
iframe {
@ -129,8 +129,8 @@
&.markdown {
position: relative;
width: 100%;
font-size: @font-size-base;
border-radius: 0 0 @border-radius-base @border-radius-base;
font-size: var(--font-size-base);
border-radius: 0 0 var(--border-radius-base) var(--border-radius-base);
transition: background-color 0.4s;
}
@ -158,7 +158,7 @@
}
&.expand &-meta {
border-bottom: 1px dashed @site-border-color-split;
border-bottom: 1px dashed var(--site-border-color-split);
border-radius: 0;
}
@ -204,7 +204,7 @@
.highlight-wrapper {
display: none;
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 {
display: block;
@ -221,10 +221,10 @@
pre {
margin: 0;
padding: 0;
background: @component-background;
background: var(--component-background);
}
&: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;
justify-content: center;
padding: 12px 0;
border-top: 1px dashed @site-border-color-split;
border-top: 1px dashed var(--site-border-color-split);
opacity: 0.7;
transition: opacity 0.3s;
@ -248,7 +248,7 @@
width: 16px;
height: 16px;
margin-left: 16px;
color: @site-text-color-secondary;
color: var(--site-text-color-secondary);
cursor: pointer;
transition: all 0.24s;
@ -266,7 +266,7 @@
}
&:hover {
color: @site-text-color;
color: var(--site-text-color);
}
}
@ -275,7 +275,7 @@
height: 14px;
font-size: 14px;
text-align: center;
background: @component-background;
background: var(--component-background);
cursor: pointer;
transition: transform 0.24s;
@ -283,7 +283,7 @@
transform: scale(1.2);
}
&.anticon-check {
color: @green-6 !important;
color: var(--green-6) !important;
font-weight: bold;
}
}
@ -326,17 +326,17 @@
width: auto;
margin: 0;
code {
background: @component-background;
background: var(--component-background);
border: none;
}
}
&-debug {
border-color: @purple-3;
border-color: var(--purple-3);
}
&-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 {
.ds-dropdown-menu {
border: none;
box-shadow: @box-shadow-base;
box-shadow: var(--box-shadow-base);
[class^='ds-dataset-'] {
background: @component-background;
background: var(--component-background);
border: none;
.algolia-docsearch-suggestion {
background: @component-background;
background: var(--component-background);
}
}
@ -17,10 +17,10 @@
}
.algolia-docsearch-suggestion--title {
color: @site-text-color;
color: var(--site-text-color);
}
.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 {
position: relative;
padding: 86px @padding-space 93px @padding-space;
padding: 86px 144px 93px 144px;
border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
.bottom-bar {
text-align: center;
padding: 16px @padding-space;
padding: 16px 144px;
margin: 0;
line-height: 32px;
overflow: hidden;
font-family: Avenir, @font-family;
font-size: 16px;
font-variant: tabular-nums;
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 {
.ant-row {
.ant-col {

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

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

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

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

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

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

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

@ -69,7 +69,7 @@
display: block;
width: 100%;
height: 3px;
background: @primary-color;
background: var(--primary-color);
content: '';
}
@ -80,19 +80,19 @@
display: block;
width: 100%;
height: 3px;
background: @error-color;
background: var(--error-color);
content: '';
}
.preview-image-title {
margin-top: 20px;
color: @site-text-color;
color: var(--site-text-color);
font-size: 12px;
}
.preview-image-description {
margin-top: 2px;
color: @site-text-color-secondary;
color: var(--site-text-color-secondary);
font-size: 12px;
line-height: 1.5;
}
@ -106,8 +106,8 @@
.preview-image-box img {
max-width: 100%;
padding: 12px;
background: @body-background;
border-radius: @border-radius-base;
background: var(--body-background);
border-radius: var(--border-radius-base);
cursor: pointer;
transition: all 0.3s;
&.no-padding {
@ -118,8 +118,8 @@
.preview-image-boxes.preview-image-boxes-with-carousel img {
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,
0 7px 0 0 #ddd;
box-shadow: 0 1px 0 0 #ddd, 0 3px 0 0 var(--body-background), 0 4px 0 0 #ddd,
0 6px 0 0 var(--body-background), 0 7px 0 0 #ddd;
}
.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)';
min-width: 400px;
height: 130px;
border: 1px solid @border-color-base;
border-radius: @border-radius-base;
border: 1px solid var(--border-color-base);
border-radius: var(--border-radius-base);
font-size: 12px;
color: #777;
margin: 24px 24px 0 0;
@ -27,7 +27,7 @@
}
.resource-card:hover .resource-card-title {
color: @primary-color;
color: var(--primary-color);
}
.resource-card.disabled {
@ -57,7 +57,7 @@
.resource-card-title {
display: block;
font-size: 16px;
color: @site-text-color;
color: var(--site-text-color);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

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

@ -9,7 +9,7 @@
cursor: pointer;
}
@media only screen and (max-width: @screen-lg) {
@media only screen and (max-width: var(--screen-lg)) {
.toc-affix {
display: none;
}
@ -147,7 +147,7 @@
display: none;
}
p {
color: @home-text-color;
color: #314659;
font-size: 14px;
line-height: 28px;
}
@ -189,7 +189,7 @@
}
.page2 {
min-height: 840px;
background: @body-background;
background: var(--body-background);
&-content {
box-shadow: none;
}
@ -202,7 +202,7 @@
.product-block {
margin-bottom: 34px;
padding-bottom: 35px;
border-bottom: 1px solid @site-border-color-split;
border-bottom: 1px solid var(--site-border-color-split);
&:last-child {
margin-bottom: 32px;
border-bottom: none;
@ -242,7 +242,7 @@
a.more-mobile-react,
a.more-mobile-angular {
margin-top: 0;
color: @link-color;
color: var(--link-color);
}
a.more-mobile-react:hover,
a.more-mobile-angular:hover {
@ -262,7 +262,7 @@
.page3-block {
margin-bottom: 32px;
padding: 24px;
background: @body-background;
background: var(--body-background);
border-radius: 4px;
box-shadow: 0 8px 16px rgba(174, 185, 193, 0.3);
&: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;
font-size: 12px;
list-style: none;
border-left: 1px solid @site-border-color-split;
border-left: 1px solid var(--site-border-color-split);
.ant-row-rtl & {
border-right: 1px solid @site-border-color-split;
border-right: 1px solid var(--site-border-color-split);
border-left: none;
}
}
@ -26,7 +26,7 @@ ul.toc > li {
}
&.toc-debug a {
color: @purple-6;
color: var(--purple-6);
}
}
@ -42,7 +42,7 @@ ul.toc > li {
margin-left: -1px;
padding-left: 16px;
overflow: hidden;
color: @site-text-color;
color: var(--site-text-color);
white-space: nowrap;
text-overflow: ellipsis;
border-left: 1px solid transparent;
@ -59,12 +59,12 @@ ul.toc > li {
}
.toc a:hover {
color: @primary-color;
color: var(--primary-color);
}
.toc a.current {
color: @primary-color;
border-color: @primary-color;
color: var(--primary-color);
border-color: var(--primary-color);
}
.toc-affix {
@ -98,7 +98,7 @@ ul.toc > li {
right: 20px;
bottom: 88px;
.ant-affix {
background: @body-background;
background: var(--body-background);
}
.ant-row-rtl & {
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 {
overflow: hidden;
color: @text-color;
color: var(--text-color);
text-overflow: ellipsis;
}
&-img {
@ -18,9 +18,9 @@
}
&-card {
cursor: pointer;
transition: all @animation-duration-base @ease-in-out;
transition: all var(--animation-duration-base) var(--ease-in-out);
&:hover {
box-shadow: @shadow-1-down;
box-shadow: var(--shadow-1-down);
}
}
}