From 71db98cf63594113645a19555a54040b68ce78cd Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Wed, 4 Apr 2018 18:39:21 +0800 Subject: [PATCH 1/5] update site --- .gitignore | 1 + package-lock.json | 16 +- package.json | 4 +- scripts/deploy-to-gh-pages.sh | 8 +- scripts/gulpfile.js | 80 ++++ scripts/run.js | 26 ++ site/components/IconSet/CopyableIcon.vue | 37 ++ site/components/IconSet/index.vue | 40 ++ site/components/api.vue | 18 + site/components/demo.vue | 83 ++++ site/components/demoBox.vue | 163 ++++++++ site/components/header.vue | 53 +++ site/components/md.vue | 40 ++ site/demo.js | 41 ++ site/index.html | 17 + site/index.js | 36 ++ site/index.less | 64 +++ site/routes.js | 6 + site/theme/static/colors.less | 170 ++++++++ site/theme/static/common.less | 132 +++++++ site/theme/static/demo.less | 261 +++++++++++++ site/theme/static/docsearch.less | 22 ++ site/theme/static/footer.less | 71 ++++ site/theme/static/header.less | 144 +++++++ site/theme/static/highlight.less | 153 ++++++++ site/theme/static/home.less | 366 +++++++++++++++++ site/theme/static/icons.less | 66 ++++ site/theme/static/index.less | 22 ++ site/theme/static/markdown.less | 325 +++++++++++++++ site/theme/static/mock-browser.less | 53 +++ site/theme/static/motion.less | 39 ++ site/theme/static/new-version-info-modal.less | 23 ++ site/theme/static/not-found.less | 35 ++ site/theme/static/nprogress.less | 62 +++ site/theme/static/page-nav.less | 61 +++ site/theme/static/preview-img.less | 159 ++++++++ site/theme/static/resource.less | 71 ++++ site/theme/static/responsive.less | 369 ++++++++++++++++++ site/theme/static/theme.less | 4 + site/theme/static/toc.less | 64 +++ site/util.js | 3 + webpack.base.config.js | 2 +- webpack.config.js | 17 +- webpack.site.config.js | 6 +- 44 files changed, 3413 insertions(+), 20 deletions(-) create mode 100644 scripts/gulpfile.js create mode 100644 scripts/run.js create mode 100644 site/components/IconSet/CopyableIcon.vue create mode 100644 site/components/IconSet/index.vue create mode 100644 site/components/api.vue create mode 100644 site/components/demo.vue create mode 100644 site/components/demoBox.vue create mode 100644 site/components/header.vue create mode 100644 site/components/md.vue create mode 100644 site/demo.js create mode 100644 site/index.html create mode 100644 site/index.js create mode 100644 site/index.less create mode 100644 site/routes.js create mode 100644 site/theme/static/colors.less create mode 100644 site/theme/static/common.less create mode 100644 site/theme/static/demo.less create mode 100644 site/theme/static/docsearch.less create mode 100644 site/theme/static/footer.less create mode 100644 site/theme/static/header.less create mode 100644 site/theme/static/highlight.less create mode 100644 site/theme/static/home.less create mode 100644 site/theme/static/icons.less create mode 100644 site/theme/static/index.less create mode 100644 site/theme/static/markdown.less create mode 100644 site/theme/static/mock-browser.less create mode 100644 site/theme/static/motion.less create mode 100644 site/theme/static/new-version-info-modal.less create mode 100644 site/theme/static/not-found.less create mode 100644 site/theme/static/nprogress.less create mode 100644 site/theme/static/page-nav.less create mode 100644 site/theme/static/preview-img.less create mode 100644 site/theme/static/resource.less create mode 100644 site/theme/static/responsive.less create mode 100644 site/theme/static/theme.less create mode 100644 site/theme/static/toc.less create mode 100644 site/util.js diff --git a/.gitignore b/.gitignore index e9f5c4143..9c887521b 100644 --- a/.gitignore +++ b/.gitignore @@ -61,6 +61,7 @@ typings/ dist lib es +site-dist # 备份文件 /components/test/* diff --git a/package-lock.json b/package-lock.json index dc96015fc..308f6a447 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7649,6 +7649,11 @@ "integrity": "sha1-bghLvJIGH7sJcexYts5tQE4k2mk=", "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": { "version": "2.1.0", "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", "integrity": "sha1-mnWdOcXy/1A/1TAGRu1EX4jE+a8=", "dev": true, - "optional": true, "requires": { "jsonify": "0.0.0" } @@ -8204,8 +8208,7 @@ "version": "0.0.0", "resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.0.tgz", "integrity": "sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM=", - "dev": true, - "optional": true + "dev": true }, "jsonp": { "version": "0.2.1", @@ -9805,8 +9808,7 @@ "version": "1.4.4", "resolved": "https://registry.npmjs.org/nwmatcher/-/nwmatcher-1.4.4.tgz", "integrity": "sha512-3iuY4N5dhgMpCUrOVnuAdGrgxVqV2cJpM+XNccjR2DKOB1RUP0aA+wGXEiNziG/UKboFyGBIoKOaNlJxx8bciQ==", - "dev": true, - "optional": true + "dev": true }, "oauth-sign": { "version": "0.8.2", @@ -13680,7 +13682,6 @@ "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz", "integrity": "sha1-BktyYCsY+Q8pGSuLG8QY/9Hr078=", "dev": true, - "optional": true, "requires": { "asap": "2.0.6" } @@ -16393,8 +16394,7 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz", "integrity": "sha1-bgkk1r2mta/jSeOabWMoUKD4grc=", - "dev": true, - "optional": true + "dev": true }, "uglifyjs-webpack-plugin": { "version": "0.4.6", diff --git a/package.json b/package.json index 9b08e686a..599c94212 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,8 @@ "scripts": { "start": "NODE_ENV=development ./node_modules/.bin/webpack-dev-server --open --hot", "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", "dist": "node antd-tools/cli/run.js dist", "lint": "eslint -c ./.eslintrc --fix --ext .jsx ./components", @@ -100,6 +101,7 @@ "markdown-it": "^8.4.0", "marked": "^0.3.7", "merge2": "^1.2.1", + "mkdirp": "^0.5.1", "mocha": "^3.2.0", "postcss": "^6.0.20", "postcss-loader": "^2.1.2", diff --git a/scripts/deploy-to-gh-pages.sh b/scripts/deploy-to-gh-pages.sh index 81614950e..4cf017943 100644 --- a/scripts/deploy-to-gh-pages.sh +++ b/scripts/deploy-to-gh-pages.sh @@ -6,15 +6,15 @@ if [[ $TRAVIS_BRANCH == "master" && $TRAVIS_PULL_REQUEST == "false" ]]; then echo "Starting to update gh-pages\n" -rm -rf dist -mkdir dist +rm -rf site-dist +mkdir site-dist git config --global user.email "travis@travis-ci.org" 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 add -f . git commit -m "Travis build" diff --git a/scripts/gulpfile.js b/scripts/gulpfile.js new file mode 100644 index 000000000..1328ed011 --- /dev/null +++ b/scripts/gulpfile.js @@ -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() +}) + diff --git a/scripts/run.js b/scripts/run.js new file mode 100644 index 000000000..6dd04a2b6 --- /dev/null +++ b/scripts/run.js @@ -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) +} diff --git a/site/components/IconSet/CopyableIcon.vue b/site/components/IconSet/CopyableIcon.vue new file mode 100644 index 000000000..855d21616 --- /dev/null +++ b/site/components/IconSet/CopyableIcon.vue @@ -0,0 +1,37 @@ + + diff --git a/site/components/IconSet/index.vue b/site/components/IconSet/index.vue new file mode 100644 index 000000000..61109f506 --- /dev/null +++ b/site/components/IconSet/index.vue @@ -0,0 +1,40 @@ + diff --git a/site/components/api.vue b/site/components/api.vue new file mode 100644 index 000000000..7d745eae3 --- /dev/null +++ b/site/components/api.vue @@ -0,0 +1,18 @@ + + diff --git a/site/components/demo.vue b/site/components/demo.vue new file mode 100644 index 000000000..930bf9cd2 --- /dev/null +++ b/site/components/demo.vue @@ -0,0 +1,83 @@ + diff --git a/site/components/demoBox.vue b/site/components/demoBox.vue new file mode 100644 index 000000000..21d6cb03b --- /dev/null +++ b/site/components/demoBox.vue @@ -0,0 +1,163 @@ + + + diff --git a/site/components/header.vue b/site/components/header.vue new file mode 100644 index 000000000..90654041d --- /dev/null +++ b/site/components/header.vue @@ -0,0 +1,53 @@ + diff --git a/site/components/md.vue b/site/components/md.vue new file mode 100644 index 000000000..1f03c510f --- /dev/null +++ b/site/components/md.vue @@ -0,0 +1,40 @@ + + diff --git a/site/demo.js b/site/demo.js new file mode 100644 index 000000000..afd09b0e3 --- /dev/null +++ b/site/demo.js @@ -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' diff --git a/site/index.html b/site/index.html new file mode 100644 index 000000000..17709bbc9 --- /dev/null +++ b/site/index.html @@ -0,0 +1,17 @@ + + + + + + + + + + + +
+ +
+ + + diff --git a/site/index.js b/site/index.js new file mode 100644 index 000000000..8049d14e2 --- /dev/null +++ b/site/index.js @@ -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, +}) diff --git a/site/index.less b/site/index.less new file mode 100644 index 000000000..7abb49a15 --- /dev/null +++ b/site/index.less @@ -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; +} + diff --git a/site/routes.js b/site/routes.js new file mode 100644 index 000000000..5e3ab8902 --- /dev/null +++ b/site/routes.js @@ -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' }, +] diff --git a/site/theme/static/colors.less b/site/theme/static/colors.less new file mode 100644 index 000000000..271da99f4 --- /dev/null +++ b/site/theme/static/colors.less @@ -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); +} diff --git a/site/theme/static/common.less b/site/theme/static/common.less new file mode 100644 index 000000000..0f63a7709 --- /dev/null +++ b/site/theme/static/common.less @@ -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; +} diff --git a/site/theme/static/demo.less b/site/theme/static/demo.less new file mode 100644 index 000000000..b9259641b --- /dev/null +++ b/site/theme/static/demo.less @@ -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; + } + } +} diff --git a/site/theme/static/docsearch.less b/site/theme/static/docsearch.less new file mode 100644 index 000000000..47b53d945 --- /dev/null +++ b/site/theme/static/docsearch.less @@ -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; + } +} diff --git a/site/theme/static/footer.less b/site/theme/static/footer.less new file mode 100644 index 000000000..b8f16fbd8 --- /dev/null +++ b/site/theme/static/footer.less @@ -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); + } + } +} diff --git a/site/theme/static/header.less b/site/theme/static/header.less new file mode 100644 index 000000000..174771cc9 --- /dev/null +++ b/site/theme/static/header.less @@ -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; + } +} diff --git a/site/theme/static/highlight.less b/site/theme/static/highlight.less new file mode 100644 index 000000000..0866e387c --- /dev/null +++ b/site/theme/static/highlight.less @@ -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; +} diff --git a/site/theme/static/home.less b/site/theme/static/home.less new file mode 100644 index 000000000..239064832 --- /dev/null +++ b/site/theme/static/home.less @@ -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; + } + } +} diff --git a/site/theme/static/icons.less b/site/theme/static/icons.less new file mode 100644 index 000000000..4297c7a35 --- /dev/null +++ b/site/theme/static/icons.less @@ -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; + } + } +} diff --git a/site/theme/static/index.less b/site/theme/static/index.less new file mode 100644 index 000000000..07b643d90 --- /dev/null +++ b/site/theme/static/index.less @@ -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'; diff --git a/site/theme/static/markdown.less b/site/theme/static/markdown.less new file mode 100644 index 000000000..76970bb45 --- /dev/null +++ b/site/theme/static/markdown.less @@ -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; + } +} diff --git a/site/theme/static/mock-browser.less b/site/theme/static/mock-browser.less new file mode 100644 index 000000000..3350cca41 --- /dev/null +++ b/site/theme/static/mock-browser.less @@ -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; +} diff --git a/site/theme/static/motion.less b/site/theme/static/motion.less new file mode 100644 index 000000000..7d3ac6884 --- /dev/null +++ b/site/theme/static/motion.less @@ -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; + } +} diff --git a/site/theme/static/new-version-info-modal.less b/site/theme/static/new-version-info-modal.less new file mode 100644 index 000000000..e8b044df6 --- /dev/null +++ b/site/theme/static/new-version-info-modal.less @@ -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; + } + } +} diff --git a/site/theme/static/not-found.less b/site/theme/static/not-found.less new file mode 100644 index 000000000..51235ca8f --- /dev/null +++ b/site/theme/static/not-found.less @@ -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; + } +} diff --git a/site/theme/static/nprogress.less b/site/theme/static/nprogress.less new file mode 100644 index 000000000..2bde8229c --- /dev/null +++ b/site/theme/static/nprogress.less @@ -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); } +} diff --git a/site/theme/static/page-nav.less b/site/theme/static/page-nav.less new file mode 100644 index 000000000..234df6b08 --- /dev/null +++ b/site/theme/static/page-nav.less @@ -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; + } +} diff --git a/site/theme/static/preview-img.less b/site/theme/static/preview-img.less new file mode 100644 index 000000000..05410b0dd --- /dev/null +++ b/site/theme/static/preview-img.less @@ -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; + } +} diff --git a/site/theme/static/resource.less b/site/theme/static/resource.less new file mode 100644 index 000000000..b8ec2ec1c --- /dev/null +++ b/site/theme/static/resource.less @@ -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; +} diff --git a/site/theme/static/responsive.less b/site/theme/static/responsive.less new file mode 100644 index 000000000..2ab70df8c --- /dev/null +++ b/site/theme/static/responsive.less @@ -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; + } + } + } +} diff --git a/site/theme/static/theme.less b/site/theme/static/theme.less new file mode 100644 index 000000000..82dae63ad --- /dev/null +++ b/site/theme/static/theme.less @@ -0,0 +1,4 @@ +@site-heading-color: #0d1a26; +@site-text-color: #314659; +@site-text-color-secondary: #697b8c; +@site-border-color-split: #ebedf0; diff --git a/site/theme/static/toc.less b/site/theme/static/toc.less new file mode 100644 index 000000000..f9ccc96be --- /dev/null +++ b/site/theme/static/toc.less @@ -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; + } +} diff --git a/site/util.js b/site/util.js new file mode 100644 index 000000000..264a9aafe --- /dev/null +++ b/site/util.js @@ -0,0 +1,3 @@ +export function isZhCN (name) { + return /-cn\/?$/.test(name) +} diff --git a/webpack.base.config.js b/webpack.base.config.js index 5e8c719df..4ca81fcc5 100644 --- a/webpack.base.config.js +++ b/webpack.base.config.js @@ -120,7 +120,7 @@ md.core.ruler.push('update_template', function replace ({ tokens }) { module.exports = { entry: { index: [ - './examples/index.js', + './site/index.js', ], }, module: { diff --git a/webpack.config.js b/webpack.config.js index 6edd58cb3..679b97cbd 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -5,9 +5,15 @@ const merge = require('webpack-merge') const baseWebpackConfig = require('./webpack.base.config') module.exports = merge(baseWebpackConfig, { + entry: { + index: [ + './examples/index.js', + ], + }, output: { path: path.resolve(__dirname, './dist'), - publicPath: '/', + // publicPath: '/', + publicPath: '/ant-design/', filename: 'build.js', }, module: { @@ -37,9 +43,14 @@ module.exports = merge(baseWebpackConfig, { devServer: { port: 3000, host: '0.0.0.0', + // historyApiFallback: { + // rewrites: [ + // { from: /.*/, to: '/index.html' }, + // ], + // }, historyApiFallback: { rewrites: [ - { from: /.*/, to: '/index.html' }, + { from: /./, to: '/ant-design/index.html' }, ], }, disableHostCheck: true, @@ -51,7 +62,7 @@ module.exports = merge(baseWebpackConfig, { devtool: '#source-map', plugins: [ new HtmlWebpackPlugin({ - template: 'examples/index.html', + template: 'site/index.html', filename: 'index.html', inject: true, }), diff --git a/webpack.site.config.js b/webpack.site.config.js index 59ca57af6..f9193df54 100644 --- a/webpack.site.config.js +++ b/webpack.site.config.js @@ -13,8 +13,8 @@ const modulePlugin = new ExtractTextPlugin({ module.exports = merge(baseWebpackConfig, { output: { - path: path.resolve(__dirname, './dist'), - publicPath: './', + path: path.resolve(__dirname, './site-dist'), + publicPath: '/ant-design/', filename: '[name].[chunkhash].js', chunkFilename: '[chunkhash].async.js', }, @@ -74,7 +74,7 @@ module.exports = merge(baseWebpackConfig, { }, }), new HtmlWebpackPlugin({ - template: './examples/index.html', + template: './site/index.html', inject: true, minify: { collapseWhitespace: true }, production: true, From faf9b9b97da006183fc0d9a28f44fadda3593fdc Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Wed, 4 Apr 2018 18:51:50 +0800 Subject: [PATCH 2/5] fix --- site/components/demo.vue | 6 +++--- site/demo.js | 1 + 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/site/components/demo.vue b/site/components/demo.vue index 930bf9cd2..91c3b0994 100644 --- a/site/components/demo.vue +++ b/site/components/demo.vue @@ -8,9 +8,9 @@ import { isZhCN } from '../util' export default { render () { - let { name } = this.$route.params + const { name } = this.$route.params const lang = isZhCN(name) ? 'cn' : 'us' - name = name.replace('-cn', '') + // name = name.replace('-cn', '') const titleMap = {} const menuConfig = { General: [], @@ -28,7 +28,7 @@ export default { menuConfig[type] = menuConfig[type] || [] menuConfig[type].push(d) } - const Demo = AllDemo[titleMap[name]] + const Demo = AllDemo[titleMap[name.replace('-cn', '')]] const MenuGroup = [] for (const [type, menus] of Object.entries(menuConfig)) { const MenuItems = [] diff --git a/site/demo.js b/site/demo.js index afd09b0e3..c032ecb56 100644 --- a/site/demo.js +++ b/site/demo.js @@ -39,3 +39,4 @@ 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' +export { default as inputNumber } from 'antd/input-number/demo/index.vue' From 024bd35c0fb10d49dfb737853fc2e46298fd460a Mon Sep 17 00:00:00 2001 From: tjz <415800467@qq.com> Date: Wed, 4 Apr 2018 23:59:38 +0800 Subject: [PATCH 3/5] update site --- examples/components/IconSet/CopyableIcon.vue | 37 -- examples/components/IconSet/index.vue | 40 -- examples/components/api.vue | 17 - examples/components/demo.vue | 78 ---- examples/components/demoBox.vue | 162 -------- examples/components/header.vue | 50 --- examples/components/md.vue | 39 -- examples/demo.js | 42 -- examples/index.html | 17 - examples/index.js | 36 -- examples/index.less | 64 --- examples/routes.js | 13 - examples/theme/static/colors.less | 170 -------- examples/theme/static/common.less | 132 ------- examples/theme/static/demo.less | 261 ------------- examples/theme/static/docsearch.less | 22 -- examples/theme/static/footer.less | 71 ---- examples/theme/static/header.less | 144 ------- examples/theme/static/highlight.less | 153 -------- examples/theme/static/home.less | 366 ----------------- examples/theme/static/icons.less | 66 ---- examples/theme/static/index.less | 22 -- examples/theme/static/markdown.less | 325 --------------- examples/theme/static/mock-browser.less | 53 --- examples/theme/static/motion.less | 39 -- .../theme/static/new-version-info-modal.less | 23 -- examples/theme/static/not-found.less | 35 -- examples/theme/static/nprogress.less | 62 --- examples/theme/static/page-nav.less | 61 --- examples/theme/static/preview-img.less | 159 -------- examples/theme/static/resource.less | 71 ---- examples/theme/static/responsive.less | 369 ------------------ examples/theme/static/theme.less | 4 - examples/theme/static/toc.less | 64 --- package-lock.json | 73 ++-- site/components/demo.vue | 55 ++- site/components/demoBox.vue | 17 +- site/components/header.vue | 2 +- site/routes.js | 12 +- webpack.base.config.js | 2 + webpack.config.js | 11 - 41 files changed, 117 insertions(+), 3322 deletions(-) delete mode 100644 examples/components/IconSet/CopyableIcon.vue delete mode 100644 examples/components/IconSet/index.vue delete mode 100644 examples/components/api.vue delete mode 100644 examples/components/demo.vue delete mode 100644 examples/components/demoBox.vue delete mode 100644 examples/components/header.vue delete mode 100644 examples/components/md.vue delete mode 100644 examples/demo.js delete mode 100644 examples/index.html delete mode 100644 examples/index.js delete mode 100644 examples/index.less delete mode 100644 examples/routes.js delete mode 100644 examples/theme/static/colors.less delete mode 100644 examples/theme/static/common.less delete mode 100644 examples/theme/static/demo.less delete mode 100644 examples/theme/static/docsearch.less delete mode 100644 examples/theme/static/footer.less delete mode 100644 examples/theme/static/header.less delete mode 100644 examples/theme/static/highlight.less delete mode 100644 examples/theme/static/home.less delete mode 100644 examples/theme/static/icons.less delete mode 100644 examples/theme/static/index.less delete mode 100644 examples/theme/static/markdown.less delete mode 100644 examples/theme/static/mock-browser.less delete mode 100644 examples/theme/static/motion.less delete mode 100644 examples/theme/static/new-version-info-modal.less delete mode 100644 examples/theme/static/not-found.less delete mode 100644 examples/theme/static/nprogress.less delete mode 100644 examples/theme/static/page-nav.less delete mode 100644 examples/theme/static/preview-img.less delete mode 100644 examples/theme/static/resource.less delete mode 100644 examples/theme/static/responsive.less delete mode 100644 examples/theme/static/theme.less delete mode 100644 examples/theme/static/toc.less diff --git a/examples/components/IconSet/CopyableIcon.vue b/examples/components/IconSet/CopyableIcon.vue deleted file mode 100644 index 855d21616..000000000 --- a/examples/components/IconSet/CopyableIcon.vue +++ /dev/null @@ -1,37 +0,0 @@ - - diff --git a/examples/components/IconSet/index.vue b/examples/components/IconSet/index.vue deleted file mode 100644 index 61109f506..000000000 --- a/examples/components/IconSet/index.vue +++ /dev/null @@ -1,40 +0,0 @@ - diff --git a/examples/components/api.vue b/examples/components/api.vue deleted file mode 100644 index cbfe754aa..000000000 --- a/examples/components/api.vue +++ /dev/null @@ -1,17 +0,0 @@ - - diff --git a/examples/components/demo.vue b/examples/components/demo.vue deleted file mode 100644 index aa696a145..000000000 --- a/examples/components/demo.vue +++ /dev/null @@ -1,78 +0,0 @@ - diff --git a/examples/components/demoBox.vue b/examples/components/demoBox.vue deleted file mode 100644 index 9b873e0a5..000000000 --- a/examples/components/demoBox.vue +++ /dev/null @@ -1,162 +0,0 @@ - - - diff --git a/examples/components/header.vue b/examples/components/header.vue deleted file mode 100644 index 8f1806c5a..000000000 --- a/examples/components/header.vue +++ /dev/null @@ -1,50 +0,0 @@ - diff --git a/examples/components/md.vue b/examples/components/md.vue deleted file mode 100644 index daca17574..000000000 --- a/examples/components/md.vue +++ /dev/null @@ -1,39 +0,0 @@ - - diff --git a/examples/demo.js b/examples/demo.js deleted file mode 100644 index c032ecb56..000000000 --- a/examples/demo.js +++ /dev/null @@ -1,42 +0,0 @@ -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' -export { default as inputNumber } from 'antd/input-number/demo/index.vue' diff --git a/examples/index.html b/examples/index.html deleted file mode 100644 index 17709bbc9..000000000 --- a/examples/index.html +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - - - - - - -
- -
- - - diff --git a/examples/index.js b/examples/index.js deleted file mode 100644 index 0c06c48b6..000000000 --- a/examples/index.js +++ /dev/null @@ -1,36 +0,0 @@ -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: 'hash', - routes, -}) -new Vue({ - el: '#app', - router, -}) diff --git a/examples/index.less b/examples/index.less deleted file mode 100644 index 7abb49a15..000000000 --- a/examples/index.less +++ /dev/null @@ -1,64 +0,0 @@ -@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; -} - diff --git a/examples/routes.js b/examples/routes.js deleted file mode 100644 index 0d3dafd6f..000000000 --- a/examples/routes.js +++ /dev/null @@ -1,13 +0,0 @@ -import Demo from './components/demo.vue' -const AsyncComp = () => { - const hashs = window.location.hash.split('/') - const d = hashs[hashs.length - 1] - return { - component: import(`../components/input-number/demo/${d}`), - } -} -export default [ - { path: '/:lang?/components/:name/:demo?/:other?', component: Demo }, - { path: '/:lang?/test/:name/:demo?', component: AsyncComp }, - { path: '/*', redirect: '/us/components/button' }, -] diff --git a/examples/theme/static/colors.less b/examples/theme/static/colors.less deleted file mode 100644 index 271da99f4..000000000 --- a/examples/theme/static/colors.less +++ /dev/null @@ -1,170 +0,0 @@ -/* 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); -} diff --git a/examples/theme/static/common.less b/examples/theme/static/common.less deleted file mode 100644 index 0f63a7709..000000000 --- a/examples/theme/static/common.less +++ /dev/null @@ -1,132 +0,0 @@ -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; -} diff --git a/examples/theme/static/demo.less b/examples/theme/static/demo.less deleted file mode 100644 index b9259641b..000000000 --- a/examples/theme/static/demo.less +++ /dev/null @@ -1,261 +0,0 @@ -.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; - } - } -} diff --git a/examples/theme/static/docsearch.less b/examples/theme/static/docsearch.less deleted file mode 100644 index 47b53d945..000000000 --- a/examples/theme/static/docsearch.less +++ /dev/null @@ -1,22 +0,0 @@ -.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; - } -} diff --git a/examples/theme/static/footer.less b/examples/theme/static/footer.less deleted file mode 100644 index b8f16fbd8..000000000 --- a/examples/theme/static/footer.less +++ /dev/null @@ -1,71 +0,0 @@ -@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); - } - } -} diff --git a/examples/theme/static/header.less b/examples/theme/static/header.less deleted file mode 100644 index 174771cc9..000000000 --- a/examples/theme/static/header.less +++ /dev/null @@ -1,144 +0,0 @@ -@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; - } -} diff --git a/examples/theme/static/highlight.less b/examples/theme/static/highlight.less deleted file mode 100644 index 0866e387c..000000000 --- a/examples/theme/static/highlight.less +++ /dev/null @@ -1,153 +0,0 @@ -/** -* 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; -} diff --git a/examples/theme/static/home.less b/examples/theme/static/home.less deleted file mode 100644 index 239064832..000000000 --- a/examples/theme/static/home.less +++ /dev/null @@ -1,366 +0,0 @@ -@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; - } - } -} diff --git a/examples/theme/static/icons.less b/examples/theme/static/icons.less deleted file mode 100644 index 4297c7a35..000000000 --- a/examples/theme/static/icons.less +++ /dev/null @@ -1,66 +0,0 @@ -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; - } - } -} diff --git a/examples/theme/static/index.less b/examples/theme/static/index.less deleted file mode 100644 index 07b643d90..000000000 --- a/examples/theme/static/index.less +++ /dev/null @@ -1,22 +0,0 @@ -@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'; diff --git a/examples/theme/static/markdown.less b/examples/theme/static/markdown.less deleted file mode 100644 index 76970bb45..000000000 --- a/examples/theme/static/markdown.less +++ /dev/null @@ -1,325 +0,0 @@ -.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; - } -} diff --git a/examples/theme/static/mock-browser.less b/examples/theme/static/mock-browser.less deleted file mode 100644 index 3350cca41..000000000 --- a/examples/theme/static/mock-browser.less +++ /dev/null @@ -1,53 +0,0 @@ -/* 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; -} diff --git a/examples/theme/static/motion.less b/examples/theme/static/motion.less deleted file mode 100644 index 7d3ac6884..000000000 --- a/examples/theme/static/motion.less +++ /dev/null @@ -1,39 +0,0 @@ -.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; - } -} diff --git a/examples/theme/static/new-version-info-modal.less b/examples/theme/static/new-version-info-modal.less deleted file mode 100644 index e8b044df6..000000000 --- a/examples/theme/static/new-version-info-modal.less +++ /dev/null @@ -1,23 +0,0 @@ -.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; - } - } -} diff --git a/examples/theme/static/not-found.less b/examples/theme/static/not-found.less deleted file mode 100644 index 51235ca8f..000000000 --- a/examples/theme/static/not-found.less +++ /dev/null @@ -1,35 +0,0 @@ -#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; - } -} diff --git a/examples/theme/static/nprogress.less b/examples/theme/static/nprogress.less deleted file mode 100644 index 2bde8229c..000000000 --- a/examples/theme/static/nprogress.less +++ /dev/null @@ -1,62 +0,0 @@ -/* 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); } -} diff --git a/examples/theme/static/page-nav.less b/examples/theme/static/page-nav.less deleted file mode 100644 index 234df6b08..000000000 --- a/examples/theme/static/page-nav.less +++ /dev/null @@ -1,61 +0,0 @@ -.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; - } -} diff --git a/examples/theme/static/preview-img.less b/examples/theme/static/preview-img.less deleted file mode 100644 index 05410b0dd..000000000 --- a/examples/theme/static/preview-img.less +++ /dev/null @@ -1,159 +0,0 @@ -.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; - } -} diff --git a/examples/theme/static/resource.less b/examples/theme/static/resource.less deleted file mode 100644 index b8ec2ec1c..000000000 --- a/examples/theme/static/resource.less +++ /dev/null @@ -1,71 +0,0 @@ -.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; -} diff --git a/examples/theme/static/responsive.less b/examples/theme/static/responsive.less deleted file mode 100644 index 2ab70df8c..000000000 --- a/examples/theme/static/responsive.less +++ /dev/null @@ -1,369 +0,0 @@ -@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; - } - } - } -} diff --git a/examples/theme/static/theme.less b/examples/theme/static/theme.less deleted file mode 100644 index 82dae63ad..000000000 --- a/examples/theme/static/theme.less +++ /dev/null @@ -1,4 +0,0 @@ -@site-heading-color: #0d1a26; -@site-text-color: #314659; -@site-text-color-secondary: #697b8c; -@site-border-color-split: #ebedf0; diff --git a/examples/theme/static/toc.less b/examples/theme/static/toc.less deleted file mode 100644 index f9ccc96be..000000000 --- a/examples/theme/static/toc.less +++ /dev/null @@ -1,64 +0,0 @@ -.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; - } -} diff --git a/package-lock.json b/package-lock.json index 308f6a447..00b205217 100644 --- a/package-lock.json +++ b/package-lock.json @@ -73,7 +73,7 @@ "dev": true, "requires": { "@babel/types": "7.0.0-beta.42", - "lodash": "4.17.4" + "lodash": "4.17.5" }, "dependencies": { "@babel/types": { @@ -83,7 +83,7 @@ "dev": true, "requires": { "esutils": "2.0.2", - "lodash": "4.17.4", + "lodash": "4.17.5", "to-fast-properties": "2.0.0" } }, @@ -104,7 +104,7 @@ "@babel/code-frame": "7.0.0-beta.36", "@babel/types": "7.0.0-beta.36", "babylon": "7.0.0-beta.36", - "lodash": "4.17.4" + "lodash": "4.17.5" }, "dependencies": { "babylon": { @@ -128,7 +128,7 @@ "debug": "3.1.0", "globals": "11.1.0", "invariant": "2.2.2", - "lodash": "4.17.4" + "lodash": "4.17.5" }, "dependencies": { "babylon": { @@ -152,7 +152,7 @@ "dev": true, "requires": { "esutils": "2.0.2", - "lodash": "4.17.4", + "lodash": "4.17.5", "to-fast-properties": "2.0.0" }, "dependencies": { @@ -684,7 +684,7 @@ "convert-source-map": "1.5.1", "fs-readdir-recursive": "1.1.0", "glob": "7.1.2", - "lodash": "4.17.4", + "lodash": "4.17.5", "output-file-sync": "1.1.2", "path-is-absolute": "1.0.1", "slash": "1.0.0", @@ -749,7 +749,7 @@ "convert-source-map": "1.5.1", "debug": "2.6.9", "json5": "0.5.1", - "lodash": "4.17.4", + "lodash": "4.17.5", "minimatch": "3.0.4", "path-is-absolute": "1.0.1", "private": "0.1.8", @@ -800,7 +800,7 @@ "babel-types": "6.26.0", "detect-indent": "4.0.0", "jsesc": "1.3.0", - "lodash": "4.17.4", + "lodash": "4.17.5", "source-map": "0.5.7", "trim-right": "1.0.1" } @@ -1513,7 +1513,7 @@ "babel-traverse": "6.26.0", "babel-types": "6.26.0", "babylon": "6.18.0", - "lodash": "4.17.4" + "lodash": "4.17.5" } }, "babel-traverse": { @@ -1530,7 +1530,7 @@ "debug": "2.6.9", "globals": "9.18.0", "invariant": "2.2.2", - "lodash": "4.17.4" + "lodash": "4.17.5" }, "dependencies": { "debug": { @@ -1552,7 +1552,7 @@ "requires": { "babel-runtime": "6.26.0", "esutils": "2.0.2", - "lodash": "4.17.4", + "lodash": "4.17.5", "to-fast-properties": "1.0.3" } }, @@ -2113,7 +2113,7 @@ "dom-serializer": "0.1.0", "entities": "1.1.1", "htmlparser2": "3.9.2", - "lodash": "4.17.4", + "lodash": "4.17.5", "parse5": "3.0.3" } }, @@ -2459,7 +2459,7 @@ "integrity": "sha1-RYwH4J4NkA/Ci3Cj/sLazR0st/Y=", "dev": true, "requires": { - "lodash": "4.17.4" + "lodash": "4.17.5" } }, "combined-stream": { @@ -3958,7 +3958,7 @@ "js-yaml": "3.10.0", "json-stable-stringify-without-jsonify": "1.0.1", "levn": "0.3.0", - "lodash": "4.17.4", + "lodash": "4.17.5", "minimatch": "3.0.4", "mkdirp": "0.5.1", "natural-compare": "1.4.0", @@ -4446,7 +4446,7 @@ "integrity": "sha1-YaKau2/MAm/qd+VtHG7FOnlZUfQ=", "dev": true, "requires": { - "lodash": "4.17.4" + "lodash": "4.17.5" } } } @@ -7058,7 +7058,7 @@ "bluebird": "3.5.1", "html-minifier": "3.5.8", "loader-utils": "0.2.17", - "lodash": "4.17.4", + "lodash": "4.17.5", "pretty-error": "2.1.1", "toposort": "1.0.6" }, @@ -7141,7 +7141,7 @@ "requires": { "http-proxy": "1.16.2", "is-glob": "3.1.0", - "lodash": "4.17.4", + "lodash": "4.17.5", "micromatch": "2.3.11" }, "dependencies": { @@ -7349,7 +7349,7 @@ "cli-width": "2.2.0", "external-editor": "2.1.0", "figures": "2.0.0", - "lodash": "4.17.4", + "lodash": "4.17.5", "mute-stream": "0.0.7", "run-async": "2.3.0", "rx-lite": "4.0.8", @@ -7966,7 +7966,7 @@ "integrity": "sha1-YaKau2/MAm/qd+VtHG7FOnlZUfQ=", "dev": true, "requires": { - "lodash": "4.17.4" + "lodash": "4.17.5" } } } @@ -8167,6 +8167,7 @@ "resolved": "https://registry.npmjs.org/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz", "integrity": "sha1-mnWdOcXy/1A/1TAGRu1EX4jE+a8=", "dev": true, + "optional": true, "requires": { "jsonify": "0.0.0" } @@ -8208,7 +8209,8 @@ "version": "0.0.0", "resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.0.tgz", "integrity": "sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM=", - "dev": true + "dev": true, + "optional": true }, "jsonp": { "version": "0.2.1", @@ -8354,7 +8356,7 @@ "integrity": "sha1-0jyjSAG9qYY60xjju0vUBisTrNI=", "dev": true, "requires": { - "lodash": "4.17.4", + "lodash": "4.17.5", "phantomjs-prebuilt": "2.1.16" } }, @@ -8833,9 +8835,9 @@ } }, "lodash": { - "version": "4.17.4", - "resolved": "https://registry.npm.taobao.org/lodash/download/lodash-4.17.4.tgz", - "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4=" + "version": "4.17.5", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.5.tgz", + "integrity": "sha512-svL3uiZf1RwhH+cWrfZn3A4+U58wbP0tGVTLQPbjplZxZ8ROD9VLuNgsRniTlLe7OlSqR79RUehXgpBW/s0IQw==" }, "lodash._baseassign": { "version": "3.2.0", @@ -9808,7 +9810,8 @@ "version": "1.4.4", "resolved": "https://registry.npmjs.org/nwmatcher/-/nwmatcher-1.4.4.tgz", "integrity": "sha512-3iuY4N5dhgMpCUrOVnuAdGrgxVqV2cJpM+XNccjR2DKOB1RUP0aA+wGXEiNziG/UKboFyGBIoKOaNlJxx8bciQ==", - "dev": true + "dev": true, + "optional": true }, "oauth-sign": { "version": "0.8.2", @@ -13013,7 +13016,7 @@ "dev": true, "requires": { "chalk": "2.3.0", - "lodash": "4.17.4", + "lodash": "4.17.5", "log-symbols": "2.1.0", "postcss": "6.0.16" }, @@ -13682,6 +13685,7 @@ "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz", "integrity": "sha1-BktyYCsY+Q8pGSuLG8QY/9Hr078=", "dev": true, + "optional": true, "requires": { "asap": "2.0.6" } @@ -15589,7 +15593,7 @@ "ignore": "3.3.7", "imurmurhash": "0.1.4", "known-css-properties": "0.5.0", - "lodash": "4.17.4", + "lodash": "4.17.5", "log-symbols": "2.1.0", "mathml-tag-names": "2.0.1", "meow": "4.0.0", @@ -15995,7 +15999,7 @@ "ajv": "5.5.2", "ajv-keywords": "2.1.1", "chalk": "2.3.0", - "lodash": "4.17.4", + "lodash": "4.17.5", "slice-ansi": "1.0.0", "string-width": "2.1.1" }, @@ -16394,7 +16398,8 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz", "integrity": "sha1-bgkk1r2mta/jSeOabWMoUKD4grc=", - "dev": true + "dev": true, + "optional": true }, "uglifyjs-webpack-plugin": { "version": "0.4.6", @@ -17044,7 +17049,7 @@ "entities": "1.1.1", "htmlparser2": "3.8.3", "jsdom": "7.2.2", - "lodash": "4.17.4" + "lodash": "4.17.5" } }, "domhandler": { @@ -17144,7 +17149,7 @@ "eslint-visitor-keys": "1.0.0", "espree": "3.5.2", "esquery": "1.0.0", - "lodash": "4.17.4" + "lodash": "4.17.5" } }, "vue-hot-reload-api": { @@ -17307,7 +17312,7 @@ "integrity": "sha1-YaKau2/MAm/qd+VtHG7FOnlZUfQ=", "dev": true, "requires": { - "lodash": "4.17.4" + "lodash": "4.17.5" } } } @@ -17364,7 +17369,7 @@ "integrity": "sha1-YaKau2/MAm/qd+VtHG7FOnlZUfQ=", "dev": true, "requires": { - "lodash": "4.17.4" + "lodash": "4.17.5" } }, "camelcase": { @@ -18003,7 +18008,7 @@ "integrity": "sha1-8Rl6Cpc+acb77rbWWCGaqMDBNVU=", "dev": true, "requires": { - "lodash": "4.17.4" + "lodash": "4.17.5" } }, "webpack-sources": { diff --git a/site/components/demo.vue b/site/components/demo.vue index 91c3b0994..f92620bd5 100644 --- a/site/components/demo.vue +++ b/site/components/demo.vue @@ -5,11 +5,56 @@ import zhCN from 'antd/locale-provider/zh_CN' import enUS from 'antd/locale-provider/default' import _ from 'lodash' import { isZhCN } from '../util' +import { Provider, create } from '../../components/_util/store' export default { + data () { + this.store = create({ + currentSubMenu: [], + }) + this.subscribe() + return { + currentSubMenu: [], + } + }, + beforeDestroy () { + if (this.unsubscribe) { + this.unsubscribe() + } + }, + watch: { + '$route.params.name': function () { + this.store.setState({ currentSubMenu: [] }) + }, + }, + methods: { + subscribe () { + const { store } = this + this.unsubscribe = store.subscribe(() => { + this.currentSubMenu = this.store.getState().currentSubMenu + }) + }, + getSubMenu (isCN) { + const currentSubMenu = this.currentSubMenu + const lis = [] + currentSubMenu.forEach(({ cnTitle, usTitle, id }) => { + const title = isCN ? cnTitle : usTitle + const className = window.location.hash === `#${id}` ? 'current' : '' + lis.push(
  • {title}
    • ) + }) + return ( + + + + ) + }, + }, render () { const { name } = this.$route.params - const lang = isZhCN(name) ? 'cn' : 'us' + const isCN = isZhCN(name) + const lang = isCN ? 'cn' : 'us' // name = name.replace('-cn', '') const titleMap = {} const menuConfig = { @@ -41,7 +86,7 @@ export default { key = `${key}-cn` } MenuItems.push( - {linkValue} + {linkValue} ) }) MenuGroup.push({MenuItems}) @@ -53,6 +98,7 @@ export default { return (
    +
    @@ -70,7 +116,10 @@ export default {
    - {Demo ? : '正在紧急开发中...'} +
    + {this.getSubMenu(isCN)} +
    + {Demo ? : '正在紧急开发中...'}
    diff --git a/site/components/demoBox.vue b/site/components/demoBox.vue index 21d6cb03b..c9f69c039 100644 --- a/site/components/demoBox.vue +++ b/site/components/demoBox.vue @@ -1,5 +1,5 @@