update Divider style

src/components/divider/divider.vue

@@ -23,9 +23,9 @@
             },
             orientation: {
                 type: String,
-                default: 'left',
+                default: 'center',
                 validator (value) {
-                    return oneOf(value, ['left', 'right']);
+                    return oneOf(value, ['left', 'right', 'center']);
                 }
             },
             dashed: {

src/styles/components/divider.less

@@ -1,22 +1,5 @@
-
-
 @divider-prefix-cls: ~"@{css-prefix}divider";
 
-@font-size-base         : 14px;
-@font-size-lg           : @font-size-base + 2px;
-@heading-color          : fade(#000, 85%);
-
-.reset-component() {
-  font-family: @font-family;
-  font-size: @font-size-base;
-  line-height: @line-height-base;
-  color: @text-color;
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
 .@{divider-prefix-cls} {
     .reset-component;
     background: @border-color-split;
@@ -36,17 +19,19 @@
         height: 1px;
         width: 100%;
         margin: 24px 0;
+        clear: both;
     }
-  &-horizontal&-with-text {
+    &-horizontal&-with-text-center,
+    &-horizontal&-with-text-left,
+    &-horizontal&-with-text-right {
         display: table;
         white-space: nowrap;
         text-align: center;
         background: transparent;
         font-weight: 500;
-    color: @heading-color;
+        color: @title-color;
-    font-size: @font-size-lg;
+        font-size: @font-size-large;
         margin: 16px 0;
-
         &:before,
         &:after {
             content: '';
@@ -58,82 +43,50 @@
             transform: translateY(50%);
         }
     }
-  &-inner-text {
-    display: inline-block;
-    padding: 0 24px;
-  }
-  &-horizontal&-with-text-left {
-    display: table;
-    white-space: nowrap;
-    text-align: center;
-    background: transparent;
-    font-weight: 500;
-    color: @heading-color;
-    font-size: @font-size-base;
-    margin: 16px 0;
 
-    &:before {
+    &-horizontal&-with-text-left,
-      content: '';
+    &-horizontal&-with-text-right {
-      display: table-cell;
+        font-size: @font-size-base;
-      position: relative;
+        .@{divider-prefix-cls}-inner-text {
-      top: 50%;
-      width: 5%;
-      border-top: 1px solid @border-color-split;
-      transform: translateY(50%);
-    }
-    &:after {
-      content: '';
-      display: table-cell;
-      position: relative;
-      top: 50%;
-      width: 95%;
-      border-top: 1px solid @border-color-split;
-      transform: translateY(50%);
-    }
-    &-inner-text {
             display: inline-block;
             padding: 0 10px;
         }
     }
 
+    &-horizontal&-with-text-left {
+        &:before {
+            top: 50%;
+            width: 5%;
+        }
+        &:after {
+            top: 50%;
+            width: 95%;
+        }
+    }
+
     &-horizontal&-with-text-right {
-    display: table;
-    white-space: nowrap;
-    text-align: center;
-    background: transparent;
-    font-weight: 500;
-    color: @heading-color;
-    font-size: @font-size-base;
-    margin: 16px 0;
-
         &:before {
-      content: '';
-      display: table-cell;
-      position: relative;
             top: 50%;
             width: 95%;
-      border-top: 1px solid @border-color-split;
-      transform: translateY(50%);
         }
         &:after {
-      content: '';
-      display: table-cell;
-      position: relative;
             top: 50%;
             width: 5%;
-      border-top: 1px solid @border-color-split;
-      transform: translateY(50%);
         }
+    }
+
     &-inner-text {
         display: inline-block;
-      padding: 0 10px;
+        padding: 0 24px;
-    }
     }
+
     &-dashed {
         background: none;
         border-top: 1px dashed @border-color-split;
     }
-  &-horizontal&-with-text&-dashed {
+    &-horizontal&-with-text&-dashed,
+    &-horizontal&-with-text-left&-dashed,
+    &-horizontal&-with-text-right&-dashed {
         border-top: 0;
         &:before,
         &:after {

src/styles/custom.less

@@ -24,6 +24,7 @@
 @text-color             : #495060;
 @font-size-base         : 14px;
 @font-size-small        : 12px;
+@font-size-large        : 16px;
 @line-height-base       : 1.5;
 @line-height-computed   : floor((@font-size-base * @line-height-base));
 @border-radius-base     : 6px;

src/styles/mixins/common.less

@@ -25,3 +25,14 @@
     color: @subsidiary-color;
     transition: all @transition-time @ease-in-out;
 }
+
+.reset-component() {
+    font-family: @font-family;
+    font-size: @font-size-base;
+    line-height: @line-height-base;
+    color: @text-color;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}