Opening popovers on the bottom for coarse pointer (i.e. fingers)

MaxArt2501 · Jun 4, 2017 · 1805a57 · 1805a57
1 parent a8337f6
commit 1805a57
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 24 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 {