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

docs: Update Home site

Browse Source
This commit is contained in:
zombiej 2020-01-03 15:20:10 +08:00
parent d34f8c8b58
commit dafc5a2f1d
10 changed files with 99 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -138,6 +138,7 @@
img {
width: calc(100% + 2px);
margin-left: -1px;
margin-right: -1px;
border-radius: @card-radius @card-radius 0 0;
}
}

2
docs/spec/colors.en-US.md
View File

@ -35,7 +35,7 @@ Ant Design's color palette also has the ability to further extend. After careful
```__react
import Palette from '../../site/theme/template/Color/Palette';
ReactDOM.render(<Palette color={{ name: 'gray' }} direction="horizontal" />, mountNode);
ReactDOM.render(<Palette color={{ name: 'gray', count: 13 }} direction="horizontal" />, mountNode);
```
### Data Visualization Color Palette

2
docs/spec/colors.zh-CN.md
View File

@ -43,7 +43,7 @@ Ant Design 的色板还具备进一步拓展的能力。经过设计师和程序
```__react
import Palette from '../../site/theme/template/Color/Palette';
ReactDOM.render(<Palette color={{ name: 'gray' }} direction="horizontal" />, mountNode);
ReactDOM.render(<Palette color={{ name: 'gray', count: 13 }} direction="horizontal" />, mountNode);
```
### 数据可视化色板

17
site/theme/static/colors.less
View File

@ -15,8 +15,11 @@
@gray-6: #bfbfbf;
@gray-7: #8c8c8c;
@gray-8: #595959;
@gray-9: #262626;
@gray-10: #000;
@gray-9: #434343;
@gray-10: #262626;
@gray-11: #1f1f1f;
@gray-12: #141414;
@gray-13: #000;
@border-color: rgba(229, 231, 235, 100);
.color-palettes {
@ -65,6 +68,16 @@
.make-palette(geekblue);
.make-palette(gray);
.palette-gray-11 {
background: @gray-11;
}
.palette-gray-12 {
background: @gray-12;
}
.palette-gray-13 {
background: @gray-13;
}
text-align: left;
&-item {

87
site/theme/static/header.less
View File

@ -56,41 +56,6 @@
.header-direction-button {
margin-right: 0;
}
// Adjust github button style
.github-btn {
float: right;
height: auto;
margin: 20px 0 0 16px;
.gh-btn {
height: auto;
padding: 1px 4px;
background: transparent;
border: 0;
.gh-ico {
width: 20px;
height: 20px;
margin: 0;
}
.gh-text {
display: none;
}
}
.gh-count {
height: auto;
padding: 4px 8px;
font-weight: normal;
background: #fff;
&:hover {
color: @primary-color;
}
}
}
}
}
@ -168,7 +133,7 @@
margin-top: 20px;
margin-left: 16px;
.ant-row-rtl & {
#header .ant-row-rtl & {
float: left;
margin-right: 16px;
margin-left: 0;
@ -181,20 +146,64 @@
color: @text-color;
border-color: @border-color-base;
.ant-row-rtl & {
#header .ant-row-rtl & {
margin-right: 16px;
margin-left: 40px;
margin-left: 16px;
}
}
.header-lang-button {
margin-right: 0;
.ant-row-rtl & {
#header .ant-row-rtl & {
margin-right: 16px;
margin-left: 0;
}
}
// Adjust github button style
.github-btn {
float: right;
height: auto;
margin: 20px 0 0 16px;
#header .ant-row-rtl & {
float: left;
.gh-count {
display: none !important;
}
}
.gh-btn {
height: auto;
padding: 1px 4px;
background: transparent;
border: 0;
.gh-ico {
width: 20px;
height: 20px;
margin: 0;
}
.gh-text {
display: none;
}
}
.gh-count {
height: auto;
padding: 4px 8px;
font-weight: normal;
background: #fff;
&:hover {
color: @primary-color;
}
}
}
#nav {
float: right;
font-size: 14px;

4
site/theme/template/Color/Palette.jsx
View File

@ -32,12 +32,12 @@ export default class Palette extends React.Component {
const {
showTitle,
direction,
color: { name, description, english, chinese },
color: { name, description, english, chinese, count = 10 },
} = this.props;
const className = direction === 'horizontal' ? 'color-palette-horizontal' : 'color-palette';
const colors = [];
const colorName = `${english} / ${chinese}`;
for (let i = 1; i <= 10; i += 1) {
for (let i = 1; i <= count; i += 1) {
const colorText = `${name}-${i}`;
colors.push(
<CopyToClipboard

10
site/theme/template/Home/DesignPage/index.less
View File

@ -53,6 +53,10 @@
flex-direction: column;
padding: 40px 0 32px 40px;
.ant-row-rtl & {
padding: 40px 40px 32px 0;
}
ul {
margin-top: auto;
@ -72,6 +76,7 @@
&:hover {
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
0 9px 28px 8px rgba(0, 0, 0, 0.05);
border-color: #f0f0f0;
}
.ant-card-meta-title {
@ -93,6 +98,11 @@
.design-card {
&.main-card {
padding-right: 0;
.ant-row-rtl & {
padding-left: 0;
padding-right: 40px;
}
}
&.sub-card {

9
site/theme/template/Home/MorePage.less
View File

@ -1,6 +1,11 @@
@import '../../../../components/style/themes/default.less';
.more-card {
&:hover {
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
0 9px 28px 8px rgba(0, 0, 0, 0.05);
}
.ant-card-cover {
padding: 24px 24px 0 24px;
}
@ -33,6 +38,10 @@
.more-card-source {
float: right;
.ant-row-rtl & {
float: left;
}
> img {
vertical-align: baseline;
}

11
site/theme/template/Home/index.less
View File

@ -20,6 +20,17 @@
h2.ant-typography {
margin-bottom: 56px;
}
&-extra {
float: right;
font-size: 16px;
font-weight: 200;
padding-top: 12px;
.page-wrapper-rtl & {
float: left;
}
}
}
.home-link-arrow {

4
site/theme/template/Home/index.tsx
View File

@ -36,9 +36,7 @@ const BlockContent: React.FC<BlockContentProps> = ({ title, children, extra }) =
<Title level={2} style={{ fontWeight: 'lighter', color: '#314659' }}>
{title}
{extra && (
<div style={{ float: 'right', fontSize: 16, fontWeight: 200, paddingTop: 12 }}>{extra}</div>
)}
{extra && <div className="home-block-content-extra">{extra}</div>}
</Title>
{children}
</div>