mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 14:13:37 +08:00
Code Issues Actions 32 Packages Projects Releases Wiki Activity

site: update site style

Browse Source
This commit is contained in:
Benjy Cui 2016-03-15 17:40:31 +08:00
parent aa5b298f58
commit 55b163d62e
8 changed files with 74 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
docs/spec/alignment.md
View File

@ -12,8 +12,8 @@
## 文案类对齐
<img class="preview-img" align="right" alt="推荐示例" description="标题和正文左对齐，使用了一个视觉起点。" good src="https://os.alipayobjects.com/rmsportal/xvmiAZAIxrEcqdP.png">
<img class="preview-img" align="right" alt="不推荐示例" description="标题和正文使用了两个视觉起点，不推荐该种对齐方式，除非刻意强调两者区别。" bad src="https://os.alipayobjects.com/rmsportal/qvycImsTiDGVgLJ.png">
<img class="preview-img good" align="right" alt="推荐示例" description="标题和正文左对齐，使用了一个视觉起点。" src="https://os.alipayobjects.com/rmsportal/xvmiAZAIxrEcqdP.png">
<img class="preview-img bad" align="right" alt="不推荐示例" description="标题和正文使用了两个视觉起点，不推荐该种对齐方式，除非刻意强调两者区别。" src="https://os.alipayobjects.com/rmsportal/qvycImsTiDGVgLJ.png">
如果页面的字段或段落较短、较散时，需要确定一个统一的视觉起点。
@ -31,7 +31,7 @@
## 数字类对齐
<img class="preview-img" align="right" alt="正确示例" good src="https://os.alipayobjects.com/rmsportal/hCSQTEmahFyQcWk.png">
<img class="preview-img" align="right" alt="错误示例" bad src="https://os.alipayobjects.com/rmsportal/FDjScmPlWFPxkxL.png">
<img class="preview-img good" align="right" alt="正确示例" src="https://os.alipayobjects.com/rmsportal/hCSQTEmahFyQcWk.png">
<img class="preview-img bad" align="right" alt="错误示例" src="https://os.alipayobjects.com/rmsportal/FDjScmPlWFPxkxL.png">
为了快速对比数值大小，建议所有数值取相同有效位数，并且右对齐。

4
docs/spec/contrast.md
View File

@ -12,8 +12,8 @@
## 主次关系对比
<img class="preview-img" align="right" alt="正确示例" good src="https://os.alipayobjects.com/rmsportal/RruKZUSYEwauGdF.png">
<img class="preview-img" align="right" alt="错误示例" bad src="https://os.alipayobjects.com/rmsportal/TOupLSPNQkBTmYw.png">
<img class="preview-img good" align="right" alt="正确示例" src="https://os.alipayobjects.com/rmsportal/RruKZUSYEwauGdF.png">
<img class="preview-img bad" align="right" alt="错误示例" src="https://os.alipayobjects.com/rmsportal/TOupLSPNQkBTmYw.png">
为了让用户能在操作上（类似表单、弹出框等场景）快速做出判断， 来突出其中一项相对更重要或者更高频的操作。

17
site/common/styles/common.less
View File

@ -1,5 +1,22 @@
html {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html,
body {
height: 100%;
}
body {
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",SimSun,sans-serif;
line-height: 1.5;
color: #666;
font-size: 14px;
background: #ECECEC;
transition: background 1s cubic-bezier(0.075, 0.82, 0.165, 1);
overflow-x: hidden;
}
.main-wrapper {

21
site/common/styles/demo.less
View File

@ -13,15 +13,20 @@
}
}
.demo-list-left,
.demo-list-right {
width: 49%;
.code-boxes-col-1-1 {
width: 80%;
}
.demo-list-left {
margin-right: 1%;
.code-boxes-col-2-1 {
width: 48%;
display: inline-block;
vertical-align: top;
padding-right: 8px;
}
.demo-list-right {
margin-left: 1%;
.code-boxes-col-2-1:last-child {
padding-right: 0;
padding-left: 8px;
}
.code-box {
@ -127,6 +132,7 @@
margin: 0.5em 0;
padding-right: 25px;
width: 100%;
word-break: break-word;
}
.code-box .collapse {
@ -145,6 +151,7 @@
transition: all 0.3s ease;
color: #999;
background: #fff;
user-select: none;
}
.code-box.expand .collapse {

1
site/common/styles/footer.less
View File

@ -6,6 +6,7 @@ footer {
position: relative;
z-index: 1;
color: #666;
box-shadow: 0 1000px 0 1000px #fff;
}
footer ul {

13
site/common/styles/markdown.less
View File

@ -4,8 +4,8 @@
line-height: 1.8;
}
.markdown > * {
// width: 100%!important;
.highlight {
line-height: 1.5;
}
.markdown img {
@ -143,6 +143,7 @@
border-left: 4px solid #e9e9e9;
padding-left: 0.8em;
margin: 1em 0;
font-style: italic;
}
.markdown blockquote p {
@ -155,6 +156,10 @@
margin-left: 8px;
}
.markdown .waiting {
color: #ccc;
}
.markdown h1:hover .anchor,
.markdown h2:hover .anchor,
.markdown h3:hover .anchor,
@ -168,8 +173,4 @@
.markdown > br,
.markdown > p > br {
clear: both;
}
.markdown .waiting {
color: #ccc;
}

25
site/common/styles/preview-img.less
View File

@ -1,15 +1,12 @@
.preview-image-boxes {
float: right;
margin: 0 0 110px 60px;
margin: 0 0 70px 28px;
width: 616px;
&-with-popup {
width: 420px;
}
clear: both;
}
.preview-image-boxes + .preview-image-boxes {
margin-top: -75px;
margin-top: -35px;
}
.preview-image-box {
@ -27,6 +24,22 @@
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%;

12
site/component/ComponentDoc/index.jsx
View File

@ -87,10 +87,18 @@ export default class ComponentDoc extends React.Component {
</h2>
</section>
<Row>
<Col span={ isSingleCol ? '24' : '12' } className={ isSingleCol ? '' : 'demo-list-left'}>
<Col span={ isSingleCol ? '24' : '12' }
className={ isSingleCol ?
'code-boxes-col-1-1' :
'code-boxes-col-2-1'
}
>
{ leftChildren }
</Col>
{ isSingleCol ? null : <Col className="demo-list-right" span="12">{ rightChildren }</Col> }
{
isSingleCol ? null :
<Col className="code-boxes-col-2-1" span="12">{ rightChildren }</Col>
}
</Row>
<section className="markdown">
{ (doc.api || []).map(utils.objectToComponent.bind(null, location.pathname)) }