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

Add tooltip animation

Browse source 
+ Disable focus for input[type=file]
This commit is contained in:
Lucas 2020-09-30 11:23:26 +07:00
parent c74bb0eabe
commit 2c9d79f361
8 changed files with 190 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

37
css/pico.classless.css
View file

@ -1219,12 +1219,8 @@ label > textarea {
background-color: var(--secondary-hover); background-color: var(--secondary-hover);
} }
[type="file"]:focus {
box-shadow: none;
}
[type="file"]:focus::-webkit-file-upload-button { [type="file"]:focus::-webkit-file-upload-button {
box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus); box-shadow: none;
} }
[type="range"] { [type="range"] {
@ -1983,6 +1979,37 @@ progress:indeterminate::-moz-progress-bar {
[data-tooltip]:focus::before, [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 {
opacity: 1; opacity: 1;
animation-duration: .2s;
animation-name: slide;
}
[data-tooltip]:focus::after, [data-tooltip]:hover::after {
animation-name: slideCaret;
}
@keyframes slide {
from {
opacity: 0;
transform: translate(-50%, 0.75rem);
}
to {
opacity: 1;
transform: translate(-50%, -0.25rem);
}
}
@keyframes slideCaret {
from {
opacity: 0;
}
50% {
opacity: 0;
transform: translate(-50%, -0.25rem);
}
to {
opacity: 1;
transform: translate(-50%, 0rem);
}
} }
/** /**

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

File diff suppressed because one or more lines are too long

37
css/pico.css
View file

@ -1452,12 +1452,8 @@ label > textarea {
background-color: var(--secondary-hover); background-color: var(--secondary-hover);
} }
[type="file"]:focus {
box-shadow: none;
}
[type="file"]:focus::-webkit-file-upload-button { [type="file"]:focus::-webkit-file-upload-button {
box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus); box-shadow: none;
} }
[type="range"] { [type="range"] {
@ -2216,6 +2212,37 @@ progress:indeterminate::-moz-progress-bar {
[data-tooltip]:focus::before, [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 {
opacity: 1; opacity: 1;
animation-duration: .2s;
animation-name: slide;
}
[data-tooltip]:focus::after, [data-tooltip]:hover::after {
animation-name: slideCaret;
}
@keyframes slide {
from {
opacity: 0;
transform: translate(-50%, 0.75rem);
}
to {
opacity: 1;
transform: translate(-50%, -0.25rem);
}
}
@keyframes slideCaret {
from {
opacity: 0;
}
50% {
opacity: 0;
transform: translate(-50%, -0.25rem);
}
to {
opacity: 1;
transform: translate(-50%, 0rem);
}
} }
/** /**

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

@ -1215,12 +1215,8 @@ label > textarea {
background-color: var(--secondary-hover); background-color: var(--secondary-hover);
} }
[type="file"]:focus {
box-shadow: none;
}
[type="file"]:focus::-webkit-file-upload-button { [type="file"]:focus::-webkit-file-upload-button {
box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus); box-shadow: none;
} }
[type="range"] { [type="range"] {
@ -1979,6 +1975,37 @@ progress:indeterminate::-moz-progress-bar {
[data-tooltip]:focus::before, [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 {
opacity: 1; opacity: 1;
animation-duration: .2s;
animation-name: slide;
}
[data-tooltip]:focus::after, [data-tooltip]:hover::after {
animation-name: slideCaret;
}
@keyframes slide {
from {
opacity: 0;
transform: translate(-50%, 0.75rem);
}
to {
opacity: 1;
transform: translate(-50%, -0.25rem);
}
}
@keyframes slideCaret {
from {
opacity: 0;
}
50% {
opacity: 0;
transform: translate(-50%, -0.25rem);
}
to {
opacity: 1;
transform: translate(-50%, 0rem);
}
} }
/** /**

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

140
scss/components/_tooltip.scss
View file

@ -2,57 +2,97 @@
* Tooltip ([data-tooltip]) * Tooltip ([data-tooltip])
*/ */
[data-tooltip] { [data-tooltip] {
position: relative; position: relative;
&:not(a):not(button):not(input) { &:not(a):not(button):not(input) {
border-bottom: 1px dotted; border-bottom: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
&::before, &::before,
&::after { &::after {
display: block; display: block;
z-index: 99; z-index: 99;
position: absolute; position: absolute;
bottom: 100%; bottom: 100%;
left: 50%; left: 50%;
padding: .25rem .5rem; padding: .25rem .5rem;
overflow: hidden; overflow: hidden;
transform: translate(-50%, -.25rem); transform: translate(-50%, -.25rem);
border-radius: var(--block-round); border-radius: var(--block-round);
background: var(--contrast); background: var(--contrast);
color: var(--contrast-inverse); color: var(--contrast-inverse);
font-size: .85rem; font-size: .85rem;
font-style: normal; font-style: normal;
font-weight: var(--text-weight); font-weight: var(--text-weight);
text-decoration: none; text-decoration: none;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
content: attr(data-tooltip); content: attr(data-tooltip);
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
} }
// Caret // Caret
&::after { &::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: .3rem solid; border-top: .3rem solid;
border-right: .3rem solid transparent; border-right: .3rem solid transparent;
border-left: .3rem solid transparent; border-left: .3rem solid transparent;
border-radius: 0; border-radius: 0;
background-color: transparent; background-color: transparent;
color: var(--contrast); color: var(--contrast);
content: ''; content: '';
}
&:focus, }
&:hover {
&::before, &:focus,
&::after { &:hover {
opacity: 1; &::before,
} &::after {
} opacity: 1;
}
@if $enable-transitions {
animation-duration: .2s;
animation-name: slide;
}
}
&::after {
@if $enable-transitions {
animation-name: slideCaret;
}
}
}
}
// Animations
@if $enable-transitions {
@keyframes slide {
from {
opacity: 0;
transform: translate(-50%, .75rem);
}
to {
opacity: 1;
transform: translate(-50%, -.25rem);
}
}
@keyframes slideCaret {
from {
opacity: 0;
}
50% {
opacity: 0;
transform: translate(-50%, -.25rem);
}
to {
opacity: 1;
transform: translate(-50%, 0rem);
}
}
}

3
scss/content/_form-alt-input-types.scss
View file

@ -82,9 +82,8 @@
} }
&:focus { &:focus {
box-shadow: none;
&::-webkit-file-upload-button { &::-webkit-file-upload-button {
box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus); box-shadow: none;
} }
} }
} }