Add vertical divider

4 files changed, 35 insertions, 8 deletions

diff --git a/src/empty.less b/src/empty.less
index 295758c..297621c 100644
--- a/src/empty.less
+++ b/src/empty.less
@@ -1,6 +1,5 @@
 // Empty states (or Blank slates)
 .empty {
-  background: @bg-color;
   border-radius: @border-radius;
   color: @gray-color-dark;
   text-align: center;
diff --git a/src/forms.less b/src/forms.less
index 98ef5d9..1861c45 100644
--- a/src/forms.less
+++ b/src/forms.less
@@ -195,6 +195,7 @@
   padding: .2rem 2rem;
 
   .form-icon {
+    background: @bg-color-light;
     height: 1.4rem;
     left: 0;
     top: .5rem;
diff --git a/src/navs.less b/src/navs.less
index 501d384..0a37670 100644
--- a/src/navs.less
+++ b/src/navs.less
@@ -15,7 +15,6 @@
     }
     &.active {
       & > a {
-        color: @body-font-color;
         font-weight: bold;
         &:focus,
         &:hover {
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;