style(card): Adds minimal styles for card focus ring structure

material-web-copybara · copybara-github · commit 423edc3dc9c8 · 2024-06-26T11:07:28.000-07:00
PiperOrigin-RevId: 647010470
diff --git a/packages/mdc-card/_mixins.scss b/packages/mdc-card/_mixins.scss
@@ -53,6 +53,7 @@ $ripple-target: '.mdc-card__ripple';
   .mdc-card {
     @include feature-targeting.targets($feat-structure) {
       @include container-layout_;
+      position: relative;
     }
 
     // Transparent card border for high-contrast mode.
@@ -81,6 +82,12 @@ $ripple-target: '.mdc-card__ripple';
     }
   }
 
+  .mdc-card__focus-ring {
+    @include feature-targeting.targets($feat-structure) {
+      position: absolute;
+    }
+  }
+
   //
   // Media
   //

Original file line number	Diff line number	Diff line change
`@@ -53,6 +53,7 @@ $ripple-target: '.mdc-card__ripple';`
`53`	`53`	`.mdc-card {`
`54`	`54`	`@include feature-targeting.targets($feat-structure) {`
`55`	`55`	`@include container-layout_;`
	`56`	`+ position: relative;`
`56`	`57`	`}`
`57`	`58`
`58`	`59`	`// Transparent card border for high-contrast mode.`
`@@ -81,6 +82,12 @@ $ripple-target: '.mdc-card__ripple';`
`81`	`82`	`}`
`82`	`83`	`}`
`83`	`84`
	`85`	`+ .mdc-card__focus-ring {`
	`86`	`+ @include feature-targeting.targets($feat-structure) {`
	`87`	`+ position: absolute;`
	`88`	`+ }`
	`89`	`+ }`
	`90`	`+`
`84`	`91`	`//`
`85`	`92`	`// Media`
`86`	`93`	`//`