OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

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
pull/21833/head
J. Ryan Stinnett 2019-06-21 13:48:20 +01:00
parent 3bd247ebaa
commit 80d73d8430
1 changed files with 30 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
res/css/views/elements/_InteractiveTooltip.scss
View File

@ -55,6 +55,21 @@ limitations under the License.
border-right: 8px solid transparent; 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 { .mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_bottom {
bottom: 10px; // 8px chevron + 2px spacing bottom: 10px; // 8px chevron + 2px spacing
} }
@ -69,3 +84,18 @@ limitations under the License.
border-top: 8px solid $interactive-tooltip-bg-color; border-top: 8px solid $interactive-tooltip-bg-color;
border-right: 8px solid transparent; 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
}
}