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

refactor: format tooltip

Browse source
This commit is contained in:
Lucas Larroche 2022-09-11 14:59:43 +07:00
parent e33f67e39c
commit ca40486965
10 changed files with 124 additions and 114 deletions
Download patch file Download diff file Expand all files Collapse all files

3
css/pico.classless.css
View file

@ -2382,7 +2382,6 @@ a[aria-busy=true] {
animation-name: tooltip-caret-slide-right; animation-name: tooltip-caret-slide-right;
} }
} }
@-webkit-keyframes tooltip-slide-top { @-webkit-keyframes tooltip-slide-top {
from { from {
transform: translate(-50%, 0.75rem); transform: translate(-50%, 0.75rem);
@ -2393,7 +2392,6 @@ a[aria-busy=true] {
opacity: 1; opacity: 1;
} }
} }
@keyframes tooltip-slide-top { @keyframes tooltip-slide-top {
from { from {
transform: translate(-50%, 0.75rem); transform: translate(-50%, 0.75rem);
@ -2568,6 +2566,7 @@ a[aria-busy=true] {
opacity: 1; opacity: 1;
} }
} }
/** /**
* Accessibility & User interaction * Accessibility & User interaction
*/ */

2
css/pico.classless.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.classless.min.css.map
View file

File diff suppressed because one or more lines are too long

3
css/pico.css
View file

@ -2580,7 +2580,6 @@ a[aria-busy=true] {
animation-name: tooltip-caret-slide-right; animation-name: tooltip-caret-slide-right;
} }
} }
@-webkit-keyframes tooltip-slide-top { @-webkit-keyframes tooltip-slide-top {
from { from {
transform: translate(-50%, 0.75rem); transform: translate(-50%, 0.75rem);
@ -2591,7 +2590,6 @@ a[aria-busy=true] {
opacity: 1; opacity: 1;
} }
} }
@keyframes tooltip-slide-top { @keyframes tooltip-slide-top {
from { from {
transform: translate(-50%, 0.75rem); transform: translate(-50%, 0.75rem);
@ -2766,6 +2764,7 @@ a[aria-busy=true] {
opacity: 1; opacity: 1;
} }
} }
/** /**
* Accessibility & User interaction * Accessibility & User interaction
*/ */

2
css/pico.css.map
View file

File diff suppressed because one or more lines are too long

3
css/pico.fluid.classless.css
View file

@ -2352,7 +2352,6 @@ a[aria-busy=true] {
animation-name: tooltip-caret-slide-right; animation-name: tooltip-caret-slide-right;
} }
} }
@-webkit-keyframes tooltip-slide-top { @-webkit-keyframes tooltip-slide-top {
from { from {
transform: translate(-50%, 0.75rem); transform: translate(-50%, 0.75rem);
@ -2363,7 +2362,6 @@ a[aria-busy=true] {
opacity: 1; opacity: 1;
} }
} }
@keyframes tooltip-slide-top { @keyframes tooltip-slide-top {
from { from {
transform: translate(-50%, 0.75rem); transform: translate(-50%, 0.75rem);
@ -2538,6 +2536,7 @@ a[aria-busy=true] {
opacity: 1; opacity: 1;
} }
} }
/** /**
* Accessibility & User interaction * Accessibility & User interaction
*/ */

2
css/pico.fluid.classless.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.fluid.classless.min.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.min.css.map
View file

File diff suppressed because one or more lines are too long

217
scss/utilities/_tooltip.scss
View file

@ -11,8 +11,8 @@
cursor: help; cursor: help;
} }
&[data-placement=top]::before, &[data-placement="top"]::before,
&[data-placement=top]::after, &[data-placement="top"]::after,
&::before, &::before,
&::after { &::after {
display: block; display: block;
@ -36,8 +36,9 @@
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
} }
// Caret // Caret
&[data-placement=top]::after, &[data-placement="top"]::after,
&::after { &::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
@ -49,20 +50,23 @@
content: ""; content: "";
color: var(--tooltip-background-color); color: var(--tooltip-background-color);
} }
&[data-placement=bottom] {
&[data-placement="bottom"] {
&::before, &::before,
&::after { &::after {
top: 100%; top: 100%;
bottom: auto; bottom: auto;
transform: translate(-50%, .25rem); transform: translate(-50%, .25rem);
} }
&:after{ &:after{
transform: translate(-50%, -.3rem); transform: translate(-50%, -.3rem);
border: .3rem solid transparent; border: .3rem solid transparent;
border-bottom: .3rem solid; border-bottom: .3rem solid;
} }
} }
&[data-placement=left] {
&[data-placement="left"] {
&::before, &::before,
&::after { &::after {
top: 50%; top: 50%;
@ -71,13 +75,15 @@
left: auto; left: auto;
transform: translate(-.25rem, -50%); transform: translate(-.25rem, -50%);
} }
&:after{ &:after{
transform: translate(.3rem, -50%); transform: translate(.3rem, -50%);
border: .3rem solid transparent; border: .3rem solid transparent;
border-left: .3rem solid; border-left: .3rem solid;
} }
} }
&[data-placement=right] {
&[data-placement="right"] {
&::before, &::before,
&::after { &::after {
top: 50%; top: 50%;
@ -86,6 +92,7 @@
left: 100%; left: 100%;
transform: translate(.25rem, -50%); transform: translate(.25rem, -50%);
} }
&:after{ &:after{
transform: translate(-.3rem, -50%); transform: translate(-.3rem, -50%);
border: .3rem solid transparent; border: .3rem solid transparent;
@ -102,11 +109,13 @@
} }
} }
// Animations, excluding touch devices
@if $enable-transitions { @if $enable-transitions {
// Animations, excluding touch devices
@media (hover: hover) and (pointer: fine) { @media (hover: hover) and (pointer: fine) {
&[data-placement=bottom]:focus, &[data-placement="bottom"]:focus,
&[data-placement=bottom]:hover &[data-placement="bottom"]:hover
&:focus, &:focus,
&:hover { &:hover {
&::before, &::before,
@ -119,7 +128,8 @@
animation-name: tooltip-caret-slide-top; animation-name: tooltip-caret-slide-top;
} }
} }
&[data-placement=bottom] {
&[data-placement="bottom"] {
&:focus, &:focus,
&:hover { &:hover {
&::before, &::before,
@ -133,7 +143,8 @@
} }
} }
} }
&[data-placement=left] {
&[data-placement="left"] {
&:focus, &:focus,
&:hover { &:hover {
&::before, &::before,
@ -147,7 +158,8 @@
} }
} }
} }
&[data-placement=right] {
&[data-placement="right"] {
&:focus, &:focus,
&:hover { &:hover {
&::before, &::before,
@ -162,104 +174,105 @@
} }
} }
} }
}
}
// Animations @keyframes tooltip-slide-top {
@if $enable-transitions { from {
@keyframes tooltip-slide-top { transform: translate(-50%, .75rem);
from { opacity: 0;
transform: translate(-50%, .75rem); }
opacity: 0; to {
transform: translate(-50%, -.25rem);
opacity: 1;
}
} }
to {
transform: translate(-50%, -.25rem); @keyframes tooltip-caret-slide-top {
opacity: 1; from {
opacity: 0;
}
50% {
transform: translate(-50%, -.25rem);
opacity: 0;
}
to {
transform: translate(-50%, 0rem);
opacity: 1;
}
} }
}
@keyframes tooltip-caret-slide-top { @keyframes tooltip-slide-bottom {
from { from {
opacity: 0; transform: translate(-50%, -.75rem);
opacity: 0;
}
to {
transform: translate(-50%, .25rem);
opacity: 1;
}
} }
50% {
transform: translate(-50%, -.25rem); @keyframes tooltip-caret-slide-bottom {
opacity: 0; from {
opacity: 0;
}
50% {
transform: translate(-50%, -.5rem);
opacity: 0;
}
to {
transform: translate(-50%, -.3rem);
opacity: 1;
}
} }
to {
transform: translate(-50%, 0rem); @keyframes tooltip-slide-left {
opacity: 1; from {
transform: translate(.75rem, -50%);
opacity: 0;
}
to {
transform: translate(-.25rem, -50%);
opacity: 1;
}
} }
}
@keyframes tooltip-caret-slide-left {
@keyframes tooltip-slide-bottom { from {
from { opacity: 0;
transform: translate(-50%, -.75rem); }
opacity: 0; 50% {
transform: translate(.05rem, -50%);
opacity: 0;
}
to {
transform: translate(.3rem, -50%);
opacity: 1;
}
} }
to {
transform: translate(-50%, .25rem); @keyframes tooltip-slide-right {
opacity: 1; from {
transform: translate(-.75rem, -50%);
opacity: 0;
}
to {
transform: translate(.25rem, -50%);
opacity: 1;
}
} }
}
@keyframes tooltip-caret-slide-bottom { @keyframes tooltip-caret-slide-right {
from { from {
opacity: 0; opacity: 0;
} }
50% { 50% {
transform: translate(-50%, -.5rem); transform: translate(-.05rem, -50%);
opacity: 0; opacity: 0;
} }
to { to {
transform: translate(-50%, -.3rem); transform: translate(-.3rem, -50%);
opacity: 1; opacity: 1;
} }
}
@keyframes tooltip-slide-left {
from {
transform: translate(.75rem, -50%);
opacity: 0;
}
to {
transform: translate(-.25rem, -50%);
opacity: 1;
}
}
@keyframes tooltip-caret-slide-left {
from {
opacity: 0;
}
50% {
transform: translate(.05rem, -50%);
opacity: 0;
}
to {
transform: translate(.3rem, -50%);
opacity: 1;
}
}
@keyframes tooltip-slide-right {
from {
transform: translate(-.75rem, -50%);
opacity: 0;
}
to {
transform: translate(.25rem, -50%);
opacity: 1;
}
}
@keyframes tooltip-caret-slide-right {
from {
opacity: 0;
}
50% {
transform: translate(-.05rem, -50%);
opacity: 0;
}
to {
transform: translate(-.3rem, -50%);
opacity: 1;
} }
} }
} }