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

diff --git a/resources/assets/sass/_grid.scss b/resources/assets/sass/_grid.scss
index d24ffcfaf..10af80a54 100644
--- a/resources/assets/sass/_grid.scss
+++ b/resources/assets/sass/_grid.scss
@@ -19,6 +19,7 @@ body.flexbox {
   display: flex;
   align-items: stretch;
   min-height: 0;
+  max-width: 100%;
   position: relative;
   &.rows {
     flex-direction: row;
@@ -81,6 +82,8 @@ body.flexbox {
     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);
@@ -97,7 +100,7 @@ body.flexbox {
     top: 0;
     bottom: 0;
     width: 30px;
-    color: #666;
+    fill: #666;
     font-size: 20px;
     vertical-align: middle;
     text-align: center;
@@ -105,15 +108,19 @@ body.flexbox {
     border-top: 1px solid #BBB;
     padding-top: $-m;
     cursor: pointer;
-    i {
+    svg {
       opacity: 0.5;
       transition: all ease-in-out 120ms;
-      padding: 0;
+      margin: 0;
     }
     &:hover i {
       opacity: 1;
     }
   }
+  .sidebar .scroll-body {
+    flex: 1;
+    overflow-y: scroll;
+  }
   #sidebar .scroll-body.fixed {
     width: auto !important;
   }
@@ -128,7 +135,7 @@ body.flexbox {
     width: 30%;
     left: 0;
     height: 100%;
-    overflow-y: scroll;
+    overflow-y: auto;
     -ms-overflow-style: none;
     //background-color: $primary-faded;
     border-left: 1px solid #DDD;
@@ -157,6 +164,10 @@ div[class^="col-"] img {
   &.small {
     max-width: 840px;
   }
+  &.nopad {
+    padding-left: 0;
+    padding-right: 0;
+  }
 }
 
 .row {
@@ -164,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 {