X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/0a06e2bce38284ca09340ac880010f45cb3d6f7a..refs/pull/1462/head:/resources/assets/sass/_header.scss

diff --git a/resources/assets/sass/_header.scss b/resources/assets/sass/_header.scss
index f71a077d2..c4ca4607a 100644
--- a/resources/assets/sass/_header.scss
+++ b/resources/assets/sass/_header.scss
@@ -9,13 +9,14 @@ header .grid {
 @include smaller-than($l) {
   header .grid {
     grid-template-columns: 1fr;
+    grid-row-gap: 0;
   }
 }
 
 header {
   position: relative;
   display: block;
-  z-index: 2;
+  z-index: 6;
   top: 0;
   background-color: $primary-dark;
   color: #fff;
@@ -144,12 +145,13 @@ header .search-box {
   padding: 0 $-xs;
   position: absolute;
   right: $-m;
-  top: 8px;
+  top: 13px;
   line-height: 1;
   cursor: pointer;
   user-select: none;
   svg {
     margin: 0;
+    bottom: -2px;
   }
 }
 
@@ -202,6 +204,26 @@ header .search-box {
   }
 }
 
+.tri-layout-mobile-tabs {
+  position: sticky;
+  top: 0;
+  z-index: 5;
+  background-color: #FFF;
+  border-bottom: 1px solid #DDD;
+  box-shadow: $bs-card;
+}
+.tri-layout-mobile-tab {
+  text-align: center;
+  border-bottom: 3px solid #BBB;
+  cursor: pointer;
+  &:first-child {
+    border-right: 1px solid #DDD;
+  }
+  &.active {
+    border-bottom-color: currentColor;
+  }
+}
+
 .breadcrumbs {
   display: flex;
   flex-direction: row;
@@ -226,6 +248,18 @@ header .search-box {
   }
 }
 
+@include smaller-than($l) {
+  .breadcrumbs .icon-list-item {
+    padding: $-xs;
+    > span + span {
+      display: none;
+    }
+    > span:first-child {
+      margin-right: 0;
+    }
+  }
+}
+
 .breadcrumb-listing {
   position: relative;
   .breadcrumb-listing-toggle {
@@ -270,6 +304,17 @@ header .search-box {
   }
 }
 
+@include smaller-than($m) {
+  .breadcrumb-listing-dropdown {
+    position: fixed;
+    right: auto;
+    left: $-m;
+  }
+  .breadcrumb-listing-dropdown .breadcrumb-listing-entity-list {
+    max-height: 240px;
+  }
+}
+
 .faded {
   a, button, span, span > div {
     color: #666;
@@ -290,21 +335,6 @@ header .search-box {
   padding: $-s;
 }
 
-.toolbar {
-  position: relative;
-  > .grid > div {
-    opacity: 0.8;
-    transition: opacity ease-in-out 120ms;
-    &:hover {
-      opacity: 1;
-    }
-  }
-  .text-button {
-    color: #666;
-    fill: #666;
-  }
-}
-
 .action-buttons .text-button {
   display: inline-block;
   padding: $-xs $-s;