# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1543828799 -3600
# Node ID bb47531bdd220ae17af7da2a315ef6e4d71c9dbf
# Parent  ef388dcbb946bb1818e2c7264dee9bd2655f8b2f
sass to scss

diff -r ef388dcbb946 -r bb47531bdd22 client/src/components/App.vue
--- a/client/src/components/App.vue	Mon Dec 03 09:28:28 2018 +0100
+++ b/client/src/components/App.vue	Mon Dec 03 10:19:59 2018 +0100
@@ -34,28 +34,31 @@
   </div>
 </template>
 
-<style lang="sass" scoped>
-.userinterface
-  position: absolute
-  top: 0
-  left: 0
-  height: 100vh
-  width: 100vw
-  z-index: 4
-  pointer-events: none
+<style lang="scss" scoped>
+.userinterface {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  width: 100vw;
+  z-index: 4;
+  pointer-events: none;
+}
 
-.topbar
-  position: relative
-  z-index: 2
+.topbar {
+  position: relative;
+  z-index: 2;
+}
 
-#app
-  height: 100vh
-  width: 100vw
-  font-family: "Avenir", Helvetica, Arial, sans-serif
-  -webkit-font-smoothing: antialiased
-  -moz-osx-font-smoothing: grayscale
-  text-align: center
-  color: #2c3e50
+#app {
+  height: 100vh;
+  width: 100vw;
+  font-family: "Avenir", Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
 </style>
 
 <script>
diff -r ef388dcbb946 -r bb47531bdd22 client/src/components/Login.vue
--- a/client/src/components/Login.vue	Mon Dec 03 09:28:28 2018 +0100
+++ b/client/src/components/Login.vue	Mon Dec 03 10:19:59 2018 +0100
@@ -76,24 +76,29 @@
   </div>
 </template>)
 
-<style lang="sass" scoped>
-.login
-  min-width: 375px
-  min-height: 500px
-  @extend %fully-centered
+<style lang="scss" scoped>
+.login {
+  min-width: 375px;
+  min-height: 500px;
+  @extend %fully-centered;
+}
 
-.loginform
-  max-width: 375px
+.loginform {
+  max-width: 375px;
+}
 
-.alert
-  padding: 0.5rem
+.alert {
+  padding: 0.5rem;
+}
 
-.secondary-logo
-  max-width: 375px
+.secondary-logo {
+  max-width: 375px;
+}
 
 /* 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>
diff -r ef388dcbb946 -r bb47531bdd22 client/src/components/Sidebar.vue
--- a/client/src/components/Sidebar.vue	Mon Dec 03 09:28:28 2018 +0100
+++ b/client/src/components/Sidebar.vue	Mon Dec 03 10:19:59 2018 +0100
@@ -136,49 +136,64 @@
 };
 </script>
 
-<style lang="sass" scoped>
-.menubutton
-  height: $icon-height
-  width: $icon-width
-  top: 0
-  left: 0
-  color: #666
+<style lang="scss" scoped>
+.menubutton {
+  height: 2rem;
+  width: 2rem;
+  top: 0;
+  left: 0;
+  color: #666;
+}
+
+.menu a {
+  display: block;
+  text-align: left;
+  padding: 0.5rem 1rem;
+  color: #333;
+  text-decoration: none;
+}
+
+.menu a svg path {
+  fill: #666;
+}
+
+.menu a:hover {
+  background-color: #f8f8f8;
+}
+
+.menu a.router-link-exact-active {
+  background-color: #17a2b8;
+  color: #fff;
+}
 
-.menu
-  a
-    display: block
-    text-align: left
-    padding: 0.5rem 1rem
-    color: #333
-    text-decoration: none
-    svg path
-      fill: #666
-    &:hover
-      background-color: #f8f8f8
-    &.router-link-exact-active
-      background-color: $color-info
-      color: #fff
-      svg path
-        fill: #fff
-    &.secondary
-      &.active
-        background: lighten($color-info, 55)
-        color: darken($color-info, 15)
-        svg path
-          fill: darken($color-info, 15)
+.menu a.router-link-exact-active svg path {
+  fill: #fff;
+}
+
+.menu a.secondary.active {
+  background: #ebfafd;
+  color: #0f6674;
+}
+
+.menu a.secondary.active svg path {
+  fill: #0f6674;
+}
 
-.sidebar
-  background-color: #ffffff
-  padding-top: $large-offset
-  opacity: $slight-transparent
-  transition: $transition-fast
-  overflow: hidden
+.sidebar {
+  background-color: #ffffff;
+  padding-top: $large-offset;
+  opacity: $slight-transparent;
+  transition: $transition-fast;
+  overflow: hidden;
+}
 
-.sidebarcollapsed
-  max-height: $icon-height
-  max-width: $icon-width
+.sidebarcollapsed {
+  max-height: $icon-height;
+  max-width: $icon-width;
+}
 
-.sidebarextended
-  max-height: 35rem
-  max-width: $sidebar-width
+.sidebarextended {
+  max-height: 35rem;
+  max-width: $sidebar-width;
+}
 </style>
diff -r ef388dcbb946 -r bb47531bdd22 client/src/components/admin/Importqueue.vue
--- a/client/src/components/admin/Importqueue.vue	Mon Dec 03 09:28:28 2018 +0100
+++ b/client/src/components/admin/Importqueue.vue	Mon Dec 03 10:19:59 2018 +0100
@@ -3,7 +3,9 @@
     <div :class="spacerStyle"></div>
     <div class="mt-3 mx-auto">
       <div class="card importqueuecard">
-        <div class="card-header shadow-sm text-white bg-info mb-3"><translate>Importqueue</translate></div>
+        <div class="card-header shadow-sm text-white bg-info mb-3">
+          <translate>Importqueue</translate>
+        </div>
         <div class="card-body importcardbody">
           <div class="card-body importcardbody">
             <div class="searchandfilter d-flex flex-row">
@@ -23,20 +25,38 @@
                 >
               </div>
               <div class="filters">
-                <button @click="setFilter('successful')" :class="successfulStyle"><translate>Successful</translate></button>
-                <button @click="setFilter('failed')" :class="failedStyle"><translate>Failed</translate></button>
-                <button @click="setFilter('pending')" :class="pendingStyle"><translate>Pending</translate></button>
-                <button @click="setFilter('rejected')" :class="rejectedStyle"><translate>Rejected</translate></button>
-                <button @click="setFilter('accepted')" :class="acceptedStyle"><translate>Accepted</translate></button>
+                <button @click="setFilter('successful')" :class="successfulStyle">
+                  <translate>Successful</translate>
+                </button>
+                <button @click="setFilter('failed')" :class="failedStyle">
+                  <translate>Failed</translate>
+                </button>
+                <button @click="setFilter('pending')" :class="pendingStyle">
+                  <translate>Pending</translate>
+                </button>
+                <button @click="setFilter('rejected')" :class="rejectedStyle">
+                  <translate>Rejected</translate>
+                </button>
+                <button @click="setFilter('accepted')" :class="acceptedStyle">
+                  <translate>Accepted</translate>
+                </button>
               </div>
             </div>
             <table class="table">
               <thead>
                 <tr>
-                  <th><translate>Enqueued</translate></th>
-                  <th><translate>Kind</translate></th>
-                  <th><translate>User</translate></th>
-                  <th><translate>State</translate></th>
+                  <th>
+                    <translate>Enqueued</translate>
+                  </th>
+                  <th>
+                    <translate>Kind</translate>
+                  </th>
+                  <th>
+                    <translate>User</translate>
+                  </th>
+                  <th>
+                    <translate>State</translate>
+                  </th>
                 </tr>
               </thead>
               <tbody>
@@ -49,7 +69,9 @@
               </tbody>
             </table>
             <div>
-              <button @click="refresh" class="btn btn-info refresh"><translate>Refresh</translate></button>
+              <button @click="refresh" class="btn btn-info refresh">
+                <translate>Refresh</translate>
+              </button>
             </div>
           </div>
         </div>
@@ -201,50 +223,61 @@
 };
 </script>
 
-<style lang="sass" scoped>
-.refresh
-  position: absolute
-  right: $offset
-  bottom: $offset
+<style lang="scss" scoped>
+.refresh {
+  position: absolute;
+  right: $offset;
+  bottom: $offset;
+}
 
-.spacer
-  height: 100vh
+.spacer {
+  height: 100vh;
+}
 
-.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;
+}
 
-.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>
diff -r ef388dcbb946 -r bb47531bdd22 client/src/components/admin/Logs.vue
--- a/client/src/components/admin/Logs.vue	Mon Dec 03 09:28:28 2018 +0100
+++ b/client/src/components/admin/Logs.vue	Mon Dec 03 10:19:59 2018 +0100
@@ -14,65 +14,83 @@
               @click="fetch('system/log/apache2/access.log', 'accesslog')"
               :class="accesslogStyle"
               href="#"
-            ><translate>Accesslog</translate></a>
+            >
+              <translate>Accesslog</translate>
+            </a>
           </li>
           <li class="nav-item">
             <a
               @click="fetch('system/log/apache2/error.log', 'errorlog')"
               :class="errorlogStyle"
               href="#"
-            ><translate>Errorlog</translate></a>
+            >
+              <translate>Errorlog</translate>
+            </a>
           </li>
         </ul>
       </div>
       <div class="statuscontainer d-flex flex-row">
         <div class="statusline ml-3 mt-1 align-self-center">
-          <h3><translate>Last refresh:</translate> {{refreshed}}</h3>
+          <h3>
+            <translate>Last refresh:</translate>
+            {{refreshed}}
+          </h3>
         </div>
         <div class="refresh">
-          <button class="btn btn-dark" @click="fetch(currentFile, currentLog)"><translate>Refresh</translate></button>
+          <button class="btn btn-dark" @click="fetch(currentFile, currentLog)">
+            <translate>Refresh</translate>
+          </button>
         </div>
       </div>
     </div>
   </div>
 </template>
 
-<style lang="sass" scoped>
-.statuscontainer
-  width: 87%
-  position: relative
+<style lang="scss" scoped>
+.statuscontainer {
+  width: 87%;
+  position: relative;
+}
 
-.logmenu
-  margin-left: 5rem
-  min-width: 60vw
+.logmenu {
+  margin-left: 5rem;
+  min-width: 60vw;
+}
 
-#code
-  overflow: auto
+#code {
+  overflow: auto;
+}
 
-.refresh
-  position: absolute
-  right: 0
+.refresh {
+  position: absolute;
+  right: 0;
+}
 
-.logoutput
-  width: 95%
-  height: 85vh
-  overflow: auto
-  transition: $transition-fast
+.logoutput {
+  width: 95%;
+  height: 85vh;
+  overflow: auto;
+  transition: $transition-fast;
+}
 
-.spacer
-  height: 90vh
+.spacer {
+  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-right: 7rem
+.statusline {
+  position: absolute;
+  right: 0;
+  margin-right: 7rem;
+}
 </style>
 
 <script>
diff -r ef388dcbb946 -r bb47531bdd22 client/src/components/admin/Systemconfiguration.vue
--- a/client/src/components/admin/Systemconfiguration.vue	Mon Dec 03 09:28:28 2018 +0100
+++ b/client/src/components/admin/Systemconfiguration.vue	Mon Dec 03 10:19:59 2018 +0100
@@ -1,18 +1,26 @@
 <template>
   <div class="d-flex flex-row">
     <div class="card sysconfig mt-3 mx-auto">
-      <div class="card-header shadow-sm text-white bg-info mb-6"><translate>Systemconfiguration</translate></div>
+      <div class="card-header shadow-sm text-white bg-info mb-6">
+        <translate>Systemconfiguration</translate>
+      </div>
       <div class="card-body config">
         <section class="configsection">
-          <h4 class="card-title"><translate>Bottleneck Areas stroke-color</translate></h4>
+          <h4 class="card-title">
+            <translate>Bottleneck Areas stroke-color</translate>
+          </h4>
           <compact-picker v-model="strokeColor"/>
         </section>
         <section>
-          <h4 class="card-title"><translate>Bottleneck Areas fill-color</translate></h4>
+          <h4 class="card-title">
+            <translate>Bottleneck Areas fill-color</translate>
+          </h4>
           <chrome-picker v-model="fillColor"/>
         </section>
         <div class="sendbutton">
-          <a @click.prevent="submit" class="btn btn-info"><translate>Send</translate></a>
+          <a @click.prevent="submit" class="btn btn-info">
+            <translate>Send</translate>
+          </a>
         </div>
       </div>
       <!-- card-body -->
@@ -20,24 +28,29 @@
   </div>
 </template>
 
-<style scoped lang="sass">
-.config
-  text-align: left
+<style scoped lang="scss">
+.config {
+  text-align: left;
+}
 
-.configsection
-  margin-bottom: $large-offset
+.configsection {
+  margin-bottom: $large-offset;
+}
 
-.sendbutton
-  position: absolute
-  right: $offset
-  bottom: $offset
+.sendbutton {
+  position: absolute;
+  right: $offset;
+  bottom: $offset;
+}
 
-.inputs
-  margin-left: auto
-  margin-right: auto
+.inputs {
+  margin-left: auto;
+  margin-right: auto;
+}
 
-.sysconfig
-  width: 30vw
+.sysconfig {
+  width: 30vw;
+}
 </style>
 
 <script>
diff -r ef388dcbb946 -r bb47531bdd22 client/src/components/admin/importschedule/Importschedule.vue
--- a/client/src/components/admin/importschedule/Importschedule.vue	Mon Dec 03 09:28:28 2018 +0100
+++ b/client/src/components/admin/importschedule/Importschedule.vue	Mon Dec 03 10:19:59 2018 +0100
@@ -130,28 +130,34 @@
 };
 </script>
 
-<style lang="sass" scoped>
-.spacer
-  height: 100vh
+<style lang="scss" scoped>
+.spacer {
+  height: 100vh;
+}
 
-.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;
+}
 
-.schedulecard
-  width: 40vw
-  min-height: 20rem
+.schedulecard {
+  width: 40vw;
+  min-height: 20rem;
+}
 
-.schedulecard-body
-  width: 100%
-  margin-left: auto
-  margin-right: aut
+.schedulecard-body {
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+}
 
-.newbutton
-  position:absolute
-  bottom: $offset
-  right: $offset
+.newbutton {
+  position: absolute;
+  bottom: $offset;
+  right: $offset;
+}
 </style>
diff -r ef388dcbb946 -r bb47531bdd22 client/src/components/admin/usermanagement/Userdetail.vue
--- a/client/src/components/admin/usermanagement/Userdetail.vue	Mon Dec 03 09:28:28 2018 +0100
+++ b/client/src/components/admin/usermanagement/Userdetail.vue	Mon Dec 03 10:19:59 2018 +0100
@@ -142,18 +142,22 @@
   </div>
 </template>
 
-<style lang="sass" scoped>
-.mailbutton
-  width: 12vw
+<style lang="scss" scoped>
+.mailbutton {
+  width: 12vw;
+}
 
-.formfields
-  width: 10vw
+.formfields {
+  width: 10vw;
+}
 
-.userdetails
-  min-width: 40vw
+.userdetails {
+  min-width: 40vw;
+}
 
-form
-  font-size: $smaller
+form {
+  font-size: $smaller;
+}
 </style>
 
 <script>
diff -r ef388dcbb946 -r bb47531bdd22 client/src/components/map/Identify.vue
--- a/client/src/components/map/Identify.vue	Mon Dec 03 09:28:28 2018 +0100
+++ b/client/src/components/map/Identify.vue	Mon Dec 03 10:19:59 2018 +0100
@@ -56,14 +56,16 @@
   </div>
 </template>
 
-<style lang="sass" scoped>
-.features
-  max-height: 19rem
-  overflow-y: auto
+<style lang="scss" scoped>
+.features {
+  max-height: 19rem;
+  overflow-y: auto;
+}
 
-.versioninfo
-  font-size: 60%
-  white-space: normal
+.versioninfo {
+  font-size: 60%;
+  white-space: normal;
+}
 </style>
 
 <script>
diff -r ef388dcbb946 -r bb47531bdd22 client/src/components/map/Maplayer.vue
--- a/client/src/components/map/Maplayer.vue	Mon Dec 03 09:28:28 2018 +0100
+++ b/client/src/components/map/Maplayer.vue	Mon Dec 03 10:19:59 2018 +0100
@@ -2,24 +2,29 @@
   <div id="map" :class="mapStyle"></div>
 </template>
 
-<style lang="sass" scoped>
-.nocursor
-  cursor: none
+<style lang="scss" scoped>
+.nocursor {
+  cursor: none;
+}
 
-.mapsplit
-  height: 50vh
+.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>
diff -r ef388dcbb946 -r bb47531bdd22 client/src/components/map/Search.vue
--- a/client/src/components/map/Search.vue	Mon Dec 03 09:28:28 2018 +0100
+++ b/client/src/components/map/Search.vue	Mon Dec 03 10:19:59 2018 +0100
@@ -5,7 +5,9 @@
         <font-awesome-icon icon="search"></font-awesome-icon>
       </span>
     </div>
-    <div :class="['searchgroup', {'searchgroup-collapsed': !showSearchbar, big: showContextBox && ['bottlenecks', 'staging'].indexOf(contextBoxContent) !== -1 }]">
+    <div
+      :class="['searchgroup', {'searchgroup-collapsed': !showSearchbar, big: showContextBox && ['bottlenecks', 'staging'].indexOf(contextBoxContent) !== -1 }]"
+    >
       <input
         @keyup.enter="takeFirstSearchresult"
         id="search"
@@ -35,57 +37,75 @@
   </div>
 </template>
 
-<style lang="sass" scoped>
-  .searchcontainer
-    opacity: $slight-transparent
-    .searchbar
-      border-top-left-radius: 0 !important
-      border-bottom-left-radius: 0 !important
+<style lang="scss" scoped>
+.searchcontainer {
+  opacity: 0.96;
+}
+
+.searchcontainer .searchbar {
+  border-top-left-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+}
+
+.searchgroup {
+  margin-left: -3px;
+  transition: width 0.3s;
+  width: 300px;
+  overflow: hidden;
+}
 
-  .searchgroup
-    margin-left: -3px
-    transition: width 0.3s
-    width: 300px
-    overflow: hidden
-    &.big
-      width: 571px
+.searchgroup.big {
+  width: 571px;
+}
+
+.searchgroup-collapsed {
+  width: 0;
+}
 
-  .searchgroup-collapsed
-    width: 0
+.searchbar {
+  height: 2rem !important;
+  box-shadow: none !important;
+}
 
-  .searchbar
-    height: $icon-height !important
-    box-shadow: none !important
-    &.rounded-top-right
-      border-radius: 0 !important
-      border-top-right-radius: $border-radius !important
+.searchbar.rounded-top-right {
+  border-radius: 0 !important;
+  border-top-right-radius: 0.25rem !important;
+}
 
-  .searchlabel
-    &.rounded-top-left
-      border-radius: 0 !important
-      border-top-left-radius: $border-radius !important
+.searchlabel.rounded-top-left {
+  border-radius: 0 !important;
+  border-top-left-radius: 0.25rem !important;
+}
 
-  .input-group-text
-    height: $icon-height
-    width: $icon-width
+.input-group-text {
+  height: 2rem;
+  width: 2rem;
+}
 
-  .input-group-prepend
-    svg path
-      fill: #666
+.input-group-prepend svg path {
+  fill: #666;
+}
 
-  .searchresults
-    box-shadow: $shadow-xs
-    top: $icon-height
-    left: 0
-    right: 0
-    max-height: 24rem
-    overflow: auto
-    > div:first-child
-      border-top: 0 !important
-    a
-      text-decoration: none
-      &:hover
-        background: #f8f8f8
+.searchresults {
+  box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2);
+  top: 2rem;
+  left: 0;
+  right: 0;
+  max-height: 24rem;
+  overflow: auto;
+}
+
+.searchresults > div:first-child {
+  border-top: 0 !important;
+}
+
+.searchresults a {
+  text-decoration: none;
+}
+
+.searchresults a:hover {
+  background: #f8f8f8;
+}
 </style>
 
 <script>
diff -r ef388dcbb946 -r bb47531bdd22 client/src/components/map/Zoom.vue
--- a/client/src/components/map/Zoom.vue	Mon Dec 03 09:28:28 2018 +0100
+++ b/client/src/components/map/Zoom.vue	Mon Dec 03 10:19:59 2018 +0100
@@ -15,18 +15,20 @@
   </div>
 </template>
 
-<style lang="sass" scoped>
-.buttoncontainer
-  bottom: 0
-  left: 50%
-  margin-left: -$icon-width
+<style lang="scss" scoped>
+.buttoncontainer {
+  bottom: 0;
+  left: 50%;
+  margin-left: -$icon-width;
+}
 
-.zoomButton
-  min-height: $icon-width
-  min-width: $icon-width
-  z-index: 1
-  outline: none
-  color: #666
+.zoomButton {
+  min-height: $icon-width;
+  min-width: $icon-width;
+  z-index: 1;
+  outline: none;
+  color: #666;
+}
 </style>
 <script>
 /* This is Free Software under GNU Affero General Public License v >= 3.0
diff -r ef388dcbb946 -r bb47531bdd22 client/src/components/map/contextbox/Bottlenecks.vue
--- a/client/src/components/map/contextbox/Bottlenecks.vue	Mon Dec 03 09:28:28 2018 +0100
+++ b/client/src/components/map/contextbox/Bottlenecks.vue	Mon Dec 03 10:19:59 2018 +0100
@@ -1,21 +1,28 @@
 <template>
   <div>
     <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center">
-      <font-awesome-icon icon="ship" class="mr-2"></font-awesome-icon><translate>Bottlenecks</translate>
+      <font-awesome-icon icon="ship" class="mr-2"></font-awesome-icon>
+      <translate>Bottlenecks</translate>
     </h6>
     <div class="row p-2 text-left small">
       <div class="col-5">
-        <a href="#" @click="sortBy('name')" class="sort-link"><translate>Name</translate></a>
+        <a href="#" @click="sortBy('name')" class="sort-link">
+          <translate>Name</translate>
+        </a>
         <font-awesome-icon :icon="sortIcon" class="ml-1" v-if="sortColumn === 'name'"></font-awesome-icon>
       </div>
       <div class="col-2">
-        <a href="#" @click="sortBy('latestMeasurement')" class="sort-link"><translate>Latest</translate>
-          <br><translate>Measurement</translate>
+        <a href="#" @click="sortBy('latestMeasurement')" class="sort-link">
+          <translate>Latest</translate>
+          <br>
+          <translate>Measurement</translate>
         </a>
         <font-awesome-icon :icon="sortIcon" class="ml-1" v-if="sortColumn === 'latestMeasurement'"></font-awesome-icon>
       </div>
       <div class="col-3">
-        <a href="#" @click="sortBy('chainage')" class="sort-link"><translate>Chainage</translate></a>
+        <a href="#" @click="sortBy('chainage')" class="sort-link">
+          <translate>Chainage</translate>
+        </a>
         <font-awesome-icon :icon="sortIcon" class="ml-1" v-if="sortColumn === 'chainage'"></font-awesome-icon>
       </div>
       <div class="col-2"></div>
@@ -31,17 +38,12 @@
         class="border-top row bottleneck-row mx-0"
       >
         <div class="col-5 py-2 text-left">
-          <a
-            href="#"
-            @click="selectBottleneck(bottleneck)"
-          >{{ bottleneck.properties.name }}</a>
+          <a href="#" @click="selectBottleneck(bottleneck)">{{ bottleneck.properties.name }}</a>
         </div>
-        <div class="col-2 py-2">
-          {{ displayCurrentSurvey(bottleneck.properties.current) }}
-        </div>
-        <div class="col-3 py-2">
-          {{ displayCurrentChainage(bottleneck.properties.from, bottleneck.properties.from) }}
-        </div>
+        <div class="col-2 py-2">{{ displayCurrentSurvey(bottleneck.properties.current) }}</div>
+        <div
+          class="col-3 py-2"
+        >{{ displayCurrentChainage(bottleneck.properties.from, bottleneck.properties.from) }}</div>
         <div class="col-2 pr-0 text-right">
           <button
             type="button"
@@ -49,12 +51,27 @@
             @click="loadSurveys(bottleneck.properties.name)"
             v-if="bottleneck.properties.current"
           >
-            <font-awesome-icon icon="spinner" fixed-width spin v-if="loading === bottleneck.properties.name"></font-awesome-icon>
-            <font-awesome-icon icon="angle-down" fixed-width v-if="loading !== bottleneck.properties.name && openBottleneck !== bottleneck.properties.name"></font-awesome-icon>
-            <font-awesome-icon icon="angle-up" fixed-width v-if="loading !== bottleneck.properties.name && openBottleneck === bottleneck.properties.name"></font-awesome-icon>
+            <font-awesome-icon
+              icon="spinner"
+              fixed-width
+              spin
+              v-if="loading === bottleneck.properties.name"
+            ></font-awesome-icon>
+            <font-awesome-icon
+              icon="angle-down"
+              fixed-width
+              v-if="loading !== bottleneck.properties.name && openBottleneck !== bottleneck.properties.name"
+            ></font-awesome-icon>
+            <font-awesome-icon
+              icon="angle-up"
+              fixed-width
+              v-if="loading !== bottleneck.properties.name && openBottleneck === bottleneck.properties.name"
+            ></font-awesome-icon>
           </button>
         </div>
-        <div :class="['col-12 p-0', 'surveys', {open: openBottleneck === bottleneck.properties.name}]">
+        <div
+          :class="['col-12 p-0', 'surveys', {open: openBottleneck === bottleneck.properties.name}]"
+        >
           <a
             href="#"
             class="d-block px-3 py-2"
@@ -65,7 +82,9 @@
         </div>
       </div>
     </div>
-    <div v-else class="small text-center py-3 border-top"><translate>No results.</translate></div>
+    <div v-else class="small text-center py-3 border-top">
+      <translate>No results.</translate>
+    </div>
   </div>
 </template>
 
@@ -192,9 +211,9 @@
           }
         })
           .then(response => {
-            this.openBottleneckSurveys = response.data.surveys.sort(
-              (a, b) => (a.date_info < b.date_info ? 1 : -1)
-            );
+            this.openBottleneckSurveys = response.data.surveys.sort((a, b) => {
+              return a.date_info < b.date_info ? 1 : -1;
+            });
           })
           .catch(error => {
             const { status, data } = error.response;
@@ -219,28 +238,36 @@
 };
 </script>
 
-<style lang="sass" scoped>
-.bottleneck-list
-  overflow-y: auto
-  .bottleneck-row
-    a
-      text-decoration: none
-    &:hover
-      background: #fbfbfb
+<style lang="scss" scoped>
+.bottleneck-list {
+  overflow-y: auto;
+}
+
+.bottleneck-list .bottleneck-row a {
+  text-decoration: none;
+}
+
+.bottleneck-list .bottleneck-row:hover {
+  background: #fbfbfb;
+}
 
-.surveys
-  max-height: 0
-  min-height: 0
-  overflow: hidden
-  a
-    &:hover
-      background: #f3f3f3
+.surveys {
+  max-height: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.surveys a:hover {
+  background: #f3f3f3;
+}
 
-.surveys.open
-  max-height: 250px
-  overflow: auto
+.surveys.open {
+  max-height: 250px;
+  overflow: auto;
+}
 
-.sort-link
-  color: #444
-  font-weight: bold
+.sort-link {
+  color: #444;
+  font-weight: bold;
+}
 </style>
diff -r ef388dcbb946 -r bb47531bdd22 client/src/components/map/contextbox/Contextbox.vue
--- a/client/src/components/map/contextbox/Contextbox.vue	Mon Dec 03 09:28:28 2018 +0100
+++ b/client/src/components/map/contextbox/Contextbox.vue	Mon Dec 03 10:19:59 2018 +0100
@@ -62,30 +62,35 @@
 };
 </script>
 
-<style lang="sass" scoped>
-.contextbox
-  position: relative
-  background-color: #ffffff
-  opacity: $slight-transparent
-  transition: max-width 0.3s, max-height 0.3s
-  overflow: hidden
-  background: #fff
-  > div:last-child
-    width: 600px
+<style lang="scss" scoped>
+.contextbox {
+  position: relative;
+  background-color: #ffffff;
+  opacity: $slight-transparent;
+  transition: max-width 0.3s, max-height 0.3s;
+  overflow: hidden;
+  background: #fff;
+}
+.contextbox > div:last-child {
+  width: 600px;
+}
 
-.contextboxcollapsed
-  max-width: 0
-  max-height: 0
+.contextboxcollapsed {
+  max-width: 0;
+  max-height: 0;
+}
 
-.contextboxextended
-  max-width: 600px
-  max-height: 640px
+.contextboxextended {
+  max-width: 600px;
+  max-height: 640px;
+}
 
-.close-contextbox
-  position: absolute
-  z-index: 2
-  right: 0
-  top: 7px
-  height: $icon-width
-  width: $icon-height
+.close-contextbox {
+  position: absolute;
+  z-index: 2;
+  right: 0;
+  top: 7px;
+  height: $icon-width;
+  width: $icon-height;
+}
 </style>
diff -r ef388dcbb946 -r bb47531bdd22 client/src/components/map/contextbox/ImportSoundingresults.vue
--- a/client/src/components/map/contextbox/ImportSoundingresults.vue	Mon Dec 03 09:28:28 2018 +0100
+++ b/client/src/components/map/contextbox/ImportSoundingresults.vue	Mon Dec 03 10:19:59 2018 +0100
@@ -344,21 +344,26 @@
 };
 </script>
 
-<style lang="sass" scoped>
-.projectionLabel
-  margin-left: $small-offset
+<style lang="scss" scoped>
+.projectionLabel {
+  margin-left: $small-offset;
+}
 
-.depthreferencelabel
-  margin-left: $small-offset
+.depthreferencelabel {
+  margin-left: $small-offset;
+}
 
-.offset-r
-  margin-right: $small-offset
-
-.buttons button
-  margin-left: $offset !important
+.offset-r {
+  margin-right: $small-offset;
+}
 
-.label-text
-  width: 5rem
-  text-align: left
-  line-height: 2.25rem
+.buttons button {
+  margin-left: $offset !important;
+}
+
+.label-text {
+  width: 5rem;
+  text-align: left;
+  line-height: 2.25rem;
+}
 </style>
diff -r ef388dcbb946 -r bb47531bdd22 client/src/components/map/contextbox/Staging.vue
--- a/client/src/components/map/contextbox/Staging.vue	Mon Dec 03 09:28:28 2018 +0100
+++ b/client/src/components/map/contextbox/Staging.vue	Mon Dec 03 10:19:59 2018 +0100
@@ -159,13 +159,13 @@
 };
 </script>
 
-<style lang="sass" scoped>
-
+<style lang="scss" scoped>
 .table th,
-td
-  font-size: 0.9rem
-  border-top: 0px !important
-  border-bottom-width: 1px
-  text-align: left
-  padding: 0.5rem !important
+td {
+  font-size: 0.9rem;
+  border-top: 0px !important;
+  border-bottom-width: 1px;
+  text-align: left;
+  padding: 0.5rem !important;
+}
 </style>
diff -r ef388dcbb946 -r bb47531bdd22 client/src/components/map/fairway/Fairwayprofile.vue
--- a/client/src/components/map/fairway/Fairwayprofile.vue	Mon Dec 03 09:28:28 2018 +0100
+++ b/client/src/components/map/fairway/Fairwayprofile.vue	Mon Dec 03 10:19:59 2018 +0100
@@ -1,7 +1,5 @@
 <template>
-  <div
-    :class="['position-relative', {show: showSplitscreen}]"
-  >
+  <div :class="['position-relative', {show: showSplitscreen}]">
     <button
       class="rounded-bottom bg-white border-0 position-absolute splitscreen-toggle"
       @click="$store.commit('application/showSplitscreen', false)"
@@ -22,8 +20,11 @@
         v-if="selectedBottleneck && selectedSurvey"
       >{{ selectedBottleneck }} ({{ selectedSurvey.date_info }})</h5>
       <div class="d-flex flex-fill">
-        <div class="loading d-flex justify-content-center align-items-center" v-if="surveysLoading || profileLoading">
-          <font-awesome-icon icon="spinner" spin />
+        <div
+          class="loading d-flex justify-content-center align-items-center"
+          v-if="surveysLoading || profileLoading"
+        >
+          <font-awesome-icon icon="spinner" spin/>
         </div>
         <div class="fairwayprofile m-3 mt-0 bg-white flex-grow-1"></div>
       </div>
@@ -31,41 +32,49 @@
   </div>
 </template>
 
-<style lang="sass" scoped>
-.profile
-  width: 100vw
-  height: 0
-  overflow: hidden
-  z-index: 2
+<style lang="scss" scoped>
+.profile {
+  width: 100vw;
+  height: 0;
+  overflow: hidden;
+  z-index: 2;
+}
 
 .splitscreen-toggle,
-.clear-selection
-  width: $icon-width
-  height: $icon-height
-  margin-top: 8px
-  z-index: 3
-  outline: none
-  svg path
-    fill: #666
+.clear-selection {
+  width: 2rem;
+  height: 2rem;
+  margin-top: 8px;
+  z-index: 3;
+  outline: none;
+}
 
-.splitscreen-toggle
-  right: $small-offset + $icon-width
+.splitscreen-toggle svg path,
+.clear-selection svg path {
+  fill: #666;
+}
+
+.splitscreen-toggle {
+  right: 2.5rem;
+}
 
-.clear-selection
-  right: $small-offset
+.clear-selection {
+  right: 0.5rem;
+}
 
-.show
-  .profile
-    height: 50vh
+.show .profile {
+  height: 50vh;
+}
 
-.loading
-  background: rgba(255, 255, 255, 0.96)
-  position: absolute
-  z-index: 99
-  top: 0
-  right: 0
-  bottom: 0
-  left: 0
+.loading {
+  background: rgba(255, 255, 255, 0.96);
+  position: absolute;
+  z-index: 99;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
 </style>
 
 <script>
diff -r ef388dcbb946 -r bb47531bdd22 client/src/components/map/fairway/Infobar.vue
--- a/client/src/components/map/fairway/Infobar.vue	Mon Dec 03 09:28:28 2018 +0100
+++ b/client/src/components/map/fairway/Infobar.vue	Mon Dec 03 10:19:59 2018 +0100
@@ -24,12 +24,15 @@
   </div>
 </template>
 
-<style lang="sass" scoped>
-.infobar
-  height: $icon-height + 0.2rem
-  z-index: 2
-  svg path
-    fill: #666
+<style lang="scss" scoped>
+.infobar {
+  height: 2.2rem;
+  z-index: 2;
+}
+
+.infobar svg path {
+  fill: #666;
+}
 </style>
 
 <script>
diff -r ef388dcbb946 -r bb47531bdd22 client/src/components/map/fairway/Profiles.vue
--- a/client/src/components/map/fairway/Profiles.vue	Mon Dec 03 09:28:28 2018 +0100
+++ b/client/src/components/map/fairway/Profiles.vue	Mon Dec 03 10:19:59 2018 +0100
@@ -172,28 +172,30 @@
   </div>
 </template>
 
-<style lang="sass" scoped>
-  .loading
-    background: rgba(255, 255, 255, 0.9)
-    position: absolute
-    z-index: 99
-    top: 0
-    right: 0
-    bottom: 0
-    left: 0
+<style lang="scss" scoped>
+.loading {
+  background: rgba(255, 255, 255, 0.9);
+  position: absolute;
+  z-index: 99;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
 
-  .input-button-right
-    border-top-right-radius: $border-radius
-    border-bottom-right-radius: $border-radius
-    border-top-left-radius: 0 !important
-    border-bottom-left-radius: 0 !important
+.input-button-right {
+  border-top-right-radius: $border-radius;
+  border-bottom-right-radius: $border-radius;
+  border-top-left-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+}
 
-  .rounded-left-only
-    border-top-right-radius: 0 !important
-    border-bottom-right-radius: 0 !important
-    border-top-left-radius: $border-radius
-    border-bottom-left-radius: $border-radius
-
+.rounded-left-only {
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+  border-top-left-radius: $border-radius;
+  border-bottom-left-radius: $border-radius;
+}
 </style>
 
 <script>
diff -r ef388dcbb946 -r bb47531bdd22 client/src/components/map/layers/Layerselect.vue
--- a/client/src/components/map/layers/Layerselect.vue	Mon Dec 03 09:28:28 2018 +0100
+++ b/client/src/components/map/layers/Layerselect.vue	Mon Dec 03 10:19:59 2018 +0100
@@ -17,12 +17,13 @@
   </div>
 </template>
 
-<style lang="sass" scoped>
-.selection
-  text-align: left
-
-.layername
-  margin-left: $small-offset
+<style lang="scss" scoped>
+.selection {
+  text-align: left;
+}
+.layername {
+  margin-left: $small-offset;
+}
 </style>
 
 
diff -r ef388dcbb946 -r bb47531bdd22 client/src/components/map/layers/LegendElement.vue
--- a/client/src/components/map/layers/LegendElement.vue	Mon Dec 03 09:28:28 2018 +0100
+++ b/client/src/components/map/layers/LegendElement.vue	Mon Dec 03 10:19:59 2018 +0100
@@ -116,8 +116,9 @@
 };
 </script>
 
-<style lang="sass" scoped>
-.legendelement
-  max-height: 1.5rem
-  width: 2rem
+<style lang="scss" scoped>
+.legendelement {
+  max-height: 1.5rem;
+  width: 2rem;
+}
 </style>
diff -r ef388dcbb946 -r bb47531bdd22 client/src/components/map/toolbar/Toolbar.vue
--- a/client/src/components/map/toolbar/Toolbar.vue	Mon Dec 03 09:28:28 2018 +0100
+++ b/client/src/components/map/toolbar/Toolbar.vue	Mon Dec 03 10:19:59 2018 +0100
@@ -1,72 +1,90 @@
 <template>
   <div class="ml-2">
     <div :class="'rounded-top toolbar toolbar-' + (expandToolbar ? 'expanded' : 'collapsed')">
-        <Identify></Identify>
-        <Layers></Layers>
-        <Profiles></Profiles>
-        <Linetool></Linetool>
-        <Polygontool></Polygontool>
-        <Pdftool></Pdftool>
+      <Identify></Identify>
+      <Layers></Layers>
+      <Profiles></Profiles>
+      <Linetool></Linetool>
+      <Polygontool></Polygontool>
+      <Pdftool></Pdftool>
     </div>
-    <div @click="$store.commit('application/expandToolbar', !expandToolbar)" class="toolbar-button toolbar-toggle rounded-bottom bg-info text-white">
-        <font-awesome-icon :icon="expandToolbar ? 'angle-up' : 'angle-down'"></font-awesome-icon>
+    <div
+      @click="$store.commit('application/expandToolbar', !expandToolbar)"
+      class="toolbar-button toolbar-toggle rounded-bottom bg-info text-white"
+    >
+      <font-awesome-icon :icon="expandToolbar ? 'angle-up' : 'angle-down'"></font-awesome-icon>
     </div>
   </div>
 </template>
 
-<style lang="sass">
+<style lang="scss">
 // not scoped to affect nested components
 // doen't work when put in application/assets/application.sass... why??? o_O
-.toolbar
-  box-shadow: $shadow-xs
-  overflow: hidden
-  transition: max-height 0.4s
-  margin-bottom: auto
+.toolbar {
+  box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2);
+  overflow: hidden;
+  transition: max-height 0.4s;
+  margin-bottom: auto;
+}
+
+.toolbar-collapsed {
+  max-height: 6rem;
+}
+
+.toolbar-expanded {
+  max-height: 100%;
+}
 
-.toolbar-collapsed
-  max-height: 3 * $icon-height
-
-.toolbar-expanded
-  max-height: 100%
+.toolbar-button {
+  opacity: 0.96;
+  color: #666;
+  height: 2rem;
+  width: 2rem;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  background: #fff;
+  border-bottom: 1px solid #dee2e6;
+  z-index: 2;
+  pointer-events: auto;
+  position: relative;
+  overflow: hidden;
+}
 
-.toolbar-button
-  opacity: $slight-transparent
-  color: #666
-  height: $icon-width
-  width: $icon-height
-  align-items: center
-  justify-content: center
-  display: flex
-  background: #fff
-  border-bottom: 1px solid #dee2e6
-  z-index: 2
-  pointer-events: auto
-  position: relative
-  overflow: hidden
-  &:last-child
-    border-bottom: none
-  .inverted
-    color: $color-info
-  .grey
-    color: #ddd
-  .indicator
-    color: #fff
-    background: $color-info
-    position: absolute
-    bottom: -14px
-    left: -14px
-    padding: 2px 4px 1px
-    font-size: 11px
-    line-height: 11px
-    border-top-right-radius: $border-radius
-    transition: bottom 0.3s, left 0.3s
-    &.show
-      left: 0
-      bottom: 0
+.toolbar-button:last-child {
+  border-bottom: none;
+}
+
+.toolbar-button .inverted {
+  color: #17a2b8;
+}
+
+.toolbar-button .grey {
+  color: #ddd;
+}
 
-.toolbar-toggle
-  height: 1.2rem
-  border-bottom: none
+.toolbar-button .indicator {
+  color: #fff;
+  background: #17a2b8;
+  position: absolute;
+  bottom: -14px;
+  left: -14px;
+  padding: 2px 4px 1px;
+  font-size: 11px;
+  line-height: 11px;
+  border-top-right-radius: 0.25rem;
+  transition: bottom 0.3s, left 0.3s;
+}
+
+.toolbar-button .indicator.show {
+  left: 0;
+  bottom: 0;
+}
+
+.toolbar-toggle {
+  height: 1.2rem;
+  border-bottom: none;
+}
 </style>
 
 <script>