X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/6bc72e157a346e708cee17d7c51560a0fdd084ff..refs/pull/806/head:/resources/assets/sass/_grid.scss

diff --git a/resources/assets/sass/_grid.scss b/resources/assets/sass/_grid.scss
index 1a1321e58..10af80a54 100644
--- a/resources/assets/sass/_grid.scss
+++ b/resources/assets/sass/_grid.scss
@@ -11,20 +11,139 @@ body.flexbox {
   #content {
     flex: 1;
     display: flex;
-    min-height: 0px;
+    min-height: 0;
   }
 }
 
 .flex-fill {
   display: flex;
   align-items: stretch;
-  min-height: 0px;
-  .flex, &.flex {
-    min-height: 0px;
+  min-height: 0;
+  max-width: 100%;
+  position: relative;
+  &.rows {
+    flex-direction: row;
+  }
+  &.columns {
+    flex-direction: column;
+  }
+}
+
+.flex {
+  min-height: 0;
+  flex: 1;
+}
+
+.flex.scroll {
+  //overflow-y: auto;
+  display: flex;
+  &.sidebar {
+    margin-right: -14px;
+  }
+}
+.flex.scroll .scroll-body {
+  overflow-y: scroll;
+  flex: 1;
+}
+
+.flex-child > div {
+  flex: 1;
+}
+
+.flex.sidebar {
+  flex: 1;
+  background-color: #F2F2F2;
+  max-width: 360px;
+  min-height: 90vh;
+}
+.flex.sidebar + .flex.content {
+  flex: 3;
+  background-color: #FFFFFF;
+  padding: 0 $-l;
+  border-left: 1px solid #DDD;
+  max-width: 100%;
+}
+.flex.sidebar .sidebar-toggle {
+  display: none;
+}
+
+@include smaller-than($xl) {
+  body.sidebar-layout {
+    padding-left: 30px;
+  }
+  .flex.sidebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    z-index: 100;
+    padding-right: 30px;
+    width: 360px;
+    box-shadow: none;
+    transform: translate3d(-330px, 0, 0);
+    transition: transform ease-in-out 120ms;
+    display: flex;
+    flex-direction: column;
+  }
+  .flex.sidebar.open {
+    box-shadow: 1px 2px 2px 1px rgba(0,0,0,.10);
+    transform: translate3d(0, 0, 0);
+    .sidebar-toggle i {
+      transform: rotate(180deg);
+    }
+  }
+  .flex.sidebar .sidebar-toggle {
+    display: block;
+    position: absolute;
+    opacity: 0.9;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: 30px;
+    fill: #666;
+    font-size: 20px;
+    vertical-align: middle;
+    text-align: center;
+    border: 1px solid #DDD;
+    border-top: 1px solid #BBB;
+    padding-top: $-m;
+    cursor: pointer;
+    svg {
+      opacity: 0.5;
+      transition: all ease-in-out 120ms;
+      margin: 0;
+    }
+    &:hover i {
+      opacity: 1;
+    }
+  }
+  .sidebar .scroll-body {
     flex: 1;
+    overflow-y: scroll;
+  }
+  #sidebar .scroll-body.fixed {
+    width: auto !important;
   }
 }
 
+@include larger-than($xl) {
+  #sidebar .scroll-body.fixed {
+    z-index: 5;
+    position: fixed;
+    top: 0;
+    padding-right: $-m;
+    width: 30%;
+    left: 0;
+    height: 100%;
+    overflow-y: auto;
+    -ms-overflow-style: none;
+    //background-color: $primary-faded;
+    border-left: 1px solid #DDD;
+    &::-webkit-scrollbar { width: 0 !important }
+  }
+}
+
+
 /** Rules for all columns */
 div[class^="col-"] img {
   max-width: 100%;
@@ -45,19 +164,9 @@ div[class^="col-"] img {
   &.small {
     max-width: 840px;
   }
-}
-
-.center-box {
-  margin: $-xl auto 0 auto;
-  padding: $-m $-xxl $-xl*2 $-xxl;
-  max-width: 346px;
-  display: inline-block;
-  text-align: left;
-  vertical-align: top;
-  &.login {
-    background-color: #EEE;
-    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
-    border: 1px solid #DDD;
+  &.nopad {
+    padding-left: 0;
+    padding-right: 0;
   }
 }
 
@@ -66,6 +175,43 @@ div[class^="col-"] img {
   margin-right: -$-m;
 }
 
+.grid {
+  display: grid;
+  grid-column-gap: $-l;
+  grid-row-gap: $-l;
+  &.third {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+}
+
+.grid-card {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #ddd;
+  min-width: 100px;
+  .grid-card-content {
+    flex: 1;
+  }
+  .grid-card-content, .grid-card-footer {
+    padding: $-l;
+  }
+  .grid-card-content + .grid-card-footer {
+    padding-top: 0;
+  }
+}
+
+@include smaller-than($m) {
+  .grid.third {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@include smaller-than($s) {
+  .grid.third {
+    grid-template-columns: 1fr;
+  }
+}
+
 .float {
   float: left;
   &.right {