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

Extract tooltip styling to a shared class

Browse source 
We want to use the same styling with edited tooltip as well, so this extracts
the shared bits.
This commit is contained in:
J. Ryan Stinnett 2019-05-17 12:09:47 +01:00
parent 3da1f73ea4
commit 059988ff5c
6 changed files with 20 additions and 16 deletions
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 { .mx_Username_color8 {
color: $username-variant8-color; 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; 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 { .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; font-size: 8px;
padding: 6px; padding: 6px;
border: none;
border-radius: 3px;
.mx_Tooltip_chevron::after {
border-right-color: $reaction-row-button-tooltip-bg-color;
}
.mx_ReactionsRowButtonTooltip_reactedWith { .mx_ReactionsRowButtonTooltip_reactedWith {
opacity: 0.7; 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-hover-border-color: $header-panel-text-primary-color;
$reaction-row-button-selected-bg-color: #1f6954; $reaction-row-button-selected-bg-color: #1f6954;
$reaction-row-button-selected-border-color: $accent-color; $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! ***** // ***** 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-hover-border-color: $focus-bg-color;
$reaction-row-button-selected-bg-color: #e9fff9; $reaction-row-button-selected-bg-color: #e9fff9;
$reaction-row-button-selected-border-color: $accent-color; $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! ***** // ***** Mixins! *****

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

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