fix(tile): update clickable tile icon size and spacing

carbon-design-system · Nov 14, 2024 · 5af0d7e · 5af0d7e
1 parent ad23c63
commit 5af0d7e
Showing 1 changed file with 10 additions and 12 deletions.
diff --git a/packages/styles/scss/components/tile/_tile.scss b/packages/styles/scss/components/tile/_tile.scss
@@ -15,6 +15,7 @@
 @use '../../type' as *;
 @use '../../utilities/ai-gradient' as *;
 @use '../../utilities/button-reset';
+@use '../../utilities/convert';
 @use '../../utilities/component-reset';
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/high-contrast-mode' as *;
@@ -131,8 +132,10 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
   .#{$prefix}--tile--clickable.#{$prefix}--link--disabled
     .#{$prefix}--tile--disabled-icon {
     position: absolute;
-    inset-block-end: layout.density('padding-inline');
-    inset-inline-end: layout.density('padding-inline');
+    block-size: convert.to-rem(20px);
+    inline-size: convert.to-rem(20px);
+    inset-block-end: convert.to-rem(12px);
+    inset-inline-end: convert.to-rem(12px);
   }
 
   .#{$prefix}--tile--clickable .#{$prefix}--tile--icon {
@@ -297,8 +300,7 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
   .#{$prefix}--tile-content__below-the-fold {
     display: block;
     opacity: 0;
-    transition:
-      opacity $duration-fast-02 motion(standard, productive),
+    transition: opacity $duration-fast-02 motion(standard, productive),
       visibility $duration-fast-02 motion(standard, productive);
     visibility: hidden;
   }
@@ -313,8 +315,7 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
 
     .#{$prefix}--tile-content__below-the-fold {
       opacity: 1;
-      transition:
-        opacity $duration-fast-02 motion(standard, productive),
+      transition: opacity $duration-fast-02 motion(standard, productive),
         visibility $duration-fast-02 motion(standard, productive);
       visibility: inherit;
 
@@ -434,8 +435,7 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
     @include ai-popover-gradient('default', 0, 'layer');
 
     border: 1px solid transparent;
-    box-shadow:
-      inset 0 -80px 70px -65px $ai-inner-shadow,
+    box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow,
       0 4px 8px 0 $ai-drop-shadow;
   }
 
@@ -461,8 +461,7 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
   .#{$prefix}--tile--slug.#{$prefix}--tile--clickable::before {
     @include ai-popover-gradient('hover', 0, 'layer');
 
-    box-shadow:
-      inset 0 -80px 70px -65px $ai-inner-shadow,
+    box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow,
       0 4px 10px 2px $ai-drop-shadow;
   }
 
@@ -480,8 +479,7 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable::after {
     @include ai-popover-gradient('selected', 0, 'layer');
 
-    box-shadow:
-      inset 0 -80px 70px -65px $ai-inner-shadow,
+    box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow,
       0 4px 8px 0 $ai-drop-shadow;
   }