From 2b98e4dbc93124098be1e1b55cf374a0f5946879 Mon Sep 17 00:00:00 2001
From: Xaver Maierhofer <xaver.maierhofer@xwissen.info>
Date: Sun, 29 May 2016 20:11:05 +0200
Subject: [PATCH] [TASK] Mobile optimization

---
 .sass-lint.yml                   |  3 +++
 scss/modules/_base.scss          |  1 +
 scss/modules/_leaflet-layer.scss | 37 ++++++++++++++++++++------------
 scss/modules/_map.scss           |  3 ++-
 scss/modules/_tabs.scss          |  4 ++--
 5 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/.sass-lint.yml b/.sass-lint.yml
index 4609bc4..29b9e9a 100644
--- a/.sass-lint.yml
+++ b/.sass-lint.yml
@@ -1,3 +1,6 @@
 rules:
   no-color-literals: 0
   single-line-per-selector: 0
+  # Allow for new prefixes like -webkit-tap-highlight-color or antialiasing
+  # Can maybe be enabled again with sass-lint 1.8 https://github.com/sasstools/sass-lint/pull/709
+  no-vendor-prefixes: 0
diff --git a/scss/modules/_base.scss b/scss/modules/_base.scss
index f7c4817..081cca3 100644
--- a/scss/modules/_base.scss
+++ b/scss/modules/_base.scss
@@ -1,4 +1,5 @@
 body {
+  -webkit-tap-highlight-color: transparent;
   background: $color-white;
   color: $color-black;
   font-family: $font-family;
diff --git a/scss/modules/_leaflet-layer.scss b/scss/modules/_leaflet-layer.scss
index 26e554f..7e8a806 100644
--- a/scss/modules/_leaflet-layer.scss
+++ b/scss/modules/_leaflet-layer.scss
@@ -1,21 +1,30 @@
 .leaflet-control-layers {
-  background: none;
-  border-radius: 0;
-  box-shadow: none;
+  &.leaflet-control {
+    background: transparent;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    margin: 0;
+    opacity: .7;
+  }
 }
 
-.leaflet-control-layers-toggle {
-  background: none;
+.leaflet-control-container {
+  .leaflet-control-layers-toggle {
+    background: none;
+    height: auto;
+    width: auto;
 
-  &::before {
-    color: $color-primary;
-    content: '\f229';
-    display: inline-block;
-    font-family: $font-family-icons;
-    font-size: 2.3rem;
-    line-height: 1;
-    speak: none;
-    text-rendering: auto;
+    &::before {
+      color: $color-primary;
+      content: '\f229';
+      display: inline-block;
+      font-family: $font-family-icons;
+      font-size: 2.3rem;
+      line-height: 1;
+      speak: none;
+      text-rendering: auto;
+    }
   }
 }
 
diff --git a/scss/modules/_map.scss b/scss/modules/_map.scss
index 1e4d450..072e483 100644
--- a/scss/modules/_map.scss
+++ b/scss/modules/_map.scss
@@ -15,7 +15,8 @@
       margin-left: $buttondistance;
     }
     @media screen and (max-width: $minscreenwidth) {
-      right: 0;
+      right: -1rem;
+      top: 0;
       transform: scale(.8);
     }
   }
diff --git a/scss/modules/_tabs.scss b/scss/modules/_tabs.scss
index 31df303..8422700 100644
--- a/scss/modules/_tabs.scss
+++ b/scss/modules/_tabs.scss
@@ -10,13 +10,13 @@
   font-family: $font-family-secondary;
   list-style: none;
   margin: 0;
-  padding: 1em 0 0;
+  padding: 0;
 
   li {
     color: rgba($color-black, .5);
     cursor: pointer;
     flex: 1 1 auto;
-    padding: .5em .5em 1em;
+    padding: 1.3em .5em 1em;
     text-align: center;
     text-transform: uppercase;