Add vertical divider

1 files changed, 34 insertions, 6 deletions

diff --git a/src/utilities.less b/src/utilities.less
index 5541243..2e4643a 100644
--- a/src/utilities.less
+++ b/src/utilities.less
@@ -1,13 +1,11 @@
 // Divider
-.divider {
-  border-top: @border-width solid @border-color;
+.divider,
+.divider-vert {
   display: block;
-  height: .1rem;
-  margin: 1rem 0;
   position: relative;
 
-  &[data-content]::before {
-    background: @light-color;
+  &[data-content]::after {
+    background: @bg-color-light;
     color: @gray-color-light;
     content: attr(data-content);
     display: inline-block;
@@ -17,6 +15,36 @@
   }
 }
 
+.divider {
+  border-top: @border-width solid @border-color;
+  height: .1rem;
+  margin: 1rem 0;
+}
+
+.divider-vert {
+  display: block;
+  padding: @layout-padding;
+
+  &::before {
+    border-left: @border-width solid @border-color;
+    bottom: @layout-padding;
+    content: "";
+    display: block;
+    left: 50%;
+    position: absolute;
+    top: @layout-padding;
+    transform: translateX(-50%);
+  }
+
+  &[data-content]::after {
+    left: 50%;
+    padding: .4rem 0;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+
 // Loading
 .loading {
   color: transparent !important;