From 80d73d84308411638681da11342c6c3d88c6f3e6 Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Fri, 21 Jun 2019 13:48:20 +0100
Subject: [PATCH] Add optional rounded chevron for tooltip

We'd like to have a rounded point on the chevron for an extra level of polish.
This implements that look for browsers that support `clip-path`.

Part of https://github.com/vector-im/riot-web/issues/9716
---
 .../views/elements/_InteractiveTooltip.scss   | 30 +++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/res/css/views/elements/_InteractiveTooltip.scss b/res/css/views/elements/_InteractiveTooltip.scss
index a949941dd8..a3f5b6edc2 100644
--- a/res/css/views/elements/_InteractiveTooltip.scss
+++ b/res/css/views/elements/_InteractiveTooltip.scss
@@ -55,6 +55,21 @@ limitations under the License.
     border-right: 8px solid transparent;
 }
 
+// Adapted from https://codyhouse.co/blog/post/css-rounded-triangles-with-clip-path
+// by Sebastiano Guerriero (@guerriero_se)
+@supports (clip-path: polygon(0% 0%, 100% 100%, 0% 100%)) {
+    .mx_InteractiveTooltip_chevron_top {
+        height: 16px;
+        width: 16px;
+        background-color: inherit;
+        border: none;
+        clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
+        transform: rotate(135deg);
+        border-radius: 0 0 0 3px;
+        top: calc(-8px / 1.414); // sqrt(2) because of rotation
+    }
+}
+
 .mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_bottom {
     bottom: 10px; // 8px chevron + 2px spacing
 }
@@ -69,3 +84,18 @@ limitations under the License.
     border-top: 8px solid $interactive-tooltip-bg-color;
     border-right: 8px solid transparent;
 }
+
+// Adapted from https://codyhouse.co/blog/post/css-rounded-triangles-with-clip-path
+// by Sebastiano Guerriero (@guerriero_se)
+@supports (clip-path: polygon(0% 0%, 100% 100%, 0% 100%)) {
+    .mx_InteractiveTooltip_chevron_bottom {
+        height: 16px;
+        width: 16px;
+        background-color: inherit;
+        border: none;
+        clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
+        transform: rotate(-45deg);
+        border-radius: 0 0 0 3px;
+        bottom: calc(-8px / 1.414); // sqrt(2) because of rotation
+    }
+}