ash/WebStudio
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Change the style that react-tooltip forgets.

Browse source
This commit is contained in:
Matthew Stratford 2021-02-03 23:32:12 +00:00 committed by GitHub
parent 9cd7edc8ca
commit cd19d9ba6d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 60 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

131
src/App.scss
View file

@ -226,75 +226,64 @@ $number-of-channels: 3;
// Because react tooltip and empty show plans get very broken. // Because react tooltip and empty show plans get very broken.
.__react_component_tooltip { .__react_component_tooltip {
color: #fff; border-radius: 3px;
background: #222; display: inline-block;
border: 1px solid transparent; font-size: 13px;
left: -999em;
&.place-top { opacity: 0;
margin-top: -10px; padding: 8px 21px;
} position: fixed;
&.place-top::before { pointer-events: none;
border-top: 8px solid transparent; transition: opacity 0.3s ease-out;
} top: -999em;
&.place-top::after { visibility: hidden;
border-left: 8px solid transparent; z-index: 999;
border-right: 8px solid transparent; }
bottom: -6px; .__react_component_tooltip.allow_hover, .__react_component_tooltip.allow_click {
left: 50%; pointer-events: auto;
margin-left: -8px; }
border-top-color: #222; .__react_component_tooltip::before, .__react_component_tooltip::after {
border-top-style: solid; content: "";
border-top-width: 6px; width: 0;
} height: 0;
position: absolute;
&.place-bottom { }
margin-top: 10px; .__react_component_tooltip.show {
} opacity: 0.9;
&.place-bottom::before { margin-top: 0;
border-bottom: 8px solid transparent; margin-left: 0;
} visibility: visible;
&.place-bottom::after { }
border-left: 8px solid transparent; .__react_component_tooltip.place-top::before {
border-right: 8px solid transparent; border-left: 10px solid transparent;
top: -6px; border-right: 10px solid transparent;
left: 50%; bottom: -8px;
margin-left: -8px; left: 50%;
border-bottom-color: #222; margin-left: -10px;
border-bottom-style: solid; }
border-bottom-width: 6px; .__react_component_tooltip.place-bottom::before {
} border-left: 10px solid transparent;
border-right: 10px solid transparent;
&.place-left { top: -8px;
margin-left: -10px; left: 50%;
} margin-left: -10px;
&.place-left::before { }
border-left: 8px solid transparent; .__react_component_tooltip.place-left::before {
} border-top: 6px solid transparent;
&.place-left::after { border-bottom: 6px solid transparent;
border-top: 5px solid transparent; right: -8px;
border-bottom: 5px solid transparent; top: 50%;
right: -6px; margin-top: -5px;
top: 50%; }
margin-top: -4px; .__react_component_tooltip.place-right::before {
border-left-color: #222; border-top: 6px solid transparent;
border-left-style: solid; border-bottom: 6px solid transparent;
border-left-width: 6px; left: -8px;
} top: 50%;
margin-top: -5px;
&.place-right { }
margin-left: 10px; .__react_component_tooltip .multi-line {
} display: block;
&.place-right::before { padding: 2px 0;
border-right: 8px solid transparent; text-align: center;
}
&.place-right::after {
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
left: -6px;
top: 50%;
margin-top: -4px;
border-right-color: #222;
border-right-style: solid;
border-right-width: 6px;
}
} }