fix(selectable-tile): selected gradient

ariellalgilmore · Dec 6, 2023 · 9c63464 · 9c63464
1 parent 5c652df
commit 9c63464
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 2 deletions.
diff --git a/packages/carbon-web-components/src/components/accordion/accordion-item.ts b/packages/carbon-web-components/src/components/accordion/accordion-item.ts
@@ -107,7 +107,9 @@ class CDSAccordionItem extends FocusMixin(LitElement) {
         )
       );
     }
-    const content = this.shadowRoot!.querySelector(`.${prefix}--accordion__wrapper`) as HTMLElement;
+    const content = this.shadowRoot!.querySelector(
+      `.${prefix}--accordion__wrapper`
+    ) as HTMLElement;
 
     if (this.open) {
       // accordion opens

diff --git a/packages/carbon-web-components/src/components/tile/tile.scss b/packages/carbon-web-components/src/components/tile/tile.scss
@@ -219,6 +219,21 @@ $css--plex: true !default;
   }
 }
 
+:host(#{$prefix}-selectable-tile[slug]) .#{$prefix}--tile--is-selected {
+  border: 1px solid $layer-selected-inverse;
+  .#{$prefix}--tile__checkmark {
+    z-index: 1;
+  }
+}
+
+:host(#{$prefix}-selectable-tile[slug]) .#{$prefix}--tile--is-selected::after {
+  @include callout-gradient('selected');
+}
+
+:host(#{$prefix}-selectable-tile[slug]) .#{$prefix}--tile--is-selected::after {
+  opacity: 1;
+}
+
 :host(#{$prefix}-clickable-tile) {
   ::slotted(#{$prefix}-slug) {
     pointer-events: none;

diff --git a/packages/styles/scss/components/filter-panel/_filter-panel.scss b/packages/styles/scss/components/filter-panel/_filter-panel.scss
@@ -255,7 +255,7 @@
 
     .#{$prefix}--accordion__wrapper {
       /* stylelint-disable declaration-no-important */
-      // TODO: see if we can remove. Need important to override accordion inline styles. 
+      // TODO: see if we can remove. Need important to override accordion inline styles.
       max-block-size: none !important;
       /* stylelint-enable declaration-no-important */
     }