mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-22 01:26:13 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #1 from wenkeming/tooltips

Browse source 
support tooltip directions with placement property
This commit is contained in:
Kevin 2022-03-15 16:00:47 +08:00 • committed by GitHub
commit 82dbcb24a4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 168 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

172
scss/utilities/_tooltip.scss
View file

@ -11,6 +11,8 @@
cursor: help;
}
&[placement=top]::before,
&[placement=top]::after,
&::before,
&::after {
display: block;
@ -34,8 +36,8 @@
opacity: 0;
pointer-events: none;
}
// Caret
&[placement=top]::after,
&::after {
padding: 0;
transform: translate(-50%, 0rem);
@ -47,6 +49,49 @@
content: "";
color: var(--tooltip-background-color);
}
&[placement=bottom] {
&::before,
&::after {
top: 100%;
bottom: auto;
transform: translate(-50%, .25rem);
}
&:after{
transform: translate(-50%, -.3rem);
border: .3rem solid transparent;
border-bottom: .3rem solid;
}
}
&[placement=left] {
&::before,
&::after {
top: 50%;
right: 100%;
bottom: auto;
left: auto;
transform: translate(-.25rem, -50%);
}
&:after{
transform: translate(.3rem, -50%);
border: .3rem solid transparent;
border-left: .3rem solid;
}
}
&[placement=right] {
&::before,
&::after {
top: 50%;
right: auto;
bottom: auto;
left: 100%;
transform: translate(.25rem, -50%);
}
&:after{
transform: translate(-.3rem, -50%);
border: .3rem solid transparent;
border-right: .3rem solid;
}
}
// Display
&:focus,
@ -60,16 +105,60 @@
// Animations, excluding touch devices
@if $enable-transitions {
@media (hover: hover) and (pointer: fine) {
&[placement=bottom]:focus,
&[placement=bottom]:hover
&:focus,
&:hover {
&::before,
&::after {
animation-duration: .2s;
animation-name: slide;
animation-name: slide-top;
}
&::after {
animation-name: slideCaret;
animation-name: slideCaret-top;
}
}
&[placement=bottom] {
&:focus,
&:hover {
&::before,
&::after {
animation-duration: .2s;
animation-name: slide-bottom;
}
&::after {
animation-name: slideCaret-bottom;
}
}
}
&[placement=left] {
&:focus,
&:hover {
&::before,
&::after {
animation-duration: .2s;
animation-name: slide-left;
}
&::after {
animation-name: slideCaret-left;
}
}
}
&[placement=right] {
&:focus,
&:hover {
&::before,
&::after {
animation-duration: .2s;
animation-name: slide-right;
}
&::after {
animation-name: slideCaret-right;
}
}
}
}
@ -78,7 +167,7 @@
// Animations
@if $enable-transitions {
@keyframes slide {
@keyframes slide-top {
from {
transform: translate(-50%, .75rem);
opacity: 0;
@ -88,8 +177,7 @@
opacity: 1;
}
}
@keyframes slideCaret {
@keyframes slideCaret-top {
from {
opacity: 0;
}
@ -102,4 +190,76 @@
opacity: 1;
}
}
@keyframes slide-bottom {
from {
transform: translate(-50%, -.75rem);
opacity: 0;
}
to {
transform: translate(-50%, .25rem);
opacity: 1;
}
}
@keyframes slideCaret-bottom {
from {
opacity: 0;
}
50% {
transform: translate(-50%, -.5rem);
opacity: 0;
}
to {
transform: translate(-50%, -.3rem);
opacity: 1;
}
}
@keyframes slide-left {
from {
transform: translate(.75rem, -50%);
opacity: 0;
}
to {
transform: translate(-.25rem, -50%);
opacity: 1;
}
}
@keyframes slideCaret-left {
from {
opacity: 0;
}
50% {
transform: translate(.05rem, -50%);
opacity: 0;
}
to {
transform: translate(.3rem, -50%);
opacity: 1;
}
}
@keyframes slide-right {
from {
transform: translate(-.75rem, -50%);
opacity: 0;
}
to {
transform: translate(.25rem, -50%);
opacity: 1;
}
}
@keyframes slideCaret-right {
from {
opacity: 0;
}
50% {
transform: translate(-.05rem, -50%);
opacity: 0;
}
to {
transform: translate(-.3rem, -50%);
opacity: 1;
}
}
}