Started on a design update

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

diff --git a/resources/assets/sass/_grid.scss b/resources/assets/sass/_grid.scss
index 0e1f85ce62cd1e801d006814b4e47ddaabab49d5..f4d155ddeb0ca671b855881b83110a5a18ebe0b9 100644 (file)
--- a/resources/assets/sass/_grid.scss
+++ b/resources/assets/sass/_grid.scss
@@ -270,6 +270,8 @@ div[class^="col-"] img {
   display: inline-block;
 }
 
+
+// TODO - Remove old BS grid system
 .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;
@@ -908,18 +910,12 @@ div[class^="col-"] img {
 }
 .clearfix:before,
 .clearfix:after,
-.container:before,
-.container:after,
-.container-fluid:before,
-.container-fluid:after,
 .row:before,
 .row:after {
   content: " ";
   display: table;
 }
 .clearfix:after,
-.container:after,
-.container-fluid:after,
 .row:after {
   clear: both;
 }
@@ -928,3 +924,63 @@ div[class^="col-"] img {
   margin-left: auto;
   margin-right: auto;
 }
+
+
+
+
+
+
+.grid {
+  display: grid;
+  grid-column-gap: $-m;
+  grid-row-gap: 0;
+  &.contained {
+    max-width: $max-width;
+    padding-left: $-m;
+    padding-right: $-m;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+@each $sizeLetter, $size in $spacing {
+  .grid.contained.space-#{$sizeLetter} {
+    padding-left: $size;
+    padding-right: $size;
+    grid-column-gap: $size;
+  }
+}
+
+@mixin grid-layout($name, $times) {
+  .grid.#{$name} {
+    grid-template-columns: repeat(#{$times}, 1fr);
+  }
+}
+
+@include grid-layout('thirds', 3)
+
+@each $sizeLetter, $size in $screen-sizes {
+  @include smaller-than($size) {
+    .grid.break-#{$sizeLetter} {
+      grid-template-columns: 1fr;
+    }
+  }
+}
+
+
+/**
+ * Visibility
+ */
+
+@each $sizeLetter, $size in $screen-sizes {
+  @include smaller-than($size) {
+    .hide-under-#{$sizeLetter} {
+      display: none !important;
+    }
+  }
+  @include larger-than($size) {
+    .hide-over-#{$sizeLetter} {
+      display: none !important;
+    }
+  }
+}
\ No newline at end of file