mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-11 19:42:54 +08:00
Code Issues Actions 41 Packages Projects Releases Wiki Activity

fix: card, form site dark theme

Browse Source
This commit is contained in:
ycjcl868 2019-12-23 20:07:56 +08:00
parent 180effc5db
commit 3a38cfaa01
17 changed files with 106 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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>

8
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,9 @@ class App extends React.Component {
ReactDOM.render(<App />, mountNode);
```
```css
.site-checkbox-all-wrapper {
border-bottom: 1px solid #e9e9e9;
}
```

6
components/checkbox/index.zh-CN.md
View File

@ -56,3 +56,9 @@ interface Option {
| ------- | -------- | ---- |
| blur() | 移除焦点 | |
| focus() | 获取焦点 | |
<style>
.site-checkbox-all-wrapper {
border-bottom: 1px solid #303030;
}
</style>

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

@ -121,10 +121,18 @@ 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;
}
[data-theme="dark"] #components-form-demo-advanced-search .search-result-list {
border: 1px dashed #434343;
background: rgba(255,255,255,0.04);
}
</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>

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>

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

@ -112,7 +112,7 @@ Ant Design 的布局组件若不能满足你的需求，你也可以直接使用
<style>
[data-theme="dark"] #components-grid-demo-playground pre {
background: #1f1f1f;
background: rgba(255,255,255,0.08);
color: rgba(255,255,255,.65);
}
</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)' }} />

23
components/steps/demo/nav.md
View File

@ -18,11 +18,6 @@ import { Steps } from 'antd';
const { Step } = Steps;
const stepStyle = {
marginBottom: 60,
boxShadow: '0px -1px 0 0 #e8e8e8 inset',
};
class Demo extends React.Component {
state = {
current: 0,
@ -42,7 +37,7 @@ class Demo extends React.Component {
size="small"
current={current}
onChange={this.onChange}
style={stepStyle}
className="site-navigation-steps"
>
<Step
title="Step 1"
@ -63,7 +58,12 @@ class Demo extends React.Component {
description="This is a description."
/>
</Steps>
<Steps type="navigation" current={current} onChange={this.onChange} style={stepStyle}>
<Steps
type="navigation"
current={current}
onChange={this.onChange}
className="site-navigation-steps"
>
<Step status="finish" title="Step 1" />
<Step status="process" title="Step 2" />
<Step status="wait" title="Step 3" />
@ -74,7 +74,7 @@ class Demo extends React.Component {
size="small"
current={current}
onChange={this.onChange}
style={stepStyle}
className="site-navigation-steps"
>
<Step status="finish" title="finish 1" />
<Step status="finish" title="finish 2" />
@ -88,3 +88,10 @@ class Demo extends React.Component {
ReactDOM.render(<Demo />, mountNode);
```
```css
.site-navigation-steps {
margin-bottom: 60px;
box-shadow: 0px -1px 0 0 #e8e8e8 inset;
}
```

2
components/steps/demo/step-next.md
View File

@ -90,7 +90,7 @@ ReactDOM.render(<App />, mountNode);
.steps-content {
margin-top: 16px;
border: 1px dashed #e9e9e9;
border-radius: 6px;
border-radius: 2px;
background-color: #fafafa;
min-height: 200px;
text-align: center;

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

@ -57,4 +57,8 @@ A single step in the step bar.
background-color: rgba(255,255,255,0.04);
color: rgba(255,255,255,0.65);
}
[data-theme="dark"] .site-navigation-steps {
border-bottom: 1px solid #303030;
box-shadow: none;
}
</style>

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

@ -58,4 +58,8 @@ title: Steps
background-color: rgba(255,255,255,0.04);
color: rgba(255,255,255,0.65);
}
[data-theme="dark"] .site-navigation-steps {
border-bottom: 1px solid #303030;
box-shadow: none;
}
</style>

2
site/theme/static/demo.less
View File

@ -89,7 +89,7 @@
&-demo {
padding: 42px 24px 50px;
color: rgba(0, 0, 0, 0.65);
color: @site-text-color;
border-bottom: 1px solid @site-border-color-split;
}