]> BookStack Code Mirror - bookstack/blobdiff - resources/assets/sass/_header.scss
Update maintenance.php
[bookstack] / resources / assets / sass / _header.scss
index f71a077d254be0fdb27484acbc27337c40055ca4..c4ca4607adf76a641477d51f31952d1452527db1 100644 (file)
@@ -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;