imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Tweak interactive tooltip to match design

Browse source 
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
This commit is contained in:
J. Ryan Stinnett 2019-06-21 11:41:19 +01:00
parent 32bf4588dd
commit 3bd247ebaa
3 changed files with 16 additions and 33 deletions
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 { .mx_InteractiveTooltip {
border-radius: 4px; border-radius: 3px;
box-shadow: 4px 4px 12px 0 $menu-box-shadow-color; background-color: $interactive-tooltip-bg-color;
background-color: $menu-bg-color; color: $interactive-tooltip-fg-color;
color: $primary-fg-color;
position: absolute; position: absolute;
font-size: 14px; font-size: 10px;
font-weight: 600;
padding: 6px;
z-index: 5001; z-index: 5001;
} }
.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_top { .mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_top {
top: 8px; top: 10px; // 8px chevron + 2px spacing
} }
.mx_InteractiveTooltip_chevron_top { .mx_InteractiveTooltip_chevron_top {
@ -50,24 +51,12 @@ limitations under the License.
width: 0; width: 0;
height: 0; height: 0;
border-left: 8px solid transparent; 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; 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 { .mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_bottom {
bottom: 8px; bottom: 10px; // 8px chevron + 2px spacing
} }
.mx_InteractiveTooltip_chevron_bottom { .mx_InteractiveTooltip_chevron_bottom {
@ -77,18 +66,6 @@ limitations under the License.
width: 0; width: 0;
height: 0; height: 0;
border-left: 8px solid transparent; 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; 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-bg-color: $tagpanel-bg-color;
$tooltip-timeline-fg-color: #ffffff; $tooltip-timeline-fg-color: #ffffff;
$interactive-tooltip-bg-color: $base-color;
$interactive-tooltip-fg-color: #ffffff;
// ***** Mixins! ***** // ***** Mixins! *****
@define-mixin mx_DialogButton { @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-bg-color: $tagpanel-bg-color;
$tooltip-timeline-fg-color: #ffffff; $tooltip-timeline-fg-color: #ffffff;
$interactive-tooltip-bg-color: #27303a;
$interactive-tooltip-fg-color: #ffffff;
// ***** Mixins! ***** // ***** Mixins! *****
@define-mixin mx_DialogButton { @define-mixin mx_DialogButton {