|
/** |
|
* Stylesheet for a blog post entitled A Medium-like Popover Without Any Dependencies on |
|
* https://www.mayneweb.com/p/a-medium-like-popover-without-any-dependencies/ |
|
* |
|
* @auther Daveyon Mayne <[email protected]> |
|
*/ |
|
|
|
.ToolTipShare { |
|
position: absolute; |
|
visibility: hidden; |
|
z-index: 500; |
|
-webkit-transition: none; |
|
transition: none; |
|
top: 0; |
|
left: 0; |
|
} |
|
|
|
.ToolTipShare, .ToolTipShare__arrow { |
|
width: 8%; |
|
text-align: center; |
|
} |
|
|
|
.ToolTipShare--active { |
|
display: inline-block; |
|
visibility: visible; |
|
-webkit-transition: top 75ms ease-out,left 75ms ease-out; |
|
transition: top 75ms ease-out,left 75ms ease-out; |
|
-webkit-animation: pop-upwards 180ms forwards linear; |
|
animation: pop-upwards 180ms forwards linear; |
|
} |
|
|
|
.ToolTipShare__inner { |
|
position: relative; |
|
background-image: linear-gradient(to bottom,rgba(49,49,47,.99),#262625); |
|
background-repeat: repeat-x; |
|
-webkit-border-radius: 5px; |
|
border-radius: 5px; |
|
padding: 0 8px; |
|
} |
|
|
|
.ToolTipShare .ToolTipShare__arrow { |
|
position: absolute; |
|
bottom: -10px; |
|
margin-left: 40%; |
|
clip: rect(10px 20px 20px 0); |
|
} |
|
|
|
.ToolTipShare .ToolTipShare__arrow .ToolTipShare__arrow__span { |
|
display: block; |
|
width: 20px; |
|
height: 20px; |
|
background-color: #262625; |
|
-webkit-transform: rotate(45deg) scale(.5); |
|
transform: rotate(45deg) scale(.5); |
|
} |
|
|
|
.ToolTipShare__inner__buttons__item { |
|
background: transparent; |
|
border: none; |
|
outline: none; |
|
cursor: pointer; |
|
height: 44px; |
|
|
|
svg { |
|
fill: white; |
|
} |
|
} |
|
|
|
@-webkit-keyframes pop-upwards { |
|
0% { |
|
-webkit-transform: matrix(.97,0,0,1,0,12); |
|
transform: matrix(.97,0,0,1,0,12); |
|
opacity: 0 |
|
} |
|
|
|
20% { |
|
-webkit-transform: matrix(.99,0,0,1,0,2); |
|
transform: matrix(.99,0,0,1,0,2); |
|
opacity: .7 |
|
} |
|
|
|
40% { |
|
-webkit-transform: matrix(1,0,0,1,0,-1); |
|
transform: matrix(1,0,0,1,0,-1); |
|
opacity: 1 |
|
} |
|
|
|
70% { |
|
-webkit-transform: matrix(1,0,0,1,0,0); |
|
transform: matrix(1,0,0,1,0,0); |
|
opacity: 1 |
|
} |
|
|
|
100% { |
|
-webkit-transform: matrix(1,0,0,1,0,0); |
|
transform: matrix(1,0,0,1,0,0); |
|
opacity: 1 |
|
} |
|
} |
|
|
|
@keyframes pop-upwards { |
|
0% { |
|
-webkit-transform: matrix(.97,0,0,1,0,12); |
|
transform: matrix(.97,0,0,1,0,12); |
|
opacity: 0 |
|
} |
|
|
|
20% { |
|
-webkit-transform: matrix(.99,0,0,1,0,2); |
|
transform: matrix(.99,0,0,1,0,2); |
|
opacity: .7 |
|
} |
|
|
|
40% { |
|
-webkit-transform: matrix(1,0,0,1,0,-1); |
|
transform: matrix(1,0,0,1,0,-1); |
|
opacity: 1 |
|
} |
|
|
|
70% { |
|
-webkit-transform: matrix(1,0,0,1,0,0); |
|
transform: matrix(1,0,0,1,0,0); |
|
opacity: 1 |
|
} |
|
|
|
100% { |
|
-webkit-transform: matrix(1,0,0,1,0,0); |
|
transform: matrix(1,0,0,1,0,0); |
|
opacity: 1 |
|
} |
|
} |
