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

Tweak interactive tooltip to match design 

This tweaks the tooltip to match the color, spacing, etc. seen in the designs.

Part of https://github.com/vector-im/riot-web/issues/9753
Part of https://github.com/vector-im/riot-web/issues/9716
pull/21833/head
J. Ryan Stinnett 2019-06-21 11:41:19 +01:00
parent 32bf4588dd
commit 3bd247ebaa
3 changed files with 16 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -30,17 +30,18 @@ limitations under the License.
}
.mx_InteractiveTooltip {
border-radius: 4px;
box-shadow: 4px 4px 12px 0 $menu-box-shadow-color;
background-color: $menu-bg-color;
color: $primary-fg-color;
border-radius: 3px;
background-color: $interactive-tooltip-bg-color;
color: $interactive-tooltip-fg-color;
position: absolute;
font-size: 14px;
font-size: 10px;
font-weight: 600;
padding: 6px;
z-index: 5001;
}
.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_top {
top: 8px;
top: 10px; // 8px chevron + 2px spacing
}
.mx_InteractiveTooltip_chevron_top {
@ -50,24 +51,12 @@ limitations under the License.
width: 0;
height: 0;
border-left: 8px solid transparent;
border-bottom: 8px solid $menu-bg-color;
border-bottom: 8px solid $interactive-tooltip-bg-color;
border-right: 8px solid transparent;
}
.mx_InteractiveTooltip_chevron_top::after {
content: '';
width: 0;
height: 0;
border-left: 7px solid transparent;
border-bottom: 7px solid $menu-bg-color;
border-right: 7px solid transparent;
position: absolute;
left: -7px;
top: 1px;
}
.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_bottom {
bottom: 8px;
bottom: 10px; // 8px chevron + 2px spacing
}
.mx_InteractiveTooltip_chevron_bottom {
@ -77,18 +66,6 @@ limitations under the License.
width: 0;
height: 0;
border-left: 8px solid transparent;
border-top: 8px solid $menu-bg-color;
border-top: 8px solid $interactive-tooltip-bg-color;
border-right: 8px solid transparent;
}
.mx_InteractiveTooltip_chevron_bottom::after {
content: '';
width: 0;
height: 0;
border-left: 7px solid transparent;
border-top: 7px solid $menu-bg-color;
border-right: 7px solid transparent;
position: absolute;
left: -7px;
bottom: 1px;
}

3
res/themes/dark/css/_dark.scss
View File

@ -160,6 +160,9 @@ $reaction-row-button-selected-border-color: $accent-color;
$tooltip-timeline-bg-color: $tagpanel-bg-color;
$tooltip-timeline-fg-color: #ffffff;
$interactive-tooltip-bg-color: $base-color;
$interactive-tooltip-fg-color: #ffffff;
// ***** Mixins! *****
@define-mixin mx_DialogButton {

3
res/themes/light/css/_light.scss
View File

@ -272,6 +272,9 @@ $reaction-row-button-selected-border-color: $accent-color;
$tooltip-timeline-bg-color: $tagpanel-bg-color;
$tooltip-timeline-fg-color: #ffffff;
$interactive-tooltip-bg-color: #27303a;
$interactive-tooltip-fg-color: #ffffff;
// ***** Mixins! *****
@define-mixin mx_DialogButton {