mirror of
https://github.com/explosion/spaCy.git
synced 2024-11-14 05:37:03 +03:00
Add tooltips component
This commit is contained in:
parent
8a415fc402
commit
841ad29f61
29
website/assets/css/_components/_tooltips.sass
Normal file
29
website/assets/css/_components/_tooltips.sass
Normal file
|
@ -0,0 +1,29 @@
|
||||||
|
//- 💫 CSS > COMPONENTS > TOOLTIPS
|
||||||
|
|
||||||
|
[data-tooltip]
|
||||||
|
position: relative
|
||||||
|
|
||||||
|
@include breakpoint(min, sm)
|
||||||
|
&:before
|
||||||
|
@include position(absolute, top, left, 125%, 50%)
|
||||||
|
display: inline-block
|
||||||
|
content: attr(data-tooltip)
|
||||||
|
background: $color-front
|
||||||
|
border-radius: 2px
|
||||||
|
color: $color-back
|
||||||
|
font-family: inherit
|
||||||
|
font-size: 1.3rem
|
||||||
|
line-height: 1.25
|
||||||
|
opacity: 0
|
||||||
|
padding: 0.5em 0.75em
|
||||||
|
transform: translateX(-50%) translateY(-2px)
|
||||||
|
transition: opacity 0.1s ease-out, transform 0.1s ease-out
|
||||||
|
visibility: hidden
|
||||||
|
min-width: 200px
|
||||||
|
max-width: 300px
|
||||||
|
z-index: 200
|
||||||
|
|
||||||
|
&:hover:before
|
||||||
|
opacity: 1
|
||||||
|
transform: translateX(-50%) translateY(0)
|
||||||
|
visibility: visible
|
|
@ -32,3 +32,4 @@ $theme: blue !default
|
||||||
@import _components/navigation
|
@import _components/navigation
|
||||||
@import _components/sidebar
|
@import _components/sidebar
|
||||||
@import _components/tables
|
@import _components/tables
|
||||||
|
@import _components/tooltips
|
||||||
|
|
Loading…
Reference in New Issue
Block a user