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

chore: replace @import with @use

Browse source
This commit is contained in:
Lucas Larroche 2022-10-22 11:44:10 +07:00
parent a6f0d0ca74
commit 51a68ce0fc
39 changed files with 1197 additions and 1659 deletions
Download patch file Download diff file Expand all files Collapse all files

56
scss/utilities/_loading.scss
View file

@ -1,56 +0,0 @@
/**
* Loading ([aria-busy=true])
*/
// Cursor
[aria-busy="true"] {
cursor: progress;
}
// Everyting except form elements
[aria-busy="true"]:not(input, select, textarea) {
&::before {
display: inline-block;
width: 1em;
height: 1em;
border: 0.1875em solid currentColor;
border-radius: 1em;
border-right-color: transparent;
content: "";
vertical-align: text-bottom;
vertical-align: -0.125em; // Visual alignment
animation: spinner 0.75s linear infinite;
opacity: var(--loading-spinner-opacity);
}
&:not(:empty) {
&::before {
margin-right: calc(var(--spacing) * 0.5);
margin-left: 0;
margin-inline-start: 0;
margin-inline-end: calc(var(--spacing) * 0.5);
}
}
&:empty {
text-align: center;
}
}
// Buttons and links
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
a {
&[aria-busy="true"] {
pointer-events: none;
}
}
// Animation: rotate
@keyframes spinner {
to {
transform: rotate(360deg);
}
}

4
scss/utilities/_reduce-motion.scss
View file

@ -1,4 +1,6 @@
@if $enable-transitions and $enable-important {
@use "../settings";
@if settings.$enable-transitions and settings.$enable-important {
/**
* Reduce Motion Features
*/

275
scss/utilities/_tooltip.scss
View file

@ -1,275 +0,0 @@
/**
* Tooltip ([data-tooltip])
*/
[data-tooltip] {
position: relative;
&:not(a, button, input) {
border-bottom: 1px dotted;
text-decoration: none;
cursor: help;
}
&[data-placement="top"]::before,
&[data-placement="top"]::after,
&::before,
&::after {
display: block;
z-index: 99;
position: absolute;
bottom: 100%;
left: 50%;
padding: 0.25rem 0.5rem;
overflow: hidden;
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: 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: 0.3rem solid;
border-right: 0.3rem solid transparent;
border-left: 0.3rem solid transparent;
border-radius: 0;
background-color: transparent;
content: "";
color: var(--tooltip-background-color);
}
&[data-placement="bottom"] {
&::before,
&::after {
top: 100%;
bottom: auto;
transform: translate(-50%, 0.25rem);
}
&:after {
transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent;
border-bottom: 0.3rem solid;
}
}
&[data-placement="left"] {
&::before,
&::after {
top: 50%;
right: 100%;
bottom: auto;
left: auto;
transform: translate(-0.25rem, -50%);
}
&:after {
transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent;
border-left: 0.3rem solid;
}
}
&[data-placement="right"] {
&::before,
&::after {
top: 50%;
right: auto;
bottom: auto;
left: 100%;
transform: translate(0.25rem, -50%);
}
&:after {
transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent;
border-right: 0.3rem solid;
}
}
// Display
&:focus,
&:hover {
&::before,
&::after {
opacity: 1;
}
}
@if $enable-transitions {
// Animations, excluding touch devices
@media (hover: hover) and (pointer: fine) {
&[data-placement="bottom"]:focus,
&[data-placement="bottom"]:hover &:focus,
&:hover {
&::before,
&::after {
animation-duration: 0.2s;
animation-name: tooltip-slide-top;
}
&::after {
animation-name: tooltip-caret-slide-top;
}
}
&[data-placement="bottom"] {
&:focus,
&:hover {
&::before,
&::after {
animation-duration: 0.2s;
animation-name: tooltip-slide-bottom;
}
&::after {
animation-name: tooltip-caret-slide-bottom;
}
}
}
&[data-placement="left"] {
&:focus,
&:hover {
&::before,
&::after {
animation-duration: 0.2s;
animation-name: tooltip-slide-left;
}
&::after {
animation-name: tooltip-caret-slide-left;
}
}
}
&[data-placement="right"] {
&:focus,
&:hover {
&::before,
&::after {
animation-duration: 0.2s;
animation-name: tooltip-slide-right;
}
&::after {
animation-name: tooltip-caret-slide-right;
}
}
}
}
@keyframes tooltip-slide-top {
from {
transform: translate(-50%, 0.75rem);
opacity: 0;
}
to {
transform: translate(-50%, -0.25rem);
opacity: 1;
}
}
@keyframes tooltip-caret-slide-top {
from {
opacity: 0;
}
50% {
transform: translate(-50%, -0.25rem);
opacity: 0;
}
to {
transform: translate(-50%, 0rem);
opacity: 1;
}
}
@keyframes tooltip-slide-bottom {
from {
transform: translate(-50%, -0.75rem);
opacity: 0;
}
to {
transform: translate(-50%, 0.25rem);
opacity: 1;
}
}
@keyframes tooltip-caret-slide-bottom {
from {
opacity: 0;
}
50% {
transform: translate(-50%, -0.5rem);
opacity: 0;
}
to {
transform: translate(-50%, -0.3rem);
opacity: 1;
}
}
@keyframes tooltip-slide-left {
from {
transform: translate(0.75rem, -50%);
opacity: 0;
}
to {
transform: translate(-0.25rem, -50%);
opacity: 1;
}
}
@keyframes tooltip-caret-slide-left {
from {
opacity: 0;
}
50% {
transform: translate(0.05rem, -50%);
opacity: 0;
}
to {
transform: translate(0.3rem, -50%);
opacity: 1;
}
}
@keyframes tooltip-slide-right {
from {
transform: translate(-0.75rem, -50%);
opacity: 0;
}
to {
transform: translate(0.25rem, -50%);
opacity: 1;
}
}
@keyframes tooltip-caret-slide-right {
from {
opacity: 0;
}
50% {
transform: translate(-0.05rem, -50%);
opacity: 0;
}
to {
transform: translate(-0.3rem, -50%);
opacity: 1;
}
}
}
}