style: 🎨 stylelint implementation

.stylelintrc

@@ -0,0 +1,14 @@
+{
+  "extends": [
+    "stylelint-config-standard"
+  ],
+  "fix": true,
+  "formatter": "verbose",
+  "plugins": [
+    "stylelint-scss"
+  ],
+  "rules": {
+    "at-rule-no-unknown": null
+  },
+  "syntax": "scss"
+}

package.json

@@ -64,6 +64,9 @@
     "eslint-plugin-vue": "^6.2.2",
     "node-sass": "^4.14.1",
     "sass-loader": "^9.0.2",
+    "stylelint": "^13.6.1",
+    "stylelint-config-standard": "^20.0.0",
+    "stylelint-scss": "^3.18.0",
     "vue": "^2.6.11",
     "webpack": "^4.44.1"
   }

src/main/index.js

@@ -25,7 +25,8 @@ async function createMainWindow () {
       webPreferences: {
          nodeIntegration: true,
          'web-security': false,
-         enableRemoteModule: true
+         enableRemoteModule: true,
+         spellcheck: false
       },
       frame: false,
       backgroundColor: '#1d1d1d'

src/renderer/components/BaseContextMenu.vue

@@ -40,7 +40,6 @@ export default {
 <style lang="scss">
   .context {
     display: flex;
-      position: absolute;
     color: $body-font-color;
     font-size: 16px;
     z-index: 400;
@@ -59,7 +58,7 @@ export default {
       min-width: 100px;
       max-width: 150px;
       z-index: 1;
-         box-shadow: 0px 0px 1px 0px #000;
+      box-shadow: 0 0 1px 0 #000;
       padding: 0;
       background: #1d1d1d;
       border-radius: 0.1rem;
@@ -71,7 +70,7 @@ export default {
       .context-element {
         display: flex;
         align-items: center;
-            padding: .1rem .3rem;
+        padding: 0.1rem 0.3rem;
         cursor: pointer;
 
         &:hover {

src/renderer/components/ModalAskCredentials.vue

@@ -71,7 +71,3 @@ export default {
    }
 };
 </script>
-
-<style>
-
-</style>

src/renderer/components/ModalSettings.vue

@@ -200,6 +200,5 @@ export default {
       align-items: center;
     }
   }
-
 }
 </style>

src/renderer/components/QueryEditor.vue

@@ -70,7 +70,7 @@ export default {
 
 <style lang="scss">
   .editor-wrapper {
-      border-bottom: 1px solid #444444;
+    border-bottom: 1px solid #444;
   }
 
   .CodeMirror {
@@ -83,7 +83,6 @@ export default {
     .CodeMirror-line {
       word-break: break-word !important;
       white-space: pre-wrap !important;
-         word-break: normal;
     }
   }
 </style>

src/renderer/components/SettingBarContext.vue

@@ -69,7 +69,3 @@ export default {
    }
 };
 </script>
-
-<style>
-
-</style>

src/renderer/components/TheFooter.vue

@@ -56,12 +56,12 @@ export default {
     justify-content: space-between;
     align-items: center;
     background: $primary-color;
-      padding: 0 .2rem;
+    padding: 0 0.2rem;
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
-      box-shadow: 0 0 1px 0px #000;
+    box-shadow: 0 0 1px 0 #000;
 
     .footer-elements {
       list-style: none;
@@ -73,15 +73,15 @@ export default {
         height: $footer-height;
         display: flex;
         align-items: center;
-            padding: 0 .4rem;
+        padding: 0 0.4rem;
         margin: 0;
 
         &.footer-link {
           cursor: pointer;
-               transition: background .2s;
+          transition: background 0.2s;
 
           &:hover {
-                  background: rgba($color: #fff, $alpha: .1);
+            background: rgba($color: #fff, $alpha: 0.1);
           }
         }
       }

src/renderer/components/TheSettingBar.vue

@@ -115,7 +115,7 @@ export default {
     align-items: center;
     background: $bg-color-light;
     padding: 0;
-      box-shadow: 0 0 1px 0px #000;
+    box-shadow: 0 0 1px 0 #000;
     z-index: 9;
 
     .settingbar-top-elements {
@@ -129,7 +129,7 @@ export default {
     }
 
     .settingbar-bottom-elements {
-         padding-top: .5rem;
+      padding-top: 0.5rem;
       background: $bg-color-light;
       z-index: 1;
     }
@@ -146,8 +146,8 @@ export default {
         width: 100%;
         margin: 0;
         border-left: 3px solid transparent;
-            opacity: .5;
+        opacity: 0.5;
-            transition: opacity .2s;
+        transition: opacity 0.2s;
         display: flex;
         align-content: center;
         justify-content: center;
@@ -163,7 +163,6 @@ export default {
         }
 
         .settingbar-element-icon {
-
           &.badge::after {
             bottom: -10px;
             right: 0;
@@ -172,7 +171,6 @@ export default {
           }
         }
       }
-
     }
   }
 
@@ -183,19 +181,18 @@ export default {
       opacity: 0;
       display: block;
       position: absolute;
-         background-color:#feffe1;
       text-align: center;
-         margin:.0 0 0 calc(#{$settingbar-width} - 5px);
+      margin: 0 0 0 calc(#{$settingbar-width} - 5px);
       left: 0;
-         padding: .2rem .4rem;
+      padding: 0.2rem 0.4rem;
-         font-size: .7rem;
+      font-size: 0.7rem;
-         background: rgba(48,55,66,.95);
+      background: rgba(48, 55, 66, 0.95);
-         border-radius: .1rem;
+      border-radius: 0.1rem;
       color: #fff;
       max-width: 320px;
       pointer-events: none;
       text-overflow: ellipsis;
-         transition: opacity .2s;
+      transition: opacity 0.2s;
     }
 
     &:hover .ex-tooltip-content {

src/renderer/components/TheTitleBar.vue

@@ -90,7 +90,7 @@ export default {
     height: $titlebar-height;
     -webkit-app-region: drag;
     user-select: none;
-      box-shadow: 0 0 1px 0px #000;
+    box-shadow: 0 0 1px 0 #000;
     z-index: 9999;
 
     .titlebar-resizer {
@@ -108,7 +108,7 @@ export default {
 
       .titlebar-logo {
         height: $titlebar-height;
-            padding: 0 .4rem;
+        padding: 0 0.4rem;
       }
 
       .titlebar-element {
@@ -116,14 +116,14 @@ export default {
         align-items: center;
         height: $titlebar-height;
         line-height: 0;
-            padding: 0 .7rem;
+        padding: 0 0.7rem;
-            opacity: .7;
+        opacity: 0.7;
-            transition: opacity .2s;
+        transition: opacity 0.2s;
         -webkit-app-region: no-drag;
 
         &:hover {
           opacity: 1;
-               background: rgba($color: #fff, $alpha: .2);
+          background: rgba($color: #fff, $alpha: 0.2);
         }
 
         &.close-button:hover {

src/renderer/components/Workspace.vue

@@ -114,13 +114,13 @@ export default {
         }
 
         > a {
-               padding: .2rem .8rem;
+          padding: 0.2rem 0.8rem;
           color: $body-font-color;
           cursor: pointer;
           display: flex;
           align-items: center;
-               opacity: .7;
+          opacity: 0.7;
-               transition: opacity .2s;
+          transition: opacity 0.2s;
 
           &:hover {
             opacity: 1;
@@ -154,10 +154,10 @@ export default {
         border-color: $bg-color-light;
         padding: 0;
         font-weight: 700;
-            font-size: .7rem;
+        font-size: 0.7rem;
 
         > div {
-               padding: .1rem .4rem;
+          padding: 0.1rem 0.4rem;
           min-width: -webkit-fill-available;
         }
       }
@@ -166,16 +166,16 @@ export default {
         border-right: 1px solid;
         border-bottom: 1px solid;
         border-color: $bg-color-light;
-            padding: 0 .4rem;
+        padding: 0 0.4rem;
         text-overflow: ellipsis;
         max-width: 200px;
         white-space: nowrap;
         overflow: hidden;
-            font-size: .7rem;
+        font-size: 0.7rem;
 
         &:focus {
-               box-shadow:inset 0px 0px 0px 1px $body-font-color;
+          box-shadow: inset 0 0 0 1px $body-font-color;
-               background: rgba($color: #000000, $alpha: .3);
+          background: rgba($color: #000, $alpha: 0.3);
           outline: none;
         }
       }

src/renderer/components/WorkspaceExploreBar.vue

@@ -141,7 +141,7 @@ export default {
     align-items: center;
     text-align: left;
     background: $bg-color-gray;
-      box-shadow: 0 0 1px 0px #000;
+    box-shadow: 0 0 1px 0 #000;
     z-index: 8;
     flex: initial;
     position: relative;
@@ -149,10 +149,10 @@ export default {
 
     .workspace-explorebar-header {
       width: 100%;
-         padding: .3rem;
+      padding: 0.3rem;
       display: flex;
       justify-content: space-between;
-         font-size: .6rem;
+      font-size: 0.6rem;
       font-weight: 700;
       text-transform: uppercase;
 
@@ -170,8 +170,8 @@ export default {
         align-items: center;
 
         > i {
-                  opacity: .6;
+          opacity: 0.6;
-                  transition: opacity .2s;
+          transition: opacity 0.2s;
           display: flex;
           align-items: center;
 
@@ -186,7 +186,7 @@ export default {
       width: 100%;
       height: calc((100vh - 30px) - #{$excluding-size});
       overflow: overlay;
-         padding: 0 .1rem;
+      padding: 0 0.1rem;
     }
   }
 </style>

src/renderer/components/WorkspaceExploreBarDatabase.vue

@@ -61,9 +61,9 @@ export default {
     a.table-name {
       display: flex;
       align-items: center;
-         padding: .1rem;
+      padding: 0.1rem;
       cursor: pointer;
-         font-size: .7rem;
+      font-size: 0.7rem;
 
       > span {
         overflow: hidden;
@@ -74,7 +74,7 @@ export default {
 
       &:hover {
         color: $body-font-color;
-            background: rgba($color: #FFF, $alpha: .05);
+        background: rgba($color: #fff, $alpha: 0.05);
         border-radius: 2px;
       }
     }

src/renderer/components/WorkspaceQueryTab.vue

@@ -153,11 +153,10 @@ export default {
   align-content: baseline;
 
   .workspace-query-runner {
-
     .workspace-query-runner-footer {
       display: flex;
       justify-content: space-between;
-         padding: .3rem .6rem .4rem;
+      padding: 0.3rem 0.6rem 0.4rem;
       align-items: center;
 
       .workspace-query-buttons {
@@ -167,7 +166,7 @@ export default {
           display: flex;
           align-self: center;
           color: $body-font-color;
-               margin-right: .4rem;
+          margin-right: 0.4rem;
         }
       }
 
@@ -175,7 +174,7 @@ export default {
         display: flex;
 
         > div + div {
-               padding-left: .6rem;
+          padding-left: 0.6rem;
         }
       }
     }

src/renderer/components/WorkspaceQueryTable.vue

@@ -288,16 +288,16 @@ export default {
 }
 
 .sort-icon {
-   font-size: .7rem;
+  font-size: 0.7rem;
   line-height: 1;
-   margin-left: .2rem;
+  margin-left: 0.2rem;
 }
 
 .column-key {
   transform: rotate(90deg);
-   font-size: .7rem;
+  font-size: 0.7rem;
   line-height: 1.5;
-   margin-right: .2rem;
+  margin-right: 0.2rem;
 
   &.key-pri {
     color: goldenrod;

src/renderer/components/WorkspaceQueryTableCell.vue

@@ -214,7 +214,7 @@ export default {
 
 .cell-content {
   display: block;
-   min-height: .8rem;
+  min-height: 0.8rem;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
@@ -225,7 +225,7 @@ export default {
 }
 
 .editor-field-info {
-   margin-top: .6rem;
+  margin-top: 0.6rem;
   display: flex;
   justify-content: space-between;
 }

src/renderer/components/WorkspaceQueryTableContext.vue

@@ -67,7 +67,3 @@ export default {
    }
 };
 </script>
-
-<style>
-
-</style>

src/renderer/components/WorkspaceTableTab.vue

@@ -150,11 +150,10 @@ export default {
   align-content: baseline;
 
   .workspace-query-runner {
-
     .workspace-query-runner-footer {
       display: flex;
       justify-content: space-between;
-         padding: .3rem .6rem .4rem;
+      padding: 0.3rem 0.6rem 0.4rem;
       align-items: center;
 
       .workspace-query-buttons {
@@ -164,7 +163,7 @@ export default {
           display: flex;
           align-self: center;
           color: $body-font-color;
-               margin-right: .4rem;
+          margin-right: 0.4rem;
         }
       }
 
@@ -172,7 +171,7 @@ export default {
         display: flex;
 
         > div + div {
-               padding-left: .6rem;
+          padding-left: 0.6rem;
         }
       }
     }

src/renderer/scss/_fake-tables.scss

@@ -5,12 +5,35 @@
   display: table;
   table-layout: fixed;
 
-  &.table-striped {
   .tbody {
-      .tr:nth-of-type(odd) {
+    display: table-row-group;
-        background: $bg-color;
   }
+
+  .tr {
+    display: table-row;
   }
+
+  // Scollable tables
+  &.table-scroll {
+    display: block;
+    overflow-x: auto;
+    padding-bottom: 0.75rem;
+    white-space: nowrap;
+  }
+
+  .thead {
+    display: table-header-group;
+  }
+
+  .td,
+  .th {
+    border-bottom: $border-width solid $border-color;
+    padding: $unit-3 $unit-2;
+    display: table-cell;
+  }
+
+  .th {
+    border-bottom-width: $border-width-lg;
   }
 
   &,
@@ -20,6 +43,7 @@
         &.selected {
           background: #333 !important;
         }
+
         &.active {
           background: $bg-color-dark;
         }
@@ -37,33 +61,11 @@
     }
   }
 
-  // Scollable tables
+  &.table-striped {
-  &.table-scroll {
-    display: block;
-    overflow-x: auto;
-    padding-bottom: 0.75rem;
-    white-space: nowrap;
-  }
-
-  .thead {
-    display: table-header-group;
-  }
-
     .tbody {
-    display: table-row-group;
+      .tr:nth-of-type(odd) {
-  }
+        background: $bg-color;
-
+      }
-  .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/_mdi-additions.scss

@@ -1,16 +1,38 @@
+.material-icons {
+  // TODO: rewrite with rem
 
-.material-icons{// TODO: rewrite with rem
   /* Rules for sizing the icon. */
-   &.md-18 { font-size: 18px; }
+  &.md-18 {
-   &.md-24 { font-size: 24px; }
+    font-size: 18px;
-   &.md-36 { font-size: 36px; }
+  }
-   &.md-48 { font-size: 48px; }
+
+  &.md-24 {
+    font-size: 24px;
+  }
+
+  &.md-36 {
+    font-size: 36px;
+  }
+
+  &.md-48 {
+    font-size: 48px;
+  }
 
   /* Rules for using icons as black on a light background. */
-   &.md-dark { color: rgba(0, 0, 0, 0.54); }
+  &.md-dark {
-   &.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
+    color: rgba(0, 0, 0, 0.54);
+  }
+
+  &.md-dark.md-inactive {
+    color: rgba(0, 0, 0, 0.26);
+  }
 
   /* Rules for using icons as white on a dark background. */
-   &.md-light { color: rgba(255, 255, 255, 1); }
+  &.md-light {
-   &.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
+    color: rgba(255, 255, 255, 1);
+  }
+
+  &.md-light.md-inactive {
+    color: rgba(255, 255, 255, 0.3);
+  }
 }

src/renderer/scss/_transitions.scss

@@ -1,9 +1,11 @@
 .slide-fade-enter-active {
   transition: all 0.3s ease;
 }
+
 .slide-fade-leave-active {
   transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
 }
+
 .slide-fade-enter,
 .slide-fade-leave-to {
   transform: translateX(10px);

src/renderer/scss/main.scss

@@ -59,6 +59,7 @@ body {
   from {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(359deg);
   }
@@ -75,9 +76,9 @@ body {
     background: rgba(255, 255, 255, 0.15);
   }
 
-   .modal-sm .modal-container,
+  .modal-container,
-   .modal-container {
+  .modal-sm .modal-container {
-      box-shadow: 0 0 1px 0px #000;
+    box-shadow: 0 0 1px 0 #000;
     padding: 0;
     background: $bg-color;
 
@@ -133,6 +134,7 @@ body {
 
 .menu {
   font-size: 0.7rem;
+
   .menu-item {
     + .menu-item {
       margin-top: 0;