Update maintenance.php

[bookstack] / resources / assets / sass / _header.scss

diff --git a/resources/assets/sass/_header.scss b/resources/assets/sass/_header.scss
index e8667e7193bb0c4dbaa5c67ec429ab91ed89c034..c4ca4607adf76a641477d51f31952d1452527db1 100644 (file)
--- a/resources/assets/sass/_header.scss
+++ b/resources/assets/sass/_header.scss
@@ -6,10 +6,17 @@ header .grid {
   grid-template-columns: auto min-content auto;
 }
 
+@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;
@@ -138,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;
   }
 }
 
@@ -196,20 +204,37 @@ 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;
   align-items: center;
   justify-content: flex-start;
   flex-wrap: wrap;
+  opacity: 0.7;
   .icon-list-item {
     width: auto;
     padding-top: $-xs;
     padding-bottom: $-xs;
-    &:not(:hover) {
-      color: #666;
-      fill: #888;
-    }
   }
   .separator {
     display: inline-block;
@@ -218,6 +243,21 @@ header .search-box {
     line-height: 0.8;
     margin: -2px 0 0;
   }
+  &:hover {
+    opacity: 1;
+  }
+}
+
+@include smaller-than($l) {
+  .breadcrumbs .icon-list-item {
+    padding: $-xs;
+    > span + span {
+      display: none;
+    }
+    > span:first-child {
+      margin-right: 0;
+    }
+  }
 }
 
 .breadcrumb-listing {
@@ -264,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;
@@ -284,28 +335,6 @@ header .search-box {
   padding: $-s;
 }
 
-.faded-small {
-  color: #000;
-  fill: #000;
-  font-size: 0.9em;
-  background-color: $primary-faded;
-}
-
-.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;
@@ -343,9 +372,6 @@ header .search-box {
   .action-buttons .dropdown-container:last-child a {
     padding-left: $-xs;
   }
-  .toolbar .col-xs-1:first-child {
-    padding-right: 0;
-  }
 }
 
 .nav-tabs {
@@ -360,7 +386,4 @@ header .search-box {
       border-bottom: 2px solid $primary;
     }
   }
-}
-.faded-small .nav-tabs a {
-  padding: $-s $-m;
 }
\ No newline at end of file