From 1805a574ef474cbe40c2224cbbb16a0012c84316 Mon Sep 17 00:00:00 2001
From: Massimo Artizzu <maxart.x@gmail.com>
Date: Sun, 4 Jun 2017 19:21:53 +0200
Subject: [PATCH] Opening popovers on the bottom for coarse pointer (i.e.
 fingers)

---
 style/less/mixins.less     | 15 +++++++++++++++
 style/less/share-this.less | 17 +++++------------
 style/scss/_mixins.scss    | 15 +++++++++++++++
 style/scss/share-this.scss | 17 +++++------------
 4 files changed, 40 insertions(+), 24 deletions(-)

diff --git a/style/less/mixins.less b/style/less/mixins.less
index 347a7e1..3156dd6 100644
--- a/style/less/mixins.less
+++ b/style/less/mixins.less
@@ -11,3 +11,18 @@
     -webkit-filter: @filter;
             filter: @filter;
 }
+
+.share-this-on-bottom() {
+    &::before {
+        bottom: auto;
+        top: 100%;
+        border-width: 0 @share-this-arrow-size @share-this-arrow-size;
+        margin-top: 0;
+    }
+
+    > ul {
+        top: 100%;
+        transform: translateX(-50%);
+        margin: @share-this-arrow-size 0 0;
+    }
+}
diff --git a/style/less/share-this.less b/style/less/share-this.less
index d841b8e..4f6ae08 100644
--- a/style/less/share-this.less
+++ b/style/less/share-this.less
@@ -55,32 +55,25 @@
         }
     }
 
+    @media (pointer: coarse) {
+        font-size: 150%;
+        .share-this-on-bottom();
+    }
     @media (max-width: @share-this-small-devices-max) {
         left: 0 !important;
         right: 0 !important;
         width: auto !important;
         max-width: none;
-
-        &::before {
-            bottom: auto;
-            top: 100%;
-            border-width: 0 @share-this-arrow-size @share-this-arrow-size;
-            margin-top: 0;
-        }
+        .share-this-on-bottom();
 
         > ul {
             left: 0;
-            top: 100%;
             width: 100%;
             transform: none;
-            margin: @share-this-arrow-size 0 0;
             border-radius: 0;
             text-align: center;
         }
     }
-    @media (pointer: coarse) {
-        font-size: 150%;
-    }
 }
 
 @-webkit-keyframes share-this-intro {
diff --git a/style/scss/_mixins.scss b/style/scss/_mixins.scss
index 094464d..e751463 100644
--- a/style/scss/_mixins.scss
+++ b/style/scss/_mixins.scss
@@ -11,3 +11,18 @@
     -webkit-filter: $filter;
             filter: $filter;
 }
+
+@mixin share-this-on-bottom() {
+    &::before {
+        bottom: auto;
+        top: 100%;
+        border-width: 0 $share-this-arrow-size $share-this-arrow-size;
+        margin-top: 0;
+    }
+
+    > ul {
+        top: 100%;
+        transform: translateX(-50%);
+        margin: $share-this-arrow-size 0 0;
+    }
+}
diff --git a/style/scss/share-this.scss b/style/scss/share-this.scss
index ee2ccb1..6c6e276 100644
--- a/style/scss/share-this.scss
+++ b/style/scss/share-this.scss
@@ -55,32 +55,25 @@
         }
     }
 
+    @media (pointer: coarse) {
+        font-size: 150%;
+        @include share-this-on-bottom();
+    }
     @media (max-width: $share-this-small-devices-max) {
         left: 0 !important;
         right: 0 !important;
         width: auto !important;
         max-width: none;
-
-        &::before {
-            bottom: auto;
-            top: 100%;
-            border-width: 0 $share-this-arrow-size $share-this-arrow-size;
-            margin-top: 0;
-        }
+        @include share-this-on-bottom();
 
         > ul {
             left: 0;
-            top: 100%;
             width: 100%;
             transform: none;
-            margin: $share-this-arrow-size 0 0;
             border-radius: 0;
             text-align: center;
         }
     }
-    @media (pointer: coarse) {
-        font-size: 150%;
-    }
 }
 
 @-webkit-keyframes share-this-intro {