update docs

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">
 
 用于统计当前输入长度，以及是否超过系统阈值。
 

docs/spec/alignment.md

@@ -6,7 +6,7 @@
 
 ---
 
-正如『格式塔学派』中的连续律（Law of Continuity）所描述的，在知觉过程中人们往往倾向于使知觉对象的直线继续成为直线，使曲线继续成为曲线。在界面设计中，将元素进行对齐，既符合用户的认知特性；也能引导视觉流向，让用户更流畅地接收信息。
+正如『格式塔学派』中的连续律（Law of Continuity）所描述的，在知觉过程中人们往往倾向于使知觉对象的直线继续成为直线，使曲线继续成为曲线。在界面设计中，将元素进行对齐，既符合用户的认知特性，也能引导视觉流向，让用户更流畅地接收信息。
 
 > 格式塔学派（德语：Gestalttheorie）：是心理学重要流派之一，兴起于 20 世纪初的德国，又称为完形心理学；主张人脑的运作原理是整体的，『整体不同于其部件的总和』。——摘自『维基百科』
 

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">
 
 『不同』不一定『更好』，但是『更好』一定『不同』。不断追求细节上的『更好』，使得我们的组件和同类产品都不一样，自然而然的『不同』。
 

docs/spec/principle.md

@@ -31,7 +31,7 @@
 </a>
 </div>
 
-### 中台十大设计原则
+#### Ant Design 十大设计原则
 
 - [亲密性 Proximity](./proximity)
 - [对齐 Alignment](./alignment)

docs/spec/proximity.md

@@ -6,7 +6,7 @@
 
 ---
 
-如果信息之间关联性越高，它们之间的距离就应该越接近，也越像一个视觉单元；反之，则它们的距离就应该越远，也越像多个视觉单元。亲密性的根本目的是实现**组织性**，让用户对页面结构和信息层次一目了然。
+如果信息之间关联性越高，它们之间的距离就应该越接近，也越像一个视觉单元；反之，则它们的距离就应该越远，也越像多个视觉单元。亲密性的根本目的是实现组织性，让用户对页面结构和信息层次一目了然。
 
 <br>
 

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>

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;