diff options
| author | Gunther6070 <haydenhartman10@yahoo.com> | 2025-03-31 15:09:41 -0400 |
|---|---|---|
| committer | Gunther6070 <haydenhartman10@yahoo.com> | 2025-03-31 15:09:41 -0400 |
| commit | d07e7630c836711b92cffd41fe99d15c84cb025f (patch) | |
| tree | 7fc65b0b21897424442de540cc6ba190dc1150c6 | |
| parent | 9f31fea81818dae21f67b23a6004a3ca369f8e0d (diff) | |
| download | JellySolutions-d07e7630c836711b92cffd41fe99d15c84cb025f.tar.gz JellySolutions-d07e7630c836711b92cffd41fe99d15c84cb025f.tar.bz2 JellySolutions-d07e7630c836711b92cffd41fe99d15c84cb025f.zip | |
Added animation to header tabs when hovering over them
| -rw-r--r-- | ufund-ui/src/app/app.component.css | 27 |
1 files changed, 24 insertions, 3 deletions
diff --git a/ufund-ui/src/app/app.component.css b/ufund-ui/src/app/app.component.css index 5af3958..5204919 100644 --- a/ufund-ui/src/app/app.component.css +++ b/ufund-ui/src/app/app.component.css @@ -38,10 +38,31 @@ text-decoration: none; } - a:hover { - /*color: light-dark(black, white)*/ - text-decoration: underline; + a { + display: block; + position: relative; + padding: 0.1em 0; + } + + a::after { + content: ''; + position: absolute; + bottom: 4px; + left: 0; + width: 100%; + height: 0.03em; + background-color: white; + opacity: 0; + transition: opacity 300ms, transform 300ms; } + + a:hover::after, + a:focus::after { + opacity: 1; + transform: translate3d(0, 0.2em, 0); + } + + } .toast { |