Additions

src/renderer/scss/_data-types.scss

@@ -0,0 +1,25 @@
+@mixin type-colors($types) {
+   @each $type, $color in $types {
+      .type-#{$type} {
+         color: $color;
+
+         @if $type == 'null'{
+            &::after{
+               content: 'NULL';
+            }
+         }
+
+         @if $type == 'number'{
+            text-align: right;
+         }
+      }
+   }
+}
+
+@include type-colors((
+   "string": seagreen,
+   "number": cornflowerblue,
+   "date": coral,
+   "blob": darkorchid,
+   "null": gray,
+))

src/renderer/scss/_fake-tables.scss

@@ -0,0 +1,65 @@
+.table {
+   border-collapse: collapse;
+   border-spacing: 0;
+   width: 100%;
+   display: table;
+ 
+   &.table-striped {
+     .tbody {
+       .tr:nth-of-type(odd) {
+         background: $bg-color;
+       }
+     }
+   }
+ 
+   &,
+   &.table-striped {
+     .tbody {
+       .tr {
+         &.active {
+           background: $bg-color-dark;
+         }
+       }
+     }
+   }
+ 
+   &.table-hover {
+     .tbody {
+       .tr {
+         &:hover {
+           background: $bg-color-dark;
+         }
+       }
+     }
+   }
+ 
+   // Scollable tables
+   &.table-scroll {
+     display: block;
+     overflow-x: auto;
+     padding-bottom: .75rem;
+     white-space: nowrap;
+   }
+
+   .thead{
+    display: table-header-group;
+   }
+ 
+   .tbody{
+    display: table-row-group;
+   }
+
+   .tr{
+    display: table-row;
+   }
+
+   .td,
+   .th {
+     border-bottom: $border-width solid $border-color;
+     padding: $unit-3 $unit-2;
+     display: table-cell;
+   }
+   .th {
+     border-bottom-width: $border-width-lg;
+   }
+ }

src/renderer/scss/main.scss

@@ -1,5 +1,9 @@
+
+@import "~spectre.css/src/variables";
 @import "variables";
 @import "transitions";
+@import "data-types";
+@import "fake-tables";
 @import "mdi-additions";
 @import "db-icons";
 @import "~spectre.css/src/spectre";
@@ -131,4 +135,11 @@ body{
 
 .accordion-body {
    max-height: 500rem!important;
+}
+
+.btn.loading {
+   > .material-icons,
+   > span{
+      visibility: hidden;
+   }
 }