From 159fbb4c17fe35e086a6f8668460426d76093c64 Mon Sep 17 00:00:00 2001
From: wh1te909 <dcparsi@gmail.com>
Date: Mon, 29 Jun 2020 01:35:15 +0000
Subject: [PATCH] switch to sass

---
 quasar.conf.js                                |   2 +-
 src/App.vue                                   | 122 ++++++++----------
 src/css/app.sass                              |   1 +
 src/css/app.styl                              |   1 -
 ...r.variables.styl => quasar.variables.sass} |  22 ++--
 5 files changed, 66 insertions(+), 82 deletions(-)
 create mode 100644 src/css/app.sass
 delete mode 100644 src/css/app.styl
 rename src/css/{quasar.variables.styl => quasar.variables.sass} (53%)

diff --git a/quasar.conf.js b/quasar.conf.js
index 91d5f48..59446d3 100644
--- a/quasar.conf.js
+++ b/quasar.conf.js
@@ -11,7 +11,7 @@ module.exports = function () {
     ],
     // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css
     css: [
-      'app.styl'
+      'app.sass'
     ],
     // https://github.com/quasarframework/quasar/tree/dev/extras
     extras: [
diff --git a/src/App.vue b/src/App.vue
index a289394..543cde0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -10,88 +10,72 @@ export default {
 };
 </script>
 
-<style lang="stylus">
-.tabs-tbl-sticky {
-  .q-table__middle {
-    max-height: 25vh;
-  }
+<style lang="sass">
+.tabs-tbl-sticky
+  max-height: 25vh
 
-  .q-table__top, .q-table__bottom, thead tr:first-child th {
-    background-color: #f5f4f2;
-  }
+  .q-table__top,
+  .q-table__bottom,
+  thead tr:first-child th
+    background-color: #f5f4f2
 
-  thead tr:first-child th {
-    position: sticky;
-    top: 0;
-    opacity: 1;
-    z-index: 1;
-  }
-}
+  thead tr th
+    position: sticky
+    z-index: 1
+  thead tr:first-child th
+    top: 0
 
-.remote-bg-tbl-sticky {
-  .q-table__middle {
-    max-height: 70vh;
-  }
+.remote-bg-tbl-sticky
+  max-height: 70vh
 
-  .q-table__top, .q-table__bottom, thead tr:first-child th {
-    background-color: #f5f4f2;
-  }
+  .q-table__top,
+  .q-table__bottom,
+  thead tr:first-child th
+    background-color: #f5f4f2
 
-  thead tr:first-child th {
-    position: sticky;
-    top: 0;
-    opacity: 1;
-    z-index: 1;
-  }
-}
+  thead tr th
+    position: sticky
+    z-index: 1
+  thead tr:first-child th
+    top: 0
 
-.settings-tbl-sticky {
-  .q-table__middle {
-    max-height: 60vh;
-  }
+.settings-tbl-sticky
+  max-height: 60vh
 
-  .q-table__top, .q-table__bottom, thead tr:first-child th {
-    background-color: #CBCBCB;
-  }
+  .q-table__top,
+  .q-table__bottom,
+  thead tr:first-child th
+    background-color: #CBCBCB
 
-  thead tr:first-child th {
-    position: sticky;
-    top: 0;
-    opacity: 1;
-    z-index: 1;
-  }
-}
+  thead tr th
+    position: sticky
+    z-index: 1
+  thead tr:first-child th
+    top: 0
 
-.agents-tbl-sticky {
-  .q-table__middle {
-    max-height: 35vh;
-  }
+.agents-tbl-sticky
+  max-height: 35vh
 
-  .q-table__top, .q-table__bottom, thead tr:first-child th {
-    background-color: #f5f4f2;
-  }
+  .q-table__top,
+  .q-table__bottom,
+  thead tr:first-child th
+    background-color: #f5f4f2
 
-  thead tr:first-child th {
-    position: sticky;
-    top: 0;
-    opacity: 1;
-    z-index: 1;
-  }
-}
+  thead tr th
+    position: sticky
+    z-index: 1
+  thead tr:first-child th
+    top: 0
 
-.highlight {
-  background-color: #c9e6ff;
-}
+.highlight
+  background-color: #c9e6ff
 
-.action-completed {
-  background-color: #baf5cc;
-}
+.action-completed
+  background-color: #baf5cc
 
-.agent-offline {
-  background: gray !important;
-}
+.agent-offline
+  background: gray !important
 
-.agent-overdue {
-  background: red !important;
-}
+.agent-overdue
+  background: red !important
 </style>
\ No newline at end of file
diff --git a/src/css/app.sass b/src/css/app.sass
new file mode 100644
index 0000000..2280f2a
--- /dev/null
+++ b/src/css/app.sass
@@ -0,0 +1 @@
+// app global css in Sass form
diff --git a/src/css/app.styl b/src/css/app.styl
deleted file mode 100644
index 5e74380..0000000
--- a/src/css/app.styl
+++ /dev/null
@@ -1 +0,0 @@
-// app global css in Stylus form
diff --git a/src/css/quasar.variables.styl b/src/css/quasar.variables.sass
similarity index 53%
rename from src/css/quasar.variables.styl
rename to src/css/quasar.variables.sass
index 4847287..cf59b8e 100644
--- a/src/css/quasar.variables.styl
+++ b/src/css/quasar.variables.sass
@@ -1,24 +1,24 @@
-// Quasar Stylus Variables
+// Quasar Sass (& SCSS) Variables
 // --------------------------------------------------
 // To customize the look and feel of this app, you can override
-// the Stylus variables found in Quasar's source Stylus files.
+// the Sass/SCSS variables found in Quasar's source Sass/SCSS files.
 
 // Check documentation for full list of Quasar variables
 
 // Your own variables (that are declared here) and Quasar's own
-// ones will be available out of the box in your .vue/.styl files
+// ones will be available out of the box in your .vue/.scss/.sass files
 
 // It's highly recommended to change the default colors
 // to match your app's branding.
 // Tip: Use the "Theme Builder" on Quasar's documentation website.
 
-$primary   = #1976D2
-$secondary = #26A69A
-$accent    = #9C27B0
+$primary   : #1976D2
+$secondary : #26A69A
+$accent    : #9C27B0
 
-$dark      = #1D1D1D
+$dark      : #1D1D1D
 
-$positive  = #21BA45
-$negative  = #C10015
-$info      = #31CCEC
-$warning   = #F2C037
+$positive  : #21BA45
+$negative  : #C10015
+$info      : #31CCEC
+$warning   : #F2C037