]> BookStack Code Mirror - bookstack/blobdiff - resources/assets/sass/_grid.scss
Updated 'Spanish Argentina' translation.
[bookstack] / resources / assets / sass / _grid.scss
index b42ad37bba95fbeaae2ebce887df6bbf0b20ecb1..10af80a545263856fa116da809942a09f5cece6e 100644 (file)
@@ -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;
@@ -135,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;
@@ -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;