update site
tangjinzhou
parent
a70ea799fa
commit
71db98cf63
|
|
@ -61,6 +61,7 @@ typings/
|
||||||
dist
|
dist
|
||||||
lib
|
lib
|
||||||
es
|
es
|
||||||
|
site-dist
|
||||||
|
|
||||||
# 备份文件
|
# 备份文件
|
||||||
/components/test/*
|
/components/test/*
|
||||||
|
|
|
||||||
|
|
@ -7649,6 +7649,11 @@
|
||||||
"integrity": "sha1-bghLvJIGH7sJcexYts5tQE4k2mk=",
|
"integrity": "sha1-bghLvJIGH7sJcexYts5tQE4k2mk=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"is-negative-zero": {
|
||||||
|
"version": "2.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.0.tgz",
|
||||||
|
"integrity": "sha1-lVOxIbD6wohp2p7UWeIMdUN4hGE="
|
||||||
|
},
|
||||||
"is-number": {
|
"is-number": {
|
||||||
"version": "2.1.0",
|
"version": "2.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/is-number/-/is-number-2.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/is-number/-/is-number-2.1.0.tgz",
|
||||||
|
|
@ -8162,7 +8167,6 @@
|
||||||
"resolved": "https://registry.npmjs.org/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz",
|
||||||
"integrity": "sha1-mnWdOcXy/1A/1TAGRu1EX4jE+a8=",
|
"integrity": "sha1-mnWdOcXy/1A/1TAGRu1EX4jE+a8=",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"optional": true,
|
|
||||||
"requires": {
|
"requires": {
|
||||||
"jsonify": "0.0.0"
|
"jsonify": "0.0.0"
|
||||||
}
|
}
|
||||||
|
|
@ -8204,8 +8208,7 @@
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.0.tgz",
|
||||||
"integrity": "sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM=",
|
"integrity": "sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM=",
|
||||||
"dev": true,
|
"dev": true
|
||||||
"optional": true
|
|
||||||
},
|
},
|
||||||
"jsonp": {
|
"jsonp": {
|
||||||
"version": "0.2.1",
|
"version": "0.2.1",
|
||||||
|
|
@ -9805,8 +9808,7 @@
|
||||||
"version": "1.4.4",
|
"version": "1.4.4",
|
||||||
"resolved": "https://registry.npmjs.org/nwmatcher/-/nwmatcher-1.4.4.tgz",
|
"resolved": "https://registry.npmjs.org/nwmatcher/-/nwmatcher-1.4.4.tgz",
|
||||||
"integrity": "sha512-3iuY4N5dhgMpCUrOVnuAdGrgxVqV2cJpM+XNccjR2DKOB1RUP0aA+wGXEiNziG/UKboFyGBIoKOaNlJxx8bciQ==",
|
"integrity": "sha512-3iuY4N5dhgMpCUrOVnuAdGrgxVqV2cJpM+XNccjR2DKOB1RUP0aA+wGXEiNziG/UKboFyGBIoKOaNlJxx8bciQ==",
|
||||||
"dev": true,
|
"dev": true
|
||||||
"optional": true
|
|
||||||
},
|
},
|
||||||
"oauth-sign": {
|
"oauth-sign": {
|
||||||
"version": "0.8.2",
|
"version": "0.8.2",
|
||||||
|
|
@ -13680,7 +13682,6 @@
|
||||||
"resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
|
"resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
|
||||||
"integrity": "sha1-BktyYCsY+Q8pGSuLG8QY/9Hr078=",
|
"integrity": "sha1-BktyYCsY+Q8pGSuLG8QY/9Hr078=",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"optional": true,
|
|
||||||
"requires": {
|
"requires": {
|
||||||
"asap": "2.0.6"
|
"asap": "2.0.6"
|
||||||
}
|
}
|
||||||
|
|
@ -16393,8 +16394,7 @@
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz",
|
||||||
"integrity": "sha1-bgkk1r2mta/jSeOabWMoUKD4grc=",
|
"integrity": "sha1-bgkk1r2mta/jSeOabWMoUKD4grc=",
|
||||||
"dev": true,
|
"dev": true
|
||||||
"optional": true
|
|
||||||
},
|
},
|
||||||
"uglifyjs-webpack-plugin": {
|
"uglifyjs-webpack-plugin": {
|
||||||
"version": "0.4.6",
|
"version": "0.4.6",
|
||||||
|
|
|
||||||
|
|
@ -24,7 +24,8 @@
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "NODE_ENV=development ./node_modules/.bin/webpack-dev-server --open --hot",
|
"start": "NODE_ENV=development ./node_modules/.bin/webpack-dev-server --open --hot",
|
||||||
"test": "karma start test/karma.conf.js --single-run",
|
"test": "karma start test/karma.conf.js --single-run",
|
||||||
"build": "sh build.sh",
|
"site": "node scripts/run.js site-dist",
|
||||||
|
"copy": "node scripts/run.js copy-html",
|
||||||
"compile": "node antd-tools/cli/run.js compile",
|
"compile": "node antd-tools/cli/run.js compile",
|
||||||
"dist": "node antd-tools/cli/run.js dist",
|
"dist": "node antd-tools/cli/run.js dist",
|
||||||
"lint": "eslint -c ./.eslintrc --fix --ext .jsx ./components",
|
"lint": "eslint -c ./.eslintrc --fix --ext .jsx ./components",
|
||||||
|
|
@ -100,6 +101,7 @@
|
||||||
"markdown-it": "^8.4.0",
|
"markdown-it": "^8.4.0",
|
||||||
"marked": "^0.3.7",
|
"marked": "^0.3.7",
|
||||||
"merge2": "^1.2.1",
|
"merge2": "^1.2.1",
|
||||||
|
"mkdirp": "^0.5.1",
|
||||||
"mocha": "^3.2.0",
|
"mocha": "^3.2.0",
|
||||||
"postcss": "^6.0.20",
|
"postcss": "^6.0.20",
|
||||||
"postcss-loader": "^2.1.2",
|
"postcss-loader": "^2.1.2",
|
||||||
|
|
|
||||||
|
|
@ -6,15 +6,15 @@ if [[ $TRAVIS_BRANCH == "master" && $TRAVIS_PULL_REQUEST == "false" ]]; then
|
||||||
|
|
||||||
echo "Starting to update gh-pages\n"
|
echo "Starting to update gh-pages\n"
|
||||||
|
|
||||||
rm -rf dist
|
rm -rf site-dist
|
||||||
mkdir dist
|
mkdir site-dist
|
||||||
|
|
||||||
git config --global user.email "travis@travis-ci.org"
|
git config --global user.email "travis@travis-ci.org"
|
||||||
git config --global user.name "Travis"
|
git config --global user.name "Travis"
|
||||||
|
|
||||||
./node_modules/.bin/webpack --config webpack.site.config.js
|
npm run site
|
||||||
|
|
||||||
cd dist
|
cd site-dist
|
||||||
git init
|
git init
|
||||||
git add -f .
|
git add -f .
|
||||||
git commit -m "Travis build"
|
git commit -m "Travis build"
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,80 @@
|
||||||
|
'use strict'
|
||||||
|
const webpack = require('webpack')
|
||||||
|
|
||||||
|
const path = require('path')
|
||||||
|
const gulp = require('gulp')
|
||||||
|
const readline = require('readline')
|
||||||
|
const fs = require('fs')
|
||||||
|
|
||||||
|
const rimraf = require('rimraf')
|
||||||
|
const mkdirp = require('mkdirp')
|
||||||
|
|
||||||
|
const cwd = process.cwd()
|
||||||
|
|
||||||
|
function dist (done) {
|
||||||
|
rimraf.sync(path.join(cwd, 'site-dist'))
|
||||||
|
process.env.RUN_ENV = 'PRODUCTION'
|
||||||
|
const webpackConfig = require(path.join(cwd, 'webpack.site.config.js'))
|
||||||
|
webpack(webpackConfig, (err, stats) => {
|
||||||
|
if (err) {
|
||||||
|
console.error(err.stack || err)
|
||||||
|
if (err.details) {
|
||||||
|
console.error(err.details)
|
||||||
|
}
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const info = stats.toJson()
|
||||||
|
|
||||||
|
if (stats.hasErrors()) {
|
||||||
|
console.error(info.errors)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (stats.hasWarnings()) {
|
||||||
|
console.warn(info.warnings)
|
||||||
|
}
|
||||||
|
|
||||||
|
const buildInfo = stats.toString({
|
||||||
|
colors: true,
|
||||||
|
children: true,
|
||||||
|
chunks: false,
|
||||||
|
modules: false,
|
||||||
|
chunkModules: false,
|
||||||
|
hash: false,
|
||||||
|
version: false,
|
||||||
|
})
|
||||||
|
console.log(buildInfo)
|
||||||
|
done(0)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function copyHtml () {
|
||||||
|
const rl = readline.createInterface({
|
||||||
|
input: fs.createReadStream(path.join(cwd, 'site/demo.js')),
|
||||||
|
})
|
||||||
|
|
||||||
|
rl.on('line', (line) => {
|
||||||
|
const name = line.split('antd/')[1].split('/')[0]
|
||||||
|
console.log('create path:', name)
|
||||||
|
const toPath1 = `site-dist/components/${name}`
|
||||||
|
const toPath2 = `site-dist/components/${name}-cn`
|
||||||
|
rimraf.sync(path.join(cwd, toPath1))
|
||||||
|
rimraf.sync(path.join(cwd, toPath2))
|
||||||
|
mkdirp(path.join(cwd, toPath1), function () {
|
||||||
|
fs.writeFileSync(path.join(cwd, `${toPath1}/index.html`), fs.readFileSync(path.join(cwd, 'site-dist/index.html')))
|
||||||
|
})
|
||||||
|
mkdirp(path.join(cwd, toPath2), function () {
|
||||||
|
fs.writeFileSync(path.join(cwd, `${toPath2}/index.html`), fs.readFileSync(path.join(cwd, 'site-dist/index.html')))
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
gulp.task('site-dist', (done) => {
|
||||||
|
dist(() => {
|
||||||
|
copyHtml()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
gulp.task('copy-html', () => {
|
||||||
|
copyHtml()
|
||||||
|
})
|
||||||
|
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
#!/usr/bin/env node
|
||||||
|
|
||||||
|
'use strict'
|
||||||
|
|
||||||
|
require('colorful').colorful()
|
||||||
|
const gulp = require('gulp')
|
||||||
|
const program = require('commander')
|
||||||
|
|
||||||
|
program.on('--help', () => {
|
||||||
|
console.log(' Usage:'.to.bold.blue.color)
|
||||||
|
console.log()
|
||||||
|
})
|
||||||
|
|
||||||
|
program.parse(process.argv)
|
||||||
|
|
||||||
|
const task = program.args[0]
|
||||||
|
|
||||||
|
if (!task) {
|
||||||
|
program.help()
|
||||||
|
} else {
|
||||||
|
console.log('scripts run', task)
|
||||||
|
|
||||||
|
require('./gulpfile')
|
||||||
|
|
||||||
|
gulp.start(task)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,37 @@
|
||||||
|
<template>
|
||||||
|
<li :class="justCopied ? 'copied' : ''" v-clipboard:copy="text"
|
||||||
|
v-clipboard:success="onCopied">
|
||||||
|
<a-icon :type="type" />
|
||||||
|
<span class='anticon-class'>
|
||||||
|
<a-badge :dot="isNew">
|
||||||
|
{{type}}
|
||||||
|
</a-badge>
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import BaseMixin from 'antd/_util/BaseMixin'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
mixins: [BaseMixin],
|
||||||
|
props: {
|
||||||
|
type: String,
|
||||||
|
isNew: Boolean,
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
justCopied: false,
|
||||||
|
text: `<a-icon type="${this.type}" />`,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onCopied () {
|
||||||
|
this.setState({ justCopied: true }, () => {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.setState({ justCopied: false })
|
||||||
|
}, 2000)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,40 @@
|
||||||
|
<script>
|
||||||
|
import CopyableIcon from './CopyableIcon'
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
catigory: String,
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
icons: {
|
||||||
|
direction: ['step-backward', 'step-forward', 'fast-backward', 'fast-forward', 'shrink', 'arrows-alt', 'down', 'up', 'left', 'right', 'caret-up', 'caret-down', 'caret-left', 'caret-right', 'up-circle', 'down-circle', 'left-circle', 'right-circle', 'up-circle-o', 'down-circle-o', 'right-circle-o', 'left-circle-o', 'double-right', 'double-left', 'verticle-left', 'verticle-right', 'forward', 'backward', 'rollback', 'enter', 'retweet', 'swap', 'swap-left', 'swap-right', 'arrow-up', 'arrow-down', 'arrow-left', 'arrow-right', 'play-circle', 'play-circle-o', 'up-square', 'down-square', 'left-square', 'right-square', 'up-square-o', 'down-square-o', 'left-square-o', 'right-square-o', 'login', 'logout', 'menu-fold', 'menu-unfold'],
|
||||||
|
suggestion: ['question', 'question-circle-o', 'question-circle', 'plus', 'plus-circle-o', 'plus-circle', 'pause', 'pause-circle-o', 'pause-circle', 'minus', 'minus-circle-o', 'minus-circle', 'plus-square', 'plus-square-o', 'minus-square', 'minus-square-o', 'info', 'info-circle-o', 'info-circle', 'exclamation', 'exclamation-circle-o', 'exclamation-circle', 'close', 'close-circle', 'close-circle-o', 'close-square', 'close-square-o', 'check', 'check-circle', 'check-circle-o', 'check-square', 'check-square-o', 'clock-circle-o', 'clock-circle', 'warning'],
|
||||||
|
logo: [
|
||||||
|
'android', 'android-o', 'apple', 'apple-o', 'windows', 'windows-o', 'ie', 'chrome', 'github', 'aliwangwang', 'aliwangwang-o', 'dingding', 'dingding-o',
|
||||||
|
'weibo-square', 'weibo-circle', 'taobao-circle', 'html5', 'weibo', 'twitter', 'wechat', 'youtube', 'alipay-circle', 'taobao', 'skype', 'qq', 'medium-workmark', 'gitlab', 'medium', 'linkedin', 'google-plus',
|
||||||
|
'dropbox', 'facebook', 'codepen', 'amazon', 'google', 'codepen-circle', 'alipay', 'ant-design', 'aliyun',
|
||||||
|
],
|
||||||
|
other: ['lock', 'unlock', 'area-chart', 'pie-chart', 'bar-chart', 'dot-chart', 'bars', 'book', 'calendar', 'cloud', 'cloud-download', 'code', 'code-o', 'copy', 'credit-card', 'delete', 'desktop', 'download', 'edit', 'ellipsis', 'file', 'file-text', 'file-unknown', 'file-pdf', 'file-word', 'file-excel', 'file-jpg', 'file-ppt', 'file-add', 'folder', 'folder-open', 'folder-add', 'hdd', 'frown', 'frown-o', 'meh', 'meh-o', 'smile', 'smile-o', 'inbox', 'laptop', 'appstore-o', 'appstore', 'line-chart', 'link', 'mail', 'mobile', 'notification', 'paper-clip', 'picture', 'poweroff', 'reload', 'search', 'setting', 'share-alt', 'shopping-cart', 'tablet', 'tag', 'tag-o', 'tags', 'tags-o', 'to-top', 'upload', 'user', 'video-camera', 'home', 'loading', 'loading-3-quarters', 'cloud-upload-o', 'cloud-download-o', 'cloud-upload', 'cloud-o', 'star-o', 'star', 'heart-o', 'heart', 'environment', 'environment-o', 'eye', 'eye-o', 'camera', 'camera-o', 'save', 'team', 'solution', 'phone', 'filter', 'exception', 'export', 'customer-service', 'qrcode', 'scan', 'like', 'like-o', 'dislike', 'dislike-o', 'message', 'pay-circle', 'pay-circle-o', 'calculator', 'pushpin', 'pushpin-o', 'bulb', 'select', 'switcher', 'rocket', 'bell', 'disconnect', 'database', 'compass', 'barcode', 'hourglass', 'key', 'flag', 'layout', 'printer', 'sound', 'usb', 'skin', 'tool', 'sync', 'wifi', 'car', 'schedule', 'user-add', 'user-delete', 'usergroup-add', 'usergroup-delete', 'man', 'woman', 'shop', 'gift', 'idcard', 'medicine-box', 'red-envelope', 'coffee', 'copyright', 'trademark', 'safety', 'wallet', 'bank', 'trophy', 'contacts', 'global', 'shake', 'api', 'fork', 'dashboard', 'form', 'table', 'profile'],
|
||||||
|
},
|
||||||
|
newIcons: [
|
||||||
|
'aliyun',
|
||||||
|
],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
render () {
|
||||||
|
const { catigory } = this.$props
|
||||||
|
const listClassName = {
|
||||||
|
'anticons-list': true,
|
||||||
|
clearfix: true,
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<ul class={listClassName}>
|
||||||
|
{this.icons[catigory].map(type => (
|
||||||
|
<CopyableIcon key={type} type={type} isNew={this.newIcons.indexOf(type) >= 0} />
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
<template>
|
||||||
|
<div class='markdown api-container'>
|
||||||
|
<slot v-if="isZhCN" name="cn"></slot>
|
||||||
|
<slot v-else></slot>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { isZhCN } from '../util'
|
||||||
|
export default {
|
||||||
|
name: 'api',
|
||||||
|
data () {
|
||||||
|
const { name } = this.$route.params
|
||||||
|
return {
|
||||||
|
isZhCN: isZhCN(name),
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,83 @@
|
||||||
|
<script>
|
||||||
|
import * as AllDemo from '../demo'
|
||||||
|
import Header from './header'
|
||||||
|
import zhCN from 'antd/locale-provider/zh_CN'
|
||||||
|
import enUS from 'antd/locale-provider/default'
|
||||||
|
import _ from 'lodash'
|
||||||
|
import { isZhCN } from '../util'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
render () {
|
||||||
|
let { name } = this.$route.params
|
||||||
|
const lang = isZhCN(name) ? 'cn' : 'us'
|
||||||
|
name = name.replace('-cn', '')
|
||||||
|
const titleMap = {}
|
||||||
|
const menuConfig = {
|
||||||
|
General: [],
|
||||||
|
Layout: [],
|
||||||
|
Navigation: [],
|
||||||
|
'Data Entry': [],
|
||||||
|
'Data Display': [],
|
||||||
|
Feedback: [],
|
||||||
|
Other: [],
|
||||||
|
}
|
||||||
|
for (const [title, d] of Object.entries(AllDemo)) {
|
||||||
|
const type = d.type || 'Other'
|
||||||
|
const key = `${title.replace(/(\B[A-Z])/g, '-$1').toLowerCase()}`
|
||||||
|
titleMap[key] = title
|
||||||
|
menuConfig[type] = menuConfig[type] || []
|
||||||
|
menuConfig[type].push(d)
|
||||||
|
}
|
||||||
|
const Demo = AllDemo[titleMap[name]]
|
||||||
|
const MenuGroup = []
|
||||||
|
for (const [type, menus] of Object.entries(menuConfig)) {
|
||||||
|
const MenuItems = []
|
||||||
|
_.sortBy(menus, ['title']).forEach(({ title, subtitle }) => {
|
||||||
|
const linkValue = lang === 'cn'
|
||||||
|
? [<span>{title}</span>, <span class='chinese'>{subtitle}</span>]
|
||||||
|
: [<span>{title}</span>]
|
||||||
|
let key = `${title.replace(/(\B[A-Z])/g, '-$1').toLowerCase()}`
|
||||||
|
if (lang === 'cn') {
|
||||||
|
key = `${key}-cn`
|
||||||
|
}
|
||||||
|
MenuItems.push(<a-menu-item key={key}>
|
||||||
|
<router-link to={{ path: `/ant-design/components/${key}` }}>{linkValue}</router-link>
|
||||||
|
</a-menu-item>)
|
||||||
|
})
|
||||||
|
MenuGroup.push(<a-menu-item-group title={type}>{MenuItems}</a-menu-item-group>)
|
||||||
|
}
|
||||||
|
let locale = zhCN
|
||||||
|
if (lang !== 'cn') {
|
||||||
|
locale = enUS
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<div class='page-wrapper'>
|
||||||
|
<Header num={Object.keys(AllDemo).length}/>
|
||||||
|
<a-locale-provider locale={locale}>
|
||||||
|
<div class='main-wrapper'>
|
||||||
|
<a-row>
|
||||||
|
<a-col xxl={4} xl={5} lg={5} md={6} sm={24} xs={24}>
|
||||||
|
<a-menu
|
||||||
|
class='aside-container menu-site'
|
||||||
|
selectedKeys={[name]}
|
||||||
|
defaultOpenKeys={['Components']}
|
||||||
|
inlineIndent={40}
|
||||||
|
mode='inline'>
|
||||||
|
<a-sub-menu title='Components' key='Components'>
|
||||||
|
{MenuGroup}
|
||||||
|
</a-sub-menu>
|
||||||
|
</a-menu>
|
||||||
|
</a-col>
|
||||||
|
<a-col xxl={20} xl={19} lg={19} md={18} sm={0} xs={0}>
|
||||||
|
<div class='content main-container'>
|
||||||
|
{Demo ? <Demo key={lang}/> : '正在紧急开发中...'}
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</div>
|
||||||
|
</a-locale-provider>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,163 @@
|
||||||
|
<template>
|
||||||
|
<section :class="['code-box', isOpen ? 'expand': '']">
|
||||||
|
<section class="code-box-demo">
|
||||||
|
<slot name="component"></slot>
|
||||||
|
</section>
|
||||||
|
<section class="code-box-meta markdown">
|
||||||
|
<slot v-if="isZhCN" name="description"></slot>
|
||||||
|
<slot v-else name="us-description"></slot>
|
||||||
|
<span class="btn-toggle" :class="{open: isOpen}" @click="toggle"><i class="anticon anticon-down-circle-o"></i></span>
|
||||||
|
</section>
|
||||||
|
<transition appear :css="false" @enter="enter" @leave="leave">
|
||||||
|
<section class="highlight-wrapper" style="position: relative;" v-show="isOpen">
|
||||||
|
<a-tooltip
|
||||||
|
:title="copied ? '复制成功' : '复制代码'"
|
||||||
|
:visible="copyTooltipVisible"
|
||||||
|
@change="onCopyTooltipVisibleChange"
|
||||||
|
>
|
||||||
|
<a-icon
|
||||||
|
:type="copied && copyTooltipVisible ? 'check' : 'copy'"
|
||||||
|
class="code-box-code-copy"
|
||||||
|
v-clipboard:copy="sourceCode"
|
||||||
|
v-clipboard:success="handleCodeCopied"
|
||||||
|
/>
|
||||||
|
</a-tooltip>
|
||||||
|
<slot name="code"></slot>
|
||||||
|
</section>
|
||||||
|
</transition>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import animate from 'antd/_util/openAnimation'
|
||||||
|
import BaseMixin from 'antd/_util/BaseMixin'
|
||||||
|
import { isZhCN } from '../util'
|
||||||
|
export default {
|
||||||
|
mixins: [BaseMixin],
|
||||||
|
name: 'demoBox',
|
||||||
|
props: {
|
||||||
|
jsfiddle: Object,
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
const { name } = this.$route.params
|
||||||
|
const { html, script, style } = this.jsfiddle
|
||||||
|
let sourceCode = `<template>${html}</template>\n`
|
||||||
|
sourceCode = script ? sourceCode + '\<script>' + script + '<\/script>' : sourceCode
|
||||||
|
sourceCode = style ? sourceCode + '\<style>' + style + '<\/style>' : sourceCode
|
||||||
|
return {
|
||||||
|
isOpen: false,
|
||||||
|
isZhCN: isZhCN(name),
|
||||||
|
copied: false,
|
||||||
|
copyTooltipVisible: false,
|
||||||
|
sourceCode,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
toggle () {
|
||||||
|
this.isOpen = !this.isOpen
|
||||||
|
},
|
||||||
|
enter: animate.enter,
|
||||||
|
leave: animate.leave,
|
||||||
|
handleCodeCopied () {
|
||||||
|
this.setState({ copied: true })
|
||||||
|
},
|
||||||
|
|
||||||
|
onCopyTooltipVisibleChange (visible) {
|
||||||
|
if (visible) {
|
||||||
|
this.setState({
|
||||||
|
copyTooltipVisible: visible,
|
||||||
|
copied: false,
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.setState({
|
||||||
|
copyTooltipVisible: visible,
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped lang="less">
|
||||||
|
.box-demo {
|
||||||
|
padding: 0;
|
||||||
|
border: 1px solid #e9e9e9;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: none;
|
||||||
|
margin-top: 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.box-demo-show {
|
||||||
|
padding: 20px 25px 30px;
|
||||||
|
border-bottom: 1px solid #e9e9e9;
|
||||||
|
}
|
||||||
|
.box-demo-description {
|
||||||
|
position: relative;
|
||||||
|
padding: 17px 16px 15px 20px;
|
||||||
|
border-radius: 0 0 6px 6px;
|
||||||
|
-webkit-transition: background-color 0.4s ease;
|
||||||
|
transition: background-color 0.4s ease;
|
||||||
|
width: 100%;
|
||||||
|
font-size: 12px;
|
||||||
|
&.bordered {
|
||||||
|
border-bottom: 1px dashed #e9e9e9;
|
||||||
|
}
|
||||||
|
h3, h4 {
|
||||||
|
position: absolute;
|
||||||
|
top: -14px;
|
||||||
|
padding: 1px 8px;
|
||||||
|
margin-left: -8px;
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 0;
|
||||||
|
color: #777;
|
||||||
|
border-radius: 4px;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
background: #fff;
|
||||||
|
-webkit-transition: background-color 0.4s ease;
|
||||||
|
transition: background-color 0.4s ease;
|
||||||
|
.header-anchor {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
li {
|
||||||
|
line-height: 21px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.box-demo-code {
|
||||||
|
-webkit-transition: height .2s ease-in-out;
|
||||||
|
transition: height .2s ease-in-out;
|
||||||
|
overflow: auto;
|
||||||
|
border-top: 1px dashed #e9e9e9;
|
||||||
|
pre {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
code {
|
||||||
|
margin: 0;
|
||||||
|
background: #f7f7f7;
|
||||||
|
padding: .2em .4em;
|
||||||
|
border-radius: 3px;
|
||||||
|
font-size: .9em;
|
||||||
|
border: 1px solid #eee;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.btn-toggle {
|
||||||
|
position: absolute;
|
||||||
|
right: 16px;
|
||||||
|
bottom: 17px;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 18px;
|
||||||
|
color: #999;
|
||||||
|
i {
|
||||||
|
-webkit-transition: all 0.3s;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
&.open {
|
||||||
|
i {
|
||||||
|
-webkit-transform: rotate(-180deg);
|
||||||
|
-ms-transform: rotate(-180deg);
|
||||||
|
transform: rotate(-180deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,53 @@
|
||||||
|
<script>
|
||||||
|
import { isZhCN } from '../util'
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
num: Number,
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleClick () {
|
||||||
|
const { name } = this.$route.params
|
||||||
|
const newName = isZhCN(name) ? name.replace('-cn', '') : `${name}-cn`
|
||||||
|
this.$router.push({
|
||||||
|
path: `/ant-design/components/${newName}`,
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
render () {
|
||||||
|
const { name } = this.$route.params
|
||||||
|
const isCN = isZhCN(name)
|
||||||
|
return (
|
||||||
|
<header id='header'>
|
||||||
|
<a-row>
|
||||||
|
<a-col xxl={4} xl={5} lg={5} md={6} sm={24} xs={24}>
|
||||||
|
<router-link to={{ path: '/ant-design' }} id='logo'>
|
||||||
|
<img alt='logo' src='https://raw.githubusercontent.com/vueComponent/ant-design/master/logo.png' />
|
||||||
|
<span> VUE-ANTD</span>
|
||||||
|
</router-link>
|
||||||
|
</a-col>
|
||||||
|
<a-col xxl={20} xl={19} lg={19} md={18} sm={0} xs={0}>
|
||||||
|
<div id='search-box'>
|
||||||
|
进度：{this.num} / 52
|
||||||
|
</div>
|
||||||
|
<a-button ghost size='small' onClick={this.handleClick} class='header-lang-button' key='lang-button'>
|
||||||
|
{isCN ? 'English' : '中文'}
|
||||||
|
</a-button>
|
||||||
|
<a-menu selectedKeys={['components']} mode='horizontal' class='menu-site' id='nav'>
|
||||||
|
<a-menu-item key='components'>
|
||||||
|
{isCN ? '组件' : 'Components'}
|
||||||
|
</a-menu-item>
|
||||||
|
<a-menu-item key='github'>
|
||||||
|
<a href='https://github.com/vueComponent/ant-design'>GitHub</a>
|
||||||
|
</a-menu-item>
|
||||||
|
</a-menu>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</header>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,40 @@
|
||||||
|
<template>
|
||||||
|
<div v-html="marked(text)" class="markdown" />
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import marked from 'marked'
|
||||||
|
import { isZhCN } from '../util'
|
||||||
|
marked.setOptions({
|
||||||
|
renderer: new marked.Renderer(),
|
||||||
|
gfm: true,
|
||||||
|
tables: true,
|
||||||
|
breaks: true,
|
||||||
|
pedantic: true,
|
||||||
|
sanitize: true,
|
||||||
|
smartLists: true,
|
||||||
|
smartypants: true,
|
||||||
|
})
|
||||||
|
export default {
|
||||||
|
name: 'md',
|
||||||
|
props: {
|
||||||
|
cn: String,
|
||||||
|
us: String,
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
const { name } = this.$route.params
|
||||||
|
let text = ''
|
||||||
|
const { cn, us } = this
|
||||||
|
if (this.$slots.default && this.$slots.default[0] && this.$slots.default[0].text) {
|
||||||
|
text = this.$slots.default[0].text
|
||||||
|
} else {
|
||||||
|
text = isZhCN(name) ? cn : us
|
||||||
|
}
|
||||||
|
text = text || ''
|
||||||
|
text = text.split('\n').map(t => t.trim()).join('\n')
|
||||||
|
return {
|
||||||
|
marked,
|
||||||
|
text,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,41 @@
|
||||||
|
export { default as avatar } from 'antd/avatar/demo/index.vue'
|
||||||
|
export { default as badge } from 'antd/badge/demo/index.vue'
|
||||||
|
export { default as breadcrumb } from 'antd/breadcrumb/demo/index.vue'
|
||||||
|
export { default as button } from 'antd/button/demo/index.vue'
|
||||||
|
export { default as card } from 'antd/card/demo/index.vue'
|
||||||
|
export { default as checkbox } from 'antd/checkbox/demo/index.vue'
|
||||||
|
export { default as grid } from 'antd/grid/demo/index.vue'
|
||||||
|
export { default as icon } from 'antd/icon/demo/index.vue'
|
||||||
|
export { default as input } from 'antd/input/demo/index.vue'
|
||||||
|
export { default as select } from 'antd/select/demo/index.vue'
|
||||||
|
export { default as menu } from 'antd/menu/demo/index.vue'
|
||||||
|
export { default as pagination } from 'antd/pagination/demo/index.vue'
|
||||||
|
export { default as popconfirm } from 'antd/popconfirm/demo/index.vue'
|
||||||
|
export { default as popover } from 'antd/popover/demo/index.vue'
|
||||||
|
export { default as radio } from 'antd/radio/demo/index.vue'
|
||||||
|
export { default as rate } from 'antd/rate/demo/index.vue'
|
||||||
|
export { default as tabs } from 'antd/tabs/demo/index.vue'
|
||||||
|
export { default as tag } from 'antd/tag/demo/index.vue'
|
||||||
|
export { default as tooltip } from 'antd/tooltip/demo/index.vue'
|
||||||
|
export { default as dropdown } from 'antd/dropdown/demo/index.vue'
|
||||||
|
export { default as divider } from 'antd/divider/demo/index.vue'
|
||||||
|
export { default as collapse } from 'antd/collapse/demo/index.vue'
|
||||||
|
export { default as notification } from 'antd/notification/demo/index.vue'
|
||||||
|
export { default as message } from 'antd/message/demo/index.vue'
|
||||||
|
export { default as spin } from 'antd/spin/demo/index.vue'
|
||||||
|
export { default as switch } from 'antd/switch/demo/index.vue'
|
||||||
|
export { default as autoComplete } from 'antd/auto-complete/demo/index.vue'
|
||||||
|
export { default as affix } from 'antd/affix/demo/index.vue'
|
||||||
|
export { default as cascader } from 'antd/cascader/demo/index.vue'
|
||||||
|
export { default as backTop } from 'antd/back-top/demo/index.vue'
|
||||||
|
export { default as modal } from 'antd/modal/demo/index.vue'
|
||||||
|
export { default as alert } from 'antd/alert/demo/index.vue'
|
||||||
|
export { default as timePicker } from 'antd/time-picker/demo/index.vue'
|
||||||
|
export { default as steps } from 'antd/steps/demo/index.vue'
|
||||||
|
export { default as calendar } from 'antd/calendar/demo/index.vue'
|
||||||
|
export { default as datePicker } from 'antd/date-picker/demo/index.vue'
|
||||||
|
export { default as localeProvider } from 'antd/locale-provider/demo/index.vue'
|
||||||
|
export { default as slider } from 'antd/slider/demo/index.vue'
|
||||||
|
export { default as progress } from 'antd/progress/demo/index.vue'
|
||||||
|
export { default as timeline } from 'antd/timeline/demo/index.vue'
|
||||||
|
export { default as table } from 'antd/table/demo/index.vue'
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="icon" type="image/x-icon" href="https://raw.githubusercontent.com/vueComponent/ant-design/master/logo.png">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="app">
|
||||||
|
<router-view></router-view>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,36 @@
|
||||||
|
import '../components/style.js'
|
||||||
|
import './index.less'
|
||||||
|
import 'highlight.js/styles/solarized-light.css'
|
||||||
|
import Vue from 'vue'
|
||||||
|
import VueRouter from 'vue-router'
|
||||||
|
import VueClipboard from 'vue-clipboard2'
|
||||||
|
import routes from './routes'
|
||||||
|
import Md from './components/md'
|
||||||
|
import Api from './components/api'
|
||||||
|
import * as Components from '../components/index'
|
||||||
|
import demoBox from './components/demoBox'
|
||||||
|
|
||||||
|
Vue.use(VueClipboard)
|
||||||
|
Vue.use(VueRouter)
|
||||||
|
Vue.component(Md.name, Md)
|
||||||
|
Vue.component(Api.name, Api)
|
||||||
|
Vue.component('demo-box', demoBox)
|
||||||
|
Object.keys(Components).forEach(k => {
|
||||||
|
if (k === 'api') {
|
||||||
|
Object.keys(Components[k]).forEach(api => {
|
||||||
|
Vue.prototype[`$${api}`] = Components[k][api]
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
const name = `a${k.replace(/([A-Z])/g, '-$1').toLowerCase()}`
|
||||||
|
Vue.component(name, Components[k])
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const router = new VueRouter({
|
||||||
|
mode: 'history',
|
||||||
|
routes,
|
||||||
|
})
|
||||||
|
new Vue({
|
||||||
|
el: '#app',
|
||||||
|
router,
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,64 @@
|
||||||
|
@import './theme/static/index.less';
|
||||||
|
.site {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.nav {
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.main-wrapper {
|
||||||
|
display: flex;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.api-container table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0;
|
||||||
|
empty-cells: show;
|
||||||
|
border: 1px solid @site-border-color-split;
|
||||||
|
width: 100%;
|
||||||
|
margin: 8px 0 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.api-container table th {
|
||||||
|
white-space: nowrap;
|
||||||
|
color: #5c6b77;
|
||||||
|
font-weight: 500;
|
||||||
|
background: rgba(0, 0, 0, 0.02);
|
||||||
|
}
|
||||||
|
.api-container pre code {
|
||||||
|
padding: 12px 20px;
|
||||||
|
margin: 16px 0;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.api-container table th,
|
||||||
|
.api-container table td {
|
||||||
|
border: 1px solid @site-border-color-split;
|
||||||
|
padding: 16px 24px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.code-box .highlight-wrapper {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.code-box-meta > h4 {
|
||||||
|
position: absolute;
|
||||||
|
top: -14px;
|
||||||
|
padding: 1px 8px;
|
||||||
|
margin-left: -8px;
|
||||||
|
color: #777;
|
||||||
|
border-radius: 2px 2px 0 0;
|
||||||
|
background: #fff;
|
||||||
|
font-size: 14px;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
.code-box-code-copy {
|
||||||
|
opacity: 1;
|
||||||
|
position: absolute;
|
||||||
|
right: 15px;
|
||||||
|
top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
import Demo from './components/demo.vue'
|
||||||
|
export default [
|
||||||
|
{ path: '/:prefix?/components/:name', component: Demo },
|
||||||
|
// { path: '/:lang?/test/:name/:demo?', component: AsyncComp },
|
||||||
|
{ path: '/*', redirect: '/ant-design/components/button' },
|
||||||
|
]
|
||||||
|
|
@ -0,0 +1,170 @@
|
||||||
|
/* stylelint-disable no-duplicate-selectors */
|
||||||
|
.color-palettes {
|
||||||
|
margin: 0 1%;
|
||||||
|
}
|
||||||
|
.color-palette {
|
||||||
|
margin: 45px 1%;
|
||||||
|
width: 31%;
|
||||||
|
display: inline-block;
|
||||||
|
&-pick {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 20px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
&-picker {
|
||||||
|
margin: 12px 0 24px;
|
||||||
|
&-value {
|
||||||
|
font-size: 13px;
|
||||||
|
font-family: Consolas;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-color {
|
||||||
|
text-align: left;
|
||||||
|
&-item {
|
||||||
|
cursor: pointer;
|
||||||
|
height: 44px;
|
||||||
|
line-height: 44px;
|
||||||
|
padding: 0 12px;
|
||||||
|
margin-right: 4px;
|
||||||
|
transition: all .2s;
|
||||||
|
position: relative;
|
||||||
|
font-family: Consolas;
|
||||||
|
font-size: 14px;
|
||||||
|
&:first-child {
|
||||||
|
border-radius: 4px 4px 0 0;
|
||||||
|
}
|
||||||
|
&:last-child {
|
||||||
|
border-radius: 0 0 4px 4px;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
margin-right: -8px;
|
||||||
|
border-radius: 0 4px 4px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-item &-text {
|
||||||
|
transition: all .3s;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
&-item &-value {
|
||||||
|
float: right;
|
||||||
|
transform: scale(0.85);
|
||||||
|
transform-origin: 100% 50%;
|
||||||
|
opacity: 0;
|
||||||
|
position: relative;
|
||||||
|
left: 3px;
|
||||||
|
transition: all .3s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-title {
|
||||||
|
margin: 0 0 24px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #5c6b77;
|
||||||
|
font-size: 22px;
|
||||||
|
text-transform: capitalize;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-description {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: lighter;
|
||||||
|
color: #777;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-color:hover {
|
||||||
|
.main-color-value {
|
||||||
|
opacity: 0.7;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-palette-horizontal {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.main-color {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
&-item {
|
||||||
|
flex: 1;
|
||||||
|
position: relative;
|
||||||
|
padding: 0;
|
||||||
|
margin-right: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
height: 86px;
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 37px;
|
||||||
|
line-height: normal;
|
||||||
|
|
||||||
|
.main-color-text {
|
||||||
|
float: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
margin-top: -10px;
|
||||||
|
height: 96px;
|
||||||
|
border-radius: 4px 4px 0 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-value {
|
||||||
|
position: absolute;
|
||||||
|
text-align: center;
|
||||||
|
width: 100%;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
float: none;
|
||||||
|
transform-origin: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
.main-color-item {
|
||||||
|
padding-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-color-value {
|
||||||
|
opacity: 0.7;
|
||||||
|
bottom: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.make-palatte(@color, @index: 1) when (@index <= 10) {
|
||||||
|
.palatte-@{color}-@{index} {
|
||||||
|
@background: "@{color}-@{index}";
|
||||||
|
background: @@background;
|
||||||
|
}
|
||||||
|
.make-palatte(@color, (@index + 1)); // next iteration
|
||||||
|
}
|
||||||
|
|
||||||
|
@grey-1: #fff;
|
||||||
|
@grey-2: #fafafa;
|
||||||
|
@grey-3: #f5f5f5;
|
||||||
|
@grey-4: #e8e8e8;
|
||||||
|
@grey-5: #d9d9d9;
|
||||||
|
@grey-6: #bfbfbf;
|
||||||
|
@grey-7: #8c8c8c;
|
||||||
|
@grey-8: #595959;
|
||||||
|
@grey-9: #262626;
|
||||||
|
@grey-10: #000;
|
||||||
|
|
||||||
|
@border-color: rgba(229, 231, 235, 100);
|
||||||
|
|
||||||
|
.main-color {
|
||||||
|
.make-palatte(blue);
|
||||||
|
.make-palatte(purple);
|
||||||
|
.make-palatte(cyan);
|
||||||
|
.make-palatte(green);
|
||||||
|
.make-palatte(magenta);
|
||||||
|
.make-palatte(red);
|
||||||
|
.make-palatte(volcano);
|
||||||
|
.make-palatte(orange);
|
||||||
|
.make-palatte(gold);
|
||||||
|
.make-palatte(yellow);
|
||||||
|
.make-palatte(lime);
|
||||||
|
.make-palatte(geekblue);
|
||||||
|
.make-palatte(grey);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,132 @@
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: @font-family;
|
||||||
|
line-height: 1.5;
|
||||||
|
color: @site-text-color;
|
||||||
|
font-size: 14px;
|
||||||
|
background: #fff;
|
||||||
|
transition: background 1s cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
transition: color .3s ease;
|
||||||
|
&:focus {
|
||||||
|
text-decoration: underline;
|
||||||
|
text-decoration-skip: ink;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-wrapper {
|
||||||
|
background: #fff;
|
||||||
|
padding: 40px 0 0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-container {
|
||||||
|
padding: 0 170px 144px 64px;
|
||||||
|
background: #fff;
|
||||||
|
min-height: 500px;
|
||||||
|
overflow: hidden;
|
||||||
|
border-left: 1px solid @site-border-color-split;
|
||||||
|
position: relative;
|
||||||
|
margin-left: -1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-menu {
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aside-container {
|
||||||
|
padding-bottom: 50px;
|
||||||
|
font-family: Lato, @font-family;
|
||||||
|
|
||||||
|
&.ant-menu-inline .ant-menu-submenu-title h4,
|
||||||
|
&.ant-menu-inline > .ant-menu-item,
|
||||||
|
&.ant-menu-inline .ant-menu-item a {
|
||||||
|
font-size: 14px;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.ant-menu-inline .ant-menu-item-group-title {
|
||||||
|
padding-left: 56px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a[disabled] {
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-item-link-outside {
|
||||||
|
position: relative;
|
||||||
|
.anticon {
|
||||||
|
font-size: 12px;
|
||||||
|
color: @primary-color;
|
||||||
|
opacity: 0;
|
||||||
|
position: absolute;
|
||||||
|
right: -10px;
|
||||||
|
top: 16px;
|
||||||
|
transition: all .3s;
|
||||||
|
}
|
||||||
|
&:hover .anticon {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.aside-container .chinese {
|
||||||
|
font-size: 12px;
|
||||||
|
margin-left: 6px;
|
||||||
|
font-weight: normal;
|
||||||
|
opacity: .67;
|
||||||
|
}
|
||||||
|
|
||||||
|
.outside-link {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.outside-link:after {
|
||||||
|
content: '\e691';
|
||||||
|
font-family: 'anticon';
|
||||||
|
margin-left: 5px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #aaa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.outside-link.internal {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// reset menu text color
|
||||||
|
.menu-site .ant-menu-item > a {
|
||||||
|
color: @site-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-site .ant-menu-item-selected > a,
|
||||||
|
.menu-site .ant-menu-item > a:hover {
|
||||||
|
color: @primary-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
#react-content {
|
||||||
|
transition: transform .3s @ease-in-out-circ;
|
||||||
|
}
|
||||||
|
.page-wrapper {
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0;
|
||||||
|
width: 100%;
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer-content {
|
||||||
|
padding: 40px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer {
|
||||||
|
z-index: 1029;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,261 @@
|
||||||
|
.code-boxes-col-1-1 {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-boxes-col-2-1 {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-box {
|
||||||
|
border: 1px solid @site-border-color-split;
|
||||||
|
border-radius: @border-radius-sm;
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
margin: 0 0 16px;
|
||||||
|
transition: all .2s;
|
||||||
|
|
||||||
|
&:target {
|
||||||
|
border: 1px solid @primary-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-expand-trigger {
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #9199ac;
|
||||||
|
margin-left: 5px;
|
||||||
|
opacity: .8;
|
||||||
|
transition: all .3s;
|
||||||
|
top: -2px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&-active {
|
||||||
|
color: #3b4357;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-title {
|
||||||
|
position: absolute;
|
||||||
|
top: -14px;
|
||||||
|
padding: 1px 8px;
|
||||||
|
margin-left: -8px;
|
||||||
|
color: #777;
|
||||||
|
border-radius: @border-radius-sm @border-radius-sm 0 0;
|
||||||
|
background: #fff;
|
||||||
|
transition: background-color .4s;
|
||||||
|
|
||||||
|
a,
|
||||||
|
a:hover {
|
||||||
|
color: @site-text-color;
|
||||||
|
font-size: @font-size-base;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a.edit-button {
|
||||||
|
position: absolute;
|
||||||
|
right: -16px;
|
||||||
|
top: 7px;
|
||||||
|
font-size: 12px;
|
||||||
|
transform: scale(0.9);
|
||||||
|
background: #fff;
|
||||||
|
padding-right: 6px;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-demo {
|
||||||
|
border-bottom: 1px solid @site-border-color-split;
|
||||||
|
padding: 42px 24px 50px;
|
||||||
|
color: rgba(0, 0, 0, .65);
|
||||||
|
}
|
||||||
|
|
||||||
|
iframe {
|
||||||
|
width: 100%;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-meta {
|
||||||
|
&.markdown {
|
||||||
|
position: relative;
|
||||||
|
padding: 18px 32px;
|
||||||
|
border-radius: 0 0 @border-radius-sm @border-radius-sm;
|
||||||
|
transition: background-color .4s;
|
||||||
|
width: 100%;
|
||||||
|
font-size: @font-size-base;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4,
|
||||||
|
section& p {
|
||||||
|
margin: 0;
|
||||||
|
width: 98%;
|
||||||
|
}
|
||||||
|
|
||||||
|
> p {
|
||||||
|
font-size: 12px;
|
||||||
|
margin: 0.5em 0;
|
||||||
|
padding-right: 25px;
|
||||||
|
width: 100%;
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.expand &-meta {
|
||||||
|
border-radius: 0;
|
||||||
|
border-bottom: 1px dashed @site-border-color-split;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-expand-icon {
|
||||||
|
position: absolute;
|
||||||
|
right: 16px;
|
||||||
|
bottom: 23px;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
line-height: 16px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-expand-icon-show,
|
||||||
|
.code-expand-icon-hide {
|
||||||
|
transition: all 0.4s;
|
||||||
|
user-select: none;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
margin: 0;
|
||||||
|
max-width: 100%;
|
||||||
|
vertical-align: baseline;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-expand-icon-show {
|
||||||
|
opacity: 0.55;
|
||||||
|
pointer-events: auto;
|
||||||
|
&:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-expand-icon.ant-tooltip-open .code-expand-icon-show {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-expand-icon-hide {
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight-wrapper {
|
||||||
|
display: none;
|
||||||
|
overflow: auto;
|
||||||
|
border-radius: 0 0 @border-radius-sm @border-radius-sm;
|
||||||
|
|
||||||
|
&-expand {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight {
|
||||||
|
position: relative;
|
||||||
|
pre {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
&:not(:first-child) {
|
||||||
|
border-top: 1px dashed @site-border-color-split;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-actions {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
right: 12px;
|
||||||
|
text-align: right;
|
||||||
|
> i,
|
||||||
|
> form {
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-code-copy {
|
||||||
|
font-size: 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
color: @site-text-color-secondary;
|
||||||
|
transition: all .24s;
|
||||||
|
background: #fff;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
line-height: 20px;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 20px;
|
||||||
|
opacity: 0;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: @site-text-color-secondary;
|
||||||
|
transform: scale(1.2);
|
||||||
|
}
|
||||||
|
&.anticon-check {
|
||||||
|
color: @green-6 !important;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-codepen {
|
||||||
|
background: transparent url("https://gw.alipayobjects.com/zos/rmsportal/OtZslpOjYXijshDERXwc.svg") center / 14px no-repeat;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
opacity: 0;
|
||||||
|
transition: all .3s;
|
||||||
|
border: 0;
|
||||||
|
text-indent: -9999px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-riddle {
|
||||||
|
background: transparent url("https://gw.alipayobjects.com/zos/rmsportal/DlHbxMCyeuyOrqOdbgik.svg") center / 14px no-repeat;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
opacity: 0;
|
||||||
|
transition: all .3s;
|
||||||
|
border: 0;
|
||||||
|
text-indent: -9999px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-codesandbox {
|
||||||
|
background: transparent url("https://gw.alipayobjects.com/zos/rmsportal/aaYmtdDyHSCkXyLZVgGK.svg") center / 14px no-repeat;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
opacity: 0;
|
||||||
|
transition: all .3s;
|
||||||
|
border: 0;
|
||||||
|
text-indent: -9999px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight-wrapper:hover &-code-copy,
|
||||||
|
.highlight-wrapper:hover &-codepen,
|
||||||
|
.highlight-wrapper:hover &-codesandbox,
|
||||||
|
.highlight-wrapper:hover &-riddle {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
margin: 0;
|
||||||
|
width: auto;
|
||||||
|
code {
|
||||||
|
border: none;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
.algolia-autocomplete {
|
||||||
|
.ds-dropdown-menu {
|
||||||
|
border: none;
|
||||||
|
box-shadow: @box-shadow-base;
|
||||||
|
|
||||||
|
[class^="ds-dataset-"] {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.algolia-docsearch-suggestion--title {
|
||||||
|
color: @site-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.algolia-docsearch-suggestion--highlight {
|
||||||
|
color: @primary-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,71 @@
|
||||||
|
@import './colors';
|
||||||
|
|
||||||
|
@padding-space: 144px;
|
||||||
|
|
||||||
|
footer {
|
||||||
|
clear: both;
|
||||||
|
font-size: 14px;
|
||||||
|
background-color: #000;
|
||||||
|
position: relative;
|
||||||
|
z-index: 100;
|
||||||
|
color: rgba(255, 255, 255, 0.65);
|
||||||
|
box-shadow: 0 1000px 0 1000px #fff;
|
||||||
|
.ant-row {
|
||||||
|
text-align: center;
|
||||||
|
.footer-center {
|
||||||
|
display: inline-block;
|
||||||
|
text-align: left;
|
||||||
|
> h2 {
|
||||||
|
font-size: 16px;
|
||||||
|
margin: 0 auto 24px;
|
||||||
|
font-weight: 500;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
> .title-icon {
|
||||||
|
width: 27px;
|
||||||
|
margin-right: 16px;
|
||||||
|
}
|
||||||
|
> .anticon {
|
||||||
|
font-size: 16px;
|
||||||
|
position: absolute;
|
||||||
|
left: -22px;
|
||||||
|
top: 3px;
|
||||||
|
color: #aaa;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
> div {
|
||||||
|
margin: 12px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.footer-wrap {
|
||||||
|
position: relative;
|
||||||
|
padding: 86px @padding-space 93px @padding-space;
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.25);
|
||||||
|
}
|
||||||
|
.bottom-bar {
|
||||||
|
text-align: right;
|
||||||
|
padding: 16px @padding-space;
|
||||||
|
margin: 0;
|
||||||
|
line-height: 32px;
|
||||||
|
overflow: hidden;
|
||||||
|
a {
|
||||||
|
color: rgba(255, 255, 255, 0.65);
|
||||||
|
&:hover {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.translate-button {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
color: rgba(255, 255, 255, 0.9);
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
color: rgba(255, 255, 255, 1);
|
||||||
|
& > span {
|
||||||
|
color: rgba(255, 255, 255, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,144 @@
|
||||||
|
@header-height: 64px;
|
||||||
|
@menu-item-border: 2px;
|
||||||
|
|
||||||
|
#header {
|
||||||
|
transition: all 0.3s;
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: 0 2px 8px rgba(240, 241, 242, 65);
|
||||||
|
position: relative;
|
||||||
|
z-index: 10;
|
||||||
|
max-width: 100%;
|
||||||
|
&.home-nav-bottom {
|
||||||
|
background: rgba(255, 255, 255, 0.9);
|
||||||
|
border-bottom-color: #ebedee;
|
||||||
|
.search {
|
||||||
|
border-left-color: #ebedee;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
color: @site-text-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-link {
|
||||||
|
color: @site-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-menu-item-active .header-link {
|
||||||
|
color: @primary-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#logo {
|
||||||
|
overflow: hidden;
|
||||||
|
padding-left: 40px;
|
||||||
|
float: left;
|
||||||
|
height: @header-height;
|
||||||
|
line-height: @header-height;
|
||||||
|
text-decoration: none;
|
||||||
|
white-space: nowrap;
|
||||||
|
img {
|
||||||
|
height: 32px;
|
||||||
|
margin-right: 16px;
|
||||||
|
}
|
||||||
|
img + img {
|
||||||
|
height: 16px;
|
||||||
|
position: relative;
|
||||||
|
top: 1px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#search-box {
|
||||||
|
border-left: 1px solid @site-border-color-split;
|
||||||
|
float: left;
|
||||||
|
height: 22px;
|
||||||
|
line-height: 22px;
|
||||||
|
padding-left: 16px;
|
||||||
|
margin: 22px auto 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#search-box .anticon {
|
||||||
|
color: #ced4d9;
|
||||||
|
position: relative;
|
||||||
|
top: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#search-box input {
|
||||||
|
font-size: 14px;
|
||||||
|
margin-top: -5px;
|
||||||
|
width: 200px;
|
||||||
|
border: 0;
|
||||||
|
box-shadow: none;
|
||||||
|
background: transparent;
|
||||||
|
|
||||||
|
&::placeholder {
|
||||||
|
color: #a3b1bf;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-lang-button,
|
||||||
|
.version {
|
||||||
|
float: right;
|
||||||
|
margin-top: 20px;
|
||||||
|
margin-left: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-lang-button {
|
||||||
|
color: @text-color;
|
||||||
|
border-color: @border-color-base;
|
||||||
|
margin-right: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav {
|
||||||
|
border: 0;
|
||||||
|
float: right;
|
||||||
|
font-size: 14px;
|
||||||
|
font-family: Lato, @font-family;
|
||||||
|
&.ant-menu-horizontal {
|
||||||
|
border-bottom: none;
|
||||||
|
|
||||||
|
& > .ant-menu-item {
|
||||||
|
height: @header-height;
|
||||||
|
line-height: @header-height - @menu-item-border - 2px;
|
||||||
|
min-width: 72px;
|
||||||
|
border-top: @menu-item-border solid transparent;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-top: @menu-item-border solid @primary-color;
|
||||||
|
border-bottom: @menu-item-border solid transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
& > .ant-menu-item-selected {
|
||||||
|
border-top: @menu-item-border solid @primary-color;
|
||||||
|
border-bottom: @menu-item-border solid transparent;
|
||||||
|
a {
|
||||||
|
color: @primary-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
& > .ant-menu-item {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.component-select {
|
||||||
|
&.ant-select-dropdown {
|
||||||
|
border: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.ant-select-dropdown-menu {
|
||||||
|
max-height: 200px;
|
||||||
|
}
|
||||||
|
.ant-select-dropdown-menu-item {
|
||||||
|
border-radius: 0 !important;
|
||||||
|
}
|
||||||
|
.ant-component-decs {
|
||||||
|
font-size: 12px;
|
||||||
|
position: absolute;
|
||||||
|
color: #aaa;
|
||||||
|
right: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,153 @@
|
||||||
|
/**
|
||||||
|
* prism.js default theme for JavaScript, CSS and HTML
|
||||||
|
* Based on dabblet (http://dabblet.com)
|
||||||
|
* @author Lea Verou
|
||||||
|
*/
|
||||||
|
|
||||||
|
pre code {
|
||||||
|
display: block;
|
||||||
|
background: white;
|
||||||
|
color: @site-text-color;
|
||||||
|
line-height: 2;
|
||||||
|
border: 1px solid #e9e9e9;
|
||||||
|
padding: 16px 32px;
|
||||||
|
border-radius: @border-radius-sm;
|
||||||
|
font-size: @font-size-base;
|
||||||
|
white-space: pre;
|
||||||
|
font-family: "Lucida Console", Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
code[class*="language-"],
|
||||||
|
pre[class*="language-"] {
|
||||||
|
color: black;
|
||||||
|
background: none;
|
||||||
|
font-family: "Lucida Console", Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||||
|
direction: ltr;
|
||||||
|
text-align: left;
|
||||||
|
white-space: pre;
|
||||||
|
word-spacing: normal;
|
||||||
|
word-break: normal;
|
||||||
|
word-wrap: normal;
|
||||||
|
line-height: 1.5;
|
||||||
|
|
||||||
|
-moz-tab-size: 4;
|
||||||
|
-o-tab-size: 4;
|
||||||
|
tab-size: 4;
|
||||||
|
|
||||||
|
-webkit-hyphens: none;
|
||||||
|
-moz-hyphens: none;
|
||||||
|
-ms-hyphens: none;
|
||||||
|
hyphens: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre[class*="language-"]::-moz-selection,
|
||||||
|
pre[class*="language-"] ::-moz-selection,
|
||||||
|
code[class*="language-"]::-moz-selection,
|
||||||
|
code[class*="language-"] ::-moz-selection {
|
||||||
|
text-shadow: none;
|
||||||
|
background: #b3d4fc;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre[class*="language-"]::selection,
|
||||||
|
pre[class*="language-"] ::selection,
|
||||||
|
code[class*="language-"]::selection,
|
||||||
|
code[class*="language-"] ::selection {
|
||||||
|
text-shadow: none;
|
||||||
|
background: #b3d4fc;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media print {
|
||||||
|
code[class*="language-"],
|
||||||
|
pre[class*="language-"] {
|
||||||
|
text-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Code blocks */
|
||||||
|
pre[class*="language-"] {
|
||||||
|
padding: 12px 20px;
|
||||||
|
margin: 16px 0;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
:not(pre) > code[class*="language-"],
|
||||||
|
pre[class*="language-"] {
|
||||||
|
background: #f2f4f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Inline code */
|
||||||
|
:not(pre) > code[class*="language-"] {
|
||||||
|
padding: .1em;
|
||||||
|
border-radius: .3em;
|
||||||
|
white-space: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.comment,
|
||||||
|
.token.prolog,
|
||||||
|
.token.doctype,
|
||||||
|
.token.cdata {
|
||||||
|
color: slategray;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.punctuation {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.namespace {
|
||||||
|
opacity: .7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.property,
|
||||||
|
.token.tag,
|
||||||
|
.token.boolean,
|
||||||
|
.token.number,
|
||||||
|
.token.constant,
|
||||||
|
.token.symbol,
|
||||||
|
.token.deleted {
|
||||||
|
color: #f81d22;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.selector,
|
||||||
|
.token.attr-name,
|
||||||
|
.token.string,
|
||||||
|
.token.char,
|
||||||
|
.token.builtin,
|
||||||
|
.token.inserted {
|
||||||
|
color: #0b8235;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.operator,
|
||||||
|
.token.entity,
|
||||||
|
.token.url,
|
||||||
|
.language-css .token.string,
|
||||||
|
.style .token.string {
|
||||||
|
color: #0b8235;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.atrule,
|
||||||
|
.token.attr-value,
|
||||||
|
.token.keyword {
|
||||||
|
color: #008dff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.function {
|
||||||
|
color: #f81d22;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.regex,
|
||||||
|
.token.important,
|
||||||
|
.token.variable {
|
||||||
|
color: #e90;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.important,
|
||||||
|
.token.bold {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.token.italic {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.entity {
|
||||||
|
cursor: help;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,366 @@
|
||||||
|
@home-bg-color: #2f54eb;
|
||||||
|
@home-text-color: #314659;
|
||||||
|
|
||||||
|
.home-page-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative; // will-change: transform;
|
||||||
|
color: @home-text-color;
|
||||||
|
font-family: Avenir, @font-family;
|
||||||
|
.page {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: auto;
|
||||||
|
position: relative;
|
||||||
|
padding: 0 24px;
|
||||||
|
h2 {
|
||||||
|
font-size: 38px;
|
||||||
|
line-height: 46px;
|
||||||
|
color: @home-text-color;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 400;
|
||||||
|
margin: 140px auto 100px;
|
||||||
|
}
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
p {
|
||||||
|
will-change: transform;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-bg {
|
||||||
|
&-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
width: 120%;
|
||||||
|
height: 200px;
|
||||||
|
background: @home-bg-color;
|
||||||
|
position: absolute;
|
||||||
|
bottom: -200px;
|
||||||
|
left: 0%;
|
||||||
|
transform-origin: 0;
|
||||||
|
transform: rotate(-4deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 576px;
|
||||||
|
&-wrapper {
|
||||||
|
overflow: initial;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
.text-wrapper {
|
||||||
|
width: 54%;
|
||||||
|
max-width: 560px;
|
||||||
|
min-height: 336px;
|
||||||
|
color: #0d1a26;
|
||||||
|
> * {
|
||||||
|
will-change: transform;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
font-size: 68px;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 76px;
|
||||||
|
margin: 8px 0 28px;
|
||||||
|
letter-spacing: 0;
|
||||||
|
font-family: Avenir, @font-family;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 40px;
|
||||||
|
color: @home-text-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-wrapper {
|
||||||
|
width: 46%;
|
||||||
|
max-width: 482px;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
bottom: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-btns {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-btn {
|
||||||
|
padding: 0 24px;
|
||||||
|
border-radius: 100px;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 38px;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
text-align: center;
|
||||||
|
margin-right: 16px;
|
||||||
|
text-decoration: none;
|
||||||
|
border: 1px solid #2f54eb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-btn.components {
|
||||||
|
background: #2f54eb;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-btn.language {
|
||||||
|
color: #2f54eb;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
display: block;
|
||||||
|
g {
|
||||||
|
transform-origin: 50%;
|
||||||
|
transform-box: fill-box;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** page1 **/
|
||||||
|
|
||||||
|
.page1 {
|
||||||
|
min-height: 784px;
|
||||||
|
background: @home-bg-color;
|
||||||
|
background: linear-gradient(to bottom, rgba(47, 84, 235, 1) 0%, rgba(58, 64, 212, 1) 100%);
|
||||||
|
h2 {
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
&-block {
|
||||||
|
max-width: 160px;
|
||||||
|
text-align: center;
|
||||||
|
margin: auto;
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
h3 {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
&:hover .page1-image {
|
||||||
|
transform: translateY(-4px);
|
||||||
|
box-shadow: 0 6px 10px rgba(5, 26, 180, .35);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-image {
|
||||||
|
width: 120px;
|
||||||
|
height: 120px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 46px auto 40px;
|
||||||
|
transition: transform .45s @ease-out, box-shadow .45s @ease-out;
|
||||||
|
img {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-point-wrapper {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
margin: auto;
|
||||||
|
overflow: inherit !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** page2 **/
|
||||||
|
|
||||||
|
.page2 {
|
||||||
|
background: #eff3f6;
|
||||||
|
min-height: 1110px;
|
||||||
|
overflow: initial;
|
||||||
|
padding-top: 1px;
|
||||||
|
.page {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
h2 {
|
||||||
|
margin-bottom: 142px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-content {
|
||||||
|
box-shadow: 0 12px 20px #d8e0e6;
|
||||||
|
background: @home-bg-color;
|
||||||
|
}
|
||||||
|
&-components,
|
||||||
|
&-product {
|
||||||
|
min-height: 554px;
|
||||||
|
}
|
||||||
|
&-components {
|
||||||
|
position: initial;
|
||||||
|
background: @home-bg-color;
|
||||||
|
padding: 56px;
|
||||||
|
color: #fff;
|
||||||
|
line-height: 32px;
|
||||||
|
h3 {
|
||||||
|
font-size: 28px;
|
||||||
|
margin: 0 auto 32px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.components-button-wrapper {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 48px;
|
||||||
|
left: 56px;
|
||||||
|
a {
|
||||||
|
display: block;
|
||||||
|
color: #fff;
|
||||||
|
line-height: 1.5em;
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-product {
|
||||||
|
background: #fff;
|
||||||
|
padding: 48px 56px;
|
||||||
|
.product-block {
|
||||||
|
margin-bottom: 34px;
|
||||||
|
cursor: pointer;
|
||||||
|
color: @home-text-color;
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
.block-text-wrapper {
|
||||||
|
padding-bottom: 0;
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.block-text-wrapper {
|
||||||
|
padding-bottom: 35px;
|
||||||
|
position: relative;
|
||||||
|
border-bottom: 1px solid #ebedf0;
|
||||||
|
h4 {
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 28px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
line-height: 24px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
.more {
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 22px;
|
||||||
|
color: @home-bg-color;
|
||||||
|
vertical-align: top;
|
||||||
|
i {
|
||||||
|
font-size: 12px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.block-image-wrapper {
|
||||||
|
height: 104px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
img {
|
||||||
|
display: block;
|
||||||
|
max-width: 80%;
|
||||||
|
}
|
||||||
|
&.right {
|
||||||
|
float: right;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
h4 {
|
||||||
|
color: @home-bg-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.parallax-bg {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 2;
|
||||||
|
pointer-events: none;
|
||||||
|
&.bottom {
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
&.top {
|
||||||
|
margin-top: 220px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
svg {
|
||||||
|
overflow: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** page3 **/
|
||||||
|
|
||||||
|
.page3 {
|
||||||
|
min-height: 556px;
|
||||||
|
&-block {
|
||||||
|
padding: 24px 12px;
|
||||||
|
a {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
color: @home-text-color;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
h3 {
|
||||||
|
color: @home-bg-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-img-wrapper,
|
||||||
|
&-text-wrapper {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
&-text-wrapper {
|
||||||
|
// max-width: 182px;
|
||||||
|
margin-left: 32px;
|
||||||
|
line-height: 24px;
|
||||||
|
margin-top: 2px;
|
||||||
|
h3 {
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 28px;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.parallax-bg.top {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** video **/
|
||||||
|
|
||||||
|
.new-version-video {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 9999;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
background: #fbfbfb;
|
||||||
|
.vidoe-wrap {
|
||||||
|
background: url('https://gw.alipayobjects.com/zos/rmsportal/gEeRuETmbpAYRaeilexm.jpg') repeat-x;
|
||||||
|
background-size: cover;
|
||||||
|
width: 100%;
|
||||||
|
video {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,66 @@
|
||||||
|
ul.anticons-list {
|
||||||
|
margin: 40px 0;
|
||||||
|
list-style: none;
|
||||||
|
overflow: hidden;
|
||||||
|
li {
|
||||||
|
float: left;
|
||||||
|
width: 16.66%;
|
||||||
|
text-align: center;
|
||||||
|
list-style: none;
|
||||||
|
cursor: pointer;
|
||||||
|
height: 100px;
|
||||||
|
color: #555;
|
||||||
|
transition: all .3s;
|
||||||
|
position: relative;
|
||||||
|
margin: 3px 0;
|
||||||
|
border-radius: 4px;
|
||||||
|
background-color: #fff;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 10px 0 0;
|
||||||
|
|
||||||
|
.anticon {
|
||||||
|
font-size: 24px;
|
||||||
|
margin: 12px 0 16px;
|
||||||
|
transition: all .3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.anticon-class {
|
||||||
|
display: block;
|
||||||
|
text-align: center;
|
||||||
|
transform: scale(0.83);
|
||||||
|
font-family: "Lucida Console", Consolas;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: @primary-color;
|
||||||
|
color: #fff;
|
||||||
|
.anticon {
|
||||||
|
transform: scale(1.4);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.copied:hover {
|
||||||
|
color: rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
content: "Copied!";
|
||||||
|
text-align: center;
|
||||||
|
line-height: 110px;
|
||||||
|
color: #fff;
|
||||||
|
transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.copied:after {
|
||||||
|
opacity: 1;
|
||||||
|
top: -10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
@import '../../../components/style/v2-compatible-reset.less';
|
||||||
|
@import '../../../components/style/themes/default.less';
|
||||||
|
@import './common';
|
||||||
|
@import './header';
|
||||||
|
@import './footer';
|
||||||
|
@import './home';
|
||||||
|
@import './page-nav';
|
||||||
|
@import './markdown';
|
||||||
|
@import './resource';
|
||||||
|
@import './preview-img';
|
||||||
|
@import './toc';
|
||||||
|
@import './not-found';
|
||||||
|
@import './highlight';
|
||||||
|
@import './demo';
|
||||||
|
@import './colors';
|
||||||
|
@import './icons';
|
||||||
|
@import './mock-browser';
|
||||||
|
@import './new-version-info-modal';
|
||||||
|
@import './motion';
|
||||||
|
@import './responsive';
|
||||||
|
@import './theme';
|
||||||
|
@import './docsearch';
|
||||||
|
|
@ -0,0 +1,325 @@
|
||||||
|
.markdown {
|
||||||
|
color: @site-text-color;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight {
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown img {
|
||||||
|
max-width: ~"calc(100% - 32px)";
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown p > img {
|
||||||
|
margin: 34px 0;
|
||||||
|
box-shadow: 0 8px 20px rgba(143, 168, 191, 0.35);
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h1 {
|
||||||
|
color: @site-heading-color;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
margin-top: 8px;
|
||||||
|
font-family: Lato, @font-family;
|
||||||
|
font-size: 30px;
|
||||||
|
line-height: 38px;
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
margin-left: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h2 {
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h2,
|
||||||
|
.markdown h3,
|
||||||
|
.markdown h4,
|
||||||
|
.markdown h5,
|
||||||
|
.markdown h6 {
|
||||||
|
color: @site-heading-color;
|
||||||
|
font-family: Lato, @font-family;
|
||||||
|
margin: 1.6em 0 0.6em;
|
||||||
|
font-weight: 500;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h3 { font-size: 18px; }
|
||||||
|
.markdown h4 { font-size: 16px; }
|
||||||
|
.markdown h5 { font-size: 14px; }
|
||||||
|
.markdown h6 { font-size: 12px; }
|
||||||
|
|
||||||
|
.markdown hr {
|
||||||
|
height: 1px;
|
||||||
|
border: 0;
|
||||||
|
background: @site-border-color-split;
|
||||||
|
margin: 72px 0;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown p,
|
||||||
|
.markdown pre {
|
||||||
|
margin: 1em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown ul > li {
|
||||||
|
list-style-type: circle;
|
||||||
|
margin-left: 20px;
|
||||||
|
padding-left: 4px;
|
||||||
|
&:empty {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown ol > li {
|
||||||
|
list-style-type: decimal;
|
||||||
|
margin-left: 20px;
|
||||||
|
padding-left: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown ul > li > p,
|
||||||
|
.markdown ol > li > p {
|
||||||
|
margin: 0.2em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown code {
|
||||||
|
margin: 0 1px;
|
||||||
|
background: #f2f4f5;
|
||||||
|
padding: .2em .4em;
|
||||||
|
border-radius: 3px;
|
||||||
|
font-size: .9em;
|
||||||
|
border: 1px solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown pre {
|
||||||
|
border-radius: @border-radius-sm;
|
||||||
|
background: #f2f4f5;
|
||||||
|
font-family: "Lucida Console", Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown pre code {
|
||||||
|
border: none;
|
||||||
|
background: #f2f4f5;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-size: @font-size-base - 1px;
|
||||||
|
color: @site-text-color;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown strong,
|
||||||
|
.markdown b {
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown > table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0;
|
||||||
|
empty-cells: show;
|
||||||
|
border: 1px solid @site-border-color-split;
|
||||||
|
width: 100%;
|
||||||
|
margin: 8px 0 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown > table th {
|
||||||
|
white-space: nowrap;
|
||||||
|
color: #5c6b77;
|
||||||
|
font-weight: 500;
|
||||||
|
background: rgba(0, 0, 0, 0.02);
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown > table th,
|
||||||
|
.markdown > table td {
|
||||||
|
border: 1px solid @site-border-color-split;
|
||||||
|
padding: 16px 24px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown blockquote {
|
||||||
|
font-size: 90%;
|
||||||
|
color: @site-text-color-secondary;
|
||||||
|
border-left: 4px solid @site-border-color-split;
|
||||||
|
padding-left: 0.8em;
|
||||||
|
margin: 1em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown blockquote p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown .anchor {
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown .waiting {
|
||||||
|
color: #ccc;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown a.edit-button {
|
||||||
|
line-height: 12px;
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: 10px;
|
||||||
|
height: 12px;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 400;
|
||||||
|
|
||||||
|
i {
|
||||||
|
color: @site-text-color-secondary;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: @primary-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.anticon {
|
||||||
|
display: block;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h1:hover .anchor,
|
||||||
|
.markdown h2:hover .anchor,
|
||||||
|
.markdown h3:hover .anchor,
|
||||||
|
.markdown h4:hover .anchor,
|
||||||
|
.markdown h5:hover .anchor,
|
||||||
|
.markdown h6:hover .anchor {
|
||||||
|
opacity: 1;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown > br,
|
||||||
|
.markdown > p > br {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown.api-container table {
|
||||||
|
font-size: @font-size-base;
|
||||||
|
line-height: @line-height-base;
|
||||||
|
td:first-child {
|
||||||
|
font-weight: 500;
|
||||||
|
width: 20%;
|
||||||
|
font-family: "Lucida Console", Consolas, Menlo, Courier, monospace;
|
||||||
|
}
|
||||||
|
td:nth-child(3) {
|
||||||
|
width: 22%;
|
||||||
|
font-size: 12px;
|
||||||
|
font-family: "Lucida Console", Consolas, Menlo, Courier, monospace;
|
||||||
|
}
|
||||||
|
td:last-child {
|
||||||
|
width: 13%;
|
||||||
|
font-size: 12px;
|
||||||
|
font-family: "Lucida Console", Consolas, Menlo, Courier, monospace;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-demo,
|
||||||
|
[id^="components-grid-demo-"] {
|
||||||
|
.demo-row,
|
||||||
|
.code-box-demo .demo-row {
|
||||||
|
background-image: linear-gradient(90deg, #f5f5f5 4.16666667%, transparent 4.16666667%, transparent 8.33333333%, #f5f5f5 8.33333333%, #f5f5f5 12.5%, transparent 12.5%, transparent 16.66666667%, #f5f5f5 16.66666667%, #f5f5f5 20.83333333%, transparent 20.83333333%, transparent 25%, #f5f5f5 25%, #f5f5f5 29.16666667%, transparent 29.16666667%, transparent 33.33333333%, #f5f5f5 33.33333333%, #f5f5f5 37.5%, transparent 37.5%, transparent 41.66666667%, #f5f5f5 41.66666667%, #f5f5f5 45.83333333%, transparent 45.83333333%, transparent 50%, #f5f5f5 50%, #f5f5f5 54.16666667%, transparent 54.16666667%, transparent 58.33333333%, #f5f5f5 58.33333333%, #f5f5f5 62.5%, transparent 62.5%, transparent 66.66666667%, #f5f5f5 66.66666667%, #f5f5f5 70.83333333%, transparent 70.83333333%, transparent 75%, #f5f5f5 75%, #f5f5f5 79.16666667%, transparent 79.16666667%, transparent 83.33333333%, #f5f5f5 83.33333333%, #f5f5f5 87.5%, transparent 87.5%, transparent 91.66666667%, #f5f5f5 91.66666667%, #f5f5f5 95.83333333%, transparent 95.83333333%);
|
||||||
|
overflow: hidden;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.ant-row-flex,
|
||||||
|
.code-box-demo .ant-row-flex {
|
||||||
|
background: #f5f5f5;
|
||||||
|
}
|
||||||
|
.ant-row > div,
|
||||||
|
.code-box-demo .ant-row > div,
|
||||||
|
.ant-row-flex > div,
|
||||||
|
.code-box-demo .ant-row-flex > div {
|
||||||
|
padding: 5px 0;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 0;
|
||||||
|
min-height: 30px;
|
||||||
|
margin-top: 8px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.code-box-demo .ant-row > div:not(.gutter-row),
|
||||||
|
.code-box-demo .ant-row-flex > div:not(.gutter-row) {
|
||||||
|
background: #00a0e9;
|
||||||
|
padding: 16px 0;
|
||||||
|
&:nth-child(2n+1) {
|
||||||
|
background: fade(#00a0e9, 70%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ant-row .demo-col,
|
||||||
|
.code-box-demo .ant-row .demo-col {
|
||||||
|
text-align: center;
|
||||||
|
padding: 30px 0;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 18px;
|
||||||
|
border: none;
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
.ant-row .demo-col-1,
|
||||||
|
.ant-row .demo-col-1 {
|
||||||
|
background: fade(#00a0e9, 70%);
|
||||||
|
}
|
||||||
|
.ant-row .demo-col-2,
|
||||||
|
.code-box-demo .ant-row .demo-col-2 {
|
||||||
|
background: fade(#00a0e9, 50%);
|
||||||
|
}
|
||||||
|
.ant-row .demo-col-3,
|
||||||
|
.code-box-demo .ant-row .demo-col-3 {
|
||||||
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
.ant-row .demo-col-4,
|
||||||
|
.code-box-demo .ant-row .demo-col-4 {
|
||||||
|
background: fade(#00a0e9, 60%);
|
||||||
|
}
|
||||||
|
.ant-row .demo-col-5,
|
||||||
|
.code-box-demo .ant-row .demo-col-5 {
|
||||||
|
background: rgba(255, 255, 255, 0.5);
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
.code-box-demo .height-100 {
|
||||||
|
height: 100px;
|
||||||
|
line-height: 100px;
|
||||||
|
}
|
||||||
|
.code-box-demo .height-50 {
|
||||||
|
height: 50px;
|
||||||
|
line-height: 50px;
|
||||||
|
}
|
||||||
|
.code-box-demo .height-120 {
|
||||||
|
height: 120px;
|
||||||
|
line-height: 120px;
|
||||||
|
}
|
||||||
|
.code-box-demo .height-80 {
|
||||||
|
height: 80px;
|
||||||
|
line-height: 80px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// For Changelog
|
||||||
|
.markdown ul.ant-timeline {
|
||||||
|
line-height: 2;
|
||||||
|
li.ant-timeline-item {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0 0 30px;
|
||||||
|
.ant-timeline-item-content {
|
||||||
|
font-size: 14px;
|
||||||
|
padding-left: 32px;
|
||||||
|
position: relative;
|
||||||
|
top: -14px;
|
||||||
|
> h2 {
|
||||||
|
margin-top: 0;
|
||||||
|
padding-top: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
li.ant-timeline-item:first-child {
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,53 @@
|
||||||
|
/* Browser mockup code
|
||||||
|
* Contribute: https://gist.github.com/jarthod/8719db9fef8deb937f4f
|
||||||
|
* Live example: https://updown.io
|
||||||
|
*/
|
||||||
|
|
||||||
|
.browser-mockup {
|
||||||
|
border-top: 2em solid rgba(230, 230, 230, 0.7);
|
||||||
|
box-shadow: 0 0.1em 0.5em 0 rgba(0, 0, 0, 0.28);
|
||||||
|
position: relative;
|
||||||
|
border-radius: 3px 3px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.browser-mockup:before {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
content: '';
|
||||||
|
top: -1.25em;
|
||||||
|
left: 1em;
|
||||||
|
width: 0.5em;
|
||||||
|
height: 0.5em;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #f44;
|
||||||
|
box-shadow: 0 0 0 2px #f44, 1.5em 0 0 2px #9b3, 3em 0 0 2px #fb5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.browser-mockup.with-tab:after {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
content: '';
|
||||||
|
top: -2em;
|
||||||
|
left: 5.5em;
|
||||||
|
width: 20%;
|
||||||
|
height: 0;
|
||||||
|
border-bottom: 2em solid white;
|
||||||
|
border-left: 0.8em solid transparent;
|
||||||
|
border-right: 0.8em solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.browser-mockup.with-url:after {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
content: '';
|
||||||
|
top: -1.6em;
|
||||||
|
left: 5.5em;
|
||||||
|
width: ~"calc(100% - 6em)";
|
||||||
|
height: 1.2em;
|
||||||
|
border-radius: 2px;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.browser-mockup > * {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
.motion-container {
|
||||||
|
height: 190px;
|
||||||
|
line-height: 190px;
|
||||||
|
text-align: center;
|
||||||
|
margin: 40px 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.motion-example {
|
||||||
|
width: 180px;
|
||||||
|
height: 180px;
|
||||||
|
line-height: 180px;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
display: inline-block !important;
|
||||||
|
border-radius: 8px;
|
||||||
|
animation-duration: 0.5s !important;
|
||||||
|
font-weight: bold;
|
||||||
|
background: url(https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg) center/180px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.motion-select-wrapper {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.motion-select {
|
||||||
|
text-align: left;
|
||||||
|
width: 180px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-player {
|
||||||
|
position: relative;
|
||||||
|
max-width: 800px;
|
||||||
|
&-right {
|
||||||
|
width: 616px;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
.new-version-info-modal {
|
||||||
|
img {
|
||||||
|
width: 100px;
|
||||||
|
position: absolute;
|
||||||
|
left: 34px;
|
||||||
|
top: 36px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
margin-top: 1em;
|
||||||
|
}
|
||||||
|
.anticon {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.ant-confirm-body {
|
||||||
|
.ant-confirm-title {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
margin-left: 120px;
|
||||||
|
.ant-confirm-content {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,35 @@
|
||||||
|
#page-404 {
|
||||||
|
background-image: url('https://os.alipayobjects.com/rmsportal/NOAjOBbnYCrNzrW.jpg');
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-attachment: fixed;
|
||||||
|
background-position: center;
|
||||||
|
background-size: 100%;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 100;
|
||||||
|
|
||||||
|
section {
|
||||||
|
position: absolute;
|
||||||
|
top: 48%;
|
||||||
|
left: 55%;
|
||||||
|
margin: -103px 0 0 -120px;
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
color: @primary-color;
|
||||||
|
font-size: 120px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: @site-text-color;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,62 @@
|
||||||
|
/* Make clicks pass-through */
|
||||||
|
#nprogress {
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nprogress .bar {
|
||||||
|
background: @primary-color;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 1031;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 2px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Fancy blur effect */
|
||||||
|
#nprogress .peg {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
width: 100px;
|
||||||
|
height: 100%;
|
||||||
|
box-shadow: 0 0 10px @primary-color, 0 0 5px @primary-color;
|
||||||
|
opacity: 1;
|
||||||
|
transform: rotate(3deg) translate(0, -4px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Remove these to get rid of the spinner */
|
||||||
|
#nprogress .spinner {
|
||||||
|
display: block;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 1031;
|
||||||
|
top: 15px;
|
||||||
|
right: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nprogress .spinner-icon {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: solid 2px transparent;
|
||||||
|
border-top-color: @primary-color;
|
||||||
|
border-left-color: @primary-color;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: nprogress-spinner 400ms linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nprogress-custom-parent {
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nprogress-custom-parent #nprogress .spinner,
|
||||||
|
.nprogress-custom-parent #nprogress .bar {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes nprogress-spinner {
|
||||||
|
0% { transform: rotate(0deg); }
|
||||||
|
100% { transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,61 @@
|
||||||
|
.prev-next-nav {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: ~"calc(100% - 194px - 64px)";
|
||||||
|
margin-left: 64px;
|
||||||
|
font-size: 14px;
|
||||||
|
border-top: 1px solid @site-border-color-split;
|
||||||
|
|
||||||
|
> .prev-page,
|
||||||
|
> .next-page {
|
||||||
|
width: 50%;
|
||||||
|
float: left;
|
||||||
|
line-height: 72px;
|
||||||
|
height: 72px;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
> a.prev-page {
|
||||||
|
&:before {
|
||||||
|
font-family: 'anticon';
|
||||||
|
content: '\e61c';
|
||||||
|
font-size: 12px;
|
||||||
|
margin-right: 1em;
|
||||||
|
color: @site-text-color-secondary;
|
||||||
|
transition: all .3s;
|
||||||
|
position: relative;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover:before {
|
||||||
|
color: @primary-color;
|
||||||
|
left: -3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> .next-page {
|
||||||
|
text-align: right;
|
||||||
|
float: right;
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
font-family: 'anticon';
|
||||||
|
content: '\e61b';
|
||||||
|
font-size: 12px;
|
||||||
|
margin-left: 1em;
|
||||||
|
color: @site-text-color-secondary;
|
||||||
|
transition: all .3s;
|
||||||
|
position: relative;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover:after {
|
||||||
|
color: @primary-color;
|
||||||
|
right: -3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.chinese {
|
||||||
|
margin-left: 0.5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,159 @@
|
||||||
|
.preview-image-boxes {
|
||||||
|
display: flex;
|
||||||
|
float: right;
|
||||||
|
margin: 0 0 70px 64px;
|
||||||
|
width: 496px;
|
||||||
|
clear: both;
|
||||||
|
|
||||||
|
&-with-carousel {
|
||||||
|
width: 420px;
|
||||||
|
|
||||||
|
.preview-image-box img {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-image-boxes + .preview-image-boxes {
|
||||||
|
margin-top: -35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-image-box {
|
||||||
|
width: 100%;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-image-box + .preview-image-box {
|
||||||
|
margin-left: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-image-wrapper {
|
||||||
|
background: #f2f4f5;
|
||||||
|
padding: 16px;
|
||||||
|
display: inline-block;
|
||||||
|
text-align: center;
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-image-wrapper.video {
|
||||||
|
padding: 0;
|
||||||
|
background: 0;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-image-wrapper video {
|
||||||
|
width: 100%;
|
||||||
|
display: block;
|
||||||
|
+ svg {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-image-wrapper.good:after {
|
||||||
|
content: '';
|
||||||
|
width: 100%;
|
||||||
|
height: 3px;
|
||||||
|
background: @primary-color;
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-image-wrapper.bad:after {
|
||||||
|
content: '';
|
||||||
|
width: 100%;
|
||||||
|
height: 3px;
|
||||||
|
background: @error-color;
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-image-title {
|
||||||
|
font-size: 12px;
|
||||||
|
margin-top: 5px;
|
||||||
|
color: @site-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-image-description {
|
||||||
|
font-size: 12px;
|
||||||
|
margin-top: 2px;
|
||||||
|
color: @site-text-color-secondary;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-image-description hr {
|
||||||
|
margin: 2px 0;
|
||||||
|
border: 0;
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-image-box img {
|
||||||
|
cursor: pointer;
|
||||||
|
max-width: 100%;
|
||||||
|
transition: all .3s;
|
||||||
|
background: #fff;
|
||||||
|
padding: 12px;
|
||||||
|
border-radius: @border-radius-base;
|
||||||
|
&.no-padding {
|
||||||
|
padding: 0;
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-image-boxes.preview-image-boxes-with-carousel img {
|
||||||
|
padding: 0;
|
||||||
|
box-shadow: 0 1px 0 0 #ddd, 0 3px 0 0 #fff, 0 4px 0 0 #ddd, 0 6px 0 0 #fff, 0 7px 0 0 #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-image-box img:hover {
|
||||||
|
box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-modal {
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
&-container {
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-carousel {
|
||||||
|
.slick-slider {
|
||||||
|
padding-bottom: 24px;
|
||||||
|
img {
|
||||||
|
display: inline;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.slick-dots {
|
||||||
|
bottom: 4px;
|
||||||
|
li button {
|
||||||
|
background: #888;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-modal-single.slick-slider {
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-modal-single .slick-dots {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.transition-video-player {
|
||||||
|
float: right;
|
||||||
|
padding: 0 0 70px 20px;
|
||||||
|
width: 600px;
|
||||||
|
|
||||||
|
.preview-image-wrapper {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,71 @@
|
||||||
|
.resource-cards {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: wrap;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resource-card {
|
||||||
|
display: flex;
|
||||||
|
max-width: 420px;
|
||||||
|
width: ~"calc(50% - 24px)";
|
||||||
|
min-width: 300px;
|
||||||
|
height: 130px;
|
||||||
|
border: 1px solid @border-color-base;
|
||||||
|
border-radius: @border-radius-base;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #777;
|
||||||
|
margin: 24px 24px 0 0;
|
||||||
|
vertical-align: middle;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resource-card:hover {
|
||||||
|
box-shadow: 0 3px 8px #d3ddeb;
|
||||||
|
border-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resource-card:hover .resource-card-title {
|
||||||
|
color: @primary-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resource-card.disabled {
|
||||||
|
opacity: 0.45;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resource-card-cover, .resource-card-icon {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 130px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resource-card-cover img {
|
||||||
|
width: 68px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resource-card-content {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resource-card-title {
|
||||||
|
display: block;
|
||||||
|
font-size: 16px;
|
||||||
|
color: @site-text-color;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
line-height: 1.2;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resource-card-description {
|
||||||
|
display: block;
|
||||||
|
color: #697b8c;
|
||||||
|
padding-right: 16px;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,369 @@
|
||||||
|
@import "../../../components/style/themes/default.less";
|
||||||
|
|
||||||
|
.nav-phone-icon {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
right: 30px;
|
||||||
|
top: 25px;
|
||||||
|
z-index: 1;
|
||||||
|
width: 16px;
|
||||||
|
height: 22px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width: 1440px) and (max-width: 1599px) {
|
||||||
|
.main-wrapper > .ant-row > .ant-col-xl-5 {
|
||||||
|
width: 274px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header .ant-row .ant-col-xl-5 {
|
||||||
|
width: 274px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 1280px) {
|
||||||
|
.en-us #search-box {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: @screen-xl) {
|
||||||
|
#search-box {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#logo {
|
||||||
|
padding: 0 40px;
|
||||||
|
}
|
||||||
|
.banner-wrapper .banner-title-wrapper {
|
||||||
|
h1 {
|
||||||
|
font-size: 36px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 767.99px) {
|
||||||
|
#header {
|
||||||
|
text-align: center;
|
||||||
|
#logo {
|
||||||
|
float: initial;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#search-box {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.code-boxes-col-2-1, .code-boxes-col-1-1 {
|
||||||
|
float: none;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.preview-image-boxes {
|
||||||
|
margin: 0 !important;
|
||||||
|
float: none;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.preview-image-box {
|
||||||
|
padding-left: 0;
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-wrapper {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.version {
|
||||||
|
display: block;
|
||||||
|
margin: 29px auto 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popover-menu {
|
||||||
|
width: 300px;
|
||||||
|
div.version {
|
||||||
|
margin: 16px auto;
|
||||||
|
}
|
||||||
|
.ant-popover-inner {
|
||||||
|
overflow: hidden;
|
||||||
|
&-content {
|
||||||
|
padding: 0;
|
||||||
|
.ant-select {
|
||||||
|
width: 60%;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.ant-btn {
|
||||||
|
margin: 16px 8% 0 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#nav a.header-link {
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ul#nav,
|
||||||
|
ul#nav li {
|
||||||
|
width: 100%;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul#nav li {
|
||||||
|
line-height: 40px;
|
||||||
|
height: 40px;
|
||||||
|
padding: 0 !important;
|
||||||
|
border: 0;
|
||||||
|
a {
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-phone-icon {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-phone-icon:before {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
border-radius: 2px;
|
||||||
|
width: 16px;
|
||||||
|
height: 2px;
|
||||||
|
background: #777;
|
||||||
|
box-shadow: 0 6px 0 0 #777, 0 12px 0 0 #777;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
height: calc(100% - 86px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.aside-container {
|
||||||
|
float: none;
|
||||||
|
width: auto;
|
||||||
|
padding-bottom: 30px;
|
||||||
|
border-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-container {
|
||||||
|
padding-left: 16px;
|
||||||
|
padding-right: 16px;
|
||||||
|
margin-right: 0;
|
||||||
|
> .markdown > * {
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#footer {
|
||||||
|
text-align: center;
|
||||||
|
.footer-wrap {
|
||||||
|
padding: 40px;
|
||||||
|
.ant-row {
|
||||||
|
padding: 0;
|
||||||
|
> div {
|
||||||
|
&:nth-child(2),
|
||||||
|
&:nth-child(4) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.footer-center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
.bottom-bar {
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
|
.translate-button {
|
||||||
|
width: auto;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
> div > span {
|
||||||
|
display: block;
|
||||||
|
&:nth-child(1), &:nth-child(2) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.prev-next-nav {
|
||||||
|
margin-left: 16px;
|
||||||
|
width: ~"calc(100% - 32px)";
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer {
|
||||||
|
.ant-menu-inline .ant-menu-item:after,
|
||||||
|
.ant-menu-vertical .ant-menu-item:after {
|
||||||
|
left: 0;
|
||||||
|
right: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#_hj_feedback_container {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
/** home 区块 **/
|
||||||
|
.home-page-wrapper {
|
||||||
|
.page {
|
||||||
|
h2 {
|
||||||
|
margin: 80px auto 64px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.parallax-bg {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.banner {
|
||||||
|
display: block;
|
||||||
|
height: 632px;
|
||||||
|
&-bg-wrapper {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.img-wrapper,
|
||||||
|
.text-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
display: inline-block;
|
||||||
|
text-align: center;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
.img-wrapper {
|
||||||
|
position: initial;
|
||||||
|
margin-top: 48px;
|
||||||
|
svg {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.text-wrapper {
|
||||||
|
margin-top: 48px;
|
||||||
|
min-height: 200px;
|
||||||
|
padding: 0 16px;
|
||||||
|
h1 {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 28px;
|
||||||
|
color: @home-text-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.page1 {
|
||||||
|
min-height: 1538px;
|
||||||
|
.ant-row {
|
||||||
|
margin: 24px auto 64px;
|
||||||
|
>div {
|
||||||
|
margin-bottom: 48px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.page2 {
|
||||||
|
min-height: 840px;
|
||||||
|
background: #fff;
|
||||||
|
&-content {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
&-components {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
&-product {
|
||||||
|
min-height: auto;
|
||||||
|
padding: 0 16px;
|
||||||
|
.product-block {
|
||||||
|
padding-bottom: 35px;
|
||||||
|
margin-bottom: 34px;
|
||||||
|
border-bottom: 1px solid #ebedf0;
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 32px;
|
||||||
|
border-bottom: none;
|
||||||
|
.block-text-wrapper {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.block-image-wrapper {
|
||||||
|
height: 88px;
|
||||||
|
img {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.block-text-wrapper {
|
||||||
|
border-bottom: none;
|
||||||
|
padding-bottom: 0;
|
||||||
|
h4 {
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 24px;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
font-size: 12px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
.components-button-wrapper {
|
||||||
|
font-size: 12px;
|
||||||
|
margin-top: 16px;
|
||||||
|
a {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.page3 {
|
||||||
|
min-height: 688px;
|
||||||
|
background: url('https://gw.alipayobjects.com/zos/rmsportal/qICoJIqqQRMeRGhPHBBS.svg') no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
.ant-row {
|
||||||
|
margin: 0 8px;
|
||||||
|
}
|
||||||
|
.page3-block {
|
||||||
|
padding: 24px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 0 8px 16px rgba(174, 185, 193, 0.3);
|
||||||
|
margin-bottom: 32px;
|
||||||
|
&:nth-child(2) {
|
||||||
|
.page3-img-wrapper img {
|
||||||
|
width: 70%;
|
||||||
|
margin: auto;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.page3-img-wrapper {
|
||||||
|
width: 20%;
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.page3-text-wrapper {
|
||||||
|
width: 80%;
|
||||||
|
margin: 0;
|
||||||
|
max-width: initial;
|
||||||
|
padding-left: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
@site-heading-color: #0d1a26;
|
||||||
|
@site-text-color: #314659;
|
||||||
|
@site-text-color-secondary: #697b8c;
|
||||||
|
@site-border-color-split: #ebedf0;
|
||||||
|
|
@ -0,0 +1,64 @@
|
||||||
|
.toc {
|
||||||
|
font-size: 12px;
|
||||||
|
margin: 16px 0;
|
||||||
|
padding-left: 0;
|
||||||
|
border-left: 1px solid #ebedf0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.toc > li {
|
||||||
|
list-style: none;
|
||||||
|
margin-left: 0;
|
||||||
|
padding-left: 0;
|
||||||
|
line-height: 1.5;
|
||||||
|
&:not(:last-child) {
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc li > ul {
|
||||||
|
text-indent: 8px;
|
||||||
|
font-size: 12px;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc a {
|
||||||
|
padding-left: 16px;
|
||||||
|
display: block;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
color: @site-text-color;
|
||||||
|
width: 110px;
|
||||||
|
border-left: 1px solid transparent;
|
||||||
|
margin-left: -1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc a:hover {
|
||||||
|
color: @primary-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc a.current {
|
||||||
|
border-color: @primary-color;
|
||||||
|
color: @primary-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-affix {
|
||||||
|
position: absolute;
|
||||||
|
top: 8px;
|
||||||
|
right: 20px;
|
||||||
|
.ant-affix {
|
||||||
|
background: #fff;
|
||||||
|
overflow: auto;
|
||||||
|
max-height: ~"calc(100vh - 16px)";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.toc-affix-bottom {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 88px;
|
||||||
|
right: 20px;
|
||||||
|
.ant-affix {
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
export function isZhCN (name) {
|
||||||
|
return /-cn\/?$/.test(name)
|
||||||
|
}
|
||||||
|
|
@ -120,7 +120,7 @@ md.core.ruler.push('update_template', function replace ({ tokens }) {
|
||||||
module.exports = {
|
module.exports = {
|
||||||
entry: {
|
entry: {
|
||||||
index: [
|
index: [
|
||||||
'./examples/index.js',
|
'./site/index.js',
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
module: {
|
module: {
|
||||||
|
|
|
||||||
|
|
@ -5,9 +5,15 @@ const merge = require('webpack-merge')
|
||||||
const baseWebpackConfig = require('./webpack.base.config')
|
const baseWebpackConfig = require('./webpack.base.config')
|
||||||
|
|
||||||
module.exports = merge(baseWebpackConfig, {
|
module.exports = merge(baseWebpackConfig, {
|
||||||
|
entry: {
|
||||||
|
index: [
|
||||||
|
'./examples/index.js',
|
||||||
|
],
|
||||||
|
},
|
||||||
output: {
|
output: {
|
||||||
path: path.resolve(__dirname, './dist'),
|
path: path.resolve(__dirname, './dist'),
|
||||||
publicPath: '/',
|
// publicPath: '/',
|
||||||
|
publicPath: '/ant-design/',
|
||||||
filename: 'build.js',
|
filename: 'build.js',
|
||||||
},
|
},
|
||||||
module: {
|
module: {
|
||||||
|
|
@ -37,9 +43,14 @@ module.exports = merge(baseWebpackConfig, {
|
||||||
devServer: {
|
devServer: {
|
||||||
port: 3000,
|
port: 3000,
|
||||||
host: '0.0.0.0',
|
host: '0.0.0.0',
|
||||||
|
// historyApiFallback: {
|
||||||
|
// rewrites: [
|
||||||
|
// { from: /.*/, to: '/index.html' },
|
||||||
|
// ],
|
||||||
|
// },
|
||||||
historyApiFallback: {
|
historyApiFallback: {
|
||||||
rewrites: [
|
rewrites: [
|
||||||
{ from: /.*/, to: '/index.html' },
|
{ from: /./, to: '/ant-design/index.html' },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
disableHostCheck: true,
|
disableHostCheck: true,
|
||||||
|
|
@ -51,7 +62,7 @@ module.exports = merge(baseWebpackConfig, {
|
||||||
devtool: '#source-map',
|
devtool: '#source-map',
|
||||||
plugins: [
|
plugins: [
|
||||||
new HtmlWebpackPlugin({
|
new HtmlWebpackPlugin({
|
||||||
template: 'examples/index.html',
|
template: 'site/index.html',
|
||||||
filename: 'index.html',
|
filename: 'index.html',
|
||||||
inject: true,
|
inject: true,
|
||||||
}),
|
}),
|
||||||
|
|
|
||||||
|
|
@ -13,8 +13,8 @@ const modulePlugin = new ExtractTextPlugin({
|
||||||
|
|
||||||
module.exports = merge(baseWebpackConfig, {
|
module.exports = merge(baseWebpackConfig, {
|
||||||
output: {
|
output: {
|
||||||
path: path.resolve(__dirname, './dist'),
|
path: path.resolve(__dirname, './site-dist'),
|
||||||
publicPath: './',
|
publicPath: '/ant-design/',
|
||||||
filename: '[name].[chunkhash].js',
|
filename: '[name].[chunkhash].js',
|
||||||
chunkFilename: '[chunkhash].async.js',
|
chunkFilename: '[chunkhash].async.js',
|
||||||
},
|
},
|
||||||
|
|
@ -74,7 +74,7 @@ module.exports = merge(baseWebpackConfig, {
|
||||||
},
|
},
|
||||||
}),
|
}),
|
||||||
new HtmlWebpackPlugin({
|
new HtmlWebpackPlugin({
|
||||||
template: './examples/index.html',
|
template: './site/index.html',
|
||||||
inject: true,
|
inject: true,
|
||||||
minify: { collapseWhitespace: true },
|
minify: { collapseWhitespace: true },
|
||||||
production: true,
|
production: true,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue