mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 19:19:57 +08:00
Code Issues Actions 31 Packages Projects Releases Wiki Activity

Merge pull request #20281 from ant-design/feat-dark-palette

Browse Source 
feat: dark palette preview
This commit is contained in:
信鑫-King 2019-12-26 16:13:09 +08:00 committed by GitHub
commit 1d9bb93625
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
151 changed files with 1600 additions and 741 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
.antd-tools.config.js
View File

@ -1,8 +1,8 @@
const fs = require('fs');
const path = require('path');
// eslint-disable-next-line import/no-extraneous-dependencies
const lessToJs = require('less-vars-to-js');
const packageInfo = require('./package.json');
const darkVars = require('./scripts/dark-vars');
// We need compile additional content for antd user
function finalizeCompile() {
@ -70,20 +70,10 @@ function finalizeDist() {
console.log('Built a entry less file to dist/antd.dark.less');
// Build dark.js: dist/dark-theme.js, for less-loader
const stylePath = path.join(process.cwd(), 'components', 'style');
const colorLess = fs.readFileSync(path.join(stylePath, 'color', 'colors.less'), 'utf8');
const defaultLess = fs.readFileSync(path.join(stylePath, 'themes', 'default.less'), 'utf8');
const darkLess = fs.readFileSync(path.join(stylePath, 'themes', 'dark.less'), 'utf8');
const darkPaletteLess = lessToJs(`${colorLess}${defaultLess}${darkLess}`, {
stripPrefix: true,
resolveVariables: false,
});
fs.writeFileSync(
path.join(process.cwd(), 'dist', 'dark-theme.js'),
`module.exports = ${JSON.stringify(darkPaletteLess, null, 2)};`,
`module.exports = ${JSON.stringify(darkVars, null, 2)};`,
);
// eslint-disable-next-line

2
components/alert/demo/basic.md
View File

@ -20,7 +20,7 @@ ReactDOM.render(<Alert message="Success Text" type="success" />, mountNode);
```
<style>
.ant-alert {
.code-box-demo .ant-alert {
margin-bottom: 16px;
}
</style>

5
components/alert/style/index.less
View File

@ -3,11 +3,6 @@
@alert-prefix-cls: ~'@{ant-prefix}-alert';
@alert-message-color: @heading-color;
@alert-text-color: @text-color;
@alert-close-color: @text-color-secondary;
@alert-close-hover-color: @icon-color-hover;
.@{alert-prefix-cls} {
.reset-component;

2
components/back-top/__tests__/__snapshots__/demo.test.js.snap
View File

@ -4,7 +4,7 @@ exports[`renders ./components/back-top/demo/basic.md correctly 1`] = `
<div>
Scroll down to see the bottom-right
<strong
style="color:rgba(64, 64, 64, 0.6)"
class="site-back-top-basic"
>
gray
</strong>

14
components/back-top/demo/basic.md
View File

@ -20,9 +20,21 @@ ReactDOM.render(
<div>
<BackTop />
Scroll down to see the bottom-right
<strong style={{ color: 'rgba(64, 64, 64, 0.6)' }}> gray </strong>
<strong className="site-back-top-basic"> gray </strong>
button.
</div>,
mountNode,
);
```
```css
.site-back-top-basic {
color: rgba(64, 64, 64, 0.6);
}
```
<style>
[data-theme="dark"] .site-back-top-basic {
color: rgba(255,255,255,.45);
}
</style>

5
components/badge/__tests__/__snapshots__/demo.test.js.snap
View File

@ -1306,12 +1306,11 @@ exports[`renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
</sup>
</span>
<span
class="ant-badge ant-badge-not-a-wrapper"
class="site-badge-count-4 ant-badge ant-badge-not-a-wrapper"
>
<sup
class="ant-scroll-number ant-badge-count"
data-show="true"
style="background-color:#fff;color:#999;box-shadow:0 0 0 1px #d9d9d9 inset"
title="4"
>
<span
@ -1472,7 +1471,7 @@ exports[`renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
</sup>
</span>
<span
class="ant-badge ant-badge-not-a-wrapper"
class="site-badge-count-109 ant-badge ant-badge-not-a-wrapper"
>
<sup
class="ant-scroll-number ant-badge-count ant-badge-multiple-words"

5
components/badge/demo/basic.md
View File

@ -40,9 +40,12 @@ ReactDOM.render(
.head-example {
width: 42px;
height: 42px;
border-radius: 4px;
border-radius: 2px;
background: #eee;
display: inline-block;
vertical-align: middle;
}
[data-theme="dark"] .head-example {
background: rgba(255,255,255,.12);
}
</style>

19
components/badge/demo/no-wrapper.md
View File

@ -21,18 +21,27 @@ import { Badge } from 'antd';
ReactDOM.render(
<div>
<Badge count={25} />
<Badge
count={4}
style={{ backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset' }}
/>
<Badge count={109} style={{ backgroundColor: '#52c41a' }} />
<Badge count={4} className="site-badge-count-4" />
<Badge className="site-badge-count-109" count={109} style={{ backgroundColor: '#52c41a' }} />
</div>,
mountNode,
);
```
```css
.site-badge-count-4 .ant-badge-count {
background-color: #fff;
color: #999;
box-shadow: 0 0 0 1px #d9d9d9 inset;
}
```
<style>
.ant-badge-not-a-wrapper:not(.ant-badge-status) {
margin-right: 8px;
}
[data-theme="dark"] .site-badge-count-4 .ant-badge-count {
background-color: #141414;
box-shadow: 0 0 0 1px #434343 inset;
}
</style>

5
components/badge/demo/title.md
View File

@ -34,8 +34,11 @@ ReactDOM.render(
.head-example {
width: 42px;
height: 42px;
border-radius: 4px;
border-radius: 2px;
background: #eee;
display: inline-block;
}
[data-theme="dark"] .head-example {
background: rgba(255,255,255,.12);
}
</style>

4
components/button/__tests__/__snapshots__/demo.test.js.snap
View File

@ -232,7 +232,7 @@ exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
</span>
</button>
<div
style="padding:8px 8px 0 8px;background:rgb(190, 200, 200)"
class="site-button-ghost-wrapper"
>
<button
class="ant-btn ant-btn-background-ghost"
@ -257,7 +257,7 @@ exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
exports[`renders ./components/button/demo/ghost.md correctly 1`] = `
<div
style="background:rgb(190, 200, 200);padding:26px 16px 16px"
class="site-button-ghost-wrapper"
>
<button
class="ant-btn ant-btn-primary ant-btn-background-ghost"

9
components/button/demo/disabled.md
View File

@ -47,7 +47,7 @@ ReactDOM.render(
<Button danger disabled>
Danger Default(disabled)
</Button>
<div style={{ padding: '8px 8px 0 8px', background: 'rgb(190, 200, 200)' }}>
<div className="site-button-ghost-wrapper">
<Button ghost>Ghost</Button>
<Button ghost disabled>
Ghost(disabled)
@ -57,3 +57,10 @@ ReactDOM.render(
mountNode,
);
```
```css
.site-button-ghost-wrapper {
padding: 8px 8px 0 8px;
background: rgb(190, 200, 200);
}
```

9
components/button/demo/ghost.md
View File

@ -17,7 +17,7 @@ title:
import { Button } from 'antd';
ReactDOM.render(
<div style={{ background: 'rgb(190, 200, 200)', padding: '26px 16px 16px' }}>
<div className="site-button-ghost-wrapper">
<Button type="primary" ghost>
Primary
</Button>
@ -38,3 +38,10 @@ ReactDOM.render(
mountNode,
);
```
```css
.site-button-ghost-wrapper {
background: rgb(190, 200, 200);
padding: 26px 16px 16px;
}
```

3
components/button/index.en-US.md
View File

@ -49,4 +49,7 @@ Following the Ant Design specification, we will add one space between if Button
[id^=components-button-demo-] .ant-btn-group > span > .ant-btn {
margin-right: 0;
}
[data-theme="dark"] .site-button-ghost-wrapper {
background: rgba(255, 255, 255, 0.3);
}
</style>

3
components/button/index.zh-CN.md
View File

@ -51,4 +51,7 @@ subtitle: 按钮
[id^="components-button-demo-"] .ant-btn-group > .ant-btn {
margin-right: 0;
}
[data-theme="dark"] .site-button-ghost-wrapper {
background: rgba(255, 255, 255, 0.3);
}
</style>

4
components/calendar/__tests__/__snapshots__/demo.test.js.snap
View File

@ -952,7 +952,7 @@ exports[`renders ./components/calendar/demo/basic.md correctly 1`] = `
exports[`renders ./components/calendar/demo/card.md correctly 1`] = `
<div
style="width:300px;border:1px solid #f0f0f0;border-radius:4px"
class="site-calendar-demo-card"
>
<div
class="ant-picker-calendar ant-picker-calendar-mini"
@ -1906,7 +1906,7 @@ exports[`renders ./components/calendar/demo/card.md correctly 1`] = `
exports[`renders ./components/calendar/demo/customize-header.md correctly 1`] = `
<div
style="width:300px;border:1px solid #d9d9d9;border-radius:4px"
class="site-calendar-customize-header-wrapper"
>
<div
class="ant-picker-calendar ant-picker-calendar-mini"

16
components/calendar/demo/card.md
View File

@ -21,9 +21,23 @@ function onPanelChange(value, mode) {
}
ReactDOM.render(
<div style={{ width: 300, border: '1px solid #f0f0f0', borderRadius: 4 }}>
<div className="site-calendar-demo-card">
<Calendar fullscreen={false} onPanelChange={onPanelChange} />
</div>,
mountNode,
);
```
```css
.site-calendar-demo-card {
width: 300px;
border: 1px solid #f0f0f0;
border-radius: 4px;
}
```
<style>
[data-theme="dark"] .site-calendar-demo-card {
border: 1px solid #303030;
}
</style>

16
components/calendar/demo/customize-header.md
View File

@ -23,7 +23,7 @@ function onPanelChange(value, mode) {
}
ReactDOM.render(
<div style={{ width: 300, border: '1px solid #d9d9d9', borderRadius: 4 }}>
<div className="site-calendar-customize-header-wrapper">
<Calendar
fullscreen={false}
headerRender={({ value, type, onChange, onTypeChange }) => {
@ -105,3 +105,17 @@ ReactDOM.render(
mountNode,
);
```
```css
.site-calendar-customize-header-wrapper {
width: 300px;
border: 1px solid #d9d9d9;
border-radius: 4px;
}
```
<style>
[data-theme="dark"] .site-calendar-customize-header-wrapper {
border: 1px solid #303030;
}
</style>

4
components/calendar/style/index.less
View File

@ -6,7 +6,7 @@
.@{calendar-prefix-cls} {
.reset-component;
background: @calendar-bg;
background: @calendar-full-bg;
// ========================= Header =========================
&-header {
@ -29,6 +29,7 @@
}
.@{calendar-picker-prefix-cls}-panel {
background: @calendar-full-panel-bg;
border: 0;
border-top: @border-width-base @border-style-base @border-color-split;
border-radius: 0;
@ -83,6 +84,7 @@
display: block;
width: 100%;
text-align: right;
background: @calendar-full-bg;
border: 0;
.@{calendar-picker-prefix-cls}-body {

6
components/card/__tests__/__snapshots__/demo.test.js.snap
View File

@ -87,7 +87,7 @@ exports[`renders ./components/card/demo/basic.md correctly 1`] = `
exports[`renders ./components/card/demo/border-less.md correctly 1`] = `
<div
style="background:#ECECEC;padding:30px"
class="site-card-border-less-wrapper"
>
<div
class="ant-card"
@ -229,7 +229,7 @@ exports[`renders ./components/card/demo/grid-card.md correctly 1`] = `
exports[`renders ./components/card/demo/in-column.md correctly 1`] = `
<div
style="background:#ECECEC;padding:30px"
class="site-card-wrapper"
>
<div
class="ant-row"
@ -341,7 +341,7 @@ exports[`renders ./components/card/demo/inner.md correctly 1`] = `
class="ant-card-body"
>
<p
style="font-size:14px;color:rgba(0, 0, 0, 0.85);margin-bottom:16px;font-weight:500"
class="site-card-demo-inner-p"
>
Group title
</p>

15
components/card/demo/border-less.md
View File

@ -17,7 +17,7 @@ A borderless card on a gray background.
import { Card } from 'antd';
ReactDOM.render(
<div style={{ background: '#ECECEC', padding: '30px' }}>
<div className="site-card-border-less-wrapper">
<Card title="Card title" bordered={false} style={{ width: 300 }}>
<p>Card content</p>
<p>Card content</p>
@ -27,3 +27,16 @@ ReactDOM.render(
mountNode,
);
```
```css
.site-card-border-less-wrapper {
background: #ececec;
padding: 30px;
}
```
<style>
[data-theme="dark"] .site-card-border-less-wrapper {
background: #303030;
}
</style>

15
components/card/demo/in-column.md
View File

@ -17,7 +17,7 @@ Cards usually cooperate with grid column layout in overview page.
import { Card, Col, Row } from 'antd';
ReactDOM.render(
<div style={{ background: '#ECECEC', padding: '30px' }}>
<div className="site-card-wrapper">
<Row gutter={16}>
<Col span={8}>
<Card title="Card title" bordered={false}>
@ -39,3 +39,16 @@ ReactDOM.render(
mountNode,
);
```
```css
.site-card-wrapper {
background: #ececec;
padding: 30px;
}
```
<style>
[data-theme="dark"] .site-card-wrapper {
background: #303030;
}
</style>

26
components/card/demo/inner.md
View File

@ -18,16 +18,7 @@ import { Card } from 'antd';
ReactDOM.render(
<Card title="Card title">
<p
style={{
fontSize: 14,
color: 'rgba(0, 0, 0, 0.85)',
marginBottom: 16,
fontWeight: 500,
}}
>
Group title
</p>
<p className="site-card-demo-inner-p">Group title</p>
<Card type="inner" title="Inner Card title" extra={<a href="#">More</a>}>
Inner Card content
</Card>
@ -43,3 +34,18 @@ ReactDOM.render(
mountNode,
);
```
```css
.site-card-demo-inner-p {
font-size: 14px;
color: rgba(0, 0, 0, 0.85);
margin-bottom: 16px;
font-weight: 500;
}
```
<style>
[data-theme="dark"] .site-card-demo-inner-p {
color: rgba(255,255,255,.85);
}
</style>

2
components/checkbox/__tests__/__snapshots__/demo.test.js.snap
View File

@ -24,7 +24,7 @@ exports[`renders ./components/checkbox/demo/basic.md correctly 1`] = `
exports[`renders ./components/checkbox/demo/check-all.md correctly 1`] = `
<div>
<div
style="border-bottom:1px solid #E9E9E9"
class="site-checkbox-all-wrapper"
>
<label
class="ant-checkbox-wrapper"

14
components/checkbox/demo/check-all.md
View File

@ -47,7 +47,7 @@ class App extends React.Component {
render() {
return (
<div>
<div style={{ borderBottom: '1px solid #E9E9E9' }}>
<div className="site-checkbox-all-wrapper">
<Checkbox
indeterminate={this.state.indeterminate}
onChange={this.onCheckAllChange}
@ -69,3 +69,15 @@ class App extends React.Component {
ReactDOM.render(<App />, mountNode);
```
```css
.site-checkbox-all-wrapper {
border-bottom: 1px solid #e9e9e9;
}
```
<style>
[data-theme="dark"] .site-checkbox-all-wrapper {
border-bottom: 1px solid #303030;
}
</style>

11
components/collapse/__tests__/__snapshots__/demo.test.js.snap
View File

@ -342,11 +342,10 @@ exports[`renders ./components/collapse/demo/borderless.md correctly 1`] = `
exports[`renders ./components/collapse/demo/custom.md correctly 1`] = `
<div
class="ant-collapse ant-collapse-borderless ant-collapse-icon-position-left"
class="ant-collapse ant-collapse-borderless ant-collapse-icon-position-left site-collapse-custom-collapse"
>
<div
class="ant-collapse-item ant-collapse-item-active"
style="background:#f7f7f7;border-radius:4px;margin-bottom:24px;border:0;overflow:hidden"
class="ant-collapse-item ant-collapse-item-active site-collapse-custom-panel"
>
<div
aria-expanded="true"
@ -394,8 +393,7 @@ exports[`renders ./components/collapse/demo/custom.md correctly 1`] = `
</div>
</div>
<div
class="ant-collapse-item"
style="background:#f7f7f7;border-radius:4px;margin-bottom:24px;border:0;overflow:hidden"
class="ant-collapse-item site-collapse-custom-panel"
>
<div
aria-expanded="false"
@ -427,8 +425,7 @@ exports[`renders ./components/collapse/demo/custom.md correctly 1`] = `
</div>
</div>
<div
class="ant-collapse-item"
style="background:#f7f7f7;border-radius:4px;margin-bottom:24px;border:0;overflow:hidden"
class="ant-collapse-item site-collapse-custom-panel"
>
<div
aria-expanded="false"

32
components/collapse/demo/custom.md
View File

@ -25,30 +25,40 @@ const text = `
it can be found as a welcome guest in many households across the world.
`;
const customPanelStyle = {
background: '#f7f7f7',
borderRadius: 4,
marginBottom: 24,
border: 0,
overflow: 'hidden',
};
ReactDOM.render(
<Collapse
bordered={false}
defaultActiveKey={['1']}
expandIcon={({ isActive }) => <CaretRightOutlined rotate={isActive ? 90 : 0} />}
className="site-collapse-custom-collapse"
>
<Panel header="This is panel header 1" key="1" style={customPanelStyle}>
<Panel header="This is panel header 1" key="1" className="site-collapse-custom-panel">
<p>{text}</p>
</Panel>
<Panel header="This is panel header 2" key="2" style={customPanelStyle}>
<Panel header="This is panel header 2" key="2" className="site-collapse-custom-panel">
<p>{text}</p>
</Panel>
<Panel header="This is panel header 3" key="3" style={customPanelStyle}>
<Panel header="This is panel header 3" key="3" className="site-collapse-custom-panel">
<p>{text}</p>
</Panel>
</Collapse>,
mountNode,
);
```
```css
.site-collapse-custom-collapse .site-collapse-custom-panel {
background: #f7f7f7;
border-radius: 2px;
margin-bottom: 24px;
border: 0px;
overflow: hidden;
}
```
<style>
[data-theme="dark"] .site-collapse-custom-collapse .site-collapse-custom-panel {
background: rgba(255,255,255,0.04);
border: 0px;
}
</style>

21
components/config-provider/demo/locale.md
View File

@ -108,7 +108,7 @@ class Page extends React.Component {
<div className="example">
<Transfer dataSource={[]} showSearch targetKeys={[]} render={item => item.title} />
</div>
<div style={{ width: 319, border: '1px solid #d9d9d9', borderRadius: 4 }}>
<div className="site-config-provider-calendar-wrapper">
<Calendar fullscreen={false} value={moment()} />
</div>
<div className="example">
@ -169,16 +169,22 @@ ReactDOM.render(<App />, mountNode);
```
```css
.site-config-provider-calendar-wrapper {
width: 319px;
border: 1px solid #d9d9d9;
border-radius: 2px;
}
.locale-components {
border-top: 1px solid #d9d9d9;
padding-top: 16px;
}
.example {
.code-box-demo .example {
margin: 16px 0;
}
.example > * {
.code-box-demo .example > * {
margin-right: 8px;
}
@ -186,3 +192,12 @@ ReactDOM.render(<App />, mountNode);
margin-bottom: 16px;
}
```
<style>
[data-theme="dark"] .locale-components {
border-top: 1px solid #303030;
}
[data-theme="dark"] .site-config-provider-calendar-wrapper {
border: 1px solid #303030;
}
</style>

1
components/date-picker/style/DecadePanel.less
View File

@ -17,7 +17,6 @@
}
.@{calendar-prefix-cls}-decade-panel-header {
.calendarPanelHeader(~'@{calendar-prefix-cls}-decade-panel');
position: relative;
}

86
components/date-picker/style/MonthPanel.less
View File

@ -1,86 +0,0 @@
.@{calendar-prefix-cls}-month-panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: @zindex-picker-panel;
background: @month-panel-bg;
border-radius: @border-radius-base;
outline: none;
> div {
display: flex;
flex-direction: column;
// TODO: this is a useless wrapper, and we need to remove it in rc-calendar
height: 100%;
}
}
.@{calendar-prefix-cls}-month-panel-hidden {
display: none;
}
.@{calendar-prefix-cls}-month-panel-header {
.calendarPanelHeader(~'@{calendar-prefix-cls}-month-panel');
position: relative;
}
.@{calendar-prefix-cls}-month-panel-body {
flex: 1;
}
.@{calendar-prefix-cls}-month-panel-footer {
border-top: @border-width-base @border-style-base @border-color-split;
.@{calendar-prefix-cls}-footer-extra {
padding: 0 12px;
}
}
.@{calendar-prefix-cls}-month-panel-table {
width: 100%;
height: 100%;
table-layout: fixed;
border-collapse: separate;
}
.@{calendar-prefix-cls}-month-panel-selected-cell .@{calendar-prefix-cls}-month-panel-month {
color: @text-color-inverse;
background: @primary-color;
&:hover {
color: @text-color-inverse;
background: @primary-color;
}
}
.@{calendar-prefix-cls}-month-panel-cell {
text-align: center;
&-disabled .@{calendar-prefix-cls}-month-panel-month {
&,
&:hover {
color: @disabled-color;
background: @disabled-bg;
cursor: not-allowed;
}
}
}
.@{calendar-prefix-cls}-month-panel-month {
display: inline-block;
height: 24px;
margin: 0 auto;
padding: 0 8px;
color: @text-color;
line-height: 24px;
text-align: center;
background: transparent;
border-radius: @border-radius-base;
transition: background 0.3s ease;
&:hover {
background: @item-hover-bg;
cursor: pointer;
}
}

151
components/date-picker/style/TimePicker.less
View File

@ -1,151 +0,0 @@
.@{calendar-timepicker-prefix-cls} {
position: absolute;
top: 40px;
width: 100%;
background-color: @time-picker-bg;
&-panel {
position: absolute;
z-index: @zindex-picker;
width: 100%;
}
&-inner {
position: relative;
display: inline-block;
width: 100%;
overflow: hidden;
font-size: @font-size-base;
line-height: 1.5;
text-align: left;
list-style: none;
background-color: @time-picker-inner-bg;
background-clip: padding-box;
outline: none;
}
&-combobox {
width: 100%;
}
&-column-1,
&-column-1 &-select {
width: 100%;
}
&-column-2 &-select {
width: 50%;
}
&-column-3 &-select {
width: 33.33%;
}
&-column-4 &-select {
width: 25%;
}
&-input-wrap {
display: none;
}
&-select {
position: relative; // Fix chrome weird render bug
float: left;
height: 226px;
overflow: hidden;
font-size: @font-size-base;
border-right: @border-width-base @border-style-base @border-color-split;
&:hover {
overflow-y: auto;
}
&:first-child {
margin-left: 0;
border-left: 0;
}
&:last-child {
border-right: 0;
}
ul {
width: 100%;
max-height: 206px;
margin: 0;
padding: 0;
list-style: none;
}
li {
width: 100%;
height: 24px;
margin: 0;
line-height: 24px;
text-align: center;
list-style: none;
cursor: pointer;
transition: all 0.3s;
user-select: none;
&:last-child::after {
display: block;
height: 202px;
content: '';
}
&:hover {
background: @item-hover-bg;
}
&:focus {
color: @primary-color;
font-weight: 600;
outline: none;
}
}
li&-option-selected {
font-weight: 600;
background: @time-picker-selected-bg;
}
li&-option-disabled {
color: @btn-disable-color;
&:hover {
background: transparent;
cursor: not-allowed;
}
}
}
}
.@{calendar-prefix-cls}-time {
.@{calendar-prefix-cls}-day-select {
display: inline-block;
padding: 0 2px;
color: @heading-color;
font-weight: 500;
line-height: 34px;
}
.@{calendar-prefix-cls}-footer {
position: relative;
height: auto;
&-btn {
text-align: right;
}
.@{calendar-prefix-cls}-today-btn {
float: left;
margin: 0;
}
.@{calendar-prefix-cls}-time-picker-btn {
display: inline-block;
margin-right: 8px;
&-disabled {
color: @disabled-color;
}
}
}
}

85
components/date-picker/style/YearPanel.less
View File

@ -1,85 +0,0 @@
.@{calendar-prefix-cls}-year-panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: @zindex-picker-panel;
background: @year-panel-bg;
border-radius: @border-radius-base;
outline: none;
> div {
display: flex;
flex-direction: column;
// TODO: this is a useless wrapper, and we need to remove it in rc-calendar
height: 100%;
}
}
.@{calendar-prefix-cls}-year-panel-hidden {
display: none;
}
.@{calendar-prefix-cls}-year-panel-header {
.calendarPanelHeader(~'@{calendar-prefix-cls}-year-panel');
position: relative;
}
.@{calendar-prefix-cls}-year-panel-body {
flex: 1;
}
.@{calendar-prefix-cls}-year-panel-footer {
border-top: @border-width-base @border-style-base @border-color-split;
.@{calendar-prefix-cls}-footer-extra {
padding: 0 12px;
}
}
.@{calendar-prefix-cls}-year-panel-table {
width: 100%;
height: 100%;
table-layout: fixed;
border-collapse: separate;
}
.@{calendar-prefix-cls}-year-panel-cell {
text-align: center;
}
.@{calendar-prefix-cls}-year-panel-year {
display: inline-block;
height: 24px;
margin: 0 auto;
padding: 0 8px;
color: @text-color;
line-height: 24px;
text-align: center;
background: transparent;
border-radius: @border-radius-base;
transition: background 0.3s ease;
&:hover {
background: @item-hover-bg;
cursor: pointer;
}
}
.@{calendar-prefix-cls}-year-panel-selected-cell .@{calendar-prefix-cls}-year-panel-year {
color: @text-color-inverse;
background: @primary-color;
&:hover {
color: @text-color-inverse;
background: @primary-color;
}
}
.@{calendar-prefix-cls}-year-panel-last-decade-cell,
.@{calendar-prefix-cls}-year-panel-next-decade-cell {
.@{calendar-prefix-cls}-year-panel-year {
color: @disabled-color;
user-select: none;
}
}

11
components/date-picker/style/index.less
View File

@ -27,7 +27,7 @@
.picker-padding(@input-height-base, @font-size-base, @input-padding-horizontal-base);
display: inline-flex;
align-items: center;
background: @component-background;
background: @picker-bg;
border: @border-width-base @border-style-base @select-border-color;
border-radius: @border-radius-base;
transition: border @animation-duration-slow, box-shadow @animation-duration-slow;
@ -241,20 +241,11 @@
// display: none !important;
// }
&::before,
&::after {
position: absolute;
content: '';
}
&::before {
top: 0;
right: 0;
width: @arrow-size;
height: @arrow-size;
border: @arrow-size / 2 solid @border-color-split;
border-color: @border-color-split @border-color-split transparent transparent;
}
&::after {
top: @border-width-base;
right: @border-width-base;

32
components/date-picker/style/panel.less
View File

@ -4,11 +4,7 @@
@picker-legacy-cell-cls: ~'@{ant-prefix}-calendar-date';
.@{picker-prefix-cls} {
@picker-basic-cell-hover-color: lighten(@primary-color, 40%);
@picker-basic-cell-hover-with-range-color: lighten(@primary-color, 35%);
@picker-border: @border-width-base @border-style-base @border-color-split;
@picker-arrow-size: 7px;
@picker-date-hover-range-border: @border-width-base dashed lighten(@primary-color, 20%);
@picker-panel-width: 280px;
@picker-year-month-cell-width: 60px;
@ -16,7 +12,7 @@
display: inline-block;
text-align: center;
background: @calendar-bg;
border: @picker-border;
border: @border-width-base @border-style-base @picker-border-color;
border-radius: @border-radius-base;
outline: none;
@ -44,7 +40,7 @@
display: flex;
padding: 0 @padding-xs;
color: @heading-color;
border-bottom: @picker-border;
border-bottom: @border-width-base @border-style-base @picker-border-color;
> * {
flex: none;
@ -246,8 +242,8 @@
top: 50%;
z-index: 0;
height: 24px;
border-top: @picker-date-hover-range-border;
border-bottom: @picker-date-hover-range-border;
border-top: @border-width-base dashed @picker-date-hover-range-border-color;
border-bottom: @border-width-base dashed @picker-date-hover-range-border-color;
transform: translateY(-50%);
content: '';
}
@ -313,7 +309,7 @@
&-in-view&-range-hover-edge-start:not(&-range-hover-edge-start-near-range)::after,
&-in-view&-range-hover-start::after {
left: 6px;
border-left: @picker-date-hover-range-border;
border-left: @border-width-base dashed @picker-date-hover-range-border-color;
border-top-left-radius: @border-radius-base;
border-bottom-left-radius: @border-radius-base;
}
@ -324,7 +320,7 @@
&-in-view&-range-hover-edge-end:not(&-range-hover-edge-end-near-range)::after,
&-in-view&-range-hover-end::after {
right: 6px;
border-right: @picker-date-hover-range-border;
border-right: @border-width-base dashed @picker-date-hover-range-border-color;
border-top-right-radius: @border-radius-base;
border-bottom-right-radius: @border-radius-base;
}
@ -339,7 +335,7 @@
}
&::before {
background: @disabled-bg;
background: @picker-basic-cell-disabled-bg;
}
}
&-disabled&-today .@{cellClassName}::before {
@ -379,7 +375,7 @@
.@{picker-prefix-cls}-cell {
&-disabled .@{picker-cell-inner-cls} {
background: @disabled-bg;
background: @picker-basic-cell-disabled-bg;
}
}
}
@ -399,7 +395,7 @@
border-bottom: @border-width-base @border-style-base transparent;
.@{picker-prefix-cls}-panel & {
border-top: @picker-border;
border-top: @border-width-base @border-style-base @picker-border-color;
}
&-extra {
@ -408,7 +404,7 @@
text-align: left;
&:not(:last-child) {
border-bottom: @picker-border;
border-bottom: @border-width-base @border-style-base @picker-border-color;
}
}
}
@ -457,12 +453,12 @@
.@{picker-prefix-cls}-cell-range-hover-start::after {
left: @hover-cell-fixed-distance;
border-left: @picker-date-hover-range-border;
border-left: @border-width-base dashed @picker-date-hover-range-border-color;
border-radius: @border-radius-base 0 0 @border-radius-base;
}
.@{picker-prefix-cls}-cell-range-hover-end::after {
right: @hover-cell-fixed-distance;
border-right: @picker-date-hover-range-border;
border-right: @border-width-base dashed @picker-date-hover-range-border-color;
border-radius: 0 @border-radius-base @border-radius-base 0;
}
}
@ -530,7 +526,7 @@
display: flex;
.@{picker-prefix-cls}-time-panel {
border-left: @picker-border;
border-left: @border-width-base @border-style-base @picker-border-color;
}
.@{picker-prefix-cls}-date-panel,
@ -573,7 +569,7 @@
transition: background @animation-duration-slow;
&:not(:first-child) {
border-left: @picker-border;
border-left: @border-width-base @border-style-base @picker-border-color;
}
&-active {

2
components/drawer/__tests__/__snapshots__/demo.test.js.snap
View File

@ -160,7 +160,7 @@ exports[`renders ./components/drawer/demo/placement.md correctly 1`] = `
exports[`renders ./components/drawer/demo/render-in-current.md correctly 1`] = `
<div
style="height:200px;overflow:hidden;position:relative;border:1px solid #ebedf0;border-radius:2px;padding:48px;text-align:center;background:#fafafa"
class="site-drawer-render-in-current-wrapper"
>
Render in this
<div

33
components/drawer/demo/form-in-drawer.md
View File

@ -142,18 +142,7 @@ class DrawerForm extends React.Component {
</Col>
</Row>
</Form>
<div
style={{
position: 'absolute',
right: 0,
bottom: 0,
width: '100%',
borderTop: '1px solid #e9e9e9',
padding: '10px 16px',
background: '#fff',
textAlign: 'right',
}}
>
<div className="site-form-in-drawer-wrapper">
<Button onClick={this.onClose} style={{ marginRight: 8 }}>
Cancel
</Button>
@ -169,3 +158,23 @@ class DrawerForm extends React.Component {
ReactDOM.render(<DrawerForm />, mountNode);
```
```css
.site-form-in-drawer-wrapper {
position: absolute;
right: 0px;
bottom: 0px;
width: 100%;
padding: 10px 16px;
border-top: 1px solid #e9e9e9;
background: #fff;
text-align: right;
}
```
<style>
[data-theme="dark"] .site-form-in-drawer-wrapper {
border-top: 1px solid #303030;
background: #1f1f1f;
}
</style>

35
components/drawer/demo/multi-level-drawer.md
View File

@ -68,19 +68,7 @@ class App extends React.Component {
>
This is two-level drawer
</Drawer>
<div
style={{
position: 'absolute',
bottom: 0,
width: '100%',
borderTop: '1px solid #e8e8e8',
padding: '10px 16px',
textAlign: 'right',
left: 0,
background: '#fff',
borderRadius: '0 0 4px 4px',
}}
>
<div className="site-multi-level-drawer-footer">
<Button
style={{
marginRight: 8,
@ -101,3 +89,24 @@ class App extends React.Component {
ReactDOM.render(<App />, mountNode);
```
```css
.site-multi-level-drawer-footer {
position: absolute;
bottom: 0;
width: 100%;
border-top: 1px solid #e8e8e8;
padding: 10px 16px;
text-align: right;
left: 0;
border-radius: 0 0 4px 4px;
background: #fff;
}
```
<style>
[data-theme="dark"] .site-multi-level-drawer-footer {
border-top: 1px solid #303030;
background: #1f1f1f;
}
</style>

33
components/drawer/demo/render-in-current.md
View File

@ -33,18 +33,7 @@ class App extends React.Component {
render() {
return (
<div
style={{
height: 200,
overflow: 'hidden',
position: 'relative',
border: '1px solid #ebedf0',
borderRadius: 2,
padding: 48,
textAlign: 'center',
background: '#fafafa',
}}
>
<div className="site-drawer-render-in-current-wrapper">
Render in this
<div style={{ marginTop: 16 }}>
<Button type="primary" onClick={this.showDrawer}>
@ -69,3 +58,23 @@ class App extends React.Component {
ReactDOM.render(<App />, mountNode);
```
```css
.site-drawer-render-in-current-wrapper {
height: 200px;
overflow: hidden;
position: relative;
border: 1px solid #ebedf0;
border-radius: 2px;
padding: 48px;
text-align: center;
background: #fafafa;
}
```
<style>
[data-theme="dark"] .site-drawer-render-in-current-wrapper {
background: #000;
border: 1px solid #303030;
}
</style>

39
components/drawer/demo/user-profile.md
View File

@ -18,7 +18,6 @@ import { Drawer, List, Avatar, Divider, Col, Row } from 'antd';
const pStyle = {
fontSize: 16,
color: 'rgba(0,0,0,0.85)',
lineHeight: '24px',
display: 'block',
marginBottom: 16,
@ -26,18 +25,18 @@ const pStyle = {
const DescriptionItem = ({ title, content }) => (
<div
className="site-description-item-profile-wrapper"
style={{
fontSize: 14,
lineHeight: '22px',
marginBottom: 7,
color: 'rgba(0,0,0,0.65)',
}}
>
<p
className="site-description-item-profile-p"
style={{
marginRight: 8,
display: 'inline-block',
color: 'rgba(0,0,0,0.85)',
}}
>
{title}:
@ -100,8 +99,12 @@ class App extends React.Component {
onClose={this.onClose}
visible={this.state.visible}
>
<p style={{ ...pStyle, marginBottom: 24 }}>User Profile</p>
<p style={pStyle}>Personal</p>
<p className="site-description-item-profile-p" style={{ ...pStyle, marginBottom: 24 }}>
User Profile
</p>
<p className="site-description-item-profile-p" style={pStyle}>
Personal
</p>
<Row>
<Col span={12}>
<DescriptionItem title="Full Name" content="Lily" />
@ -135,7 +138,9 @@ class App extends React.Component {
</Col>
</Row>
<Divider />
<p style={pStyle}>Company</p>
<p className="site-description-item-profile-p" style={pStyle}>
Company
</p>
<Row>
<Col span={12}>
<DescriptionItem title="Position" content="Programmer" />
@ -161,7 +166,9 @@ class App extends React.Component {
</Col>
</Row>
<Divider />
<p style={pStyle}>Contacts</p>
<p className="site-description-item-profile-p" style={pStyle}>
Contacts
</p>
<Row>
<Col span={12}>
<DescriptionItem title="Email" content="AntDesign@example.com" />
@ -190,3 +197,21 @@ class App extends React.Component {
ReactDOM.render(<App />, mountNode);
```
```css
.site-description-item-profile-wrapper {
color: rgba(0, 0, 0, 0.65);
}
.site-description-item-profile-p {
color: rgba(0, 0, 0, 0.85);
}
```
<style>
[data-theme="dark"] .site-description-item-profile-p {
color: rgba(255,255,255,0.85);
}
[data-theme="dark"] .site-description-item-profile-wrapper {
color: rgba(255,255,255,0.65);
}
</style>

4
components/dropdown/__tests__/__snapshots__/demo.test.js.snap
View File

@ -31,8 +31,8 @@ exports[`renders ./components/dropdown/demo/basic.md correctly 1`] = `
exports[`renders ./components/dropdown/demo/context-menu.md correctly 1`] = `
<div
class="ant-dropdown-trigger"
style="text-align:center;background:#f7f7f7;height:200px;line-height:200px;color:#777"
class="site-dropdown-context-menu ant-dropdown-trigger"
style="text-align:center;height:200px;line-height:200px"
>
Right Click on here
</div>

17
components/dropdown/demo/context-menu.md
View File

@ -27,12 +27,11 @@ const menu = (
ReactDOM.render(
<Dropdown overlay={menu} trigger={['contextMenu']}>
<div
className="site-dropdown-context-menu"
style={{
textAlign: 'center',
background: '#f7f7f7',
height: 200,
lineHeight: '200px',
color: '#777',
}}
>
Right Click on here
@ -41,3 +40,17 @@ ReactDOM.render(
mountNode,
);
```
```css
.site-dropdown-context-menu {
background: #f7f7f7;
color: #777;
}
```
<style>
[data-theme="dark"] .site-dropdown-context-menu {
background: #141414;
color: rgba(255,255,255,.65);
}
</style>

3
components/dropdown/style/index.less
View File

@ -111,6 +111,9 @@
padding: 5px @control-padding-horizontal;
color: @text-color;
transition: all 0.3s;
&:hover {
color: @text-color;
}
}
&:first-child {

2
components/empty/__tests__/__snapshots__/demo.test.js.snap
View File

@ -753,7 +753,7 @@ exports[`renders ./components/empty/demo/customize.md correctly 1`] = `
>
<img
alt="empty"
src="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original"
src="https://alipay-rmsdeploy-image.cn-hangzhou.alipay.aliyun-inc.com/antfincdn/ncyfsLONGK/empty.svg"
/>
</div>
<p

2
components/empty/demo/customize.md
View File

@ -18,7 +18,7 @@ import { Empty, Button } from 'antd';
ReactDOM.render(
<Empty
image="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original"
image="https://alipay-rmsdeploy-image.cn-hangzhou.alipay.aliyun-inc.com/antfincdn/ncyfsLONGK/empty.svg"
imageStyle={{
height: 60,
}}

27
components/empty/index.zh-CN.md
View File

@ -31,8 +31,31 @@ cols: 1
- Empty.PRESENTED_IMAGE_SIMPLE
<img src="https://user-images.githubusercontent.com/507615/54591679-b0ceb580-4a65-11e9-925c-ad15b4eae93d.png" height="35px">
<div class="site-empty-buildIn-img site-empty-buildIn-simple"><div>
- Empty.PRESENTED_IMAGE_DEFAULT
<img src="https://user-images.githubusercontent.com/507615/54591670-ac0a0180-4a65-11e9-846c-e55ffce0fe7b.png" height="100px">
<div class="site-empty-buildIn-img site-empty-buildIn-default"></div>
<style>
.site-empty-buildIn-img {
background-repeat: no-repeat;
background-size: cover;
}
.site-empty-buildIn-simple {
width: 55px;
height: 35px;
background-image: url("https://user-images.githubusercontent.com/507615/54591679-b0ceb580-4a65-11e9-925c-ad15b4eae93d.png");
}
.site-empty-buildIn-default {
width: 121px;
height: 100px;
background-image: url("https://user-images.githubusercontent.com/507615/54591670-ac0a0180-4a65-11e9-846c-e55ffce0fe7b.png");
}
[data-theme="dark"] .site-empty-buildIn-simple {
background-image: url("https://alipay-rmsdeploy-image.cn-hangzhou.alipay.aliyun-inc.com/antfincdn/oQFqhkmNPw/a38d2cdb-a33d-407c-8f8e-e3429699175d.png");
}
[data-theme="dark"] .site-empty-buildIn-default {
background-image: url("https://alipay-rmsdeploy-image.cn-hangzhou.alipay.aliyun-inc.com/antfincdn/5kgxi7xhMT/f6a34113-f417-44ea-a558-c3e50b4d441e.png");
}
</style>

12
components/form/__tests__/__snapshots__/demo.test.js.snap
View File

@ -1252,9 +1252,8 @@ exports[`renders ./components/form/demo/inline-login.md correctly 1`] = `
>
<span
aria-label="user"
class="anticon anticon-user"
class="anticon anticon-user site-form-item-icon"
role="img"
style="color:rgba(0,0,0,.25)"
>
<svg
aria-hidden="true"
@ -1300,9 +1299,8 @@ exports[`renders ./components/form/demo/inline-login.md correctly 1`] = `
>
<span
aria-label="lock"
class="anticon anticon-lock"
class="anticon anticon-lock site-form-item-icon"
role="img"
style="color:rgba(0,0,0,.25)"
>
<svg
aria-hidden="true"
@ -1788,9 +1786,8 @@ exports[`renders ./components/form/demo/normal-login.md correctly 1`] = `
>
<span
aria-label="user"
class="anticon anticon-user"
class="anticon anticon-user site-form-item-icon"
role="img"
style="color:rgba(0,0,0,.25)"
>
<svg
aria-hidden="true"
@ -1836,9 +1833,8 @@ exports[`renders ./components/form/demo/normal-login.md correctly 1`] = `
>
<span
aria-label="lock"
class="anticon anticon-lock"
class="anticon anticon-lock site-form-item-icon"
role="img"
style="color:rgba(0,0,0,.25)"
>
<svg
aria-hidden="true"

14
components/form/demo/advanced-search.md
View File

@ -102,7 +102,7 @@ ReactDOM.render(
padding: 24px;
background: #fbfbfb;
border: 1px solid #d9d9d9;
border-radius: 6px;
border-radius: 2px;
}
.ant-advanced-search-form .ant-form-item {
@ -121,10 +121,20 @@ ReactDOM.render(
#components-form-demo-advanced-search .search-result-list {
margin-top: 16px;
border: 1px dashed #e9e9e9;
border-radius: 6px;
border-radius: 2px;
background-color: #fafafa;
min-height: 200px;
text-align: center;
padding-top: 80px;
}
[data-theme="dark"] .ant-advanced-search-form {
background: rgba(255,255,255,0.04);
border: 1px solid #434343;
padding: 24px;
border-radius: 2px;
}
[data-theme="dark"] #components-form-demo-advanced-search .search-result-list {
border: 1px dashed #434343;
background: rgba(255,255,255,0.04);
}
</style>

9
components/form/demo/dynamic-form-item.md
View File

@ -121,3 +121,12 @@ ReactDOM.render(<DynamicFieldSet />, mountNode);
opacity: 0.5;
}
```
<style>
[data-theme="dark"] .dynamic-delete-button {
color: rgba(255,255,255,.45);
}
[data-theme="dark"] .dynamic-delete-button:hover {
color: rgba(255,255,255,.65);
}
</style>

7
components/form/demo/inline-login.md
View File

@ -36,17 +36,14 @@ const HorizontalLoginForm = () => {
name="username"
rules={[{ required: true, message: 'Please input your username!' }]}
>
<Input
prefix={<UserOutlined style={{ color: 'rgba(0,0,0,.25)' }} />}
placeholder="Username"
/>
<Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
</Form.Item>
<Form.Item
name="password"
rules={[{ required: true, message: 'Please input your password!' }]}
>
<Input
prefix={<LockOutlined style={{ color: 'rgba(0,0,0,.25)' }} />}
prefix={<LockOutlined className="site-form-item-icon" />}
type="password"
placeholder="Password"
/>

7
components/form/demo/normal-login.md
View File

@ -33,17 +33,14 @@ const NormalLoginForm = () => {
name="username"
rules={[{ required: true, message: 'Please input your Username!' }]}
>
<Input
prefix={<UserOutlined style={{ color: 'rgba(0,0,0,.25)' }} />}
placeholder="Username"
/>
<Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
</Form.Item>
<Form.Item
name="password"
rules={[{ required: true, message: 'Please input your Password!' }]}
>
<Input
prefix={<LockOutlined style={{ color: 'rgba(0,0,0,.25)' }} />}
prefix={<LockOutlined className="site-form-item-icon" />}
type="password"
placeholder="Password"
/>

9
components/form/index.en-US.md
View File

@ -327,3 +327,12 @@ const TestForm = () => {
Online demo:
[![Edit wrappedComponentRef-in-function-component](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/wrappedcomponentref-in-function-component-fj43c?fontsize=14&hidenavigation=1&theme=dark)
<style>
.site-form-item-icon {
color: rgba(0, 0, 0, 0.25);
}
[data-theme="dark"] .site-form-item-icon {
color: rgba(255,255,255,.3);
}
</style>

9
components/form/index.zh-CN.md
View File

@ -328,3 +328,12 @@ const TestForm = () => {
在线示例：
[![Edit wrappedComponentRef-in-function-component](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/wrappedcomponentref-in-function-component-fj43c?fontsize=14&hidenavigation=1&theme=dark)
<style>
.site-form-item-icon {
color: rgba(0, 0, 0, 0.25);
}
[data-theme="dark"] .site-form-item-icon {
color: rgba(255,255,255,.3);
}
</style>

2
components/grid/demo/flex-align.md
View File

@ -74,6 +74,6 @@ ReactDOM.render(
```css
#components-grid-demo-flex-align [class~='ant-row'] {
background: #f5f5f5;
background: rgba(128, 128, 128, 0.08);
}
```

2
components/grid/demo/flex-order.md
View File

@ -39,6 +39,6 @@ ReactDOM.render(
```css
#components-grid-demo-flex-order [class~='ant-row'] {
background: #f5f5f5;
background: rgba(128, 128, 128, 0.08);
}
```

2
components/grid/demo/flex.md
View File

@ -66,6 +66,6 @@ ReactDOM.render(
```css
#components-grid-demo-flex [class~='ant-row'] {
background: #f5f5f5;
background: rgba(128, 128, 128, 0.08);
}
```

6
components/grid/demo/gutter.md
View File

@ -73,3 +73,9 @@ ReactDOM.render(
padding: 5px 0;
}
```
<style>
[data-theme="dark"] .gutter-box {
background: #028ac8;
}
</style>

6
components/grid/demo/playground.md
View File

@ -133,3 +133,9 @@ ReactDOM.render(<App />, mountNode);
padding: 8px 16px;
}
```
<style>
[data-theme="dark"] #components-grid-demo-playground [class~='ant-col'] > div {
background: #028ac8;
}
</style>

7
components/grid/index.en-US.md
View File

@ -110,3 +110,10 @@ If the Ant Design grid layout component does not meet your needs, you can use th
| xxl | `≥1600px`, could be a `span` value or an object containing above props | number\|object | - | |
The breakpoints of responsive grid follow [BootStrap 4 media queries rules](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)(not including `occasionally part`).
<style>
[data-theme="dark"] #components-grid-demo-playground pre {
background: rgba(255,255,255,0.8);
color: rgba(255,255,255,.65);
}
</style>

7
components/grid/index.zh-CN.md
View File

@ -109,3 +109,10 @@ Ant Design 的布局组件若不能满足你的需求，你也可以直接使用
| xxl | `≥1600px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - | |
响应式栅格的断点扩展自 [BootStrap 4 的规则](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)（不包含链接里 `occasionally` 的部分)。
<style>
[data-theme="dark"] #components-grid-demo-playground pre {
background: rgba(255,255,255,0.08);
color: rgba(255,255,255,.65);
}
</style>

4
components/input-number/__tests__/__snapshots__/demo.test.js.snap
View File

@ -427,7 +427,9 @@ exports[`renders ./components/input-number/demo/formatter.md correctly 1`] = `
`;
exports[`renders ./components/input-number/demo/size.md correctly 1`] = `
<div>
<div
class="site-input-number-wrapper"
>
<div
class="ant-input-number ant-input-number-lg"
>

4
components/input-number/demo/size.md
View File

@ -21,7 +21,7 @@ function onChange(value) {
}
ReactDOM.render(
<div>
<div className="site-input-number-wrapper">
<InputNumber size="large" min={1} max={100000} defaultValue={3} onChange={onChange} />
<InputNumber min={1} max={100000} defaultValue={3} onChange={onChange} />
<InputNumber size="small" min={1} max={100000} defaultValue={3} onChange={onChange} />
@ -31,7 +31,7 @@ ReactDOM.render(
```
```css
.ant-input-number {
.code-box-demo .ant-input-number {
margin-right: 10px;
}
```

11
components/input/__tests__/__snapshots__/demo.test.js.snap
View File

@ -945,7 +945,9 @@ exports[`renders ./components/input/demo/basic.md correctly 1`] = `
`;
exports[`renders ./components/input/demo/group.md correctly 1`] = `
<div>
<div
class="site-input-group-wrapper"
>
<span
class="ant-input-group ant-input-group-lg"
>
@ -1443,10 +1445,10 @@ exports[`renders ./components/input/demo/group.md correctly 1`] = `
value=""
/>
<input
class="ant-input ant-input-disabled"
class="ant-input ant-input-disabled site-input-split"
disabled=""
placeholder="~"
style="width:30px;border-left:0;pointer-events:none;background-color:#fff"
style="width:30px;border-left:0;border-right:0;pointer-events:none"
type="text"
value=""
/>
@ -1705,9 +1707,8 @@ exports[`renders ./components/input/demo/presuffix.md correctly 1`] = `
>
<span
aria-label="user"
class="anticon anticon-user"
class="anticon anticon-user site-form-item-icon"
role="img"
style="color:rgba(0,0,0,.25)"
>
<svg
aria-hidden="true"

17
components/input/demo/group.md
View File

@ -74,7 +74,7 @@ class CompactDemo extends React.Component {
render() {
return (
<div>
<div className="site-input-group-wrapper">
<InputGroup size="large">
<Row gutter={8}>
<Col span={5}>
@ -131,11 +131,12 @@ class CompactDemo extends React.Component {
</Select>
<Input style={{ width: 100, textAlign: 'center' }} placeholder="Minimum" />
<Input
className="site-input-split"
style={{
width: 30,
borderLeft: 0,
borderRight: 0,
pointerEvents: 'none',
backgroundColor: '#fff',
}}
placeholder="~"
disabled
@ -170,3 +171,15 @@ class CompactDemo extends React.Component {
ReactDOM.render(<CompactDemo />, mountNode);
```
```css
.site-input-group-wrapper .site-input-split {
background-color: #fff;
}
```
<style>
[data-theme="dark"] .site-input-group-wrapper .site-input-split {
background-color: #141414;
}
</style>

2
components/input/demo/presuffix.md
View File

@ -21,7 +21,7 @@ ReactDOM.render(
<div>
<Input
placeholder="Enter your username"
prefix={<UserOutlined style={{ color: 'rgba(0,0,0,.25)' }} />}
prefix={<UserOutlined className="site-form-item-icon" />}
suffix={
<Tooltip title="Extra information">
<InfoCircleOutlined style={{ color: 'rgba(0,0,0,.45)' }} />

33
components/layout/__tests__/__snapshots__/demo.test.js.snap
View File

@ -235,8 +235,8 @@ exports[`renders ./components/layout/demo/custom-trigger.md correctly 1`] = `
class="ant-layout"
>
<header
class="ant-layout-header"
style="background:#fff;padding:0"
class="site-layout-background ant-layout-header"
style="padding:0"
>
<span
aria-label="menu-fold"
@ -261,8 +261,8 @@ exports[`renders ./components/layout/demo/custom-trigger.md correctly 1`] = `
</span>
</header>
<main
class="ant-layout-content"
style="margin:24px 16px;padding:24px;background:#fff;min-height:280px"
class="site-layout-background ant-layout-content"
style="margin:24px 16px;padding:24px;min-height:280px"
>
Content
</main>
@ -978,15 +978,16 @@ exports[`renders ./components/layout/demo/responsive.md correctly 1`] = `
class="ant-layout"
>
<header
class="ant-layout-header"
style="background:#fff;padding:0"
class="site-layout-header-background ant-layout-header"
style="padding:0"
/>
<main
class="ant-layout-content"
style="margin:24px 16px 0"
>
<div
style="padding:24px;background:#fff;min-height:360px"
class="site-layout-background"
style="padding:24px;min-height:360px"
>
content
</div>
@ -1423,7 +1424,7 @@ exports[`renders ./components/layout/demo/top.md correctly 1`] = `
</span>
</div>
<div
style="background:#fff;padding:24px;min-height:280px"
class="site-layout-content"
>
Content
</div>
@ -1590,12 +1591,12 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
</span>
</div>
<section
class="ant-layout"
style="padding:24px 0;background:#fff"
class="site-layout-background ant-layout"
style="padding:24px 0"
>
<aside
class="ant-layout-sider ant-layout-sider-dark"
style="background:#fff;flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
class="site-layout-background ant-layout-sider ant-layout-sider-dark"
style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
>
<div
class="ant-layout-sider-children"
@ -1887,8 +1888,8 @@ exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
class="ant-layout"
>
<aside
class="ant-layout-sider ant-layout-sider-dark"
style="background:#fff;flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
class="site-layout-background ant-layout-sider ant-layout-sider-dark"
style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
>
<div
class="ant-layout-sider-children"
@ -2098,8 +2099,8 @@ exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
</span>
</div>
<main
class="ant-layout-content"
style="background:#fff;padding:24px;margin:0;min-height:280px"
class="site-layout-background ant-layout-content"
style="padding:24px;margin:0;min-height:280px"
>
Content
</main>

12
components/layout/demo/basic.md
View File

@ -66,6 +66,12 @@ ReactDOM.render(
background: #7dbcea;
color: #fff;
}
[data-theme="dark"] #components-layout-demo-basic .ant-layout-header {
background: #6aa0c7;
}
[data-theme="dark"] #components-layout-demo-basic .ant-layout-footer {
background: #6aa0c7;
}
#components-layout-demo-basic .ant-layout-footer {
line-height: 1.5;
}
@ -74,12 +80,18 @@ ReactDOM.render(
color: #fff;
line-height: 120px;
}
[data-theme="dark"] #components-layout-demo-basic .ant-layout-sider {
background: #3499ec;
}
#components-layout-demo-basic .ant-layout-content {
background: rgba(16, 142, 233, 1);
color: #fff;
min-height: 120px;
line-height: 120px;
}
[data-theme="dark"] #components-layout-demo-basic .ant-layout-content {
background: #107bcb;
}
#components-layout-demo-basic > .code-box-demo > div > .ant-layout {
margin-bottom: 48px;
}

8
components/layout/demo/custom-trigger-debug.md
View File

@ -81,17 +81,17 @@ class SiderDemo extends React.Component {
</Menu>
</Sider>
<Layout>
<Header style={{ background: '#fff', padding: 0 }}>
<Header className="site-layout-background" style={{ padding: 0 }}>
{React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
className: 'trigger',
onClick: this.toggle,
})}
</Header>
<Content
className="site-layout-background"
style={{
margin: '24px 16px',
padding: 24,
background: '#fff',
minHeight: 280,
}}
>
@ -124,4 +124,8 @@ ReactDOM.render(<SiderDemo />, mountNode);
background: rgba(255, 255, 255, 0.2);
margin: 16px;
}
.site-layout-background {
background: #fff;
}
```

8
components/layout/demo/custom-trigger.md
View File

@ -57,17 +57,17 @@ class SiderDemo extends React.Component {
</Menu>
</Sider>
<Layout>
<Header style={{ background: '#fff', padding: 0 }}>
<Header className="site-layout-background" style={{ padding: 0 }}>
{React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
className: 'trigger',
onClick: this.toggle,
})}
</Header>
<Content
className="site-layout-background"
style={{
margin: '24px 16px',
padding: 24,
background: '#fff',
minHeight: 280,
}}
>
@ -100,4 +100,8 @@ ReactDOM.render(<SiderDemo />, mountNode);
background: rgba(255, 255, 255, 0.2);
margin: 16px;
}
.site-layout-background {
background: #fff;
}
```

14
components/layout/demo/responsive.md
View File

@ -56,9 +56,11 @@ ReactDOM.render(
</Menu>
</Sider>
<Layout>
<Header style={{ background: '#fff', padding: 0 }} />
<Header className="site-layout-header-background" style={{ padding: 0 }} />
<Content style={{ margin: '24px 16px 0' }}>
<div style={{ padding: 24, background: '#fff', minHeight: 360 }}>content</div>
<div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
content
</div>
</Content>
<Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
</Layout>
@ -73,4 +75,12 @@ ReactDOM.render(
background: rgba(255, 255, 255, 0.2);
margin: 16px;
}
.site-layout-header-background {
background: #fff;
}
.site-layout-background {
background: #fff;
}
```

14
components/layout/demo/top-side-2.md
View File

@ -36,7 +36,7 @@ ReactDOM.render(
</Menu>
</Header>
<Layout>
<Sider width={200} style={{ background: '#fff' }}>
<Sider width={200} className="site-layout-background">
<Menu
mode="inline"
defaultSelectedKeys={['1']}
@ -94,8 +94,8 @@ ReactDOM.render(
<Breadcrumb.Item>App</Breadcrumb.Item>
</Breadcrumb>
<Content
className="site-layout-background"
style={{
background: '#fff',
padding: 24,
margin: 0,
minHeight: 280,
@ -118,4 +118,14 @@ ReactDOM.render(
margin: 16px 28px 16px 0;
float: left;
}
.site-layout-background {
background: #fff;
}
```
<style>
#components-layout-demo-top-side-2 .logo {
background: rgba(255, 255, 255, 0.3);
}
</style>

8
components/layout/demo/top-side.md
View File

@ -41,8 +41,8 @@ ReactDOM.render(
<Breadcrumb.Item>List</Breadcrumb.Item>
<Breadcrumb.Item>App</Breadcrumb.Item>
</Breadcrumb>
<Layout style={{ padding: '24px 0', background: '#fff' }}>
<Sider width={200} style={{ background: '#fff' }}>
<Layout className="site-layout-background" style={{ padding: '24px 0' }}>
<Sider className="site-layout-background" width={200}>
<Menu
mode="inline"
defaultSelectedKeys={['1']}
@ -110,4 +110,8 @@ ReactDOM.render(
margin: 16px 28px 16px 0;
float: left;
}
.site-layout-background {
background: #fff;
}
```

16
components/layout/demo/top.md
View File

@ -45,7 +45,7 @@ ReactDOM.render(
<Breadcrumb.Item>List</Breadcrumb.Item>
<Breadcrumb.Item>App</Breadcrumb.Item>
</Breadcrumb>
<div style={{ background: '#fff', padding: 24, minHeight: 280 }}>Content</div>
<div className="site-layout-content">Content</div>
</Content>
<Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
</Layout>,
@ -54,6 +54,11 @@ ReactDOM.render(
```
```css
.site-layout-content {
background: #fff;
padding: 24px;
min-height: 280px;
}
#components-layout-demo-top .logo {
width: 120px;
height: 31px;
@ -62,3 +67,12 @@ ReactDOM.render(
float: left;
}
```
<style>
[data-theme="dark"] .site-layout-content {
background: #141414;
}
[data-theme="dark"] #components-layout-demo-top .logo {
background: rgba(255,255,255,0.3);
}
</style>

9
components/layout/index.en-US.md
View File

@ -114,3 +114,12 @@ The sidebar.
xxl: '1600px',
}
```
<style>
[data-theme="dark"] .site-layout-background {
background: #141414;
}
[data-theme="dark"] .site-layout-header-background {
background: #1f1f1f;
}
</style>

9
components/layout/index.zh-CN.md
View File

@ -115,3 +115,12 @@ title: Layout
xxl: '1600px',
}
```
<style>
[data-theme="dark"] .site-layout-background {
background: #141414;
}
[data-theme="dark"] .site-layout-header-background {
background: #1f1f1f;
}
</style>

6
components/list/demo/infinite-load.md
View File

@ -125,3 +125,9 @@ ReactDOM.render(<InfiniteListExample />, mountNode);
text-align: center;
}
```
<style>
[data-theme="dark"] .demo-infinite-container {
border: 1px solid #303030;
}
</style>

2
components/mentions/style/index.less
View File

@ -147,7 +147,7 @@
&:hover {
color: @disabled-color;
background-color: @component-background;
background-color: @mentions-dropdown-menu-item-hover-bg;
cursor: not-allowed;
}
}

4
components/menu/index.en-US.md
View File

@ -16,12 +16,12 @@ More layouts with navigation: [Layout](/components/layout).
## API
```jsx
<menu>
<Menu>
<Menu.Item>Menu</Menu.Item>
<SubMenu title="SubMenu">
<Menu.Item>SubMenuItem</Menu.Item>
</SubMenu>
</menu>
</Menu>
```
### Menu

4
components/menu/index.zh-CN.md
View File

@ -17,12 +17,12 @@ subtitle: 导航菜单
## API
```jsx
<menu>
<Menu>
<Menu.Item>菜单项</Menu.Item>
<SubMenu title="子菜单">
<Menu.Item>子菜单项</Menu.Item>
</SubMenu>
</menu>
</Menu>
```
### Menu

4
components/menu/style/index.less
View File

@ -216,6 +216,10 @@
}
}
&-popup > .@{menu-prefix-cls} {
background-color: @menu-popup-bg;
}
&-vertical,
&-vertical-left,
&-vertical-right,

2
components/modal/demo/confirm-promise.md
View File

@ -15,12 +15,14 @@ Use `confirm()` to show a confirmation modal dialog. Let onCancel/onOk function
```jsx
import { Modal, Button } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
const { confirm } = Modal;
function showConfirm() {
confirm({
title: 'Do you want to delete these items?',
icon: <ExclamationCircleOutlined />,
content: 'When clicked the OK button, this dialog will be closed after 1 second',
onOk() {
return new Promise((resolve, reject) => {

2
components/modal/demo/confirm-router.md
View File

@ -15,6 +15,7 @@ title:
```jsx
import { Modal, Button } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
function destroyAll() {
Modal.destroyAll();
@ -26,6 +27,7 @@ function showConfirm() {
for (let i = 0; i < 3; i += 1) {
setTimeout(() => {
confirm({
icon: <ExclamationCircleOutlined />,
content: <Button onClick={destroyAll}>Click to destroy all</Button>,
onOk() {
console.log('OK');

4
components/modal/demo/confirm.md
View File

@ -15,12 +15,14 @@ Use `confirm()` to show a confirmation modal dialog.
```jsx
import { Modal, Button } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
const { confirm } = Modal;
function showConfirm() {
confirm({
title: 'Do you Want to delete these items?',
icon: <ExclamationCircleOutlined />,
content: 'Some descriptions',
onOk() {
console.log('OK');
@ -34,6 +36,7 @@ function showConfirm() {
function showDeleteConfirm() {
confirm({
title: 'Are you sure delete this task?',
icon: <ExclamationCircleOutlined />,
content: 'Some descriptions',
okText: 'Yes',
okType: 'danger',
@ -50,6 +53,7 @@ function showDeleteConfirm() {
function showPropsConfirm() {
confirm({
title: 'Are you sure delete this task?',
icon: <ExclamationCircleOutlined />,
content: 'Some descriptions',
okText: 'Yes',
okType: 'danger',

2
components/modal/demo/locale.md
View File

@ -15,6 +15,7 @@ To customize the text of the buttons, you need to set `okText` and `cancelText`
```jsx
import { Modal, Button } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
class LocalizedModal extends React.Component {
state = { visible: false };
@ -57,6 +58,7 @@ class LocalizedModal extends React.Component {
function confirm() {
Modal.confirm({
title: 'Confirm',
icon: <ExclamationCircleOutlined />,
content: 'Bla bla ...',
okText: '确认',
cancelText: '取消',

18
components/page-header/__tests__/__snapshots__/demo.test.js.snap
View File

@ -3,8 +3,7 @@
exports[`renders ./components/page-header/demo/actions.md correctly 1`] = `
<div>
<div
class="ant-page-header ant-page-header-ghost"
style="border:1px solid rgb(235, 237, 240)"
class="ant-page-header site-page-header ant-page-header-ghost"
>
<div
class="ant-page-header-heading"
@ -366,8 +365,7 @@ exports[`renders ./components/page-header/demo/actions.md correctly 1`] = `
exports[`renders ./components/page-header/demo/basic.md correctly 1`] = `
<div
class="ant-page-header ant-page-header-ghost"
style="border:1px solid rgb(235, 237, 240)"
class="ant-page-header site-page-header ant-page-header-ghost"
>
<div
class="ant-page-header-heading"
@ -420,8 +418,7 @@ exports[`renders ./components/page-header/demo/basic.md correctly 1`] = `
exports[`renders ./components/page-header/demo/breadcrumb.md correctly 1`] = `
<div
class="ant-page-header has-breadcrumb ant-page-header-ghost"
style="border:1px solid rgb(235, 237, 240)"
class="ant-page-header site-page-header has-breadcrumb ant-page-header-ghost"
>
<div
class="ant-breadcrumb"
@ -492,8 +489,7 @@ exports[`renders ./components/page-header/demo/breadcrumb.md correctly 1`] = `
exports[`renders ./components/page-header/demo/content.md correctly 1`] = `
<div
class="ant-page-header has-breadcrumb ant-page-header-ghost"
style="border:1px solid rgb(235, 237, 240)"
class="ant-page-header site-page-header has-breadcrumb ant-page-header-ghost"
>
<div
class="ant-breadcrumb"
@ -691,11 +687,11 @@ exports[`renders ./components/page-header/demo/content.md correctly 1`] = `
</div>
<div
class="extra"
style="margin-left:80px"
style="margin-left:80px;margin-top:16px"
>
<img
alt="content"
src="https://gw.alipayobjects.com/mdn/mpaas_user/afts/img/A*KsfVQbuLRlYAAAAAAAAAAABjAQAAAQ/original"
src="https://alipay-rmsdeploy-image.cn-hangzhou.alipay.aliyun-inc.com/antfincdn/YZUAr4NUNC/pageHeader.svg"
/>
</div>
</div>
@ -705,7 +701,7 @@ exports[`renders ./components/page-header/demo/content.md correctly 1`] = `
exports[`renders ./components/page-header/demo/ghost.md correctly 1`] = `
<div
style="background-color:#F5F5F5;padding:24px"
class="site-page-header-ghost-wrapper"
>
<div
class="ant-page-header"

4
components/page-header/demo/actions.md
View File

@ -19,9 +19,7 @@ import { PageHeader, Tag, Button, Statistic, Descriptions, Row } from 'antd';
ReactDOM.render(
<div>
<PageHeader
style={{
border: '1px solid rgb(235, 237, 240)',
}}
className="site-page-header"
onBack={() => window.history.back()}
title="Title"
subTitle="This is a subtitle"

10
components/page-header/demo/basic.md
View File

@ -18,9 +18,7 @@ import { PageHeader } from 'antd';
ReactDOM.render(
<PageHeader
style={{
border: '1px solid rgb(235, 237, 240)',
}}
className="site-page-header"
onBack={() => null}
title="Title"
subTitle="This is a subtitle"
@ -28,3 +26,9 @@ ReactDOM.render(
mountNode,
);
```
```css
.site-page-header {
border: 1px solid rgb(235, 237, 240);
}
```

4
components/page-header/demo/breadcrumb.md
View File

@ -33,9 +33,7 @@ const routes = [
ReactDOM.render(
<PageHeader
style={{
border: '1px solid rgb(235, 237, 240)',
}}
className="site-page-header"
title="Title"
breadcrumb={{ routes }}
subTitle="This is a subtitle"

7
components/page-header/demo/content.md
View File

@ -131,6 +131,7 @@ const Content = ({ children, extraContent }) => {
className="extra"
style={{
marginLeft: 80,
marginTop: 16,
}}
>
{extraContent}
@ -142,9 +143,7 @@ const Content = ({ children, extraContent }) => {
ReactDOM.render(
<PageHeader
title="Title"
style={{
border: '1px solid rgb(235, 237, 240)',
}}
className="site-page-header"
subTitle="This is a subtitle"
tags={<Tag color="blue">Running</Tag>}
extra={[
@ -161,7 +160,7 @@ ReactDOM.render(
<Content
extraContent={
<img
src="https://gw.alipayobjects.com/mdn/mpaas_user/afts/img/A*KsfVQbuLRlYAAAAAAAAAAABjAQAAAQ/original"
src="https://alipay-rmsdeploy-image.cn-hangzhou.alipay.aliyun-inc.com/antfincdn/YZUAr4NUNC/pageHeader.svg"
alt="content"
/>
}

14
components/page-header/demo/ghost.md
View File

@ -17,12 +17,7 @@ The default PageHeader is a transparent background. In some cases, PageHeader ne
import { PageHeader, Button, Descriptions } from 'antd';
ReactDOM.render(
<div
style={{
backgroundColor: '#F5F5F5',
padding: 24,
}}
>
<div className="site-page-header-ghost-wrapper">
<PageHeader
ghost={false}
onBack={() => window.history.back()}
@ -52,3 +47,10 @@ ReactDOM.render(
mountNode,
);
```
```css
.site-page-header-ghost-wrapper {
background-color: #f5f5f5;
padding: 24px;
}
```

9
components/page-header/index.en-US.md
View File

@ -26,3 +26,12 @@ PageHeader can be used to highlight the page topic, display important informatio
| breadcrumb | Breadcrumb configuration | [breadcrumb](https://ant.design/components/breadcrumb-cn/) | - | |
| footer | PageHeader's footer, generally used to render TabBar | ReactNode | - | |
| onBack | Back icon click event | `()=>void` | `()=>history.back()` | |
<style>
[data-theme="dark"] .site-page-header {
border: 1px solid #303030;
}
[data-theme="dark"] .site-page-header-ghost-wrapper {
background-color: rgba(255,255,255,0.08);
}
</style>

9
components/page-header/index.zh-CN.md
View File

@ -26,3 +26,12 @@ subtitle: 页头
| breadcrumb | 面包屑的配置 | [breadcrumb](https://ant.design/components/breadcrumb-cn/) | - | |
| footer | PageHeader 的页脚，一般用于渲染 TabBar | ReactNode | - | |
| onBack | 返回按钮的点击事件 | `()=>void` | `()=>history.back()` | |
<style>
[data-theme="dark"] .site-page-header {
border: 1px solid #303030;
}
[data-theme="dark"] .site-page-header-ghost-wrapper {
background-color: rgba(255,255,255,0.08);
}
</style>

2
components/page-header/style/index.less
View File

@ -10,7 +10,7 @@
background-color: @component-background;
&-ghost {
background-color: inherit;
background-color: @page-header-ghost-bg;
}
&.has-breadcrumb {

16
components/progress/Steps.tsx
View File

@ -7,15 +7,23 @@ interface StepsProps extends ProgressProps {
}
const Steps: React.SFC<StepsProps> = props => {
const { size = 'default', steps, percent = 0, strokeWidth = 8, strokeColor, prefixCls, children } = props;
const {
size = 'default',
steps,
percent = 0,
strokeWidth = 8,
strokeColor,
prefixCls,
children,
} = props;
const getStyledSteps = () => {
const current = Math.floor(steps * (percent / 100));
const stepWidth = size === 'small' ? 2 : 14;
const styleSteps = [];
for (let i = 0; i < steps; i++) {
let color = strokeColor;
if (i > current - 1) {
color = '#f3f3f3';
let color;
if (i <= current - 1) {
color = strokeColor;
}
const stepStyle = {
backgroundColor: `${color}`,

12
components/progress/__tests__/__snapshots__/demo.test.js.snap
View File

@ -1395,11 +1395,11 @@ exports[`renders ./components/progress/demo/steps.md correctly 1`] = `
/>
<div
class="ant-progress-steps-item"
style="background-color:#f3f3f3;width:14px;height:8px"
style="background-color:undefined;width:14px;height:8px"
/>
<div
class="ant-progress-steps-item"
style="background-color:#f3f3f3;width:14px;height:8px"
style="background-color:undefined;width:14px;height:8px"
/>
<span
class="ant-progress-text"
@ -1422,19 +1422,19 @@ exports[`renders ./components/progress/demo/steps.md correctly 1`] = `
/>
<div
class="ant-progress-steps-item"
style="background-color:#f3f3f3;width:14px;height:8px"
style="background-color:undefined;width:14px;height:8px"
/>
<div
class="ant-progress-steps-item"
style="background-color:#f3f3f3;width:14px;height:8px"
style="background-color:undefined;width:14px;height:8px"
/>
<div
class="ant-progress-steps-item"
style="background-color:#f3f3f3;width:14px;height:8px"
style="background-color:undefined;width:14px;height:8px"
/>
<div
class="ant-progress-steps-item"
style="background-color:#f3f3f3;width:14px;height:8px"
style="background-color:undefined;width:14px;height:8px"
/>
<span
class="ant-progress-text"

1
components/progress/style/index.less
View File

@ -25,6 +25,7 @@
flex-shrink: 0;
min-width: 2px;
margin-right: 2px;
background: @progress-steps-item-bg;
}
}

6
components/result/__tests__/__snapshots__/demo.test.js.snap
View File

@ -1131,9 +1131,8 @@ exports[`renders ./components/result/demo/error.md correctly 1`] = `
>
<span
aria-label="close-circle"
class="anticon anticon-close-circle"
class="anticon anticon-close-circle site-result-demo-error-icon"
role="img"
style="color:red"
>
<svg
aria-hidden="true"
@ -1163,9 +1162,8 @@ exports[`renders ./components/result/demo/error.md correctly 1`] = `
>
<span
aria-label="close-circle"
class="anticon anticon-close-circle"
class="anticon anticon-close-circle site-result-demo-error-icon"
role="img"
style="color:red"
>
<svg
aria-hidden="true"

18
components/result/demo/error.md
View File

@ -43,15 +43,27 @@ ReactDOM.render(
</Text>
</Paragraph>
<Paragraph>
<CloseCircleOutlined style={{ color: 'red' }} /> Your account has been frozen
<CloseCircleOutlined className="site-result-demo-error-icon" /> Your account has been frozen
<a>Thaw immediately &gt;</a>
</Paragraph>
<Paragraph>
<CloseCircleOutlined style={{ color: 'red' }} /> Your account is not yet eligible to apply{' '}
<a>Apply Unlock &gt;</a>
<CloseCircleOutlined className="site-result-demo-error-icon" /> Your account is not yet
eligible to apply <a>Apply Unlock &gt;</a>
</Paragraph>
</div>
</Result>,
mountNode,
);
```
```css
.site-result-demo-error-icon {
color: red;
}
```
<style>
[data-theme="dark"] .site-result-demo-error-icon {
color: #a61d24;
}
</style>

4
components/select/style/multiple.less
View File

@ -38,8 +38,8 @@
margin-right: @input-padding-vertical-base;
padding: 0 (@padding-xs / 2) 0 @padding-xs;
line-height: @select-selection-height - @border-width-base * 2;
background: @background-color-base;
border: 1px solid @border-color-split;
background: @select-selection-item-bg;
border: 1px solid @select-selection-item-border-color;
// strange align fix for chrome but works
// https://gw.alipayobjects.com/zos/rmsportal/VFTfKXJuogBAXcvfAUWJ.gif
border-top-width: @border-width-base + 0.4px;

6
components/spin/demo/inside.md
View File

@ -34,3 +34,9 @@ ReactDOM.render(
margin: 20px 0;
}
```
<style>
.example {
background: rgba(255,255,255,0.08);
}
</style>

2
components/statistic/__tests__/__snapshots__/demo.test.js.snap
View File

@ -78,7 +78,7 @@ exports[`renders ./components/statistic/demo/basic.md correctly 1`] = `
exports[`renders ./components/statistic/demo/card.md correctly 1`] = `
<div
style="background:#ECECEC;padding:30px"
class="site-statistic-demo-card"
>
<div
class="ant-row"

15
components/statistic/demo/card.md
View File

@ -18,7 +18,7 @@ import { Statistic, Card, Row, Col } from 'antd';
import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';
ReactDOM.render(
<div style={{ background: '#ECECEC', padding: '30px' }}>
<div className="site-statistic-demo-card">
<Row gutter={16}>
<Col span={12}>
<Card>
@ -49,3 +49,16 @@ ReactDOM.render(
mountNode,
);
```
```css
.site-statistic-demo-card {
background: #ececec;
padding: 30px;
}
```
<style>
[data-theme="dark"] .site-statistic-demo-card {
background: #303030;
}
</style>

Some files were not shown because too many files have changed in this diff Show More