fix(docs): Add multiline support for underline animation on cards link (#2424)

ioanabrooks · web-flow · commit 81903d1ee638 · 2022-12-13T10:05:15.000-08:00
diff --git a/docs/src/styles/docs/cardLink.scss b/docs/src/styles/docs/cardLink.scss
@@ -13,7 +13,9 @@
   &:hover {
     transform: translate3d(0, -2px, 0);
     .docs-cardLink-title {
-      --amplify-border-animation-offset: 100%;
+      text-shadow: 1px 1px var(--amplify-colors-background-primary);
+      background-size: 100% var(--amplify-border-widths-medium);
+      transition-delay: 0s;
     }
   }
 }
@@ -34,12 +36,12 @@
 }
 
 .docs-cardLink-title {
-  display: inline-block;
+  display: inline;
   font-weight: bold;
-  background: linear-gradient(var(--amplify-colors-font-primary) 0 0) 0 100% /
-    var(--amplify-border-animation-offset, 0)
-    var(--amplify-border-widths-medium) no-repeat;
-  transition: 0.5s;
+  background: linear-gradient(var(--amplify-colors-font-primary) 0 0) 0 100%
+    no-repeat;
+  background-size: 0% var(--amplify-border-widths-medium);
+  transition: background-size 0.5s ease-in-out 0.1s;
 }
 
 // Plain (default) variation

Original file line number	Diff line number	Diff line change
`@@ -13,7 +13,9 @@`
`13`	`13`	`&:hover {`
`14`	`14`	`transform: translate3d(0, -2px, 0);`
`15`	`15`	`.docs-cardLink-title {`
`16`		`- --amplify-border-animation-offset: 100%;`
	`16`	`+ text-shadow: 1px 1px var(--amplify-colors-background-primary);`
	`17`	`+ background-size: 100% var(--amplify-border-widths-medium);`
	`18`	`+ transition-delay: 0s;`
`17`	`19`	`}`
`18`	`20`	`}`
`19`	`21`	`}`
`@@ -34,12 +36,12 @@`
`34`	`36`	`}`
`35`	`37`
`36`	`38`	`.docs-cardLink-title {`
`37`		`- display: inline-block;`
	`39`	`+ display: inline;`
`38`	`40`	`font-weight: bold;`
`39`		`- background: linear-gradient(var(--amplify-colors-font-primary) 0 0) 0 100% /`
`40`		`- var(--amplify-border-animation-offset, 0)`
`41`		`- var(--amplify-border-widths-medium) no-repeat;`
`42`		`- transition: 0.5s;`
	`41`	`+ background: linear-gradient(var(--amplify-colors-font-primary) 0 0) 0 100%`
	`42`	`+ no-repeat;`
	`43`	`+ background-size: 0% var(--amplify-border-widths-medium);`
	`44`	`+ transition: background-size 0.5s ease-in-out 0.1s;`
`43`	`45`	`}`
`44`	`46`
`45`	`47`	`// Plain (default) variation`