tyler.durden
/
opensupports
mirror of https://github.com/opensupports/opensupports.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Ivan - Improve tooltip styling and animation [skip ci]

This commit is contained in:
ivan 2016-12-21 18:33:10 -03:00
parent 488633b0c2
commit 750251311c
2 changed files with 7 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/core-components/tooltip.js
View File

@ -28,7 +28,7 @@ class Tooltip extends React.Component {
renderAnimatedMessage() { renderAnimatedMessage() {
return ( return (
<Motion defaultStyle={{opacity: 0}} style={{opacity: spring(1)}}> <Motion defaultStyle={{opacity: 0, top: -30}} style={{opacity: spring(1), top: spring(0)}}>
{this.renderMessage.bind(this)} {this.renderMessage.bind(this)}
</Motion> </Motion>
) )
@ -36,7 +36,7 @@ class Tooltip extends React.Component {
renderMessage(animation) { renderMessage(animation) {
return ( return (
<div style={animation}> <div className="tooltip__animated-container" style={animation}>
<span className="tooltip__pointer-shadow"/> <span className="tooltip__pointer-shadow"/>
<span className="tooltip__pointer"/> <span className="tooltip__pointer"/>
<div className="tooltip__message"> <div className="tooltip__message">

7
client/src/core-components/tooltip.scss
View File

@ -8,12 +8,15 @@
cursor: default; cursor: default;
} }
&__animated-container {
position: relative;
}
&__message { &__message {
position: absolute; position: absolute;
bottom: 100%; bottom: 100%;
left: -25%;
margin-bottom: 15px; margin-bottom: 15px;
margin-left: -10px; margin-left: -15px;
border: 0 solid rgba(0, 0, 0, 0.247059); border: 0 solid rgba(0, 0, 0, 0.247059);
box-shadow: rgba(0, 0, 0, 0.247059) 0 -1px 4px; box-shadow: rgba(0, 0, 0, 0.247059) 0 -1px 4px;
border-radius: 4px; border-radius: 4px;