X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/2bbf7b2194237a82cee722bb9b936ceeaae78241..refs/pull/4467/head:/resources/sass/_layout.scss

diff --git a/resources/sass/_layout.scss b/resources/sass/_layout.scss
index 51389dc69..503298fcc 100644
--- a/resources/sass/_layout.scss
+++ b/resources/sass/_layout.scss
@@ -160,6 +160,11 @@ body.flexbox {
     flex-basis: auto;
     flex-grow: 0;
   }
+  &.fill-area {
+    flex-grow: 1;
+    flex-shrink: 0;
+    min-width: fit-content;
+  }
 }
 
 .flex-2 {
@@ -193,10 +198,22 @@ body.flexbox {
 .items-center {
   align-items: center;
 }
+.items-stretch {
+  align-items: stretch;
+}
 
 /**
  * Min width utilities
  */
+.min-width-xxxxs {
+  min-width: 60px;
+}
+.min-width-xxxs {
+  min-width: 80px;
+}
+.min-width-xxs {
+  min-width: 100px;
+}
 .min-width-xs {
   min-width: 120px;
 }
@@ -236,6 +253,15 @@ body.flexbox {
   position: relative;
 }
 
+.fixed {
+  position: fixed;
+  z-index: 20;
+  &.top-right {
+    top: 0;
+    right: 0;
+  }
+}
+
 .hidden {
   display: none !important;
 }
@@ -251,6 +277,11 @@ body.flexbox {
   }
 }
 
+.sticky-top-m {
+  position: sticky;
+  top: $-m;
+}
+
 /**
  * Visibility
  */
@@ -267,6 +298,19 @@ body.flexbox {
   }
 }
 
+[hidden] {
+  display: none !important;
+}
+
+.screen-reader-only {
+  position: absolute;
+  inset-inline-start: -10000px;
+  top: auto;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+
 /**
  * Border radiuses
  */
@@ -309,7 +353,7 @@ body.flexbox {
   margin-inline-end: $-xl;
   grid-template-columns: 1fr 4fr 1fr;
   grid-template-areas: "a b c";
-  grid-column-gap: $-xxl;
+  grid-column-gap: $-xl;
   .tri-layout-right {
     grid-area: c;
     min-width: 0;
@@ -334,6 +378,14 @@ body.flexbox {
     padding-inline-end: $-l;
   }
 }
+@include between($xxl, $xxxl) {
+  .tri-layout-container {
+    grid-template-columns: 1fr calc(940px + (2 * $-m)) 1fr;
+    grid-column-gap: $-s;
+    margin-inline-start: $-m;
+    margin-inline-end: $-m;
+  }
+}
 @include between($l, $xxl) {
   .tri-layout-left {
     position: sticky;
@@ -411,7 +463,7 @@ body.flexbox {
     display: none;
   }
   .tri-layout-left-contents > *, .tri-layout-right-contents > * {
-    @include lightDark(opacity, 0.6, 0.7);
+    @include lightDark(opacity, 0.6, 0.75);
     transition: opacity ease-in-out 120ms;
     &:hover, &:focus-within {
       opacity: 1 !important;
@@ -420,7 +472,6 @@ body.flexbox {
       opacity: 1 !important;
     }
   }
-
 }
 
 @include smaller-than($m) {