mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-27 11:36:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: support directions with data-placement

Browse source
This commit is contained in:
Kevin 2022-06-21 17:23:16 +08:00
parent c938c618ba
commit 8489f6a81a
1 changed files with 27 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

54
scss/utilities/_tooltip.scss
View file

@ -11,8 +11,8 @@
cursor: help; cursor: help;
} }
&[placement=top]::before, &[data-placement=top]::before,
&[placement=top]::after, &[data-placement=top]::after,
&::before, &::before,
&::after { &::after {
display: block; display: block;
@ -37,7 +37,7 @@
pointer-events: none; pointer-events: none;
} }
// Caret // Caret
&[placement=top]::after, &[data-placement=top]::after,
&::after { &::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
@ -49,7 +49,7 @@
content: ""; content: "";
color: var(--tooltip-background-color); color: var(--tooltip-background-color);
} }
&[placement=bottom] { &[data-placement=bottom] {
&::before, &::before,
&::after { &::after {
top: 100%; top: 100%;
@ -62,7 +62,7 @@
border-bottom: .3rem solid; border-bottom: .3rem solid;
} }
} }
&[placement=left] { &[data-placement=left] {
&::before, &::before,
&::after { &::after {
top: 50%; top: 50%;
@ -77,7 +77,7 @@
border-left: .3rem solid; border-left: .3rem solid;
} }
} }
&[placement=right] { &[data-placement=right] {
&::before, &::before,
&::after { &::after {
top: 50%; top: 50%;
@ -105,59 +105,59 @@
// Animations, excluding touch devices // Animations, excluding touch devices
@if $enable-transitions { @if $enable-transitions {
@media (hover: hover) and (pointer: fine) { @media (hover: hover) and (pointer: fine) {
&[placement=bottom]:focus, &[data-placement=bottom]:focus,
&[placement=bottom]:hover &[data-placement=bottom]:hover
&:focus, &:focus,
&:hover { &:hover {
&::before, &::before,
&::after { &::after {
animation-duration: .2s; animation-duration: .2s;
animation-name: slide-top; animation-name: tooltip-slide-top;
} }
&::after { &::after {
animation-name: slideCaret-top; animation-name: tooltip-caret-slide-top;
} }
} }
&[placement=bottom] { &[data-placement=bottom] {
&:focus, &:focus,
&:hover { &:hover {
&::before, &::before,
&::after { &::after {
animation-duration: .2s; animation-duration: .2s;
animation-name: slide-bottom; animation-name: tooltip-slide-bottom;
} }
&::after { &::after {
animation-name: slideCaret-bottom; animation-name: tooltip-caret-slide-bottom;
} }
} }
} }
&[placement=left] { &[data-placement=left] {
&:focus, &:focus,
&:hover { &:hover {
&::before, &::before,
&::after { &::after {
animation-duration: .2s; animation-duration: .2s;
animation-name: slide-left; animation-name: tooltip-slide-left;
} }
&::after { &::after {
animation-name: slideCaret-left; animation-name: tooltip-caret-slide-left;
} }
} }
} }
&[placement=right] { &[data-placement=right] {
&:focus, &:focus,
&:hover { &:hover {
&::before, &::before,
&::after { &::after {
animation-duration: .2s; animation-duration: .2s;
animation-name: slide-right; animation-name: tooltip-slide-right;
} }
&::after { &::after {
animation-name: slideCaret-right; animation-name: tooltip-caret-slide-right;
} }
} }
} }
@ -167,7 +167,7 @@
// Animations // Animations
@if $enable-transitions { @if $enable-transitions {
@keyframes slide-top { @keyframes tooltip-slide-top {
from { from {
transform: translate(-50%, .75rem); transform: translate(-50%, .75rem);
opacity: 0; opacity: 0;
@ -177,7 +177,7 @@
opacity: 1; opacity: 1;
} }
} }
@keyframes slideCaret-top { @keyframes tooltip-caret-slide-top {
from { from {
opacity: 0; opacity: 0;
} }
@ -191,7 +191,7 @@
} }
} }
@keyframes slide-bottom { @keyframes tooltip-slide-bottom {
from { from {
transform: translate(-50%, -.75rem); transform: translate(-50%, -.75rem);
opacity: 0; opacity: 0;
@ -201,7 +201,7 @@
opacity: 1; opacity: 1;
} }
} }
@keyframes slideCaret-bottom { @keyframes tooltip-caret-slide-bottom {
from { from {
opacity: 0; opacity: 0;
} }
@ -215,7 +215,7 @@
} }
} }
@keyframes slide-left { @keyframes tooltip-slide-left {
from { from {
transform: translate(.75rem, -50%); transform: translate(.75rem, -50%);
opacity: 0; opacity: 0;
@ -225,7 +225,7 @@
opacity: 1; opacity: 1;
} }
} }
@keyframes slideCaret-left { @keyframes tooltip-caret-slide-left {
from { from {
opacity: 0; opacity: 0;
} }
@ -239,7 +239,7 @@
} }
} }
@keyframes slide-right { @keyframes tooltip-slide-right {
from { from {
transform: translate(-.75rem, -50%); transform: translate(-.75rem, -50%);
opacity: 0; opacity: 0;
@ -249,7 +249,7 @@
opacity: 1; opacity: 1;
} }
} }
@keyframes slideCaret-right { @keyframes tooltip-caret-slide-right {
from { from {
opacity: 0; opacity: 0;
} }