add theme
tangjinzhou
parent
9d905d8443
commit
5cfc8d4ece
|
|
@ -46,7 +46,7 @@ export function cloneVNodes (vnodes, deep) {
|
|||
|
||||
export function cloneElement (n, nodeProps, clone) {
|
||||
const node = clone ? cloneVNode(n, true) : n
|
||||
const { props = {}, key, on = {}} = nodeProps
|
||||
const { props = {}, key, on = {}, listeners = {}} = nodeProps
|
||||
const data = node.data || {}
|
||||
const { style = data.style,
|
||||
class: cls = data.class,
|
||||
|
|
@ -58,10 +58,9 @@ export function cloneElement (n, nodeProps, clone) {
|
|||
node.componentOptions.propsData = node.componentOptions.propsData || {}
|
||||
node.componentOptions.listeners = node.componentOptions.listeners || {}
|
||||
node.componentOptions.propsData = { ...node.componentOptions.propsData, ...props }
|
||||
node.componentOptions.listeners = { ...node.componentOptions.listeners, ...on }
|
||||
} else {
|
||||
node.data.on = { ...(node.data.on || {}), ...on }
|
||||
node.componentOptions.listeners = { ...node.componentOptions.listeners, ...listeners }
|
||||
}
|
||||
node.data.on = { ...(node.data.on || {}), ...on }
|
||||
|
||||
if (key !== undefined) {
|
||||
node.key = key
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ export default {
|
|||
}
|
||||
return (
|
||||
<div>
|
||||
<md md={md}/>
|
||||
<md {...md}/>
|
||||
<Basic />
|
||||
<ButtonGroup />
|
||||
<Disabled />
|
||||
|
|
@ -39,9 +39,7 @@ export default {
|
|||
<template slot='cn'>
|
||||
<CN/>
|
||||
</template>
|
||||
<template slot='us'>
|
||||
<US/>
|
||||
</template>
|
||||
<US/>
|
||||
</api>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,60 @@
|
|||
<script>
|
||||
import IconSet from '@/examples/components/IconSet/index'
|
||||
const md = {
|
||||
cn: `# 图标 Icon
|
||||
语义化的矢量图形。
|
||||
## 图标的命名规范
|
||||
我们为每个图标赋予了语义化的命名，命名规则如下:
|
||||
- 实心和描线图标保持同名，用 \` - o\` 来区分，比如 \`question-circle\`（实心） 和 \`question-circle-o\`（描线）；
|
||||
- 命名顺序：\`[图标名]-[形状?]-[描线?]-[方向?]\`。
|
||||
> \`?\` 为可选。
|
||||
|
||||
完整的图标设计规范请访问 [图标规范](/docs/spec/icon)。
|
||||
## 如何使用
|
||||
使用 \`<a-icon />\` 标签声明组件，指定图标对应的 type 属性，示例代码如下:
|
||||
\`\`\`html
|
||||
<a-icon type="link" />
|
||||
\`\`\`
|
||||
## 本地部署
|
||||
图标默认托管在 [iconfont.cn](http://iconfont.cn)，默认公网可访问。如需本地部署，可参考 [示例](https://github.com/ant-design/antd-init/tree/master/examples/local-iconfont)。
|
||||
## 图标列表
|
||||
> 点击图标复制代码。
|
||||
`,
|
||||
us: `# Icon
|
||||
Semantic vector graphics.
|
||||
## Icons naming convention
|
||||
We provide semantic name for every icon, and naming rules are as follows:
|
||||
- Scanning line icon has the similar name with its solid one，but it's distinguished by \`-o\`, for example, \`question-circle\` (a full circle) and \`question-circle-o\` (an empty circle);
|
||||
- Naming sequence：\`[name]-[shape?]-[outline?]-[direction?]\`.
|
||||
> \`?\` means is optional.
|
||||
See more design detail at [here](/docs/spec/icon).
|
||||
## How To Use
|
||||
Use tag <a-icon /> to create an icon and set its type in the type prop, for example:
|
||||
\`\`\`html
|
||||
<a-icon type="link" />
|
||||
\`\`\`
|
||||
## Local deployment
|
||||
By default, icons are deployed at [iconfont.cn](http://iconfont.cn), publicly available repository of a huge set of icons. In case you need to use a locally deployed version of the icon font, you can refer to [this example](https://github.com/ant-design/antd-init/tree/master/examples/local-iconfont)。
|
||||
## List of icons
|
||||
> Click the icon and copy the code。
|
||||
`,
|
||||
}
|
||||
export default {
|
||||
render () {
|
||||
return (
|
||||
<div>
|
||||
<md cn={md.cn} us={md.us}/>
|
||||
<md cn='### 方向性图标' us='### Directional Icons'/>
|
||||
<IconSet class='icons' catigory='direction' />
|
||||
<md cn='### 提示建议性图标' us='### Suggested Icons'/>
|
||||
<IconSet class='icons' catigory='suggestion' />
|
||||
<md cn='### 网站通用图标' us='### Application Icons'/>
|
||||
<IconSet class='icons' catigory='other' />
|
||||
<md cn='### 品牌和标识' us='### Brand and Logos'/>
|
||||
<IconSet class='icons' catigory='logo' />
|
||||
|
||||
</div>
|
||||
)
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,6 +1,3 @@
|
|||
<template>
|
||||
<i :title="title" :class="classes" @click="handleClick"></i>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'Icon',
|
||||
|
|
@ -38,6 +35,12 @@ export default {
|
|||
this.$emit('click', event)
|
||||
},
|
||||
},
|
||||
render () {
|
||||
const { title, classes, handleClick } = this
|
||||
return (
|
||||
<i title={title} class={classes} onClick={handleClick} />
|
||||
)
|
||||
},
|
||||
beforeDestroy () {
|
||||
if (this.timeout) {
|
||||
clearTimeout(this.timeout)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,13 @@
|
|||
## API
|
||||
|
||||
You can set `style` and `className` for size and color of icons because they are still fonts in essence.
|
||||
|
||||
```jsx
|
||||
<a-icon type="question" style="font-size: 16px, color: #08c" />
|
||||
```
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| -------- | ----------- | ---- | ------- |
|
||||
| spin | Rotate icon with animation | boolean | false |
|
||||
| style | style properties of icon, like fontSize and color | object | - |
|
||||
| type | Type of ant design icon | string | - |
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
|
||||
## API
|
||||
|
||||
由于图标字体本质上还是文字，可以使用 `style` 和 `class` 设置图标的大小和颜色。
|
||||
|
||||
````html
|
||||
<a-icon type="question" style="font-size: 16px, color: #08c" />
|
||||
````
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| spin | 是否有旋转动画 | boolean | false |
|
||||
| style | 设置图标的样式，例如 fontSize 和 color | object | - |
|
||||
| type | 图标类型 | string | - |
|
||||
|
|
@ -162,7 +162,7 @@ export default {
|
|||
...extraProps,
|
||||
openChange: this.onOpenChange,
|
||||
},
|
||||
on: {
|
||||
listeners: {
|
||||
click: this.onClick,
|
||||
itemHover: this.onItemHover,
|
||||
openChange: this.onOpenChange,
|
||||
|
|
|
|||
|
|
@ -493,12 +493,13 @@ export default {
|
|||
props: {},
|
||||
on: { _ANT_EVENT_HACK: () => {} },
|
||||
key: 'trigger',
|
||||
listeners: {},
|
||||
}
|
||||
|
||||
if (this.isContextMenuToShow()) {
|
||||
newChildProps.on.contextMenu = this.onContextMenu
|
||||
newChildProps.listeners.contextMenu = this.onContextMenu
|
||||
} else {
|
||||
newChildProps.on.contextMenu = this.createTwoChains('contextMenu')
|
||||
newChildProps.listeners.contextMenu = this.createTwoChains('contextMenu')
|
||||
}
|
||||
|
||||
if (this.isClickToHide() || this.isClickToShow()) {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,37 @@
|
|||
<template>
|
||||
<li :class="justCopied ? 'copied' : ''" v-clipboard:copy="text"
|
||||
v-clipboard:success="onCopied">
|
||||
<a-icon :type="type" />
|
||||
<span class='anticon-class'>
|
||||
<a-badge :dot="isNew">
|
||||
{{type}}
|
||||
</a-badge>
|
||||
</span>
|
||||
</li>
|
||||
</template>
|
||||
<script>
|
||||
import BaseMixin from 'antd/_util/BaseMixin'
|
||||
|
||||
export default {
|
||||
mixins: [BaseMixin],
|
||||
props: {
|
||||
type: String,
|
||||
isNew: Boolean,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
justCopied: false,
|
||||
text: `<a-icon type="${this.type}" />`,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onCopied () {
|
||||
this.setState({ justCopied: true }, () => {
|
||||
setTimeout(() => {
|
||||
this.setState({ justCopied: false })
|
||||
}, 2000)
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<script>
|
||||
import CopyableIcon from './CopyableIcon'
|
||||
export default {
|
||||
props: {
|
||||
catigory: String,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
icons: {
|
||||
direction: ['step-backward', 'step-forward', 'fast-backward', 'fast-forward', 'shrink', 'arrows-alt', 'down', 'up', 'left', 'right', 'caret-up', 'caret-down', 'caret-left', 'caret-right', 'up-circle', 'down-circle', 'left-circle', 'right-circle', 'up-circle-o', 'down-circle-o', 'right-circle-o', 'left-circle-o', 'double-right', 'double-left', 'verticle-left', 'verticle-right', 'forward', 'backward', 'rollback', 'enter', 'retweet', 'swap', 'swap-left', 'swap-right', 'arrow-up', 'arrow-down', 'arrow-left', 'arrow-right', 'play-circle', 'play-circle-o', 'up-square', 'down-square', 'left-square', 'right-square', 'up-square-o', 'down-square-o', 'left-square-o', 'right-square-o', 'login', 'logout', 'menu-fold', 'menu-unfold'],
|
||||
suggestion: ['question', 'question-circle-o', 'question-circle', 'plus', 'plus-circle-o', 'plus-circle', 'pause', 'pause-circle-o', 'pause-circle', 'minus', 'minus-circle-o', 'minus-circle', 'plus-square', 'plus-square-o', 'minus-square', 'minus-square-o', 'info', 'info-circle-o', 'info-circle', 'exclamation', 'exclamation-circle-o', 'exclamation-circle', 'close', 'close-circle', 'close-circle-o', 'close-square', 'close-square-o', 'check', 'check-circle', 'check-circle-o', 'check-square', 'check-square-o', 'clock-circle-o', 'clock-circle', 'warning'],
|
||||
logo: [
|
||||
'android', 'android-o', 'apple', 'apple-o', 'windows', 'windows-o', 'ie', 'chrome', 'github', 'aliwangwang', 'aliwangwang-o', 'dingding', 'dingding-o',
|
||||
'weibo-square', 'weibo-circle', 'taobao-circle', 'html5', 'weibo', 'twitter', 'wechat', 'youtube', 'alipay-circle', 'taobao', 'skype', 'qq', 'medium-workmark', 'gitlab', 'medium', 'linkedin', 'google-plus',
|
||||
'dropbox', 'facebook', 'codepen', 'amazon', 'google', 'codepen-circle', 'alipay', 'ant-design', 'aliyun',
|
||||
],
|
||||
other: ['lock', 'unlock', 'area-chart', 'pie-chart', 'bar-chart', 'dot-chart', 'bars', 'book', 'calendar', 'cloud', 'cloud-download', 'code', 'code-o', 'copy', 'credit-card', 'delete', 'desktop', 'download', 'edit', 'ellipsis', 'file', 'file-text', 'file-unknown', 'file-pdf', 'file-word', 'file-excel', 'file-jpg', 'file-ppt', 'file-add', 'folder', 'folder-open', 'folder-add', 'hdd', 'frown', 'frown-o', 'meh', 'meh-o', 'smile', 'smile-o', 'inbox', 'laptop', 'appstore-o', 'appstore', 'line-chart', 'link', 'mail', 'mobile', 'notification', 'paper-clip', 'picture', 'poweroff', 'reload', 'search', 'setting', 'share-alt', 'shopping-cart', 'tablet', 'tag', 'tag-o', 'tags', 'tags-o', 'to-top', 'upload', 'user', 'video-camera', 'home', 'loading', 'loading-3-quarters', 'cloud-upload-o', 'cloud-download-o', 'cloud-upload', 'cloud-o', 'star-o', 'star', 'heart-o', 'heart', 'environment', 'environment-o', 'eye', 'eye-o', 'camera', 'camera-o', 'save', 'team', 'solution', 'phone', 'filter', 'exception', 'export', 'customer-service', 'qrcode', 'scan', 'like', 'like-o', 'dislike', 'dislike-o', 'message', 'pay-circle', 'pay-circle-o', 'calculator', 'pushpin', 'pushpin-o', 'bulb', 'select', 'switcher', 'rocket', 'bell', 'disconnect', 'database', 'compass', 'barcode', 'hourglass', 'key', 'flag', 'layout', 'printer', 'sound', 'usb', 'skin', 'tool', 'sync', 'wifi', 'car', 'schedule', 'user-add', 'user-delete', 'usergroup-add', 'usergroup-delete', 'man', 'woman', 'shop', 'gift', 'idcard', 'medicine-box', 'red-envelope', 'coffee', 'copyright', 'trademark', 'safety', 'wallet', 'bank', 'trophy', 'contacts', 'global', 'shake', 'api', 'fork', 'dashboard', 'form', 'table', 'profile'],
|
||||
},
|
||||
newIcons: [
|
||||
'aliyun',
|
||||
],
|
||||
}
|
||||
},
|
||||
|
||||
render () {
|
||||
const { catigory } = this.$props
|
||||
const listClassName = {
|
||||
'anticons-list': true,
|
||||
clearfix: true,
|
||||
}
|
||||
return (
|
||||
<ul class={listClassName}>
|
||||
{this.icons[catigory].map(type => (
|
||||
<CopyableIcon key={type} type={type} isNew={this.newIcons.indexOf(type) >= 0} />
|
||||
))}
|
||||
</ul>
|
||||
)
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class='markdown'>
|
||||
<slot v-if="lang === 'cn'" name="cn"></slot>
|
||||
<slot v-else name="us"></slot>
|
||||
<div class='markdown api-container'>
|
||||
<slot v-if="lang === 'cn'" name="cn" class='markdown api-container'></slot>
|
||||
<slot v-else></slot>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ export default {
|
|||
<router-link to={{ path: `/components/${lang}/${d}` }}>{d}</router-link>
|
||||
</MenuItem>)}
|
||||
</Menu>
|
||||
<div class='content'>
|
||||
<div class='content main-container'>
|
||||
{Demo ? <Demo /> : '正在紧急开发中...'}
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,38 +1,80 @@
|
|||
<template>
|
||||
<div class="box box-demo">
|
||||
<slot name="component"></slot>
|
||||
<div class="box-demo-description">
|
||||
<section :class="['code-box', isOpen ? 'expand': '']">
|
||||
<section class="code-box-demo">
|
||||
<slot name="component"></slot>
|
||||
</section>
|
||||
<section class="code-box-meta markdown">
|
||||
<slot v-if="lang === 'cn'" name="description"></slot>
|
||||
<slot v-else name="us-description"></slot>
|
||||
<span class="btn-toggle" :class="{open: isOpen}" @click="toggle"><i class="anticon anticon-down-circle-o"></i></span>
|
||||
</div>
|
||||
</section>
|
||||
<transition appear :css="false" @enter="enter" @leave="leave">
|
||||
<div class="box-demo-code" v-show="isOpen">
|
||||
<section class="highlight-wrapper" style="position: relative;" v-show="isOpen">
|
||||
<a-tooltip
|
||||
:title="copied ? '复制成功' : '复制代码'"
|
||||
:visible="copyTooltipVisible"
|
||||
@change="onCopyTooltipVisibleChange"
|
||||
>
|
||||
<a-icon
|
||||
:type="copied && copyTooltipVisible ? 'check' : 'copy'"
|
||||
class="code-box-code-copy"
|
||||
v-clipboard:copy="sourceCode"
|
||||
v-clipboard:success="handleCodeCopied"
|
||||
/>
|
||||
</a-tooltip>
|
||||
<slot name="code"></slot>
|
||||
</div>
|
||||
</section>
|
||||
</transition>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
<script>
|
||||
import animate from 'antd/_util/openAnimation'
|
||||
import BaseMixin from 'antd/_util/BaseMixin'
|
||||
export default {
|
||||
mixins: [BaseMixin],
|
||||
name: 'demoBox',
|
||||
props: {
|
||||
jsfiddle: Object,
|
||||
},
|
||||
data () {
|
||||
const { lang } = this.$route.params
|
||||
const { html, script, style } = this.jsfiddle
|
||||
let sourceCode = `<template>${html}</template>\n`
|
||||
sourceCode = script ? sourceCode + '\<script>' + script + '<\/script>' : sourceCode
|
||||
sourceCode = style ? sourceCode + '\<style>' + style + '<\/style>' : sourceCode
|
||||
return {
|
||||
isOpen: false,
|
||||
lang,
|
||||
copied: false,
|
||||
copyTooltipVisible: false,
|
||||
sourceCode,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
test () {
|
||||
console.log(122)
|
||||
},
|
||||
toggle () {
|
||||
this.isOpen = !this.isOpen
|
||||
},
|
||||
enter: animate.enter,
|
||||
leave: animate.leave,
|
||||
handleCodeCopied () {
|
||||
this.setState({ copied: true })
|
||||
},
|
||||
|
||||
onCopyTooltipVisibleChange (visible) {
|
||||
if (visible) {
|
||||
this.setState({
|
||||
copyTooltipVisible: visible,
|
||||
copied: false,
|
||||
})
|
||||
return
|
||||
}
|
||||
this.setState({
|
||||
copyTooltipVisible: visible,
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div v-html="marked(text)" />
|
||||
<div v-html="marked(text)" class="markdown" />
|
||||
</template>
|
||||
<script>
|
||||
import marked from 'marked'
|
||||
|
|
@ -16,16 +16,17 @@ marked.setOptions({
|
|||
export default {
|
||||
name: 'md',
|
||||
props: {
|
||||
md: [Object, String],
|
||||
cn: String,
|
||||
us: String,
|
||||
},
|
||||
data () {
|
||||
const { lang } = this.$route.params
|
||||
let text = ''
|
||||
const md = this.md
|
||||
const { cn, us } = this
|
||||
if (this.$slots.default && this.$slots.default[0] && this.$slots.default[0].text) {
|
||||
text = this.$slots.default[0].text
|
||||
} else {
|
||||
text = typeof md === 'string' ? md : (md[lang] || md.us)
|
||||
text = lang === 'cn' ? cn : us
|
||||
}
|
||||
text = text || ''
|
||||
text = text.split('\n').map(t => t.trim()).join('\n')
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ 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 menu } from 'antd/menu/demo/index.vue'
|
||||
export { default as pagination } from 'antd/pagination/demo/index.vue'
|
||||
|
|
|
|||
|
|
@ -3,11 +3,14 @@ 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)
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
@import './theme/static/index.less';
|
||||
.site {
|
||||
display: flex;
|
||||
.nav {
|
||||
|
|
@ -5,123 +6,48 @@
|
|||
}
|
||||
.content {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
.highlight > .code-section {
|
||||
|
||||
.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 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;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.main-wrapper {
|
||||
.code-box-meta > h4 {
|
||||
position: absolute;
|
||||
top: -14px;
|
||||
padding: 1px 8px;
|
||||
margin-left: -8px;
|
||||
color: #777;
|
||||
border-radius: 2px 2px 0 0;
|
||||
background: #fff;
|
||||
width: 92%;
|
||||
margin: 0 auto;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
padding: 24px 0 0;
|
||||
margin-bottom: 24px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
padding: 0 6% 120px 4% !important;
|
||||
margin-left: -1px;
|
||||
min-height: 500px;
|
||||
border-left: 1px solid #e9e9e9;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
|
||||
.table {
|
||||
font-size: 13px;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
empty-cells: show;
|
||||
border: 1px solid #e9e9e9;
|
||||
width: 100%;
|
||||
margin: 16px 0;
|
||||
th {
|
||||
background: #f7f7f7;
|
||||
white-space: nowrap;
|
||||
color: #5c6b77;
|
||||
font-weight: 600;
|
||||
}
|
||||
td:first-child {
|
||||
background: #fcfcfc;
|
||||
font-weight: 500;
|
||||
width: 20%;
|
||||
font-family: "Lucida Console", Consolas, Menlo, Courier, monospace;
|
||||
}
|
||||
th,td {
|
||||
border: 1px solid #e9e9e9;
|
||||
padding: 8px 16px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.code-boxes-col-2-1 {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.aside-container {
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
.aside-container .ant-menu-item a, .aside-container .ant-menu-submenu-name span, .aside-container > .ant-menu-item {
|
||||
font-size: 14px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header-anchor {
|
||||
margin-left: -18px;
|
||||
}
|
||||
|
||||
.markdown {
|
||||
& > ul {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
& > li {
|
||||
list-style: circle;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
h1, h2, h3 {
|
||||
a {
|
||||
font-size: .8em;
|
||||
opacity: 0;
|
||||
font-weight: normal;
|
||||
transition: opacity .2s ease-in-out;
|
||||
}
|
||||
|
||||
&:hover a {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
blockquote {
|
||||
font-size: 90%;
|
||||
color: #999;
|
||||
border-left: 4px solid #e9e9e9;
|
||||
padding-left: 0.8em;
|
||||
margin: 1em 0;
|
||||
}
|
||||
code {
|
||||
margin: 0;
|
||||
background: #f7f7f7;
|
||||
padding: .2em .4em;
|
||||
border-radius: 3px;
|
||||
font-size: .9em;
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
|
||||
& > p, & > pre {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.code-box-code-copy {
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 10px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,170 @@
|
|||
/* stylelint-disable no-duplicate-selectors */
|
||||
.color-palettes {
|
||||
margin: 0 1%;
|
||||
}
|
||||
.color-palette {
|
||||
margin: 45px 1%;
|
||||
width: 31%;
|
||||
display: inline-block;
|
||||
&-pick {
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
&-picker {
|
||||
margin: 12px 0 24px;
|
||||
&-value {
|
||||
font-size: 13px;
|
||||
font-family: Consolas;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-color {
|
||||
text-align: left;
|
||||
&-item {
|
||||
cursor: pointer;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
padding: 0 12px;
|
||||
margin-right: 4px;
|
||||
transition: all .2s;
|
||||
position: relative;
|
||||
font-family: Consolas;
|
||||
font-size: 14px;
|
||||
&:first-child {
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
&:last-child {
|
||||
border-radius: 0 0 4px 4px;
|
||||
}
|
||||
&:hover {
|
||||
margin-right: -8px;
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
}
|
||||
&-item &-text {
|
||||
transition: all .3s;
|
||||
float: left;
|
||||
}
|
||||
&-item &-value {
|
||||
float: right;
|
||||
transform: scale(0.85);
|
||||
transform-origin: 100% 50%;
|
||||
opacity: 0;
|
||||
position: relative;
|
||||
left: 3px;
|
||||
transition: all .3s;
|
||||
}
|
||||
}
|
||||
|
||||
.color-title {
|
||||
margin: 0 0 24px;
|
||||
font-weight: 500;
|
||||
color: #5c6b77;
|
||||
font-size: 22px;
|
||||
text-transform: capitalize;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.color-description {
|
||||
font-size: 14px;
|
||||
font-weight: lighter;
|
||||
color: #777;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.main-color:hover {
|
||||
.main-color-value {
|
||||
opacity: 0.7;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.color-palette-horizontal {
|
||||
width: 100%;
|
||||
|
||||
.main-color {
|
||||
display: flex;
|
||||
|
||||
&-item {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
margin-right: 0;
|
||||
border-radius: 0;
|
||||
height: 86px;
|
||||
text-align: center;
|
||||
padding-top: 37px;
|
||||
line-height: normal;
|
||||
|
||||
.main-color-text {
|
||||
float: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
margin-top: -10px;
|
||||
height: 96px;
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-value {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
float: none;
|
||||
transform-origin: unset;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.main-color-item {
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.main-color-value {
|
||||
opacity: 0.7;
|
||||
bottom: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.make-palatte(@color, @index: 1) when (@index <= 10) {
|
||||
.palatte-@{color}-@{index} {
|
||||
@background: "@{color}-@{index}";
|
||||
background: @@background;
|
||||
}
|
||||
.make-palatte(@color, (@index + 1)); // next iteration
|
||||
}
|
||||
|
||||
@grey-1: #fff;
|
||||
@grey-2: #fafafa;
|
||||
@grey-3: #f5f5f5;
|
||||
@grey-4: #e8e8e8;
|
||||
@grey-5: #d9d9d9;
|
||||
@grey-6: #bfbfbf;
|
||||
@grey-7: #8c8c8c;
|
||||
@grey-8: #595959;
|
||||
@grey-9: #262626;
|
||||
@grey-10: #000;
|
||||
|
||||
@border-color: rgba(229, 231, 235, 100);
|
||||
|
||||
.main-color {
|
||||
.make-palatte(blue);
|
||||
.make-palatte(purple);
|
||||
.make-palatte(cyan);
|
||||
.make-palatte(green);
|
||||
.make-palatte(magenta);
|
||||
.make-palatte(red);
|
||||
.make-palatte(volcano);
|
||||
.make-palatte(orange);
|
||||
.make-palatte(gold);
|
||||
.make-palatte(yellow);
|
||||
.make-palatte(lime);
|
||||
.make-palatte(geekblue);
|
||||
.make-palatte(grey);
|
||||
}
|
||||
|
|
@ -0,0 +1,132 @@
|
|||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: @font-family;
|
||||
line-height: 1.5;
|
||||
color: @site-text-color;
|
||||
font-size: 14px;
|
||||
background: #fff;
|
||||
transition: background 1s cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
a {
|
||||
transition: color .3s ease;
|
||||
&:focus {
|
||||
text-decoration: underline;
|
||||
text-decoration-skip: ink;
|
||||
}
|
||||
}
|
||||
|
||||
.main-wrapper {
|
||||
background: #fff;
|
||||
padding: 40px 0 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
padding: 0 170px 144px 64px;
|
||||
background: #fff;
|
||||
min-height: 500px;
|
||||
overflow: hidden;
|
||||
border-left: 1px solid @site-border-color-split;
|
||||
position: relative;
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
.main-menu {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.aside-container {
|
||||
padding-bottom: 50px;
|
||||
font-family: Lato, @font-family;
|
||||
|
||||
&.ant-menu-inline .ant-menu-submenu-title h4,
|
||||
&.ant-menu-inline > .ant-menu-item,
|
||||
&.ant-menu-inline .ant-menu-item a {
|
||||
font-size: 14px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&.ant-menu-inline .ant-menu-item-group-title {
|
||||
padding-left: 56px;
|
||||
}
|
||||
|
||||
a[disabled] {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.menu-item-link-outside {
|
||||
position: relative;
|
||||
.anticon {
|
||||
font-size: 12px;
|
||||
color: @primary-color;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
top: 16px;
|
||||
transition: all .3s;
|
||||
}
|
||||
&:hover .anticon {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.aside-container .chinese {
|
||||
font-size: 12px;
|
||||
margin-left: 6px;
|
||||
font-weight: normal;
|
||||
opacity: .67;
|
||||
}
|
||||
|
||||
.outside-link {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.outside-link:after {
|
||||
content: '\e691';
|
||||
font-family: 'anticon';
|
||||
margin-left: 5px;
|
||||
font-size: 12px;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.outside-link.internal {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// reset menu text color
|
||||
.menu-site .ant-menu-item > a {
|
||||
color: @site-text-color;
|
||||
}
|
||||
|
||||
.menu-site .ant-menu-item-selected > a,
|
||||
.menu-site .ant-menu-item > a:hover {
|
||||
color: @primary-color;
|
||||
}
|
||||
|
||||
#react-content {
|
||||
transition: transform .3s @ease-in-out-circ;
|
||||
}
|
||||
.page-wrapper {
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.drawer-content {
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.drawer {
|
||||
z-index: 1029;
|
||||
}
|
||||
|
|
@ -0,0 +1,261 @@
|
|||
.code-boxes-col-1-1 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.code-boxes-col-2-1 {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.code-box {
|
||||
border: 1px solid @site-border-color-split;
|
||||
border-radius: @border-radius-sm;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin: 0 0 16px;
|
||||
transition: all .2s;
|
||||
|
||||
&:target {
|
||||
border: 1px solid @primary-color;
|
||||
}
|
||||
|
||||
&-expand-trigger {
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
color: #9199ac;
|
||||
margin-left: 5px;
|
||||
opacity: .8;
|
||||
transition: all .3s;
|
||||
top: -2px;
|
||||
position: relative;
|
||||
|
||||
&-active {
|
||||
color: #3b4357;
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
position: absolute;
|
||||
top: -14px;
|
||||
padding: 1px 8px;
|
||||
margin-left: -8px;
|
||||
color: #777;
|
||||
border-radius: @border-radius-sm @border-radius-sm 0 0;
|
||||
background: #fff;
|
||||
transition: background-color .4s;
|
||||
|
||||
a,
|
||||
a:hover {
|
||||
color: @site-text-color;
|
||||
font-size: @font-size-base;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
a.edit-button {
|
||||
position: absolute;
|
||||
right: -16px;
|
||||
top: 7px;
|
||||
font-size: 12px;
|
||||
transform: scale(0.9);
|
||||
background: #fff;
|
||||
padding-right: 6px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&-demo {
|
||||
border-bottom: 1px solid @site-border-color-split;
|
||||
padding: 42px 24px 50px;
|
||||
color: rgba(0, 0, 0, .65);
|
||||
}
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
&-meta {
|
||||
&.markdown {
|
||||
position: relative;
|
||||
padding: 18px 32px;
|
||||
border-radius: 0 0 @border-radius-sm @border-radius-sm;
|
||||
transition: background-color .4s;
|
||||
width: 100%;
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h4,
|
||||
section& p {
|
||||
margin: 0;
|
||||
width: 98%;
|
||||
}
|
||||
|
||||
> p {
|
||||
font-size: 12px;
|
||||
margin: 0.5em 0;
|
||||
padding-right: 25px;
|
||||
width: 100%;
|
||||
word-break: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
&.expand &-meta {
|
||||
border-radius: 0;
|
||||
border-bottom: 1px dashed @site-border-color-split;
|
||||
}
|
||||
|
||||
.code-expand-icon {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
bottom: 23px;
|
||||
cursor: pointer;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.code-expand-icon-show,
|
||||
.code-expand-icon-hide {
|
||||
transition: all 0.4s;
|
||||
user-select: none;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
margin: 0;
|
||||
max-width: 100%;
|
||||
vertical-align: baseline;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.code-expand-icon-show {
|
||||
opacity: 0.55;
|
||||
pointer-events: auto;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.code-expand-icon.ant-tooltip-open .code-expand-icon-show {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.code-expand-icon-hide {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.highlight-wrapper {
|
||||
display: none;
|
||||
overflow: auto;
|
||||
border-radius: 0 0 @border-radius-sm @border-radius-sm;
|
||||
|
||||
&-expand {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.highlight {
|
||||
position: relative;
|
||||
pre {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #fff;
|
||||
}
|
||||
&:not(:first-child) {
|
||||
border-top: 1px dashed @site-border-color-split;
|
||||
}
|
||||
}
|
||||
|
||||
&-actions {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 12px;
|
||||
text-align: right;
|
||||
> i,
|
||||
> form {
|
||||
display: inline-block;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&-code-copy {
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
color: @site-text-color-secondary;
|
||||
transition: all .24s;
|
||||
background: #fff;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
border-radius: 20px;
|
||||
opacity: 0;
|
||||
|
||||
&:hover {
|
||||
color: @site-text-color-secondary;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
&.anticon-check {
|
||||
color: @green-6 !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
&-codepen {
|
||||
background: transparent url("https://gw.alipayobjects.com/zos/rmsportal/OtZslpOjYXijshDERXwc.svg") center / 14px no-repeat;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: all .3s;
|
||||
border: 0;
|
||||
text-indent: -9999px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&-riddle {
|
||||
background: transparent url("https://gw.alipayobjects.com/zos/rmsportal/DlHbxMCyeuyOrqOdbgik.svg") center / 14px no-repeat;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: all .3s;
|
||||
border: 0;
|
||||
text-indent: -9999px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&-codesandbox {
|
||||
background: transparent url("https://gw.alipayobjects.com/zos/rmsportal/aaYmtdDyHSCkXyLZVgGK.svg") center / 14px no-repeat;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: all .3s;
|
||||
border: 0;
|
||||
text-indent: -9999px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.highlight-wrapper:hover &-code-copy,
|
||||
.highlight-wrapper:hover &-codepen,
|
||||
.highlight-wrapper:hover &-codesandbox,
|
||||
.highlight-wrapper:hover &-riddle {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 0;
|
||||
width: auto;
|
||||
code {
|
||||
border: none;
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
.algolia-autocomplete {
|
||||
.ds-dropdown-menu {
|
||||
border: none;
|
||||
box-shadow: @box-shadow-base;
|
||||
|
||||
[class^="ds-dataset-"] {
|
||||
border: none;
|
||||
}
|
||||
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.algolia-docsearch-suggestion--title {
|
||||
color: @site-text-color;
|
||||
}
|
||||
|
||||
.algolia-docsearch-suggestion--highlight {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
@import './colors';
|
||||
|
||||
@padding-space: 144px;
|
||||
|
||||
footer {
|
||||
clear: both;
|
||||
font-size: 14px;
|
||||
background-color: #000;
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
box-shadow: 0 1000px 0 1000px #fff;
|
||||
.ant-row {
|
||||
text-align: center;
|
||||
.footer-center {
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
> h2 {
|
||||
font-size: 16px;
|
||||
margin: 0 auto 24px;
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
|
||||
> .title-icon {
|
||||
width: 27px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
> .anticon {
|
||||
font-size: 16px;
|
||||
position: absolute;
|
||||
left: -22px;
|
||||
top: 3px;
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
> div {
|
||||
margin: 12px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer-wrap {
|
||||
position: relative;
|
||||
padding: 86px @padding-space 93px @padding-space;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
.bottom-bar {
|
||||
text-align: right;
|
||||
padding: 16px @padding-space;
|
||||
margin: 0;
|
||||
line-height: 32px;
|
||||
overflow: hidden;
|
||||
a {
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.translate-button {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
a {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
h2 {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
& > span {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,144 @@
|
|||
@header-height: 64px;
|
||||
@menu-item-border: 2px;
|
||||
|
||||
#header {
|
||||
transition: all 0.3s;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 8px rgba(240, 241, 242, 65);
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
max-width: 100%;
|
||||
&.home-nav-bottom {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border-bottom-color: #ebedee;
|
||||
.search {
|
||||
border-left-color: #ebedee;
|
||||
}
|
||||
a {
|
||||
color: @site-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.header-link {
|
||||
color: @site-text-color;
|
||||
}
|
||||
|
||||
.ant-menu-item-active .header-link {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
#logo {
|
||||
overflow: hidden;
|
||||
padding-left: 40px;
|
||||
float: left;
|
||||
height: @header-height;
|
||||
line-height: @header-height;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
img {
|
||||
height: 32px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
img + img {
|
||||
height: 16px;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
#search-box {
|
||||
border-left: 1px solid @site-border-color-split;
|
||||
float: left;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
padding-left: 16px;
|
||||
margin: 22px auto 0;
|
||||
}
|
||||
|
||||
#search-box .anticon {
|
||||
color: #ced4d9;
|
||||
position: relative;
|
||||
top: 0.5px;
|
||||
}
|
||||
|
||||
#search-box input {
|
||||
font-size: 14px;
|
||||
margin-top: -5px;
|
||||
width: 200px;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
background: transparent;
|
||||
|
||||
&::placeholder {
|
||||
color: #a3b1bf;
|
||||
}
|
||||
}
|
||||
|
||||
.header-lang-button,
|
||||
.version {
|
||||
float: right;
|
||||
margin-top: 20px;
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.header-lang-button {
|
||||
color: @text-color;
|
||||
border-color: @border-color-base;
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
#nav {
|
||||
border: 0;
|
||||
float: right;
|
||||
font-size: 14px;
|
||||
font-family: Lato, @font-family;
|
||||
&.ant-menu-horizontal {
|
||||
border-bottom: none;
|
||||
|
||||
& > .ant-menu-item {
|
||||
height: @header-height;
|
||||
line-height: @header-height - @menu-item-border - 2px;
|
||||
min-width: 72px;
|
||||
border-top: @menu-item-border solid transparent;
|
||||
|
||||
&:hover {
|
||||
border-top: @menu-item-border solid @primary-color;
|
||||
border-bottom: @menu-item-border solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
& > .ant-menu-item-selected {
|
||||
border-top: @menu-item-border solid @primary-color;
|
||||
border-bottom: @menu-item-border solid transparent;
|
||||
a {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > .ant-menu-item {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.component-select {
|
||||
&.ant-select-dropdown {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
|
||||
font-size: 14px;
|
||||
}
|
||||
.ant-select-dropdown-menu {
|
||||
max-height: 200px;
|
||||
}
|
||||
.ant-select-dropdown-menu-item {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
.ant-component-decs {
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
color: #aaa;
|
||||
right: 16px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,153 @@
|
|||
/**
|
||||
* prism.js default theme for JavaScript, CSS and HTML
|
||||
* Based on dabblet (http://dabblet.com)
|
||||
* @author Lea Verou
|
||||
*/
|
||||
|
||||
pre code {
|
||||
display: block;
|
||||
background: white;
|
||||
color: @site-text-color;
|
||||
line-height: 2;
|
||||
border: 1px solid #e9e9e9;
|
||||
padding: 16px 32px;
|
||||
border-radius: @border-radius-sm;
|
||||
font-size: @font-size-base;
|
||||
white-space: pre;
|
||||
font-family: "Lucida Console", Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
}
|
||||
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
color: black;
|
||||
background: none;
|
||||
font-family: "Lucida Console", Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.5;
|
||||
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
pre[class*="language-"]::-moz-selection,
|
||||
pre[class*="language-"] ::-moz-selection,
|
||||
code[class*="language-"]::-moz-selection,
|
||||
code[class*="language-"] ::-moz-selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
pre[class*="language-"]::selection,
|
||||
pre[class*="language-"] ::selection,
|
||||
code[class*="language-"]::selection,
|
||||
code[class*="language-"] ::selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
@media print {
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*="language-"] {
|
||||
padding: 12px 20px;
|
||||
margin: 16px 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
background: #f2f4f5;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre) > code[class*="language-"] {
|
||||
padding: .1em;
|
||||
border-radius: .3em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: slategray;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.namespace {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: #f81d22;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #0b8235;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string {
|
||||
color: #0b8235;
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.keyword {
|
||||
color: #008dff;
|
||||
}
|
||||
|
||||
.token.function {
|
||||
color: #f81d22;
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
.token.important,
|
||||
.token.variable {
|
||||
color: #e90;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
|
|
@ -0,0 +1,366 @@
|
|||
@home-bg-color: #2f54eb;
|
||||
@home-text-color: #314659;
|
||||
|
||||
.home-page-wrapper {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
position: relative; // will-change: transform;
|
||||
color: @home-text-color;
|
||||
font-family: Avenir, @font-family;
|
||||
.page {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
position: relative;
|
||||
padding: 0 24px;
|
||||
h2 {
|
||||
font-size: 38px;
|
||||
line-height: 46px;
|
||||
color: @home-text-color;
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
margin: 140px auto 100px;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
p {
|
||||
will-change: transform;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.banner-bg {
|
||||
&-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
width: 120%;
|
||||
height: 200px;
|
||||
background: @home-bg-color;
|
||||
position: absolute;
|
||||
bottom: -200px;
|
||||
left: 0%;
|
||||
transform-origin: 0;
|
||||
transform: rotate(-4deg);
|
||||
}
|
||||
|
||||
.banner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 576px;
|
||||
&-wrapper {
|
||||
overflow: initial;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.text-wrapper {
|
||||
width: 54%;
|
||||
max-width: 560px;
|
||||
min-height: 336px;
|
||||
color: #0d1a26;
|
||||
> * {
|
||||
will-change: transform;
|
||||
}
|
||||
h1 {
|
||||
font-size: 68px;
|
||||
font-weight: 600;
|
||||
line-height: 76px;
|
||||
margin: 8px 0 28px;
|
||||
letter-spacing: 0;
|
||||
font-family: Avenir, @font-family;
|
||||
}
|
||||
p {
|
||||
font-size: 20px;
|
||||
line-height: 40px;
|
||||
color: @home-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.img-wrapper {
|
||||
width: 46%;
|
||||
max-width: 482px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 26px;
|
||||
}
|
||||
|
||||
.banner-btns {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.banner-btn {
|
||||
padding: 0 24px;
|
||||
border-radius: 100px;
|
||||
font-size: 16px;
|
||||
line-height: 38px;
|
||||
display: inline-block;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
margin-right: 16px;
|
||||
text-decoration: none;
|
||||
border: 1px solid #2f54eb;
|
||||
}
|
||||
|
||||
.banner-btn.components {
|
||||
background: #2f54eb;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.banner-btn.language {
|
||||
color: #2f54eb;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
g {
|
||||
transform-origin: 50%;
|
||||
transform-box: fill-box;
|
||||
}
|
||||
}
|
||||
|
||||
/** page1 **/
|
||||
|
||||
.page1 {
|
||||
min-height: 784px;
|
||||
background: @home-bg-color;
|
||||
background: linear-gradient(to bottom, rgba(47, 84, 235, 1) 0%, rgba(58, 64, 212, 1) 100%);
|
||||
h2 {
|
||||
color: #fff !important;
|
||||
}
|
||||
&-block {
|
||||
max-width: 160px;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
display: block;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
h3 {
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
}
|
||||
p {
|
||||
color: #fff;
|
||||
}
|
||||
&:hover .page1-image {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 6px 10px rgba(5, 26, 180, .35);
|
||||
}
|
||||
}
|
||||
&-image {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
background: #fff;
|
||||
border-radius: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 46px auto 40px;
|
||||
transition: transform .45s @ease-out, box-shadow .45s @ease-out;
|
||||
img {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
&-point-wrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
overflow: inherit !important;
|
||||
}
|
||||
}
|
||||
|
||||
/** page2 **/
|
||||
|
||||
.page2 {
|
||||
background: #eff3f6;
|
||||
min-height: 1110px;
|
||||
overflow: initial;
|
||||
padding-top: 1px;
|
||||
.page {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
h2 {
|
||||
margin-bottom: 142px;
|
||||
}
|
||||
}
|
||||
&-content {
|
||||
box-shadow: 0 12px 20px #d8e0e6;
|
||||
background: @home-bg-color;
|
||||
}
|
||||
&-components,
|
||||
&-product {
|
||||
min-height: 554px;
|
||||
}
|
||||
&-components {
|
||||
position: initial;
|
||||
background: @home-bg-color;
|
||||
padding: 56px;
|
||||
color: #fff;
|
||||
line-height: 32px;
|
||||
h3 {
|
||||
font-size: 28px;
|
||||
margin: 0 auto 32px;
|
||||
color: #fff;
|
||||
}
|
||||
.components-button-wrapper {
|
||||
position: absolute;
|
||||
bottom: 48px;
|
||||
left: 56px;
|
||||
a {
|
||||
display: block;
|
||||
color: #fff;
|
||||
line-height: 1.5em;
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-product {
|
||||
background: #fff;
|
||||
padding: 48px 56px;
|
||||
.product-block {
|
||||
margin-bottom: 34px;
|
||||
cursor: pointer;
|
||||
color: @home-text-color;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
.block-text-wrapper {
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
.block-text-wrapper {
|
||||
padding-bottom: 35px;
|
||||
position: relative;
|
||||
border-bottom: 1px solid #ebedf0;
|
||||
h4 {
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
p {
|
||||
line-height: 24px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.more {
|
||||
display: inline-block;
|
||||
line-height: 22px;
|
||||
color: @home-bg-color;
|
||||
vertical-align: top;
|
||||
i {
|
||||
font-size: 12px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
.block-image-wrapper {
|
||||
height: 104px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
img {
|
||||
display: block;
|
||||
max-width: 80%;
|
||||
}
|
||||
&.right {
|
||||
float: right;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
h4 {
|
||||
color: @home-bg-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.parallax-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
&.bottom {
|
||||
z-index: 0;
|
||||
}
|
||||
&.top {
|
||||
margin-top: 220px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
svg {
|
||||
overflow: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** page3 **/
|
||||
|
||||
.page3 {
|
||||
min-height: 556px;
|
||||
&-block {
|
||||
padding: 24px 12px;
|
||||
a {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: @home-text-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
&:hover {
|
||||
h3 {
|
||||
color: @home-bg-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-img-wrapper,
|
||||
&-text-wrapper {
|
||||
display: inline-block;
|
||||
}
|
||||
&-text-wrapper {
|
||||
// max-width: 182px;
|
||||
margin-left: 32px;
|
||||
line-height: 24px;
|
||||
margin-top: 2px;
|
||||
h3 {
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
}
|
||||
.parallax-bg.top {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/** video **/
|
||||
|
||||
.new-version-video {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 9999;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: #fbfbfb;
|
||||
.vidoe-wrap {
|
||||
background: url('https://gw.alipayobjects.com/zos/rmsportal/gEeRuETmbpAYRaeilexm.jpg') repeat-x;
|
||||
background-size: cover;
|
||||
width: 100%;
|
||||
video {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
ul.anticons-list {
|
||||
margin: 40px 0;
|
||||
list-style: none;
|
||||
overflow: hidden;
|
||||
li {
|
||||
float: left;
|
||||
width: 16.66%;
|
||||
text-align: center;
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
height: 100px;
|
||||
color: #555;
|
||||
transition: all .3s;
|
||||
position: relative;
|
||||
margin: 3px 0;
|
||||
border-radius: 4px;
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
padding: 10px 0 0;
|
||||
|
||||
.anticon {
|
||||
font-size: 24px;
|
||||
margin: 12px 0 16px;
|
||||
transition: all .3s;
|
||||
}
|
||||
|
||||
.anticon-class {
|
||||
display: block;
|
||||
text-align: center;
|
||||
transform: scale(0.83);
|
||||
font-family: "Lucida Console", Consolas;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: @primary-color;
|
||||
color: #fff;
|
||||
.anticon {
|
||||
transform: scale(1.4);
|
||||
}
|
||||
}
|
||||
|
||||
&.copied:hover {
|
||||
color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
content: "Copied!";
|
||||
text-align: center;
|
||||
line-height: 110px;
|
||||
color: #fff;
|
||||
transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&.copied:after {
|
||||
opacity: 1;
|
||||
top: -10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
@import '../../../components/style/v2-compatible-reset.less';
|
||||
@import '../../../components/style/themes/default.less';
|
||||
@import './common';
|
||||
@import './header';
|
||||
@import './footer';
|
||||
@import './home';
|
||||
@import './page-nav';
|
||||
@import './markdown';
|
||||
@import './resource';
|
||||
@import './preview-img';
|
||||
@import './toc';
|
||||
@import './not-found';
|
||||
@import './highlight';
|
||||
@import './demo';
|
||||
@import './colors';
|
||||
@import './icons';
|
||||
@import './mock-browser';
|
||||
@import './new-version-info-modal';
|
||||
@import './motion';
|
||||
@import './responsive';
|
||||
@import './theme';
|
||||
@import './docsearch';
|
||||
|
|
@ -0,0 +1,325 @@
|
|||
.markdown {
|
||||
color: @site-text-color;
|
||||
font-size: 14px;
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.markdown img {
|
||||
max-width: ~"calc(100% - 32px)";
|
||||
}
|
||||
|
||||
.markdown p > img {
|
||||
margin: 34px 0;
|
||||
box-shadow: 0 8px 20px rgba(143, 168, 191, 0.35);
|
||||
}
|
||||
|
||||
.markdown h1 {
|
||||
color: @site-heading-color;
|
||||
font-weight: 500;
|
||||
margin-bottom: 20px;
|
||||
margin-top: 8px;
|
||||
font-family: Lato, @font-family;
|
||||
font-size: 30px;
|
||||
line-height: 38px;
|
||||
|
||||
.subtitle {
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.markdown h2 {
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.markdown h2,
|
||||
.markdown h3,
|
||||
.markdown h4,
|
||||
.markdown h5,
|
||||
.markdown h6 {
|
||||
color: @site-heading-color;
|
||||
font-family: Lato, @font-family;
|
||||
margin: 1.6em 0 0.6em;
|
||||
font-weight: 500;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.markdown h3 { font-size: 18px; }
|
||||
.markdown h4 { font-size: 16px; }
|
||||
.markdown h5 { font-size: 14px; }
|
||||
.markdown h6 { font-size: 12px; }
|
||||
|
||||
.markdown hr {
|
||||
height: 1px;
|
||||
border: 0;
|
||||
background: @site-border-color-split;
|
||||
margin: 72px 0;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.markdown p,
|
||||
.markdown pre {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.markdown ul > li {
|
||||
list-style-type: circle;
|
||||
margin-left: 20px;
|
||||
padding-left: 4px;
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.markdown ol > li {
|
||||
list-style-type: decimal;
|
||||
margin-left: 20px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.markdown ul > li > p,
|
||||
.markdown ol > li > p {
|
||||
margin: 0.2em 0;
|
||||
}
|
||||
|
||||
.markdown code {
|
||||
margin: 0 1px;
|
||||
background: #f2f4f5;
|
||||
padding: .2em .4em;
|
||||
border-radius: 3px;
|
||||
font-size: .9em;
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
|
||||
.markdown pre {
|
||||
border-radius: @border-radius-sm;
|
||||
background: #f2f4f5;
|
||||
font-family: "Lucida Console", Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
}
|
||||
|
||||
.markdown pre code {
|
||||
border: none;
|
||||
background: #f2f4f5;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: @font-size-base - 1px;
|
||||
color: @site-text-color;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.markdown strong,
|
||||
.markdown b {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.markdown > table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
empty-cells: show;
|
||||
border: 1px solid @site-border-color-split;
|
||||
width: 100%;
|
||||
margin: 8px 0 16px;
|
||||
}
|
||||
|
||||
.markdown > table th {
|
||||
white-space: nowrap;
|
||||
color: #5c6b77;
|
||||
font-weight: 500;
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.markdown > table th,
|
||||
.markdown > table td {
|
||||
border: 1px solid @site-border-color-split;
|
||||
padding: 16px 24px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.markdown blockquote {
|
||||
font-size: 90%;
|
||||
color: @site-text-color-secondary;
|
||||
border-left: 4px solid @site-border-color-split;
|
||||
padding-left: 0.8em;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.markdown blockquote p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.markdown .anchor {
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.markdown .waiting {
|
||||
color: #ccc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.markdown a.edit-button {
|
||||
line-height: 12px;
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
height: 12px;
|
||||
text-decoration: none;
|
||||
font-weight: 400;
|
||||
|
||||
i {
|
||||
color: @site-text-color-secondary;
|
||||
|
||||
&:hover {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
.anticon {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.markdown h1:hover .anchor,
|
||||
.markdown h2:hover .anchor,
|
||||
.markdown h3:hover .anchor,
|
||||
.markdown h4:hover .anchor,
|
||||
.markdown h5:hover .anchor,
|
||||
.markdown h6:hover .anchor {
|
||||
opacity: 1;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.markdown > br,
|
||||
.markdown > p > br {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.markdown.api-container table {
|
||||
font-size: @font-size-base;
|
||||
line-height: @line-height-base;
|
||||
td:first-child {
|
||||
font-weight: 500;
|
||||
width: 20%;
|
||||
font-family: "Lucida Console", Consolas, Menlo, Courier, monospace;
|
||||
}
|
||||
td:nth-child(3) {
|
||||
width: 22%;
|
||||
font-size: 12px;
|
||||
font-family: "Lucida Console", Consolas, Menlo, Courier, monospace;
|
||||
}
|
||||
td:last-child {
|
||||
width: 13%;
|
||||
font-size: 12px;
|
||||
font-family: "Lucida Console", Consolas, Menlo, Courier, monospace;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-demo,
|
||||
[id^="components-grid-demo-"] {
|
||||
.demo-row,
|
||||
.code-box-demo .demo-row {
|
||||
background-image: linear-gradient(90deg, #f5f5f5 4.16666667%, transparent 4.16666667%, transparent 8.33333333%, #f5f5f5 8.33333333%, #f5f5f5 12.5%, transparent 12.5%, transparent 16.66666667%, #f5f5f5 16.66666667%, #f5f5f5 20.83333333%, transparent 20.83333333%, transparent 25%, #f5f5f5 25%, #f5f5f5 29.16666667%, transparent 29.16666667%, transparent 33.33333333%, #f5f5f5 33.33333333%, #f5f5f5 37.5%, transparent 37.5%, transparent 41.66666667%, #f5f5f5 41.66666667%, #f5f5f5 45.83333333%, transparent 45.83333333%, transparent 50%, #f5f5f5 50%, #f5f5f5 54.16666667%, transparent 54.16666667%, transparent 58.33333333%, #f5f5f5 58.33333333%, #f5f5f5 62.5%, transparent 62.5%, transparent 66.66666667%, #f5f5f5 66.66666667%, #f5f5f5 70.83333333%, transparent 70.83333333%, transparent 75%, #f5f5f5 75%, #f5f5f5 79.16666667%, transparent 79.16666667%, transparent 83.33333333%, #f5f5f5 83.33333333%, #f5f5f5 87.5%, transparent 87.5%, transparent 91.66666667%, #f5f5f5 91.66666667%, #f5f5f5 95.83333333%, transparent 95.83333333%);
|
||||
overflow: hidden;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.ant-row-flex,
|
||||
.code-box-demo .ant-row-flex {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
.ant-row > div,
|
||||
.code-box-demo .ant-row > div,
|
||||
.ant-row-flex > div,
|
||||
.code-box-demo .ant-row-flex > div {
|
||||
padding: 5px 0;
|
||||
text-align: center;
|
||||
border-radius: 0;
|
||||
min-height: 30px;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
color: #fff;
|
||||
}
|
||||
.code-box-demo .ant-row > div:not(.gutter-row),
|
||||
.code-box-demo .ant-row-flex > div:not(.gutter-row) {
|
||||
background: #00a0e9;
|
||||
padding: 16px 0;
|
||||
&:nth-child(2n+1) {
|
||||
background: fade(#00a0e9, 70%);
|
||||
}
|
||||
}
|
||||
.ant-row .demo-col,
|
||||
.code-box-demo .ant-row .demo-col {
|
||||
text-align: center;
|
||||
padding: 30px 0;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
border: none;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.ant-row .demo-col-1,
|
||||
.ant-row .demo-col-1 {
|
||||
background: fade(#00a0e9, 70%);
|
||||
}
|
||||
.ant-row .demo-col-2,
|
||||
.code-box-demo .ant-row .demo-col-2 {
|
||||
background: fade(#00a0e9, 50%);
|
||||
}
|
||||
.ant-row .demo-col-3,
|
||||
.code-box-demo .ant-row .demo-col-3 {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: #999;
|
||||
}
|
||||
.ant-row .demo-col-4,
|
||||
.code-box-demo .ant-row .demo-col-4 {
|
||||
background: fade(#00a0e9, 60%);
|
||||
}
|
||||
.ant-row .demo-col-5,
|
||||
.code-box-demo .ant-row .demo-col-5 {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
color: #999;
|
||||
}
|
||||
.code-box-demo .height-100 {
|
||||
height: 100px;
|
||||
line-height: 100px;
|
||||
}
|
||||
.code-box-demo .height-50 {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
.code-box-demo .height-120 {
|
||||
height: 120px;
|
||||
line-height: 120px;
|
||||
}
|
||||
.code-box-demo .height-80 {
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
// For Changelog
|
||||
.markdown ul.ant-timeline {
|
||||
line-height: 2;
|
||||
li.ant-timeline-item {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0 0 30px;
|
||||
.ant-timeline-item-content {
|
||||
font-size: 14px;
|
||||
padding-left: 32px;
|
||||
position: relative;
|
||||
top: -14px;
|
||||
> h2 {
|
||||
margin-top: 0;
|
||||
padding-top: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
li.ant-timeline-item:first-child {
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
/* Browser mockup code
|
||||
* Contribute: https://gist.github.com/jarthod/8719db9fef8deb937f4f
|
||||
* Live example: https://updown.io
|
||||
*/
|
||||
|
||||
.browser-mockup {
|
||||
border-top: 2em solid rgba(230, 230, 230, 0.7);
|
||||
box-shadow: 0 0.1em 0.5em 0 rgba(0, 0, 0, 0.28);
|
||||
position: relative;
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
|
||||
.browser-mockup:before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: -1.25em;
|
||||
left: 1em;
|
||||
width: 0.5em;
|
||||
height: 0.5em;
|
||||
border-radius: 50%;
|
||||
background-color: #f44;
|
||||
box-shadow: 0 0 0 2px #f44, 1.5em 0 0 2px #9b3, 3em 0 0 2px #fb5;
|
||||
}
|
||||
|
||||
.browser-mockup.with-tab:after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: -2em;
|
||||
left: 5.5em;
|
||||
width: 20%;
|
||||
height: 0;
|
||||
border-bottom: 2em solid white;
|
||||
border-left: 0.8em solid transparent;
|
||||
border-right: 0.8em solid transparent;
|
||||
}
|
||||
|
||||
.browser-mockup.with-url:after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: -1.6em;
|
||||
left: 5.5em;
|
||||
width: ~"calc(100% - 6em)";
|
||||
height: 1.2em;
|
||||
border-radius: 2px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.browser-mockup > * {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
.motion-container {
|
||||
height: 190px;
|
||||
line-height: 190px;
|
||||
text-align: center;
|
||||
margin: 40px 0 20px;
|
||||
}
|
||||
|
||||
.motion-example {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
line-height: 180px;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
display: inline-block !important;
|
||||
border-radius: 8px;
|
||||
animation-duration: 0.5s !important;
|
||||
font-weight: bold;
|
||||
background: url(https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg) center/180px;
|
||||
}
|
||||
|
||||
.motion-select-wrapper {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.motion-select {
|
||||
text-align: left;
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
.video-player {
|
||||
position: relative;
|
||||
max-width: 800px;
|
||||
&-right {
|
||||
width: 616px;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
.new-version-info-modal {
|
||||
img {
|
||||
width: 100px;
|
||||
position: absolute;
|
||||
left: 34px;
|
||||
top: 36px;
|
||||
}
|
||||
p {
|
||||
margin-top: 1em;
|
||||
}
|
||||
.anticon {
|
||||
display: none;
|
||||
}
|
||||
.ant-confirm-body {
|
||||
.ant-confirm-title {
|
||||
font-size: 18px;
|
||||
}
|
||||
margin-left: 120px;
|
||||
.ant-confirm-content {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
#page-404 {
|
||||
background-image: url('https://os.alipayobjects.com/rmsportal/NOAjOBbnYCrNzrW.jpg');
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
background-size: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 100;
|
||||
|
||||
section {
|
||||
position: absolute;
|
||||
top: 48%;
|
||||
left: 55%;
|
||||
margin: -103px 0 0 -120px;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: @primary-color;
|
||||
font-size: 120px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
p {
|
||||
color: @site-text-color;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
/* Make clicks pass-through */
|
||||
#nprogress {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#nprogress .bar {
|
||||
background: @primary-color;
|
||||
position: fixed;
|
||||
z-index: 1031;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* Fancy blur effect */
|
||||
#nprogress .peg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 100px;
|
||||
height: 100%;
|
||||
box-shadow: 0 0 10px @primary-color, 0 0 5px @primary-color;
|
||||
opacity: 1;
|
||||
transform: rotate(3deg) translate(0, -4px);
|
||||
}
|
||||
|
||||
/* Remove these to get rid of the spinner */
|
||||
#nprogress .spinner {
|
||||
display: block;
|
||||
position: fixed;
|
||||
z-index: 1031;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
#nprogress .spinner-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
box-sizing: border-box;
|
||||
border: solid 2px transparent;
|
||||
border-top-color: @primary-color;
|
||||
border-left-color: @primary-color;
|
||||
border-radius: 50%;
|
||||
animation: nprogress-spinner 400ms linear infinite;
|
||||
}
|
||||
|
||||
.nprogress-custom-parent {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nprogress-custom-parent #nprogress .spinner,
|
||||
.nprogress-custom-parent #nprogress .bar {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
@keyframes nprogress-spinner {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
.prev-next-nav {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: ~"calc(100% - 194px - 64px)";
|
||||
margin-left: 64px;
|
||||
font-size: 14px;
|
||||
border-top: 1px solid @site-border-color-split;
|
||||
|
||||
> .prev-page,
|
||||
> .next-page {
|
||||
width: 50%;
|
||||
float: left;
|
||||
line-height: 72px;
|
||||
height: 72px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
> a.prev-page {
|
||||
&:before {
|
||||
font-family: 'anticon';
|
||||
content: '\e61c';
|
||||
font-size: 12px;
|
||||
margin-right: 1em;
|
||||
color: @site-text-color-secondary;
|
||||
transition: all .3s;
|
||||
position: relative;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&:hover:before {
|
||||
color: @primary-color;
|
||||
left: -3px;
|
||||
}
|
||||
}
|
||||
|
||||
> .next-page {
|
||||
text-align: right;
|
||||
float: right;
|
||||
|
||||
&:after {
|
||||
font-family: 'anticon';
|
||||
content: '\e61b';
|
||||
font-size: 12px;
|
||||
margin-left: 1em;
|
||||
color: @site-text-color-secondary;
|
||||
transition: all .3s;
|
||||
position: relative;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&:hover:after {
|
||||
color: @primary-color;
|
||||
right: -3px;
|
||||
}
|
||||
}
|
||||
|
||||
.chinese {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,159 @@
|
|||
.preview-image-boxes {
|
||||
display: flex;
|
||||
float: right;
|
||||
margin: 0 0 70px 64px;
|
||||
width: 496px;
|
||||
clear: both;
|
||||
|
||||
&-with-carousel {
|
||||
width: 420px;
|
||||
|
||||
.preview-image-box img {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.preview-image-boxes + .preview-image-boxes {
|
||||
margin-top: -35px;
|
||||
}
|
||||
|
||||
.preview-image-box {
|
||||
width: 100%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.preview-image-box + .preview-image-box {
|
||||
margin-left: 24px;
|
||||
}
|
||||
|
||||
.preview-image-wrapper {
|
||||
background: #f2f4f5;
|
||||
padding: 16px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.preview-image-wrapper.video {
|
||||
padding: 0;
|
||||
background: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.preview-image-wrapper video {
|
||||
width: 100%;
|
||||
display: block;
|
||||
+ svg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-image-wrapper.good:after {
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background: @primary-color;
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.preview-image-wrapper.bad:after {
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background: @error-color;
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.preview-image-title {
|
||||
font-size: 12px;
|
||||
margin-top: 5px;
|
||||
color: @site-text-color;
|
||||
}
|
||||
|
||||
.preview-image-description {
|
||||
font-size: 12px;
|
||||
margin-top: 2px;
|
||||
color: @site-text-color-secondary;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.preview-image-description hr {
|
||||
margin: 2px 0;
|
||||
border: 0;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.preview-image-box img {
|
||||
cursor: pointer;
|
||||
max-width: 100%;
|
||||
transition: all .3s;
|
||||
background: #fff;
|
||||
padding: 12px;
|
||||
border-radius: @border-radius-base;
|
||||
&.no-padding {
|
||||
padding: 0;
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-image-boxes.preview-image-boxes-with-carousel img {
|
||||
padding: 0;
|
||||
box-shadow: 0 1px 0 0 #ddd, 0 3px 0 0 #fff, 0 4px 0 0 #ddd, 0 6px 0 0 #fff, 0 7px 0 0 #ddd;
|
||||
}
|
||||
|
||||
.preview-image-box img:hover {
|
||||
box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.image-modal {
|
||||
text-align: center;
|
||||
|
||||
&-container {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ant-carousel {
|
||||
.slick-slider {
|
||||
padding-bottom: 24px;
|
||||
img {
|
||||
display: inline;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
.slick-dots {
|
||||
bottom: 4px;
|
||||
li button {
|
||||
background: #888;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.image-modal-single.slick-slider {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.image-modal-single .slick-dots {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.transition-video-player {
|
||||
float: right;
|
||||
padding: 0 0 70px 20px;
|
||||
width: 600px;
|
||||
|
||||
.preview-image-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
.resource-cards {
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.resource-card {
|
||||
display: flex;
|
||||
max-width: 420px;
|
||||
width: ~"calc(50% - 24px)";
|
||||
min-width: 300px;
|
||||
height: 130px;
|
||||
border: 1px solid @border-color-base;
|
||||
border-radius: @border-radius-base;
|
||||
font-size: 12px;
|
||||
color: #777;
|
||||
margin: 24px 24px 0 0;
|
||||
vertical-align: middle;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.resource-card:hover {
|
||||
box-shadow: 0 3px 8px #d3ddeb;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.resource-card:hover .resource-card-title {
|
||||
color: @primary-color;
|
||||
}
|
||||
|
||||
.resource-card.disabled {
|
||||
opacity: 0.45;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.resource-card-cover, .resource-card-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
width: 130px;
|
||||
}
|
||||
|
||||
.resource-card-cover img {
|
||||
width: 68px;
|
||||
}
|
||||
|
||||
.resource-card-content {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.resource-card-title {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
color: @site-text-color;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.resource-card-description {
|
||||
display: block;
|
||||
color: #697b8c;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
|
@ -0,0 +1,369 @@
|
|||
@import "../../../components/style/themes/default.less";
|
||||
|
||||
.nav-phone-icon {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
top: 25px;
|
||||
z-index: 1;
|
||||
width: 16px;
|
||||
height: 22px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1440px) and (max-width: 1599px) {
|
||||
.main-wrapper > .ant-row > .ant-col-xl-5 {
|
||||
width: 274px;
|
||||
}
|
||||
|
||||
#header .ant-row .ant-col-xl-5 {
|
||||
width: 274px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1280px) {
|
||||
.en-us #search-box {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: @screen-xl) {
|
||||
#search-box {
|
||||
display: none;
|
||||
}
|
||||
#logo {
|
||||
padding: 0 40px;
|
||||
}
|
||||
.banner-wrapper .banner-title-wrapper {
|
||||
h1 {
|
||||
font-size: 36px;
|
||||
}
|
||||
p {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767.99px) {
|
||||
#header {
|
||||
text-align: center;
|
||||
#logo {
|
||||
float: initial;
|
||||
}
|
||||
}
|
||||
#search-box {
|
||||
display: none;
|
||||
}
|
||||
.code-boxes-col-2-1, .code-boxes-col-1-1 {
|
||||
float: none;
|
||||
width: 100%;
|
||||
}
|
||||
.preview-image-boxes {
|
||||
margin: 0 !important;
|
||||
float: none;
|
||||
width: 100%;
|
||||
}
|
||||
.preview-image-box {
|
||||
padding-left: 0;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.image-wrapper {
|
||||
display: none;
|
||||
}
|
||||
|
||||
div.version {
|
||||
display: block;
|
||||
margin: 29px auto 16px;
|
||||
}
|
||||
|
||||
.popover-menu {
|
||||
width: 300px;
|
||||
div.version {
|
||||
margin: 16px auto;
|
||||
}
|
||||
.ant-popover-inner {
|
||||
overflow: hidden;
|
||||
&-content {
|
||||
padding: 0;
|
||||
.ant-select {
|
||||
width: 60%;
|
||||
display: block;
|
||||
}
|
||||
.ant-btn {
|
||||
margin: 16px 8% 0 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
#nav a.header-link {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
ul#nav,
|
||||
ul#nav li {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
ul#nav li {
|
||||
line-height: 40px;
|
||||
height: 40px;
|
||||
padding: 0 !important;
|
||||
border: 0;
|
||||
a {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.toc {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-phone-icon {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nav-phone-icon:before {
|
||||
content: "";
|
||||
display: block;
|
||||
border-radius: 2px;
|
||||
width: 16px;
|
||||
height: 2px;
|
||||
background: #777;
|
||||
box-shadow: 0 6px 0 0 #777, 0 12px 0 0 #777;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.main {
|
||||
height: calc(100% - 86px);
|
||||
}
|
||||
|
||||
.aside-container {
|
||||
float: none;
|
||||
width: auto;
|
||||
padding-bottom: 30px;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
margin-right: 0;
|
||||
> .markdown > * {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.main-wrapper {
|
||||
width: 100%;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#footer {
|
||||
text-align: center;
|
||||
.footer-wrap {
|
||||
padding: 40px;
|
||||
.ant-row {
|
||||
padding: 0;
|
||||
> div {
|
||||
&:nth-child(2),
|
||||
&:nth-child(4) {
|
||||
display: none;
|
||||
}
|
||||
a {
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer-center {
|
||||
text-align: center;
|
||||
}
|
||||
h2 {
|
||||
margin-top: 16px;
|
||||
}
|
||||
.bottom-bar {
|
||||
padding: 16px;
|
||||
|
||||
text-align: center;
|
||||
.translate-button {
|
||||
width: auto;
|
||||
text-align: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
> div > span {
|
||||
display: block;
|
||||
&:nth-child(1), &:nth-child(2) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.prev-next-nav {
|
||||
margin-left: 16px;
|
||||
width: ~"calc(100% - 32px)";
|
||||
}
|
||||
|
||||
.drawer {
|
||||
.ant-menu-inline .ant-menu-item:after,
|
||||
.ant-menu-vertical .ant-menu-item:after {
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
#_hj_feedback_container {
|
||||
display: none;
|
||||
}
|
||||
/** home 区块 **/
|
||||
.home-page-wrapper {
|
||||
.page {
|
||||
h2 {
|
||||
margin: 80px auto 64px;
|
||||
}
|
||||
}
|
||||
.parallax-bg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.banner {
|
||||
display: block;
|
||||
height: 632px;
|
||||
&-bg-wrapper {
|
||||
display: none;
|
||||
}
|
||||
.img-wrapper,
|
||||
.text-wrapper {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
}
|
||||
.img-wrapper {
|
||||
position: initial;
|
||||
margin-top: 48px;
|
||||
svg {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.text-wrapper {
|
||||
margin-top: 48px;
|
||||
min-height: 200px;
|
||||
padding: 0 16px;
|
||||
h1 {
|
||||
display: none;
|
||||
}
|
||||
p {
|
||||
font-size: 14px;
|
||||
line-height: 28px;
|
||||
color: @home-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.page1 {
|
||||
min-height: 1538px;
|
||||
.ant-row {
|
||||
margin: 24px auto 64px;
|
||||
>div {
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.page2 {
|
||||
min-height: 840px;
|
||||
background: #fff;
|
||||
&-content {
|
||||
box-shadow: none;
|
||||
}
|
||||
&-components {
|
||||
display: none;
|
||||
}
|
||||
&-product {
|
||||
min-height: auto;
|
||||
padding: 0 16px;
|
||||
.product-block {
|
||||
padding-bottom: 35px;
|
||||
margin-bottom: 34px;
|
||||
border-bottom: 1px solid #ebedf0;
|
||||
&:last-child {
|
||||
margin-bottom: 32px;
|
||||
border-bottom: none;
|
||||
.block-text-wrapper {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.block-image-wrapper {
|
||||
height: 88px;
|
||||
img {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.block-text-wrapper {
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
h4 {
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
p {
|
||||
font-size: 12px;
|
||||
margin-bottom: 8px;
|
||||
line-height: 20px;
|
||||
}
|
||||
a {
|
||||
line-height: 20px;
|
||||
}
|
||||
.components-button-wrapper {
|
||||
font-size: 12px;
|
||||
margin-top: 16px;
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.page3 {
|
||||
min-height: 688px;
|
||||
background: url('https://gw.alipayobjects.com/zos/rmsportal/qICoJIqqQRMeRGhPHBBS.svg') no-repeat;
|
||||
background-size: cover;
|
||||
.ant-row {
|
||||
margin: 0 8px;
|
||||
}
|
||||
.page3-block {
|
||||
padding: 24px;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 8px 16px rgba(174, 185, 193, 0.3);
|
||||
margin-bottom: 32px;
|
||||
&:nth-child(2) {
|
||||
.page3-img-wrapper img {
|
||||
width: 70%;
|
||||
margin: auto;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
p {
|
||||
font-size: 12px;
|
||||
}
|
||||
.page3-img-wrapper {
|
||||
width: 20%;
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.page3-text-wrapper {
|
||||
width: 80%;
|
||||
margin: 0;
|
||||
max-width: initial;
|
||||
padding-left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
@site-heading-color: #0d1a26;
|
||||
@site-text-color: #314659;
|
||||
@site-text-color-secondary: #697b8c;
|
||||
@site-border-color-split: #ebedf0;
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
.toc {
|
||||
font-size: 12px;
|
||||
margin: 16px 0;
|
||||
padding-left: 0;
|
||||
border-left: 1px solid #ebedf0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ul.toc > li {
|
||||
list-style: none;
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
line-height: 1.5;
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.toc li > ul {
|
||||
text-indent: 8px;
|
||||
font-size: 12px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toc a {
|
||||
padding-left: 16px;
|
||||
display: block;
|
||||
transition: all 0.3s ease;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: @site-text-color;
|
||||
width: 110px;
|
||||
border-left: 1px solid transparent;
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
.toc a:hover {
|
||||
color: @primary-color;
|
||||
}
|
||||
|
||||
.toc a.current {
|
||||
border-color: @primary-color;
|
||||
color: @primary-color;
|
||||
}
|
||||
|
||||
.toc-affix {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 20px;
|
||||
.ant-affix {
|
||||
background: #fff;
|
||||
overflow: auto;
|
||||
max-height: ~"calc(100vh - 16px)";
|
||||
}
|
||||
}
|
||||
.toc-affix-bottom {
|
||||
position: absolute;
|
||||
bottom: 88px;
|
||||
right: 20px;
|
||||
.ant-affix {
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
|
|
@ -76,7 +76,7 @@
|
|||
"stylelint": "^8.1.1",
|
||||
"stylelint-config-standard": "^17.0.0",
|
||||
"transliteration": "^1.6.2",
|
||||
"vue-antd-md-loader": "^1.0.1",
|
||||
"vue-antd-md-loader": "^1.0.2",
|
||||
"vue-loader": "^13.0.5",
|
||||
"vue-router": "^3.0.1",
|
||||
"vue-template-compiler": "^2.5.13",
|
||||
|
|
@ -97,6 +97,7 @@
|
|||
"lodash.isplainobject": "^4.0.6",
|
||||
"omit.js": "^1.0.0",
|
||||
"vue": "^2.5.13",
|
||||
"vue-clipboard2": "0.0.8",
|
||||
"vue-types": "^1.0.2",
|
||||
"warning": "^3.0.0"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -50,16 +50,7 @@ const md = require('markdown-it')('default', {
|
|||
breaks: true,
|
||||
highlight: renderHighlight,
|
||||
})
|
||||
md.use(require('markdown-it-anchor'), {
|
||||
level: 2,
|
||||
slugify: slugify,
|
||||
permalink: true,
|
||||
permalinkBefore: true,
|
||||
})
|
||||
md.renderer.rules.table_open = function () {
|
||||
return '<table class="table">'
|
||||
}
|
||||
md.renderer.rules.fence = wrap(md.renderer.rules.fence)
|
||||
// md.renderer.rules.fence = wrap(md.renderer.rules.fence)
|
||||
const cnReg = new RegExp('<(cn)(?:[^<]|<)+</\\1>', 'g')
|
||||
const usReg = new RegExp('<(us)(?:[^<]|<)+</\\1>', 'g')
|
||||
md.core.ruler.push('update_template', function replace ({ tokens }) {
|
||||
|
|
@ -101,10 +92,10 @@ md.core.ruler.push('update_template', function replace ({ tokens }) {
|
|||
const newContent = `
|
||||
<template>
|
||||
<demo-box :jsfiddle="${jsfiddle}">
|
||||
<div class="box-demo-show" slot="component">${template}</div>
|
||||
<template slot="component">${template}</template>
|
||||
<template slot="description">${cnHtml}</template>
|
||||
<template slot="us-description">${us ? md.render(us) : ''}</template>
|
||||
<div class="highlight" slot="code">${codeHtml}</div>
|
||||
<template slot="code">${codeHtml}</template>
|
||||
</demo-box>
|
||||
</template>
|
||||
<script>
|
||||
|
|
@ -132,7 +123,7 @@ module.exports = {
|
|||
use: [
|
||||
{
|
||||
loader: 'vue-antd-md-loader',
|
||||
options: md,
|
||||
options: Object.assign(md, { wrapper: 'div' }),
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
@ -158,6 +149,7 @@ module.exports = {
|
|||
alias: {
|
||||
'vue$': 'vue/dist/vue.esm.js',
|
||||
'antd': path.join(__dirname, 'components'),
|
||||
'@': path.join(__dirname, ''),
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue