switch to sass

This commit is contained in:
wh1te909
2020-06-29 01:35:15 +00:00
parent 6d390c145a
commit 159fbb4c17
5 changed files with 66 additions and 82 deletions

View File

@@ -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: [

View File

@@ -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>

1
src/css/app.sass Normal file
View File

@@ -0,0 +1 @@
// app global css in Sass form

View File

@@ -1 +0,0 @@
// app global css in Stylus form

View File

@@ -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