_navigation.scss in trestle-0.8.6

- old
+ new

@@ -46,11 +46,11 @@
     font-weight: bold;
     font-size: 11px;
 
     padding: 5px 20px;
 
-    &:after {
+    &::after {
       @extend .ion;
       content: $ionicon-var-arrow-down-b;
 
       float: right;
       margin-top: 2px;
@@ -59,12 +59,12 @@
     }
 
     &:hover, &:focus {
       background: none;
 
-      &:after {
-        opacity: 1.0;
+      &::before, &::after {
+        opacity: 1 !important;
       }
     }
   }
 
   .active a {
@@ -96,16 +96,32 @@
 @mixin collapsed-nav-header {
   height: 0;
   padding: 10px 15px 15px;
   text-indent: -99999px;
 
-  &:after {
-    display: block;
-    float: none;
-    margin-top: -12px;
-    content: '';
+  &::after {
+    display: none;
+
+    position: absolute;
+    top: 4px;
+    left: 50%;
+    margin-left: -3px;
+
+    text-indent: 0;
+  }
+
+  &::before {
+    content: "";
+
+    position: absolute;
+    left: 15px;
+    right: 15px;
+    top: 50%;
+    margin-top: -4px;
+
     border-bottom: 1px solid rgba(white, 0.1);
+    opacity: 0.75;
   }
 }
 
 @include tablet {
   .app-nav {
@@ -115,18 +131,31 @@
 
     .nav-header a {
       @include collapsed-nav-header;
     }
 
-    .expanded & {
-      .nav-header {
+    .collapsed .nav-header a {
+      &::after {
         display: block;
-        border-bottom: none;
+      }
+    }
+
+    .expanded & {
+      .nav-header a {
         height: auto;
-        margin: 0;
         padding: 5px 20px;
         text-indent: 0;
+
+        &::before {
+          display: none;
+        }
+
+        &::after {
+          display: block;
+          position: static;
+          margin-left: 0;
+        }
       }
 
       .nav-label  { display: inline; }
       .nav-badge  { display: block; }
     }
@@ -139,8 +168,14 @@
       display: none;
     }
 
     .nav-header a {
       @include collapsed-nav-header;
+    }
+
+    .collapsed .nav-header a {
+      &::after {
+        display: block;
+      }
     }
   }
 }