d0zingcat/nextjs-notion-starter-kit
1
0
Fork 0
mirror of https://github.com/d0zingcat/nextjs-notion-starter-kit.git synced 2026-05-14 07:26:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: notion link hover+focus underline animation

Browse Source
This commit is contained in:
Travis Fischer
2022-04-20 13:35:50 -04:00
parent c9e7a4d382
commit 102439c8a3
1 changed files with 12 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
styles/notion.css
View File

@@ -217,33 +217,25 @@
position: relative;
transition: unset;
opacity: 1;
border-bottom-width: 0.08rem;
border-bottom-width: 0.1rem;
background: transparent;
background-origin: border-box;
background-repeat: no-repeat;
background-position: 50% 100%;
background-size: 0 0.1rem;
}
.notion-link:focus,
.notion-link:hover {
border-bottom-style: none;
}
border-bottom-color: transparent;
.notion-link:focus::after,
.notion-link:hover::after {
visibility: visible;
width: 100%;
left: 0;
}
background-image: linear-gradient(90.68deg, #b439df 0.26%, #e5337e 102.37%);
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 100% 0.1rem;
.notion-link::after {
content: '';
position: absolute;
bottom: -0.1rem;
left: 50%;
width: 0;
height: 0.1rem;
transform: scaleX(1);
transition-property: width, left;
transition-property: background-position, background-size;
transition-duration: 300ms;
visibility: hidden;
background: linear-gradient(90.68deg, #b439df 0.26%, #e5337e 102.37%);
}
.notion-red_background,