[New] add dotted & dashed divider

sciseo · May 22, 2015 · 2bb3ec9 · 2bb3ec9
1 parent 0a4579b
commit 2bb3ec9
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,6 +14,10 @@
 - `Improved` 处理 Slider 在部分浏览器中上下翻页箭头文字没有隐藏问题；
 - `Improved` 优化 JS 构建流程，加快构建速度，输出 UMD 格式文件。
 
+**Web 组件：**
+
+- `Changed` Divider 增加点线和虚线样式。
+
 ### 2015.05 W2
 
 **CSS:**

diff --git a/less/amazeui.less b/less/amazeui.less
@@ -72,6 +72,8 @@
 // divider
 @import "../widget/divider/src/divider.less";
 @import "../widget/divider/src/divider.default.less";
+@import "../widget/divider/src/divider.dotted.less";
+@import "../widget/divider/src/divider.dashed.less";
 @import "../widget/divider/src/divider.one.less";
 
 // duoshuo

diff --git a/widget/divider/package.json b/widget/divider/package.json
@@ -50,6 +50,30 @@
         }
       ]
     },
+    {
+      "name": "dotted",
+      "desc": "点分割线",
+      "hook": "hook-am-divider-default",
+      "demos": [
+        {
+          "desc": "",
+          "data": {
+          }
+        }
+      ]
+    },
+    {
+      "name": "dashed",
+      "desc": "虚线分割线",
+      "hook": "hook-am-divider-default",
+      "demos": [
+        {
+          "desc": "",
+          "data": {
+          }
+        }
+      ]
+    },
     {
       "name": "one",
       "desc": "简约风格",

diff --git a/widget/divider/src/divider.dashed.less b/widget/divider/src/divider.dashed.less
@@ -0,0 +1,11 @@
+/**
+  * Divider Theme: dashed
+  */
+
+.am-divider-dashed {
+  border-top: 1px dashed #ccc;
+
+  .hook-am-divider-dashed;
+}
+
+.hook-am-divider-dashed() {}
diff --git a/widget/divider/src/divider.default.less b/widget/divider/src/divider.default.less
@@ -4,13 +4,7 @@
 
 .am-divider-default {
   @divider-bg-color: #ddd;
-
-  height: 1px;
-  border: none;
-  margin: 1.5rem auto;
-  overflow: hidden;
-  background-color: @divider-bg-color;
-  clear: both;
+  border-top: 1px solid @divider-bg-color;
 
   .hook-am-divider-default;
 }

diff --git a/widget/divider/src/divider.dotted.less b/widget/divider/src/divider.dotted.less
@@ -0,0 +1,11 @@
+/**
+  * Divider Theme: dotted
+  */
+
+.am-divider-dotted {
+  border-top: 1px dotted #ccc;
+
+  .hook-am-divider-dotted;
+}
+
+.hook-am-divider-dotted() {}
diff --git a/widget/divider/src/divider.less b/widget/divider/src/divider.less
@@ -1,4 +1,9 @@
 .am-divider {
+  height: 0;
+  margin: 1.5rem auto;
+  overflow: hidden;
+  clear: both;
+
   .hook-am-divider;
 }
-.hook-am-divider() {};
+.hook-am-divider() {};