Skip to content

GitLab

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
Hide whitespace changes
Inline Side-by-side
quasar.conf.js
View file @ ec281f30
......@@ -13,8 +13,8 @@ module.exports = function (ctx) {
// https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css
css: [
'../statics/support.css',
'/global.sass',
'/treeview.sass'
'/global.scss',
'/treeview.scss'
],
// https://github.com/quasarframework/quasar/tree/dev/extras
......
src/components/header.vue
View file @ ec281f30
......@@ -65,7 +65,7 @@ export default {
};
</script>
<style scoped>
<style lang="scss" scoped>
#header {
position: absolute;
top: 0;
......
src/components/navbar.vue
View file @ ec281f30
......@@ -47,14 +47,18 @@ export default {
};
</script>
<style lang="sass" scoped>
button:first-of-type
@media (min-width: 600px)
margin-right: 8px
<style lang="scss" scoped>
button:first-of-type {
@media (min-width: 600px){
margin-right: 8px;
}
}
.q-input
width: 100%
@media (min-width: 600px)
margin-right: 8px
width: 150px
.q-input {
width: 100%;
@media (min-width: 600px){
margin-right: 8px;
width: 150px;
}
}
</style>
src/components/openseadragon.vue
View file @ ec281f30
......@@ -71,10 +71,11 @@ export default {
};
</script>
<style lang="sass" scoped>
figure
display: inline-block
height: 75vh
margin: 0
width: 95%
<style lang="scss" scoped>
figure {
display: inline-block;
height: 75vh;
margin: 0;
width: 95%;
}
</style>
src/components/togglebar/panelsposition.vue
View file @ ec281f30
......@@ -42,11 +42,13 @@ export default {
};
</script>
<style lang="sass" scoped>
.btn-panel
height: 75%
<style lang="scss" scoped>
.btn-panel {
height: 75%;
}
.panel-position
display: flex
justify-content: center
.panel-position {
display: flex;
justify-content: center;
}
</style>
src/components/togglebar/toggleFilter.vue
View file @ ec281f30
......@@ -14,9 +14,10 @@
</section>
</template>
<style lang="sass" scoped>
#filterBtns
align-items: center
display: flex
justify-content: center
<style lang="scss" scoped>
#filterBtns {
align-items: center;
display: flex;
justify-content: center;
}
</style>
src/components/togglebar/toggleIndex.vue
View file @ ec281f30
......@@ -82,10 +82,13 @@ export default {
};
</script>
<style lang="sass" scoped>
button
@media (min-width: 600px)
margin-right: 8px
button:last-of-type
margin-right: 0
<style lang="scss" scoped>
button {
@media (min-width: 600px) {
margin-right: 8px;
}
}
button:last-of-type {
margin-right: 0;
}
</style>
src/components/util/panelboxes.vue
View file @ ec281f30
......@@ -135,36 +135,45 @@ export default {
};
</script>
<style lang="sass" scoped>
.panels
> *
column-gap: 20px
display: grid
grid-template-columns: 1fr 1fr 1fr 1fr
div.p-c
position: relative
> *
background-color: #eee
height: 300px
padding: 15px 10px
header
display: flex
.components-list
> *
background-color: white
border-radius: 5px
cursor: move
margin: 10px 0
padding: 10px
&:active, &:focus
outline: 1px solid blue
.actions
left: -10px
position: absolute
top: -10px
<style lang="scss" scoped>
.panels {
> * {
column-gap: 20px;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
div.p-c {
position: relative;
> * {
background-color: #eee;
height: 300px;
padding: 15px 10px;
}
}
header {
display: flex;
}
.components-list {
> * {
background-color: white;
border-radius: 5px;
cursor: move;
margin: 10px 0;
padding: 10px;
&:active, &:focus {
outline: 1px solid blue;
}
}
}
.actions {
left: -10px;
position: absolute;
top: -10px;
}
}
</style>
src/css/global.sass deleted 100644 → 0
View file @ 8ff8d9b6
// 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%
src/css/global.scss 0 → 100644
View file @ ec281f30
// 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%;
}
src/css/quasar.variables.sass → src/css/quasar.variables.scss
View file @ ec281f30
......@@ -12,13 +12,14 @@
// to match your app's branding.
// 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
$negative : #C10015
$info : #31CCEC
$warning : #F2C037
$dark : #1D1D1D;
$positive : #21BA45;
$negative : #C10015;
$info : #31CCEC;
$warning : #F2C037;
\ No newline at end of file
src/css/responsive-heights.scss 0 → 100644
View file @ ec281f30
@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};
}
}
}
src/css/treeview.sass deleted 100644 → 0
View file @ 8ff8d9b6
@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
src/css/treeview.scss 0 → 100644
View file @ ec281f30
@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;
}
}
src/views/mainview.vue
View file @ ec281f30
......@@ -50,6 +50,11 @@ import Toolbar from '@/components/toolbar.vue';
export default {
name: 'MainView',
// watch: {
// '$q.dark.isActive'(val) {
// console.log(val ? 'On dark mode' : 'On light mode');
// },
// },
components: {
Toolbar,
},
......@@ -97,12 +102,15 @@ export default {
};
</script>
<style lang="sass" scoped>
.content-tabs
display: inline-block
<style lang="scss" scoped>
.content-tabs {
display: inline-block;
}
.tabs-container
display: flex
> *
flex: 1
.tabs-container {
display: flex;
> * {
flex: 1;
}
}
</style>
Markdown is supported
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