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

Extract tooltip styling to a shared class 

We want to use the same styling with edited tooltip as well, so this extracts
the shared bits.
pull/21833/head
J. Ryan Stinnett 2019-05-17 12:09:47 +01:00
parent 3da1f73ea4
commit 059988ff5c
6 changed files with 20 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
res/css/_common.scss
View File

@ -557,4 +557,3 @@ textarea {
.mx_Username_color8 {
color: $username-variant8-color;
}

13
res/css/views/elements/_Tooltip.scss
View File

@ -74,3 +74,16 @@ limitations under the License.
animation: mx_fadeout 0.1s forwards;
}
}
.mx_Tooltip_timeline {
box-shadow: none;
background-color: $tooltip-timeline-bg-color;
color: $tooltip-timeline-fg-color;
text-align: center;
border: none;
border-radius: 3px;
.mx_Tooltip_chevron::after {
border-right-color: $tooltip-timeline-bg-color;
}
}

10
res/css/views/messages/_ReactionsRowButtonTooltip.scss
View File

@ -15,18 +15,8 @@ limitations under the License.
*/
.mx_ReactionsRowButtonTooltip {
box-shadow: none;
background-color: $reaction-row-button-tooltip-bg-color;
color: $reaction-row-button-tooltip-fg-color;
text-align: center;
font-size: 8px;
padding: 6px;
border: none;
border-radius: 3px;
.mx_Tooltip_chevron::after {
border-right-color: $reaction-row-button-tooltip-bg-color;
}
.mx_ReactionsRowButtonTooltip_reactedWith {
opacity: 0.7;

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

@ -156,8 +156,9 @@ $reaction-row-button-border-color: #616b7f;
$reaction-row-button-hover-border-color: $header-panel-text-primary-color;
$reaction-row-button-selected-bg-color: #1f6954;
$reaction-row-button-selected-border-color: $accent-color;
$reaction-row-button-tooltip-bg-color: $tagpanel-bg-color;
$reaction-row-button-tooltip-fg-color: #ffffff;
$tooltip-timeline-bg-color: $tagpanel-bg-color;
$tooltip-timeline-fg-color: #ffffff;
// ***** Mixins! *****

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

@ -264,8 +264,9 @@ $reaction-row-button-border-color: #e9edf1;
$reaction-row-button-hover-border-color: $focus-bg-color;
$reaction-row-button-selected-bg-color: #e9fff9;
$reaction-row-button-selected-border-color: $accent-color;
$reaction-row-button-tooltip-bg-color: $tagpanel-bg-color;
$reaction-row-button-tooltip-fg-color: #ffffff;
$tooltip-timeline-bg-color: $tagpanel-bg-color;
$tooltip-timeline-fg-color: #ffffff;
// ***** Mixins! *****

2
src/components/views/messages/ReactionsRowButtonTooltip.js
View File

@ -69,7 +69,7 @@ export default class ReactionsRowButtonTooltip extends React.PureComponent {
let tooltip;
if (tooltipLabel) {
tooltip = <Tooltip
tooltipClassName="mx_ReactionsRowButtonTooltip"
tooltipClassName="mx_ReactionsRowButtonTooltip mx_Tooltip_timeline"
visible={visible}
label={tooltipLabel}
/>;