Merge pull request #135 from ASU/uds-374-button-hover

mlsamuelson · web-flow · commit ab65bf8c4241 · 2021-03-30T11:41:55.000-07:00
fix(bootstrap4-theme): Fixed hover/active animations for buttons
diff --git a/packages/bootstrap4-theme/src/scss/extends/_buttons.scss b/packages/bootstrap4-theme/src/scss/extends/_buttons.scss
@@ -55,10 +55,10 @@
     }
   }
   &:hover {
-    transform: $uds-component-button-hover-state-transform;
+    transform: none;
   }
   &:active {
-    transform: scale(.95);
+    transform: scale(0.95);
   }
 }
 
@@ -85,3 +85,14 @@ a.text-gold:visited:not(.btn) {
 a:visited:not(.btn) {
   color: $uds-color-base-darkmaroon;
 }
+
+@include media-breakpoint-up(lg) {
+  .btn {
+    &:hover {
+      transform: $uds-component-button-hover-state-transform;
+    }
+    &:active {
+      transform: $uds-component-button-active-state-transform;
+    }
+  }
+}
diff --git a/packages/design-tokens/components/button.json b/packages/design-tokens/components/button.json
@@ -29,7 +29,7 @@
         "value": "17.5"
       },
       "hover-state-transform": {
-        "value": "scale(1.1)"
+        "value": "scale(1.05)"
       },
       "active-state-transform": {
         "value": "scale(1)"

Original file line number	Diff line number	Diff line change
`@@ -55,10 +55,10 @@`
`55`	`55`	`}`
`56`	`56`	`}`
`57`	`57`	`&:hover {`
`58`		`- transform: $uds-component-button-hover-state-transform;`
	`58`	`+ transform: none;`
`59`	`59`	`}`
`60`	`60`	`&:active {`
`61`		`- transform: scale(.95);`
	`61`	`+ transform: scale(0.95);`
`62`	`62`	`}`
`63`	`63`	`}`
`64`	`64`
`@@ -85,3 +85,14 @@ a.text-gold:visited:not(.btn) {`
`85`	`85`	`a:visited:not(.btn) {`
`86`	`86`	`color: $uds-color-base-darkmaroon;`
`87`	`87`	`}`
	`88`	`+`
	`89`	`+@include media-breakpoint-up(lg) {`
	`90`	`+ .btn {`
	`91`	`+ &:hover {`
	`92`	`+ transform: $uds-component-button-hover-state-transform;`
	`93`	`+ }`
	`94`	`+ &:active {`
	`95`	`+ transform: $uds-component-button-active-state-transform;`
	`96`	`+ }`
	`97`	`+ }`
	`98`	`+}`