style(card): Improved focus ring

maicol07 · Jun 21, 2023 · 7043e9f · 7043e9f
1 parent c2204d5
commit 7043e9f
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/card/lib/_card.scss b/card/lib/_card.scss
@@ -32,4 +32,11 @@ $_custom-property-prefix: 'card';
 
     border: var(--_outline-width) solid var(--_outline-color);
   }
+
+  md-focus-ring {
+    --md-focus-ring-shape: 12px;
+    --md-focus-ring-outward-offset: -3px;
+    --md-focus-ring-shape-end-end: 0;
+    --md-focus-ring-shape-end-start: 0;
+  }
 }
diff --git a/card/lib/card.ts b/card/lib/card.ts
@@ -90,7 +90,7 @@ export abstract class Card extends LitElement {
     /** @soyTemplate */
     protected renderFocusRing() {
         return html`
-            <md-focus-ring for="primary-action"></md-focus-ring>`;
+            <md-focus-ring for="primary-action" inward></md-focus-ring>`;
     }
 
     protected onButtonSlotChanged() {