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.
.__react_component_tooltip {
color: #fff;
background: #222;
border: 1px solid transparent;
&.place-top {
margin-top: -10px;
}
&.place-top::before {
border-top: 8px solid transparent;
}
&.place-top::after {
border-left: 8px solid transparent;
border-right: 8px solid transparent;
bottom: -6px;
left: 50%;
margin-left: -8px;
border-top-color: #222;
border-top-style: solid;
border-top-width: 6px;
}
&.place-bottom {
margin-top: 10px;
}
&.place-bottom::before {
border-bottom: 8px solid transparent;
}
&.place-bottom::after {
border-left: 8px solid transparent;
border-right: 8px solid transparent;
top: -6px;
left: 50%;
margin-left: -8px;
border-bottom-color: #222;
border-bottom-style: solid;
border-bottom-width: 6px;
}
&.place-left {
margin-left: -10px;
}
&.place-left::before {
border-left: 8px solid transparent;
}
&.place-left::after {
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
right: -6px;
top: 50%;
margin-top: -4px;
border-left-color: #222;
border-left-style: solid;
border-left-width: 6px;
}
&.place-right {
margin-left: 10px;
}
&.place-right::before {
border-right: 8px solid transparent;
}
&.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;
}
border-radius: 3px;
display: inline-block;
font-size: 13px;
left: -999em;
opacity: 0;
padding: 8px 21px;
position: fixed;
pointer-events: none;
transition: opacity 0.3s ease-out;
top: -999em;
visibility: hidden;
z-index: 999;
}
.__react_component_tooltip.allow_hover, .__react_component_tooltip.allow_click {
pointer-events: auto;
}
.__react_component_tooltip::before, .__react_component_tooltip::after {
content: "";
width: 0;
height: 0;
position: absolute;
}
.__react_component_tooltip.show {
opacity: 0.9;
margin-top: 0;
margin-left: 0;
visibility: visible;
}
.__react_component_tooltip.place-top::before {
border-left: 10px solid transparent;
border-right: 10px solid transparent;
bottom: -8px;
left: 50%;
margin-left: -10px;
}
.__react_component_tooltip.place-bottom::before {
border-left: 10px solid transparent;
border-right: 10px solid transparent;
top: -8px;
left: 50%;
margin-left: -10px;
}
.__react_component_tooltip.place-left::before {
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
right: -8px;
top: 50%;
margin-top: -5px;
}
.__react_component_tooltip.place-right::before {
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
left: -8px;
top: 50%;
margin-top: -5px;
}
.__react_component_tooltip .multi-line {
display: block;
padding: 2px 0;
text-align: center;
}