Add divider with text and remove menu header

2 files changed, 15 insertions, 30 deletions

diff --git a/src/menus.less b/src/menus.less
index 02863ab..c94438c 100644
--- a/src/menus.less
+++ b/src/menus.less
@@ -5,7 +5,7 @@
   list-style: none;
   margin: 0;
   min-width: @control-min-width;
-  padding: .8rem;
+  padding: 1rem;
   .shadow;
   text-align: left;
   transform: translateY(.5rem);
@@ -38,33 +38,6 @@
     }
   }
 
-  .menu-header {
-    color: @light-gray-color;
-    font-size: 1.2rem;
-    line-height: 2rem;
-    margin-top: 0;
-    padding: .2rem 0;
-    position: relative;
-
-    &::after {
-      border-bottom: @border-width solid @border-color;
-      content: "";
-      display: block;
-      height: .1rem;
-      position: absolute;
-      top: 50%;
-      width: 100%;
-    }
-
-    .menu-header-text {
-      background: @light-bg-color;
-      display: inline-block;
-      padding: 0 .8rem;
-      position: relative;
-      z-index: 99;
-    }
-  }
-
   .menu-badge {
     float: right;
     padding: .4rem 0;
diff --git a/src/utilities.less b/src/utilities.less
index 94dbc18..79f4388 100644
--- a/src/utilities.less
+++ b/src/utilities.less
@@ -1,8 +1,20 @@
 // Divider
 .divider {
-  border-bottom: @border-width solid @border-color;
+  border-top: @border-width solid @border-color;
   display: block;
-  margin: .8rem 0;
+  height: .1rem;
+  margin: 1rem 0;
+  position: relative;
+
+  &[data-content]::before {
+    background: @light-color;
+    color: @light-gray-color;
+    content: attr(data-content);
+    display: inline-block;
+    font-size: 1.2rem;
+    padding: 0 .8rem;
+    transform: translateY(-1.1rem);
+  }
 }
 
 // Loading