@ccn-ui-kit/divider 0.1.2

package/style/index.scss

@@ -0,0 +1,71 @@
+.ui-divider {
+  color: #303133;
+  font-size: var(--ui-font-size-base);
+
+  // 水平分割线：flex 布局，左右两段线中间夹文案
+  &--horizontal {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    margin: 24px 0;
+
+    // 左右两段线
+    &::before,
+    &::after {
+      content: '';
+      flex: 1 1 0;
+      height: 1px;
+      background-color: #dcdfe6;
+    }
+
+    // 文案靠左：左侧线固定 20px，右侧线占满
+    &.is-left::before {
+      flex: 0 0 20px;
+    }
+
+    // 文案靠右：左侧线占满，右侧线固定 20px
+    &.is-right::after {
+      flex: 0 0 20px;
+    }
+
+    // 虚线
+    &.is-dashed::before,
+    &.is-dashed::after {
+      background-image: repeating-linear-gradient(
+        90deg,
+        #dcdfe6 0,
+        #dcdfe6 4px,
+        transparent 4px,
+        transparent 8px
+      );
+    }
+  }
+
+  // 垂直分割线
+  &--vertical {
+    display: inline-block;
+    width: 1px;
+    height: 1em;
+    margin: 0 8px;
+    vertical-align: middle;
+    background-color: #dcdfe6;
+
+    &.is-dashed {
+      background-image: repeating-linear-gradient(
+        180deg,
+        #dcdfe6 0,
+        #dcdfe6 4px,
+        transparent 4px,
+        transparent 8px
+      );
+    }
+  }
+
+  // 文案（flex item，两侧线通过伸缩让位）
+  &__text {
+    flex-shrink: 0;
+    padding: 0 20px;
+    font-weight: 500;
+    color: #303133;
+  }
+}