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

chore: lint with prettier on build

Browse source
This commit is contained in:
Lucas Larroche 2022-10-15 23:22:12 +07:00
parent bf62c8ce09
commit 670826069b
40 changed files with 221 additions and 233 deletions
Download patch file Download diff file Expand all files Collapse all files

129
scss/utilities/_tooltip.scss
View file

@ -20,31 +20,31 @@
position: absolute;
bottom: 100%;
left: 50%;
padding: .25rem .5rem;
padding: 0.25rem 0.5rem;
overflow: hidden;
transform: translate(-50%, -.25rem);
transform: translate(-50%, -0.25rem);
border-radius: var(--border-radius);
background: var(--tooltip-background-color);
content: attr(data-tooltip);
color: var(--tooltip-color);
font-style: normal;
font-weight: var(--font-weight);
font-size: .875rem;
font-size: 0.875rem;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
opacity: 0;
pointer-events: none;
}
// Caret
&[data-placement="top"]::after,
&::after {
padding: 0;
transform: translate(-50%, 0rem);
border-top: .3rem solid;
border-right: .3rem solid transparent;
border-left: .3rem solid transparent;
border-top: 0.3rem solid;
border-right: 0.3rem solid transparent;
border-left: 0.3rem solid transparent;
border-radius: 0;
background-color: transparent;
content: "";
@ -56,13 +56,13 @@
&::after {
top: 100%;
bottom: auto;
transform: translate(-50%, .25rem);
transform: translate(-50%, 0.25rem);
}
&:after{
transform: translate(-50%, -.3rem);
border: .3rem solid transparent;
border-bottom: .3rem solid;
&:after {
transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent;
border-bottom: 0.3rem solid;
}
}
@ -73,13 +73,13 @@
right: 100%;
bottom: auto;
left: auto;
transform: translate(-.25rem, -50%);
transform: translate(-0.25rem, -50%);
}
&:after{
transform: translate(.3rem, -50%);
border: .3rem solid transparent;
border-left: .3rem solid;
&:after {
transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent;
border-left: 0.3rem solid;
}
}
@ -90,13 +90,13 @@
right: auto;
bottom: auto;
left: 100%;
transform: translate(.25rem, -50%);
transform: translate(0.25rem, -50%);
}
&:after{
transform: translate(-.3rem, -50%);
border: .3rem solid transparent;
border-right: .3rem solid;
&:after {
transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent;
border-right: 0.3rem solid;
}
}
@ -109,67 +109,64 @@
}
}
@if $enable-transitions {
// Animations, excluding touch devices
@media (hover: hover) and (pointer: fine) {
&[data-placement="bottom"]:focus,
&[data-placement="bottom"]:hover
&:focus,
&[data-placement="bottom"]:hover &:focus,
&:hover {
&::before,
&::after {
animation-duration: .2s;
animation-duration: 0.2s;
animation-name: tooltip-slide-top;
}
&::after {
animation-name: tooltip-caret-slide-top;
animation-name: tooltip-caret-slide-top;
}
}
&[data-placement="bottom"] {
&:focus,
&:hover {
&::before,
&::after {
animation-duration: .2s;
animation-duration: 0.2s;
animation-name: tooltip-slide-bottom;
}
&::after {
animation-name: tooltip-caret-slide-bottom;
animation-name: tooltip-caret-slide-bottom;
}
}
}
&[data-placement="left"] {
&:focus,
&:hover {
&::before,
&::after {
animation-duration: .2s;
animation-duration: 0.2s;
animation-name: tooltip-slide-left;
}
&::after {
animation-name: tooltip-caret-slide-left;
animation-name: tooltip-caret-slide-left;
}
}
}
&[data-placement="right"] {
&:focus,
&:hover {
&::before,
&::after {
animation-duration: .2s;
animation-duration: 0.2s;
animation-name: tooltip-slide-right;
}
&::after {
animation-name: tooltip-caret-slide-right;
animation-name: tooltip-caret-slide-right;
}
}
}
@ -177,21 +174,21 @@
@keyframes tooltip-slide-top {
from {
transform: translate(-50%, .75rem);
transform: translate(-50%, 0.75rem);
opacity: 0;
}
to {
transform: translate(-50%, -.25rem);
transform: translate(-50%, -0.25rem);
opacity: 1;
}
}
@keyframes tooltip-caret-slide-top {
from {
opacity: 0;
}
50% {
transform: translate(-50%, -.25rem);
transform: translate(-50%, -0.25rem);
opacity: 0;
}
to {
@ -199,80 +196,80 @@
opacity: 1;
}
}
@keyframes tooltip-slide-bottom {
from {
transform: translate(-50%, -.75rem);
transform: translate(-50%, -0.75rem);
opacity: 0;
}
to {
transform: translate(-50%, .25rem);
transform: translate(-50%, 0.25rem);
opacity: 1;
}
}
@keyframes tooltip-caret-slide-bottom {
from {
opacity: 0;
}
50% {
transform: translate(-50%, -.5rem);
transform: translate(-50%, -0.5rem);
opacity: 0;
}
to {
transform: translate(-50%, -.3rem);
transform: translate(-50%, -0.3rem);
opacity: 1;
}
}
@keyframes tooltip-slide-left {
from {
transform: translate(.75rem, -50%);
transform: translate(0.75rem, -50%);
opacity: 0;
}
to {
transform: translate(-.25rem, -50%);
transform: translate(-0.25rem, -50%);
opacity: 1;
}
}
@keyframes tooltip-caret-slide-left {
from {
opacity: 0;
}
50% {
transform: translate(.05rem, -50%);
transform: translate(0.05rem, -50%);
opacity: 0;
}
to {
transform: translate(.3rem, -50%);
transform: translate(0.3rem, -50%);
opacity: 1;
}
}
@keyframes tooltip-slide-right {
from {
transform: translate(-.75rem, -50%);
transform: translate(-0.75rem, -50%);
opacity: 0;
}
to {
transform: translate(.25rem, -50%);
transform: translate(0.25rem, -50%);
opacity: 1;
}
}
@keyframes tooltip-caret-slide-right {
from {
opacity: 0;
}
50% {
transform: translate(-.05rem, -50%);
transform: translate(-0.05rem, -50%);
opacity: 0;
}
to {
transform: translate(-.3rem, -50%);
transform: translate(-0.3rem, -50%);
opacity: 1;
}
}
}
}
}