Commit ec281f30 authored by nwindis's avatar nwindis
Browse files

Merge branch 'feature/#61-make-scss-great-again' into 'develop'

Convert Sass to Scss

See merge request subugoe/emo/Qviewer!52
parents 8ff8d9b6 4ccef75d
Pipeline #152202 passed with stages
in 2 minutes and 38 seconds
...@@ -13,8 +13,8 @@ module.exports = function (ctx) { ...@@ -13,8 +13,8 @@ module.exports = function (ctx) {
// https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css
css: [ css: [
'../statics/support.css', '../statics/support.css',
'/global.sass', '/global.scss',
'/treeview.sass' '/treeview.scss'
], ],
// https://github.com/quasarframework/quasar/tree/dev/extras // https://github.com/quasarframework/quasar/tree/dev/extras
......
...@@ -65,7 +65,7 @@ export default { ...@@ -65,7 +65,7 @@ export default {
}; };
</script> </script>
<style scoped> <style lang="scss" scoped>
#header { #header {
position: absolute; position: absolute;
top: 0; top: 0;
......
...@@ -47,14 +47,18 @@ export default { ...@@ -47,14 +47,18 @@ export default {
}; };
</script> </script>
<style lang="sass" scoped> <style lang="scss" scoped>
button:first-of-type button:first-of-type {
@media (min-width: 600px) @media (min-width: 600px){
margin-right: 8px margin-right: 8px;
}
}
.q-input .q-input {
width: 100% width: 100%;
@media (min-width: 600px) @media (min-width: 600px){
margin-right: 8px margin-right: 8px;
width: 150px width: 150px;
}
}
</style> </style>
...@@ -71,10 +71,11 @@ export default { ...@@ -71,10 +71,11 @@ export default {
}; };
</script> </script>
<style lang="sass" scoped> <style lang="scss" scoped>
figure figure {
display: inline-block display: inline-block;
height: 75vh height: 75vh;
margin: 0 margin: 0;
width: 95% width: 95%;
}
</style> </style>
...@@ -42,11 +42,13 @@ export default { ...@@ -42,11 +42,13 @@ export default {
}; };
</script> </script>
<style lang="sass" scoped> <style lang="scss" scoped>
.btn-panel .btn-panel {
height: 75% height: 75%;
}
.panel-position .panel-position {
display: flex display: flex;
justify-content: center justify-content: center;
}
</style> </style>
...@@ -14,9 +14,10 @@ ...@@ -14,9 +14,10 @@
</section> </section>
</template> </template>
<style lang="sass" scoped> <style lang="scss" scoped>
#filterBtns #filterBtns {
align-items: center align-items: center;
display: flex display: flex;
justify-content: center justify-content: center;
}
</style> </style>
...@@ -82,10 +82,13 @@ export default { ...@@ -82,10 +82,13 @@ export default {
}; };
</script> </script>
<style lang="sass" scoped> <style lang="scss" scoped>
button button {
@media (min-width: 600px) @media (min-width: 600px) {
margin-right: 8px margin-right: 8px;
button:last-of-type }
margin-right: 0 }
button:last-of-type {
margin-right: 0;
}
</style> </style>
...@@ -135,36 +135,45 @@ export default { ...@@ -135,36 +135,45 @@ export default {
}; };
</script> </script>
<style lang="sass" scoped> <style lang="scss" scoped>
.panels .panels {
> * > * {
column-gap: 20px column-gap: 20px;
display: grid display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr grid-template-columns: 1fr 1fr 1fr 1fr;
}
div.p-c
position: relative div.p-c {
> * position: relative;
background-color: #eee > * {
height: 300px background-color: #eee;
padding: 15px 10px height: 300px;
padding: 15px 10px;
header }
display: flex }
.components-list header {
> * display: flex;
background-color: white }
border-radius: 5px
cursor: move .components-list {
margin: 10px 0 > * {
padding: 10px background-color: white;
border-radius: 5px;
&:active, &:focus cursor: move;
outline: 1px solid blue margin: 10px 0;
padding: 10px;
.actions
left: -10px &:active, &:focus {
position: absolute outline: 1px solid blue;
top: -10px }
}
}
.actions {
left: -10px;
position: absolute;
top: -10px;
}
}
</style> </style>
// global extra classes
@import './responsive-heights.sass'
.scroll-panel
position: relative
.sticky
background: #fff
display: flex
justify-content: flex-start
left: 0
position: sticky
top: 0
width: 100%
z-index: 99
.caps
font-variant: small-caps
.openseadragon-canvas
&:focus
outline: none
.content-panel
.q-tab-panel
> *
padding: 0 !important
.without-dropdown
> *
display: flex
.scroll-panel
-ms-overflow-style: none
overflow: auto
scrollbar-width: none
@include makeResponsiveHeight()
.scroll-panel::-webkit-scrollbar
display: none
.unselect-text
-webkit-touch-callout: none
-webkit-user-select: none
-khtml-user-select: none
-moz-user-select: none
-ms-user-select: none
user-select: none
.panels-target
> *
border-right: 1px solid #ddd !important
flex: auto
.toggle-list
> *
align-items: center
.hidden-txtinput
background: transparent
border: none
outline: none
width: 100%
// global extra classes
@import './responsive-heights.scss';
.scroll-panel{
position: relative;
.sticky {
background: #fff;
display: flex;
justify-content: flex-start;
left: 0;
position: sticky;
top: 0;
width: 100%;
z-index: 99;
}
}
.caps {
font-variant: small-caps;
}
.openseadragon-canvas {
&:focus {
outline: none;
}
}
.content-panel .q-tab-panel > * {
padding: 0 !important;
}
.without-dropdown > * {
display: flex;
}
.scroll-panel {
-ms-overflow-style: none;
overflow: auto;
scrollbar-width: none;
@include makeResponsiveHeight();
}
.scroll-panel::-webkit-scrollbar {
display: none;
}
.unselect-text {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.panels-target > * {
border-right: 1px solid #ddd !important;
flex: auto;
}
.toggle-list > * {
align-items: center;
}
.hidden-txtinput {
background: transparent;
border: none;
outline: none;
width: 100%;
}
...@@ -12,13 +12,14 @@ ...@@ -12,13 +12,14 @@
// to match your app's branding. // to match your app's branding.
// Tip: Use the "Theme Builder" on Quasar's documentation website. // Tip: Use the "Theme Builder" on Quasar's documentation website.
$primary : #1976D2
$secondary : #26A69A
$accent : #9C27B0
$dark : #1D1D1D $primary : #1976D2;
$secondary : #26A69A;
$accent : #9C27B0;
$positive : #21BA45 $dark : #1D1D1D;
$negative : #C10015
$info : #31CCEC $positive : #21BA45;
$warning : #F2C037 $negative : #C10015;
$info : #31CCEC;
$warning : #F2C037;
\ No newline at end of file
@mixin makeResponsiveHeight {
$sizesSreen: ("400px": "26vh","450px": "34vh", "500px": "41vh", "550px": "46vh", "600px": "50vh", "630px": "53vh", "660px": "55vh", "700px": "58vh", "750px": "61vh", "800px": "63vh", "850px": "66vh", "900px": "67vh", "980px": "70vh", "1200px": "75vh", "1300px": "77vh", "1800px": "83vh");
@each $minheight, $height in $sizesSreen {
@media (min-height: #{$minheight}) {
height: #{$height};
}
}
}
@import './responsive-heights.sass'
.view-tree
overflow-y: scroll
@include makeResponsiveHeight()
-ms-overflow-style: none
scrollbar-width: none
.q-tree__node-collapsible .q-tree__children
> .q-tree__node--parent
> .q-tree__node-header
background: white
left: 0
position: sticky
top: 0
z-index: 999
.q-tree__node-header-content.col.row.no-wrap.items-center
z-index: 99
.q-tree__children
cursor: pointer
.view-tree::-webkit-scrollbar
display: none
body
height: 100vh
overflow-y: hidden
@media(max-width: 1023px)
overflow-y: auto !important
@import './responsive-heights.sass';
.view-tree {
overflow-y: scroll;
@include makeResponsiveHeight();
-ms-overflow-style: none;
scrollbar-width: none;
.q-tree__node-collapsible .q-tree__children {
> .q-tree__node--parent {
> .q-tree__node-header {
background: white;
left: 0;
position: sticky;
top: 0;
z-index: 999;
}
}
}
.q-tree__node-header-content.col.row.no-wrap.items-center {
z-index: 99;
}
.q-tree__children {
cursor: pointer;
}
}
.view-tree::-webkit-scrollbar {
display: none;
}
body {
height: 100vh;
overflow-y: hidden;
@media (max-width: 1023px) {
overflow-y: auto !important;
}
}
...@@ -50,6 +50,11 @@ import Toolbar from '@/components/toolbar.vue'; ...@@ -50,6 +50,11 @@ import Toolbar from '@/components/toolbar.vue';
export default { export default {
name: 'MainView', name: 'MainView',
// watch: {
// '$q.dark.isActive'(val) {
// console.log(val ? 'On dark mode' : 'On light mode');
// },
// },
components: { components: {
Toolbar, Toolbar,
}, },
...@@ -97,12 +102,15 @@ export default { ...@@ -97,12 +102,15 @@ export default {
}; };
</script> </script>
<style lang="sass" scoped> <style lang="scss" scoped>
.content-tabs .content-tabs {
display: inline-block display: inline-block;
}
.tabs-container .tabs-container {
display: flex display: flex;
> * > * {
flex: 1 flex: 1;
}
}
</style> </style>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment