paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-10-23 04:52:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

tooltips: Move tooltips styling to a dedicated .css file.

Browse Source 
We want to seperate the tooltips styling into a dedicated .css file for
general readability and decluttering of the zulip.css file.
This commit is contained in:
sayamsamal
2022-08-01 23:05:41 +05:30
committed by Tim Abbott
parent 0d373e574b
commit a93b95f158
3 changed files with 65 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
static/js/bundles/app.js
View File

@@ -28,6 +28,7 @@ import "spectrum-colorpicker/spectrum.css";
import "katex/dist/katex.css";
import "flatpickr/dist/flatpickr.css";
import "flatpickr/dist/plugins/confirmDate/confirmDate.css";
import "../../styles/tooltips.css";
import "../../styles/components.css";
import "../../styles/app_components.css";
import "../../styles/rendered_markdown.css";

64
static/styles/tooltips.css Normal file
View File

@@ -0,0 +1,64 @@
[data-tippy-root] {
/* Since tooltip elements are sometimes inside elements
* which have different font-family, we force font-family
* for tooltips here.
*/
font-family: "Source Sans 3", sans-serif !important;
word-wrap: break-word;
/* Affects all tippy tooltips not using any theme. */
.tippy-box:not([data-theme]) {
background-color: hsl(0, 0%, 12%);
&[data-placement^="top"] {
> .tippy-arrow {
&::before {
border-top-color: hsl(0, 0%, 12%);
}
}
}
&[data-placement^="bottom"] {
> .tippy-arrow {
&::before {
border-bottom-color: hsl(0, 0%, 12%);
}
}
}
&[data-placement^="left"] {
> .tippy-arrow {
&::before {
border-left-color: hsl(0, 0%, 12%);
}
}
}
&[data-placement^="right"] {
> .tippy-arrow {
&::before {
border-right-color: hsl(0, 0%, 12%);
}
}
}
}
.tippy-content {
font-size: 13px;
}
.tippy-arrow::before {
/* `.tippy-arrow:before` element sometimes
* inherits the height of the parent, we
* don't want any height here since we
* want it to remain an triangle.
* The bug was only found in Firefox.
*/
height: 0 !important;
}
/* If the text in the tooltips stretches to multiple lines,
* we want the lines to be left-indented and not right-indented
* by default.
*/
text-align: left;
}

65
static/styles/zulip.css
View File

@@ -82,71 +82,6 @@ pre {
font-family: "Source Code Pro", monospace;
}
[data-tippy-root] {
/* Since tooltip elements are sometimes inside elements
* which have different font-family, we force font-family
* for tooltips here.
*/
font-family: "Source Sans 3", sans-serif !important;
word-wrap: break-word;
/* Affects all tippy tooltips not using any theme. */
.tippy-box:not([data-theme]) {
background-color: hsl(0, 0%, 12%);
&[data-placement^="top"] {
> .tippy-arrow {
&::before {
border-top-color: hsl(0, 0%, 12%);
}
}
}
&[data-placement^="bottom"] {
> .tippy-arrow {
&::before {
border-bottom-color: hsl(0, 0%, 12%);
}
}
}
&[data-placement^="left"] {
> .tippy-arrow {
&::before {
border-left-color: hsl(0, 0%, 12%);
}
}
}
&[data-placement^="right"] {
> .tippy-arrow {
&::before {
border-right-color: hsl(0, 0%, 12%);
}
}
}
}
.tippy-content {
font-size: 13px;
}
.tippy-arrow::before {
/* `.tippy-arrow:before` element sometimes
* inherits the height of the parent, we
* don't want any height here since we
* want it to remain an triangle.
* The bug was only found in Firefox.
*/
height: 0 !important;
}
/* If the text in the tooltips stretches to multiple lines,
* we want the lines to be left-indented and not right-indented
* by default.
*/
text-align: left;
}
.no-select {
user-select: none;
}