From ffe729a77b40bee1d2cb5e1ec7861fb22cbf9d86 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Mon, 14 Mar 2016 15:01:00 +0800
Subject: [PATCH] update docs

---
 docs/pattern/form.md   | 2 +-
 docs/spec/alignment.md | 2 +-
 docs/spec/feature.md   | 2 +-
 docs/spec/principle.md | 2 +-
 docs/spec/proximity.md | 2 +-
 scripts/demo.js        | 2 +-
 site/static/style.less | 7 +++++++
 7 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/docs/pattern/form.md b/docs/pattern/form.md
index ac865a1b5f..c85d6d2df2 100644
--- a/docs/pattern/form.md
+++ b/docs/pattern/form.md
@@ -106,7 +106,7 @@
 
 ### 字数校验框
 
-<img class="preview-img" align="right" alt="字数校验框示例" src="https://os.alipayobjects.com/rmsportal/ziTMevqClLTYagX.png">
+<img class="preview-img" align="right" alt="字数校验框示例" src="https://os.alipayobjects.com/rmsportal/JxzQIRfMCtMjuaH.png">
 
 用于统计当前输入长度，以及是否超过系统阈值。
 
diff --git a/docs/spec/alignment.md b/docs/spec/alignment.md
index 5cc10cd823..8c9726c6bc 100644
--- a/docs/spec/alignment.md
+++ b/docs/spec/alignment.md
@@ -6,7 +6,7 @@
 
 ---
 
-正如『格式塔学派』中的连续律（Law of Continuity）所描述的，在知觉过程中人们往往倾向于使知觉对象的直线继续成为直线，使曲线继续成为曲线。在界面设计中，将元素进行对齐，既符合用户的认知特性；也能引导视觉流向，让用户更流畅地接收信息。
+正如『格式塔学派』中的连续律（Law of Continuity）所描述的，在知觉过程中人们往往倾向于使知觉对象的直线继续成为直线，使曲线继续成为曲线。在界面设计中，将元素进行对齐，既符合用户的认知特性，也能引导视觉流向，让用户更流畅地接收信息。
 
 > 格式塔学派（德语：Gestalttheorie）：是心理学重要流派之一，兴起于 20 世纪初的德国，又称为完形心理学；主张人脑的运作原理是整体的，『整体不同于其部件的总和』。——摘自『维基百科』
 
diff --git a/docs/spec/feature.md b/docs/spec/feature.md
index cb85401b35..b8af268ba3 100644
--- a/docs/spec/feature.md
+++ b/docs/spec/feature.md
@@ -44,7 +44,7 @@
 
 <img class="preview-img" align="right" alt="分页示例" description="鼠标点击省略符，可以实现批量切换。" src="https://os.alipayobjects.com/rmsportal/UEYPnVhQsOjytSa.png">
 
-<img class="preview-img" align="right" alt="字数校验框示例" description="使用颜色和下划线标注超出的文案，系统即时反应，以便用户进行调整。" src="https://os.alipayobjects.com/rmsportal/ziTMevqClLTYagX.png">
+<img class="preview-img" align="right" alt="字数校验框示例" description="使用颜色和下划线标注超出的文案，系统即时反应，以便用户进行调整。" src="https://os.alipayobjects.com/rmsportal/JxzQIRfMCtMjuaH.png">
 
 『不同』不一定『更好』，但是『更好』一定『不同』。不断追求细节上的『更好』，使得我们的组件和同类产品都不一样，自然而然的『不同』。
 
diff --git a/docs/spec/principle.md b/docs/spec/principle.md
index e9739b8f2a..4eb393e800 100644
--- a/docs/spec/principle.md
+++ b/docs/spec/principle.md
@@ -31,7 +31,7 @@
 </a>
 </div>
 
-### 中台十大设计原则
+#### Ant Design 十大设计原则
 
 - [亲密性 Proximity](./proximity)
 - [对齐 Alignment](./alignment)
diff --git a/docs/spec/proximity.md b/docs/spec/proximity.md
index 54bf574757..99b3e46f93 100644
--- a/docs/spec/proximity.md
+++ b/docs/spec/proximity.md
@@ -6,7 +6,7 @@
 
 ---
 
-如果信息之间关联性越高，它们之间的距离就应该越接近，也越像一个视觉单元；反之，则它们的距离就应该越远，也越像多个视觉单元。亲密性的根本目的是实现**组织性**，让用户对页面结构和信息层次一目了然。
+如果信息之间关联性越高，它们之间的距离就应该越接近，也越像一个视觉单元；反之，则它们的距离就应该越远，也越像多个视觉单元。亲密性的根本目的是实现组织性，让用户对页面结构和信息层次一目了然。
 
 <br>
 
diff --git a/scripts/demo.js b/scripts/demo.js
index 1e669512df..17755a69a6 100644
--- a/scripts/demo.js
+++ b/scripts/demo.js
@@ -205,7 +205,7 @@ const PriviewImg = React.createClass({
 
     return (
       <div className="preview-image-box" style={{ width: this.props.width }}>
-        <div className={`preview-image-wrapper ${goodCls} ${badCls}`}>
+        <div className={`preview-image-wrapper ${this.props.type} ${goodCls} ${badCls}`}>
           {node}
         </div>
         <div className="preview-image-title">{this.props.alt}</div>
diff --git a/site/static/style.less b/site/static/style.less
index c291fe5fae..670ad2c343 100644
--- a/site/static/style.less
+++ b/site/static/style.less
@@ -1207,8 +1207,15 @@ a.entry-link:hover .anticon-smile {
   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;