Mercurial > gemma

changeset 1191:b23622905a3f

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
switched entirely to sass instead of scss for cleaner code/less lines, just removed all ; and {}
author Markus Kottlaender <markus@intevation.de>
date Fri, 16 Nov 2018 14:37:07 +0100
parents e3de65179889
children 3afa71405b87
files client/src/application/assets/application.sass client/src/application/assets/application.scss client/src/importqueue/Importqueue.vue client/src/imports/Imports.vue client/src/layers/Layerselect.vue client/src/login/Login.vue client/src/logs/logs.vue client/src/map/Maplayer.vue client/src/morphtool/Morphtool.vue client/src/pdftool/Pdftool.vue client/src/systemconfiguration/systemconfiguration.vue client/src/usermanagement/Userdetail.vue client/src/usermanagement/Usermanagement.vue client/src/usermanagement/Users.vue client/src/zoom/zoom.vue client/vue.config.js
diffstat 16 files changed, 437 insertions(+), 519 deletions(-) [+]
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/application/assets/application.sass	Fri Nov 16 14:37:07 2018 +0100
@@ -0,0 +1,49 @@
+/*
+ * This is Free Software under GNU Affero General Public License v >= 3.0
+ * without warranty, see README.md and license for details.
+ * 
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ * License-Filename: LICENSES/AGPL-3.0.txt
+ * 
+ * Copyright (C) 2018 by via donau 
+ *   – Österreichische Wasserstraßen-Gesellschaft mbH
+ * Software engineering by Intevation GmbH
+ * 
+ * Author(s):
+ * Thomas Junk <thomas.junk@intevation.de>
+ */
+$basic-shadow-light: 1px 1px 12px 1px rgba(235, 235, 235, 0.75)
+$basic-shadow: 1px 3px 8px 2px rgba(220, 220, 220, 0.75)
+$border-radius: 5px
+$icon-height: 2rem
+$icon-width: 2rem
+$large-offset: 2rem
+$layerselect-height: 20rem
+$layerselect-width: 22rem
+$identify-height: 20rem
+$identify-width: 20rem
+$offset: 1rem
+$searchbar-width: 50vw
+$sidebar-height: 32rem
+$sidebar-width: 15rem
+$slight-transparent: 0.96
+$small-offset: 0.5rem
+$smaller: 0.9rem
+$transition-fast: 0.3s
+$transition-slow: 3s
+$transition: 0.5s
+$x-large-offset: 3rem
+$xx-large-offset: 5rem
+$x-small-offset: 0.25rem
+
+.debug
+  border: 1px solid red
+
+%fully-centered
+  position: absolute
+  top: 50%
+  left: 50%
+  transform: translate(-50%, -50%)
+
+.ui-element
+  pointer-events: auto
--- a/client/src/application/assets/application.scss	Fri Nov 16 12:15:51 2018 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,52 +0,0 @@
-/*
- * This is Free Software under GNU Affero General Public License v >= 3.0
- * without warranty, see README.md and license for details.
- * 
- * SPDX-License-Identifier: AGPL-3.0-or-later
- * License-Filename: LICENSES/AGPL-3.0.txt
- * 
- * Copyright (C) 2018 by via donau 
- *   – Österreichische Wasserstraßen-Gesellschaft mbH
- * Software engineering by Intevation GmbH
- * 
- * Author(s):
- * Thomas Junk <thomas.junk@intevation.de>
- */
-$basic-shadow-light: 1px 1px 12px 1px rgba(235, 235, 235, 0.75);
-$basic-shadow: 1px 3px 8px 2px rgba(220, 220, 220, 0.75);
-$border-radius: 5px;
-$icon-height: 2rem;
-$icon-width: 2rem;
-$large-offset: 2rem;
-$layerselect-height: 20rem;
-$layerselect-width: 22rem;
-$identify-height: 20rem;
-$identify-width: 20rem;
-$offset: 1rem;
-$searchbar-width: 50vw;
-$sidebar-height: 32rem;
-$sidebar-width: 15rem;
-$slight-transparent: 0.96;
-$small-offset: 0.5rem;
-$smaller: 0.9rem;
-$transition-fast: 0.3s;
-$transition-slow: 3s;
-$transition: 0.5s;
-$x-large-offset: 3rem;
-$xx-large-offset: 5rem;
-$x-small-offset: 0.25rem;
-
-.debug {
-  border: 1px solid red;
-}
-
-%fully-centered {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-.ui-element {
-  pointer-events: auto;
-}
--- a/client/src/importqueue/Importqueue.vue	Fri Nov 16 12:15:51 2018 +0100
+++ b/client/src/importqueue/Importqueue.vue	Fri Nov 16 14:37:07 2018 +0100
@@ -124,61 +124,51 @@
 };
 </script>
 
-<style lang="scss" scoped>
-.spacer {
-  margin-left: $offset;
-  height: 100vh;
-}
+<style lang="sass" scoped>
+.spacer
+  margin-left: $offset
+  height: 100vh
 
-.spacer-collapsed {
-  min-width: $icon-width + $offset;
-  transition: $transition-fast;
-}
-.spacer-expanded {
-  min-width: $sidebar-width + $offset;
-}
+.spacer-collapsed
+  min-width: $icon-width + $offset
+  transition: $transition-fast
 
-.importqueue {
-  margin-top: $offset;
-  margin-right: auto;
-  margin-left: auto;
-}
+.spacer-expanded
+  min-width: $sidebar-width + $offset
+
+.importqueue
+  margin-top: $offset
+  margin-right: auto
+  margin-left: auto
 
-.importqueuecard {
-  width: 80vw;
-  min-height: 20rem;
-}
+.importqueuecard
+  width: 80vw
+  min-height: 20rem
 
-.card-body {
-  width: 100%;
-  margin-left: auto;
-  margin-right: auto;
-}
+.card-body
+  width: 100%
+  margin-left: auto
+  margin-right: auto
 
-.searchandfilter {
-  position: relative;
-  margin-bottom: $xx-large-offset;
-}
+.searchandfilter
+  position: relative
+  margin-bottom: $xx-large-offset
 
-.filters {
-  position: absolute;
-  right: 0;
-}
+.filters
+  position: absolute
+  right: 0
 
-.filters button {
-  margin-right: $small-offset;
-}
+.filters button
+  margin-right: $small-offset
 
 .table td,
-.table th {
-  border-top: 0 !important;
-  text-align: left;
-  padding: $small-offset !important;
-}
+.table th
+  border-top: 0 !important
+  text-align: left
+  padding: $small-offset !important
 
-.searchgroup {
-  position: absolute;
-  left: 0;
-  width: 50%;
-}
+.searchgroup
+  position: absolute
+  left: 0
+  width: 50%
 </style>
--- a/client/src/imports/Imports.vue	Fri Nov 16 12:15:51 2018 +0100
+++ b/client/src/imports/Imports.vue	Fri Nov 16 14:37:07 2018 +0100
@@ -177,48 +177,46 @@
 };
 </script>
 
-<style lang="scss" scoped>
-.close-showImportSoundingResults {
-  position: absolute;
-  z-index: 2;
-  right: 0;
-  top: 7px;
-  border-radius: $border-radius;
-  height: $icon-width;
-  width: $icon-height;
-}
-.label-text {
-  width: 10rem;
-  text-align: left;
-  line-height: 2.25rem;
-}
-.importcard {
-  height: 100%;
-}
-.importcardbody {
-  position: relative;
-  height: 100%;
-  width: 90%;
-  margin-left: auto;
-  margin-right: auto;
-}
-.imports {
-  position: relative;
-  background-color: white;
-  width: 30rem;
-  height: 28rem;
-  margin-left: auto;
-  margin-right: auto;
-  border-radius: $border-radius;
-  opacity: $slight-transparent;
-}
-.downloadbtn {
-  position: absolute;
-  right: $offset;
-  bottom: $offset;
-}
+<style lang="sass" scoped>
+.close-showImportSoundingResults
+  position: absolute
+  z-index: 2
+  right: 0
+  top: 7px
+  border-radius: $border-radius
+  height: $icon-width
+  width: $icon-height
+  
+.label-text
+  width: 10rem
+  text-align: left
+  line-height: 2.25rem
 
-.downloadbtn a {
-  margin-right: $offset;
-}
+.importcard
+  height: 100%
+  
+.importcardbody
+  position: relative
+  height: 100%
+  width: 90%
+  margin-left: auto
+  margin-right: auto
+  
+.imports
+  position: relative
+  background-color: white
+  width: 30rem
+  height: 28rem
+  margin-left: auto
+  margin-right: auto
+  border-radius: $border-radius
+  opacity: $slight-transparent
+  
+.downloadbtn
+  position: absolute
+  right: $offset
+  bottom: $offset
+
+.downloadbtn a
+  margin-right: $offset
 </style>
--- a/client/src/layers/Layerselect.vue	Fri Nov 16 12:15:51 2018 +0100
+++ b/client/src/layers/Layerselect.vue	Fri Nov 16 14:37:07 2018 +0100
@@ -11,13 +11,12 @@
     </div>
 </template>
 
-<style lang="scss" scoped>
-.selection {
-  text-align: left;
-}
-.layername {
-  margin-left: $small-offset;
-}
+<style lang="sass" scoped>
+.selection
+  text-align: left
+
+.layername
+  margin-left: $small-offset
 </style>
 
 
--- a/client/src/login/Login.vue	Fri Nov 16 12:15:51 2018 +0100
+++ b/client/src/login/Login.vue	Fri Nov 16 14:37:07 2018 +0100
@@ -51,46 +51,39 @@
     </div>
 </template>)
 
-<style lang="scss" scoped>
-.login {
-  background-color: white;
-  min-width: 375px;
-  min-height: 500px;
-  @extend %fully-centered;
-}
+<style lang="sass" scoped>
+.login
+  background-color: white
+  min-width: 375px
+  min-height: 500px
+  @extend %fully-centered
 
-.loginform {
-  max-width: 375px;
-  margin-left: auto;
-  margin-right: auto;
-}
+.loginform
+  max-width: 375px
+  margin-left: auto
+  margin-right: auto
 
-.loginmask {
-  position: relative;
-  margin-left: $large-offset;
-  margin-right: $large-offset;
-  margin-top: $large-offset;
-}
+.loginmask
+  position: relative
+  margin-left: $large-offset
+  margin-right: $large-offset
+  margin-top: $large-offset
 
-.logo {
-  margin-right: $offset;
-}
+.logo
+  margin-right: $offset
 
-.alert {
-  padding: 0.5rem;
-}
+.alert
+  padding: 0.5rem
 
-.secondary-logo {
-  max-width: 375px;
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: auto;
-}
+.secondary-logo
+  max-width: 375px
+  margin-left: auto
+  margin-right: auto
+  margin-bottom: auto
 
 /* avoid IE and Edge show a password reveal as we do our own */
-input[type="password"]::-ms-reveal {
-  display: none;
-}
+input[type="password"]::-ms-reveal
+  display: none
 </style>
 
 <script>
--- a/client/src/logs/logs.vue	Fri Nov 16 12:15:51 2018 +0100
+++ b/client/src/logs/logs.vue	Fri Nov 16 14:37:07 2018 +0100
@@ -37,55 +37,50 @@
     </div>
 </template>
 
-<style scoped lang="scss">
-.statuscontainer {
-  width: 87%;
-  position: relative;
-}
-.logmenu {
-  margin-left: 5rem;
-  min-width: 60vw;
-}
-#code {
-  overflow: auto;
-}
-.refresh {
-  position: absolute;
-  right: 0;
-}
-.logoutput {
-  width: 95%;
-  height: 85vh;
-  margin-top: $offset;
-  margin-right: $offset;
-  margin-left: $offset;
-  text-align: left;
-  background-color: white;
-  overflow: auto;
-  transition: $transition-fast;
-}
+<style lang="sass" scoped>
+.statuscontainer
+  width: 87%
+  position: relative
+  
+.logmenu
+  margin-left: 5rem
+  min-width: 60vw
+  
+#code
+  overflow: auto
+  
+.refresh
+  position: absolute
+  right: 0
+  
+.logoutput
+  width: 95%
+  height: 85vh
+  margin-top: $offset
+  margin-right: $offset
+  margin-left: $offset
+  text-align: left
+  background-color: white
+  overflow: auto
+  transition: $transition-fast
 
-.spacer {
-  margin-left: $offset;
-  height: 90vh;
-}
+.spacer
+  margin-left: $offset
+  height: 90vh
 
-.spacer-collapsed {
-  min-width: $icon-width + $offset;
-  transition: $transition-fast;
-}
+.spacer-collapsed
+  min-width: $icon-width + $offset
+  transition: $transition-fast
 
-.spacer-expanded {
-  min-width: $sidebar-width + $offset;
-}
+.spacer-expanded
+  min-width: $sidebar-width + $offset
 
-.statusline {
-  position: absolute;
-  right: 0;
-  margin-top: 0.3rem;
-  margin-left: $offset;
-  margin-right: 7rem;
-}
+.statusline
+  position: absolute
+  right: 0
+  margin-top: 0.3rem
+  margin-left: $offset
+  margin-right: 7rem
 </style>
 
 <script>
--- a/client/src/map/Maplayer.vue	Fri Nov 16 12:15:51 2018 +0100
+++ b/client/src/map/Maplayer.vue	Fri Nov 16 14:37:07 2018 +0100
@@ -2,25 +2,21 @@
     <div id="map" :class="mapStyle"></div>
 </template>
 
-<style lang="scss" scoped>
-.mapsplit {
-  height: 50vh;
-}
+<style lang="sass" scoped>
+.mapsplit
+  height: 50vh
 
-.mapfull {
-  height: 100vh;
-}
+.mapfull
+  height: 100vh
 
-@media print {
-  .mapfull {
-    width: 2000px;
-    height: 2828px;
-  }
-  .mapsplit {
-    width: 2000px;
-    height: 2828px;
-  }
-}
+@media print
+  .mapfull
+    width: 2000px
+    height: 2828px
+    
+  .mapsplit
+    width: 2000px
+    height: 2828px
 </style>
 
 <script>
--- a/client/src/morphtool/Morphtool.vue	Fri Nov 16 12:15:51 2018 +0100
+++ b/client/src/morphtool/Morphtool.vue	Fri Nov 16 14:37:07 2018 +0100
@@ -35,51 +35,47 @@
     </div>
 </template>
 
-<style scoped lang="scss">
-.headline {
-  margin-right: $offset;
-  margin-left: $offset;
-}
-.morphcontainer {
-  margin-bottom: $offset;
-  margin-left: auto;
-  border-radius: $border-radius;
-}
-.surveylist {
-  text-align: left;
-  margin-bottom: $offset !important;
-  margin-left: $offset;
-  margin-right: $offset;
-}
+<style scoped lang="sass">
+.headline
+  margin-right: $offset
+  margin-left: $offset
+  
+.morphcontainer
+  margin-bottom: $offset
+  margin-left: auto
+  border-radius: $border-radius
+  
+.surveylist
+  text-align: left
+  margin-bottom: $offset !important
+  margin-left: $offset
+  margin-right: $offset
 
-.surveylist li {
-  margin-left: auto;
-  margin-right: auto;
-  border-style: none;
-  padding-bottom: 0rem;
-}
+.surveylist li
+  margin-left: auto
+  margin-right: auto
+  border-style: none
+  padding-bottom: 0rem
 
-.morphtool {
-  position: relative;
-  background-color: white;
-  border-radius: $border-radius;
-  height: $icon-width;
-  margin-top: auto;
-  margin-bottom: auto;
-  z-index: 2;
-}
+.morphtool
+  position: relative
+  background-color: white
+  border-radius: $border-radius
+  height: $icon-width
+  margin-top: auto
+  margin-bottom: auto
+  z-index: 2
 
-.morphtoolminus {
-  position: absolute;
-  top: 0;
-  right: 0;
-  background-color: white;
-  padding: $small-offset;
-  border-radius: $border-radius;
-  height: $icon-width;
-  width: $icon-height;
-  z-index: 2;
-}
+.morphtoolminus
+  position: absolute
+  top: 0
+  right: 0
+  background-color: white
+  padding: $small-offset
+  border-radius: $border-radius
+  height: $icon-width
+  width: $icon-height
+  z-index: 2
 </style>
 
 <script>
--- a/client/src/pdftool/Pdftool.vue	Fri Nov 16 12:15:51 2018 +0100
+++ b/client/src/pdftool/Pdftool.vue	Fri Nov 16 14:37:07 2018 +0100
@@ -42,42 +42,37 @@
     </div>
 </template>
 
-<style lang="scss" scoped>
-.pdftool {
-  position: absolute;
-  margin-right: $offset;
-  margin-bottom: $offset;
-  bottom: 96px;
-  right: 0;
-}
+<style lang="sass" scoped>
+.pdftool
+  position: absolute
+  margin-right: $offset
+  margin-bottom: $offset
+  bottom: 96px
+  right: 0
 
-.inner {
-  background-color: white;
-  margin-left: $small-offset;
-  opacity: $slight-transparent;
-  text-align: left;
-}
+.inner
+  background-color: white
+  margin-left: $small-offset
+  opacity: $slight-transparent
+  text-align: left
 
-.pdftoolcollapsed {
-  min-height: $icon-height;
-  width: $icon-width;
-  transition: $transition-fast;
-}
+.pdftoolcollapsed
+  min-height: $icon-height
+  width: $icon-width
+  transition: $transition-fast
 
-.pdftoolexpanded {
-  width: $identify-width;
-}
+.pdftoolexpanded
+  width: $identify-width
 
-.minimizer {
-  position: absolute;
-  z-index: 2;
-  right: 0;
-  top: 0;
-  margin-top: $x-small-offset;
-  border-radius: $border-radius;
-  height: $icon-width;
-  width: $icon-height;
-}
+.minimizer
+  position: absolute
+  z-index: 2
+  right: 0
+  top: 0
+  margin-top: $x-small-offset
+  border-radius: $border-radius
+  height: $icon-width
+  width: $icon-height
 </style>
 
 <script>
--- a/client/src/systemconfiguration/systemconfiguration.vue	Fri Nov 16 12:15:51 2018 +0100
+++ b/client/src/systemconfiguration/systemconfiguration.vue	Fri Nov 16 14:37:07 2018 +0100
@@ -21,28 +21,27 @@
     </div>
 </template>
 
-<style scoped lang="scss">
-.config {
-  text-align: left;
-}
-.configsection {
-  margin-bottom: $large-offset;
-}
-.sendbutton {
-  position: absolute;
-  right: $offset;
-  bottom: $offset;
-}
-.inputs {
-  margin-left: auto;
-  margin-right: auto;
-}
-.sysconfig {
-  margin-top: $offset;
-  margin-left: auto;
-  margin-right: auto;
-  width: 30vw;
-}
+<style scoped lang="sass">
+.config
+  text-align: left
+  
+.configsection
+  margin-bottom: $large-offset
+  
+.sendbutton
+  position: absolute
+  right: $offset
+  bottom: $offset
+  
+.inputs
+  margin-left: auto
+  margin-right: auto
+  
+.sysconfig
+  margin-top: $offset
+  margin-left: auto
+  margin-right: auto
+  width: 30vw
 </style>
 
 <script>
--- a/client/src/usermanagement/Userdetail.vue	Fri Nov 16 12:15:51 2018 +0100
+++ b/client/src/usermanagement/Userdetail.vue	Fri Nov 16 14:37:07 2018 +0100
@@ -70,25 +70,22 @@
     </div>
 </template>
 
-<style lang="scss" scoped>
-.mailbutton {
-  width: 12vw;
-}
-.formfields {
-  width: 10vw;
-}
+<style lang="sass" scoped>
+.mailbutton
+  width: 12vw
+
+.formfields
+  width: 10vw
 
-.userdetails {
-  margin-top: $offset;
-  min-width: 40vw;
-  margin-right: auto;
-  height: 100%;
-}
+.userdetails
+  margin-top: $offset
+  min-width: 40vw
+  margin-right: auto
+  height: 100%
 
-form {
-  margin-left: $offset;
-  font-size: $smaller;
-}
+form
+  margin-left: $offset
+  font-size: $smaller
 </style>
 
 <script>
--- a/client/src/usermanagement/Usermanagement.vue	Fri Nov 16 12:15:51 2018 +0100
+++ b/client/src/usermanagement/Usermanagement.vue	Fri Nov 16 14:37:07 2018 +0100
@@ -70,110 +70,88 @@
     </div>
 </template>
 
-<style scoped lang="scss">
-@import "../application/assets/tooltip.scss";
+<style scoped lang="sass">
+@import "../application/assets/tooltip.scss"
 
-.spacer {
-  margin-left: $offset;
-  height: 100vh;
-}
+.spacer
+  margin-left: $offset
+  height: 100vh
 
-.spacer-collapsed {
-  min-width: $icon-width + $offset;
-  transition: $transition-fast;
-}
+.spacer-collapsed
+  min-width: $icon-width + $offset
+  transition: $transition-fast
 
-@media screen and (min-width: 600px) {
-  .spacer-expanded {
-    min-width: $icon-width + $offset;
-  }
-}
-@media screen and (max-width: 1650px) {
-  .spacer-expanded {
-    min-width: $sidebar-width + $offset;
-  }
-}
+@media screen and (min-width: 600px)
+  .spacer-expanded
+    min-width: $icon-width + $offset
+
+@media screen and (max-width: 1650px)
+  .spacer-expanded
+    min-width: $sidebar-width + $offset
 
-.main {
-  height: 100vh;
-}
+.main
+  height: 100vh
 
-.backwards {
-  margin-right: $small-offset;
-}
+.backwards
+  margin-right: $small-offset
 
-.forwards {
-  margin-left: $small-offset;
-}
+.forwards
+  margin-left: $small-offset
 
-@media screen and (min-width: 600px) {
-  .content {
-    margin-left: $offset;
-    margin-right: auto;
-  }
-}
+@media screen and (min-width: 600px)
+  .content
+    margin-left: $offset
+    margin-right: auto
 
-@media screen and (min-width: 1650px) {
-  .content {
-    margin-left: $sidebar-width;
-    margin-right: auto;
-  }
-}
+@media screen and (min-width: 1650px)
+  .content
+    margin-left: $sidebar-width
+    margin-right: auto
 
-.adduser {
-  margin-right: $offset;
-  padding-bottom: $offset;
-}
+.adduser
+  margin-right: $offset
+  padding-bottom: $offset
 
-.icon {
-  font-size: large;
-}
+.icon
+  font-size: large
 
-.userlist {
-  margin-top: $offset;
-  margin-right: $offset;
-  min-width: 520px;
-  height: 100%;
-}
+.userlist
+  margin-top: $offset
+  margin-right: $offset
+  min-width: 520px
+  height: 100%
+
+.pagination
+  margin-left: auto
+  margin-right: auto
 
-.pagination {
-  margin-left: auto;
-  margin-right: auto;
-}
-.userlistsmall {
-  width: 30vw;
-}
+.userlistsmall
+  width: 30vw
 
-.userlistextended {
-  width: 70vw;
-}
+.userlistextended
+  width: 70vw
 
-.table {
-  width: 90% !important;
-  margin: auto;
-}
+.table
+  width: 90% !important
+  margin: auto
 
 .table th,
-.pages {
-  cursor: pointer;
-}
+.pages
+  cursor: pointer
 
 .table th,
-td {
-  font-size: $smaller;
-  border-top: 0px !important;
-  text-align: left;
-  padding: $small-offset !important;
-}
+td
+  font-size: $smaller
+  border-top: 0px !important
+  text-align: left
+  padding: $small-offset !important
 
-.table td {
-  font-size: $smaller;
-  cursor: pointer;
-}
+.table td
+  font-size: $smaller
+  cursor: pointer
 
-tr span {
-  display: flex;
-}
+tr span
+  display: flex
 </style>
 
 <script>
--- a/client/src/usermanagement/Users.vue	Fri Nov 16 12:15:51 2018 +0100
+++ b/client/src/usermanagement/Users.vue	Fri Nov 16 14:37:07 2018 +0100
@@ -69,80 +69,67 @@
     </div>
 </template>
 
-<style lang="scss" scoped>
-@import "../application/assets/tooltip.scss";
-.main {
-  height: 100vh;
-}
+<style lang="sass" scoped>
+@import "../application/assets/tooltip.scss"
 
-.backwards {
-  margin-right: 0.5rem;
-}
+.main
+  height: 100vh
+
+.backwards
+  margin-right: 0.5rem
 
-.forwards {
-  margin-left: 0.5rem;
-}
+.forwards
+  margin-left: 0.5rem
 
-.content {
-  margin-top: $large-offset;
-  margin-left: auto;
-  margin-right: auto;
-}
+.content
+  margin-top: $large-offset
+  margin-left: auto
+  margin-right: auto
 
-.adduser {
-  margin-right: $offset;
-  padding-bottom: $offset;
-}
+.adduser
+  margin-right: $offset
+  padding-bottom: $offset
 
-.icon {
-  font-size: large;
-}
+.icon
+  font-size: large
 
-.userlist {
-  margin-top: $topbarheight;
-  margin-right: $offset;
-  min-width: 520px;
-  height: 100%;
-}
+.userlist
+  margin-top: $topbarheight
+  margin-right: $offset
+  min-width: 520px
+  height: 100%
 
-.pagination {
-  margin-left: auto;
-  margin-right: auto;
-}
-.userlistsmall {
-  width: 30vw;
-}
+.pagination
+  margin-left: auto
+  margin-right: auto
+  
+.userlistsmall
+  width: 30vw
 
-.userlistextended {
-  width: 70vw;
-}
+.userlistextended
+  width: 70vw
 
-.table {
-  width: 90% !important;
-  margin: auto;
-}
+.table
+  width: 90% !important
+  margin: auto
 
 .table th,
-.pages {
-  cursor: pointer;
-}
+.pages
+  cursor: pointer
 
 .table th,
-td {
-  font-size: 0.9rem;
-  border-top: 0px !important;
-  text-align: left;
-  padding: 0.5rem !important;
-}
+td
+  font-size: 0.9rem
+  border-top: 0px !important
+  text-align: left
+  padding: 0.5rem !important
 
-.table td {
-  font-size: 0.9rem;
-  cursor: pointer;
-}
+.table td
+  font-size: 0.9rem
+  cursor: pointer
 
-tr span {
-  display: flex;
-}
+tr span
+  display: flex
 </style>
 
 <script>
--- a/client/src/zoom/zoom.vue	Fri Nov 16 12:15:51 2018 +0100
+++ b/client/src/zoom/zoom.vue	Fri Nov 16 14:37:07 2018 +0100
@@ -9,23 +9,22 @@
     </div>
 </template>
 
-<style lang="scss" scoped>
-.buttoncontainer {
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  margin-left: -$icon-width;
-  margin-bottom: $offset;
-}
-.zoomButton {
-  background-color: white;
-  min-height: $icon-width;
-  min-width: $icon-width;
-  margin-bottom: auto;
-  z-index: 2;
-  outline: none;
-  border: 0px;
-}
+<style lang="sass" scoped>
+.buttoncontainer
+  position: absolute
+  bottom: 0
+  left: 50%
+  margin-left: -$icon-width
+  margin-bottom: $offset
+
+.zoomButton
+  background-color: white
+  min-height: $icon-width
+  min-width: $icon-width
+  margin-bottom: auto
+  z-index: 2
+  outline: none
+  border: 0px
 </style>
 <script>
 import { mapState } from "vuex";
--- a/client/vue.config.js	Fri Nov 16 12:15:51 2018 +0100
+++ b/client/vue.config.js	Fri Nov 16 14:37:07 2018 +0100
@@ -28,8 +28,7 @@
       // pass options to sass-loader
       sass: {
         // @/ is an alias to src/
-        // so this assumes you have a file named `src/variables.scss`
-        data: `@import "@/application/assets/application.scss";`
+        data: `@import "@/application/assets/application.sass";`
       }
     }
   },