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

diff --git a/resources/assets/sass/_grid.scss b/resources/assets/sass/_grid.scss
index c145f4280..10af80a54 100644
--- a/resources/assets/sass/_grid.scss
+++ b/resources/assets/sass/_grid.scss
@@ -100,7 +100,7 @@ body.flexbox {
     top: 0;
     bottom: 0;
     width: 30px;
-    color: #666;
+    fill: #666;
     font-size: 20px;
     vertical-align: middle;
     text-align: center;
@@ -108,10 +108,10 @@ 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;
@@ -175,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 {
@@ -195,14 +232,6 @@ div[class^="col-"] img {
   display: inline-block;
 }
 
-@include larger-than(991px) {
-  .row.auto-clear .col-md-4:nth-child(3n+1){clear:left;}
-}
-
-@include smaller-than(992px) {
-  .row.auto-clear .col-xs-6:nth-child(2n+1){clear:left;}
-}
-
 .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
   position: relative;
   min-height: 1px;