feat(card): Add transparent outline to elevated card, so card boundar…

…y is shown on high-contrast mode. PiperOrigin-RevId: 337015192
material-components · Oct 14, 2020 · c71ebfa · c71ebfa
1 parent 174c0be
commit c71ebfa
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 0 deletions.
diff --git a/packages/mdc-card/_mixins.scss b/packages/mdc-card/_mixins.scss
@@ -33,6 +33,7 @@
 @use '@material/theme/theme';
 @use './variables';
 @use '@material/theme/theme-color';
+@use '@material/dom/mixins' as dom-mixins;
 
 //
 // Public
@@ -64,11 +65,28 @@
     @include feature-targeting.targets($feat-structure) {
       @include container-layout_;
     }
+
+    // Transparent card border for high-contrast mode.
+    &::after {
+      @include shape-radius(variables.$shape-radius, $query: $query);
+      @include dom-mixins.transparent-border($query: $query);
+      @include feature-targeting.targets($feat-structure) {
+        pointer-events: none;
+      }
+    }
   }
 
   .mdc-card--outlined {
     @include elevation-mixins.elevation(0, $query: $query);
     @include outline(variables.$outline-color, $query: $query);
+
+    // Outlined card already displays border in high-contrast mode. Overwriting
+    // styles set above to remove a duplicate border.
+    &::after {
+      @include feature-targeting.targets($feat-structure) {
+        border: none;
+      }
+    }
   }
 
   .mdc-card__content {

diff --git a/packages/mdc-card/package.json b/packages/mdc-card/package.json
@@ -15,6 +15,7 @@
   },
   "sideEffects": false,
   "dependencies": {
+    "@material/dom": "^7.0.0",
     "@material/elevation": "^7.0.0",
     "@material/feature-targeting": "^7.0.0",
     "@material/ripple": "^7.0.0",