Add tooltip animation

+ Disable focus for input[type=file]

css/pico.classless.css

@@ -1219,12 +1219,8 @@ label > textarea {
   background-color: var(--secondary-hover);
 }
 
-[type="file"]:focus {
-  box-shadow: none;
-}
-
 [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"] {
@@ -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 {
   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);
+  }
 }
 
 /**

css/pico.css

@@ -1452,12 +1452,8 @@ label > textarea {
   background-color: var(--secondary-hover);
 }
 
-[type="file"]:focus {
-  box-shadow: none;
-}
-
 [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"] {
@@ -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 {
   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);
+  }
 }
 
 /**

css/pico.fluid.classless.css

@@ -1215,12 +1215,8 @@ label > textarea {
   background-color: var(--secondary-hover);
 }
 
-[type="file"]:focus {
-  box-shadow: none;
-}
-
 [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"] {
@@ -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 {
   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);
+  }
 }
 
 /**

scss/components/_tooltip.scss

@@ -2,7 +2,7 @@
  * Tooltip ([data-tooltip])
  */
 
- [data-tooltip] {
+[data-tooltip] {
   position: relative;
 
   &:not(a):not(button):not(input) {
@@ -46,6 +46,7 @@
     background-color: transparent;
     color: var(--contrast);
     content: '';
+
   }
 
   &:focus,
@@ -53,6 +54,45 @@
     &::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);
+    }
+  }
+}

scss/content/_form-alt-input-types.scss

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