Weishen/Hydro
2
0 Fork 0
mirror of https://gitcode.com/gh_mirrors/hy/Hydro.git synced 2026-10-20 01:38:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

add ui

Browse Source
This commit is contained in:
masnn committed 2020-04-08 21:10:24 +08:00
1 parent 777a4bc927
commit 9c45527522
396 files changed
+13772
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

ui/components/tooltip/tooltip.page.styl
+69
View File
@@ -0,0 +1,69 @@
.tooltip
&.drop-element
pointer-events: none
.drop-content
transition: transform .1s ease-in-out
background: #333
color: #fff
font-size: rem($font-size-small)
padding: .7em 0.9em
max-width: rem(250px)
box-shadow: 1px 1px 4px rgba(#000, 0.3)
line-height: 1
position: relative
&:before
content: ''
display: block
position: absolute
width: 0
height: 0
border: rem(6px) solid transparent
pointer-events: none
&.drop-after-open
transition-delay: .4s
.drop-content
transition-delay: .4s
// Transitions
&.drop-element-attached-bottom.drop-element-attached-center .drop-content
transform: scale(0.9) translate(0, 5px) translateZ(0)
&.drop-element-attached-bottom.drop-element-attached-left .drop-content
transform: scale(0.9) translate(5px, 5px) translateZ(0)
&.drop-element-attached-bottom.drop-element-attached-right .drop-content
transform: scale(0.9) translate(-5px, 5px) translateZ(0)
&.drop-element-attached-top.drop-element-attached-center .drop-content
transform: scale(0.9) translate(0, -5px) translateZ(0)
&.drop-element-attached-top.drop-element-attached-left .drop-content
transform: scale(0.9) translate(5px, -5px) translateZ(0)
&.drop-element-attached-top.drop-element-attached-right .drop-content
transform: scale(0.9) translate(-5px, -5px) translateZ(0)
&.drop-after-open .drop-content
transform: scale(1) translateZ(0) !important
// Triangle Borders
&.drop-element-attached-bottom .drop-content
bottom: rem(10px)
&:before
border-top-color: #333
&.drop-element-attached-top .drop-content
top: rem(10px)
&:before
border-bottom-color: #333
// Triangle Positions
&.drop-element-attached-bottom .drop-content:before
bottom: rem(-12px)
&.drop-element-attached-top .drop-content:before
top: rem(-12px)
&.drop-element-attached-center .drop-content:before
margin-left: rem(-6px)
left: 50%
&.drop-element-attached-left .drop-content:before
left: 0
&.drop-element-attached-right .drop-content:before
right: 0