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

fix: tooltip

Browse source
This commit is contained in:
Lucas Larroche 2023-03-25 19:41:13 +07:00
parent f611e4e5d0
commit ecf6c0a401
10 changed files with 23 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

7
css/pico.classless.css
View file

@ -414,6 +414,7 @@ progress,
--pico-nav-element-spacing-horizontal: 0.5rem; --pico-nav-element-spacing-horizontal: 0.5rem;
--pico-nav-link-spacing-vertical: 0.5rem; --pico-nav-link-spacing-vertical: 0.5rem;
--pico-nav-link-spacing-horizontal: 0.5rem; --pico-nav-link-spacing-horizontal: 0.5rem;
--pico-nav-breadcrumb-divider: ">";
} }
@media (min-width: 576px) { @media (min-width: 576px) {
:root { :root {
@ -2244,7 +2245,7 @@ nav[aria-label=breadcrumb] ul li:not(:last-child)::after {
width: calc(var(--pico-nav-link-spacing-horizontal) * 2); width: calc(var(--pico-nav-link-spacing-horizontal) * 2);
-webkit-margin-start: calc(var(--pico-nav-link-spacing-horizontal) / 2); -webkit-margin-start: calc(var(--pico-nav-link-spacing-horizontal) / 2);
margin-inline-start: calc(var(--pico-nav-link-spacing-horizontal) / 2); margin-inline-start: calc(var(--pico-nav-link-spacing-horizontal) / 2);
content: "/"; content: var(--pico-nav-breadcrumb-divider);
color: var(--pico-muted-color); color: var(--pico-muted-color);
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
@ -2419,11 +2420,11 @@ progress::-moz-progress-bar {
opacity: 1; opacity: 1;
} }
@media (hover: hover) and (pointer: fine) { @media (hover: hover) and (pointer: fine) {
[data-tooltip][data-placement=bottom]:focus::before, [data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover [data-tooltip]:focus::before, [data-tooltip][data-placement=bottom]:hover [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after { [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
animation-duration: 0.2s; animation-duration: 0.2s;
animation-name: tooltip-slide-top; animation-name: tooltip-slide-top;
} }
[data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover [data-tooltip]:focus::after, [data-tooltip]:hover::after { [data-tooltip]:focus::after, [data-tooltip]:hover::after {
animation-name: tooltip-caret-slide-top; animation-name: tooltip-caret-slide-top;
} }
[data-tooltip][data-placement=bottom]:focus::before, [data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover::before, [data-tooltip][data-placement=bottom]:hover::after { [data-tooltip][data-placement=bottom]:focus::before, [data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover::before, [data-tooltip][data-placement=bottom]:hover::after {

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 vendored
View file

File diff suppressed because one or more lines are too long

7
css/pico.css
View file

@ -416,6 +416,7 @@ progress,
--pico-nav-element-spacing-horizontal: 0.5rem; --pico-nav-element-spacing-horizontal: 0.5rem;
--pico-nav-link-spacing-vertical: 0.5rem; --pico-nav-link-spacing-vertical: 0.5rem;
--pico-nav-link-spacing-horizontal: 0.5rem; --pico-nav-link-spacing-horizontal: 0.5rem;
--pico-nav-breadcrumb-divider: ">";
} }
@media (min-width: 576px) { @media (min-width: 576px) {
:root { :root {
@ -2408,7 +2409,7 @@ nav[aria-label=breadcrumb] ul li:not(:last-child)::after {
width: calc(var(--pico-nav-link-spacing-horizontal) * 2); width: calc(var(--pico-nav-link-spacing-horizontal) * 2);
-webkit-margin-start: calc(var(--pico-nav-link-spacing-horizontal) / 2); -webkit-margin-start: calc(var(--pico-nav-link-spacing-horizontal) / 2);
margin-inline-start: calc(var(--pico-nav-link-spacing-horizontal) / 2); margin-inline-start: calc(var(--pico-nav-link-spacing-horizontal) / 2);
content: "/"; content: var(--pico-nav-breadcrumb-divider);
color: var(--pico-muted-color); color: var(--pico-muted-color);
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
@ -2583,11 +2584,11 @@ progress::-moz-progress-bar {
opacity: 1; opacity: 1;
} }
@media (hover: hover) and (pointer: fine) { @media (hover: hover) and (pointer: fine) {
[data-tooltip][data-placement=bottom]:focus::before, [data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover [data-tooltip]:focus::before, [data-tooltip][data-placement=bottom]:hover [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after { [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
animation-duration: 0.2s; animation-duration: 0.2s;
animation-name: tooltip-slide-top; animation-name: tooltip-slide-top;
} }
[data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover [data-tooltip]:focus::after, [data-tooltip]:hover::after { [data-tooltip]:focus::after, [data-tooltip]:hover::after {
animation-name: tooltip-caret-slide-top; animation-name: tooltip-caret-slide-top;
} }
[data-tooltip][data-placement=bottom]:focus::before, [data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover::before, [data-tooltip][data-placement=bottom]:hover::after { [data-tooltip][data-placement=bottom]:focus::before, [data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover::before, [data-tooltip][data-placement=bottom]:hover::after {

2
css/pico.css.map
View file

File diff suppressed because one or more lines are too long

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

@ -414,6 +414,7 @@ progress,
--pico-nav-element-spacing-horizontal: 0.5rem; --pico-nav-element-spacing-horizontal: 0.5rem;
--pico-nav-link-spacing-vertical: 0.5rem; --pico-nav-link-spacing-vertical: 0.5rem;
--pico-nav-link-spacing-horizontal: 0.5rem; --pico-nav-link-spacing-horizontal: 0.5rem;
--pico-nav-breadcrumb-divider: ">";
} }
@media (min-width: 576px) { @media (min-width: 576px) {
:root { :root {
@ -2207,7 +2208,7 @@ nav[aria-label=breadcrumb] ul li:not(:last-child)::after {
width: calc(var(--pico-nav-link-spacing-horizontal) * 2); width: calc(var(--pico-nav-link-spacing-horizontal) * 2);
-webkit-margin-start: calc(var(--pico-nav-link-spacing-horizontal) / 2); -webkit-margin-start: calc(var(--pico-nav-link-spacing-horizontal) / 2);
margin-inline-start: calc(var(--pico-nav-link-spacing-horizontal) / 2); margin-inline-start: calc(var(--pico-nav-link-spacing-horizontal) / 2);
content: "/"; content: var(--pico-nav-breadcrumb-divider);
color: var(--pico-muted-color); color: var(--pico-muted-color);
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
@ -2382,11 +2383,11 @@ progress::-moz-progress-bar {
opacity: 1; opacity: 1;
} }
@media (hover: hover) and (pointer: fine) { @media (hover: hover) and (pointer: fine) {
[data-tooltip][data-placement=bottom]:focus::before, [data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover [data-tooltip]:focus::before, [data-tooltip][data-placement=bottom]:hover [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after { [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
animation-duration: 0.2s; animation-duration: 0.2s;
animation-name: tooltip-slide-top; animation-name: tooltip-slide-top;
} }
[data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover [data-tooltip]:focus::after, [data-tooltip]:hover::after { [data-tooltip]:focus::after, [data-tooltip]:hover::after {
animation-name: tooltip-caret-slide-top; animation-name: tooltip-caret-slide-top;
} }
[data-tooltip][data-placement=bottom]:focus::before, [data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover::before, [data-tooltip][data-placement=bottom]:hover::after { [data-tooltip][data-placement=bottom]:focus::before, [data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover::before, [data-tooltip][data-placement=bottom]:hover::after {

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 vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.min.css vendored
View file

File diff suppressed because one or more lines are too long

7
scss/components/_tooltip.scss
View file

@ -116,8 +116,8 @@
@if $enable-transitions { @if $enable-transitions {
// Animations, excluding touch devices // Animations, excluding touch devices
@media (hover: hover) and (pointer: fine) { @media (hover: hover) and (pointer: fine) {
&[data-placement="bottom"]:focus, // Default (top)
&[data-placement="bottom"]:hover &:focus, &:focus,
&:hover { &:hover {
&::before, &::before,
&::after { &::after {
@ -130,6 +130,7 @@
} }
} }
// Bottom
&[data-placement="bottom"] { &[data-placement="bottom"] {
&:focus, &:focus,
&:hover { &:hover {
@ -145,6 +146,7 @@
} }
} }
// Left
&[data-placement="left"] { &[data-placement="left"] {
&:focus, &:focus,
&:hover { &:hover {
@ -160,6 +162,7 @@
} }
} }
// Right
&[data-placement="right"] { &[data-placement="right"] {
&:focus, &:focus,
&:hover { &:hover {