@carbon/ibmdotcom-styles 2.17.0 → 2.18.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibmdotcom-styles",
   "description": "Carbon for IBM.com Styles",
-  "version": "2.17.0",
+  "version": "2.18.0",
   "license": "Apache-2.0",
   "main": "dist/ibm-dotcom-styles.min.css",
   "module": "src/scss",
@@ -48,5 +48,5 @@
     "sass": "~1.83.0",
     "sass-loader": "^13.0.0"
   },
-  "gitHead": "97d22ca20f3a41dcc795d7758323da4bdd651740"
+  "gitHead": "945ca478a37e5914612018120bbdf5ca2c0a2a71"
 }

package/scss/components/card/_card.scss

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2024
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -179,6 +179,14 @@
     }
   }
 
+  // Gutter space for mobile view
+  :host(#{$c4d-prefix}-content-group-cards-item) {
+    @include breakpoint-down(md) {
+      inline-size: auto;
+      margin-inline: $spacing-05;
+    }
+  }
+
   // Card with pictogram placement style
   :host(#{$c4d-prefix}-card-group-item),
   :host(#{$c4d-prefix}-card-in-card),
@@ -301,6 +309,92 @@
         display: none !important;
       }
     }
+
+    //Replicating V1 hover behavior
+    @media (pointer: fine) {
+      &[pictogram-placement='top'] .#{$prefix}--card,
+      &[pictogram-placement='bottom'] .#{$prefix}--card {
+        .#{$prefix}--card__motion {
+          ::slotted(#{$c4d-prefix}-card-heading) {
+            padding-block-start: 0;
+
+            @include breakpoint('md') {
+              /* stylelint-disable value-no-vendor-prefix, property-no-vendor-prefix */
+              display: -webkit-box;
+              /* stylelint-enable value-no-vendor-prefix, property-no-vendor-prefix */
+              overflow: hidden;
+              -webkit-box-orient: vertical;
+              -webkit-line-clamp: 3;
+              max-inline-size: calc(100% - #{$spacing-10});
+              opacity: 1;
+              transform: translate3d(0, 0, 0);
+              transition: all $duration-moderate-02 motion(standard, productive)
+                0.25s;
+            }
+          }
+
+          .#{$prefix}--card__copy {
+            margin-block: $spacing-07 0;
+
+            @include breakpoint('md') {
+              margin-block-start: 0;
+              opacity: 0;
+              transform: translate3d(0, -16px, 0);
+              transition: all $duration-moderate-02 motion(standard, productive);
+              visibility: hidden;
+            }
+          }
+        }
+
+        &:hover,
+        &:focus {
+          .#{$prefix}--card__motion {
+            ::slotted(#{$c4d-prefix}-card-heading) {
+              @include breakpoint('md') {
+                opacity: 0;
+                transform: translate3d(0, 16px, 0);
+                transition-delay: 0s;
+              }
+            }
+
+            .#{$prefix}--card__copy {
+              @include breakpoint('md') {
+                display: block;
+                overflow: hidden;
+                opacity: 1;
+                transform: translate3d(0, 0, 0);
+                transition-delay: 0.2s;
+                visibility: visible;
+              }
+            }
+          }
+        }
+      }
+
+      &[pictogram-placement='top'] .#{$prefix}--card {
+        .#{$prefix}--card__motion {
+          ::slotted(#{$c4d-prefix}-card-heading) {
+            @include breakpoint('md') {
+              position: absolute;
+              display: flow-root;
+              inset-block-end: $spacing-05;
+            }
+          }
+
+          .#{$prefix}--card__copy {
+            @include breakpoint('md') {
+              margin-block-start: $spacing-07;
+            }
+          }
+
+          ::slotted(svg[slot='pictogram']) {
+            @include breakpoint('md') {
+              margin-block-end: 0;
+            }
+          }
+        }
+      }
+    }
   }
 
   :host(#{$c4d-prefix}-card[aspect-ratio='1:1']) .#{$prefix}--card__wrapper {

package/scss/components/card-group/_card-group.scss

@@ -42,11 +42,19 @@
         1fr
       );
     }
+
+    @include breakpoint-down(md) {
+      padding-inline: $spacing-05;
+    }
   }
 
   :host(#{$c4d-prefix}-card-group[with-card-in-card][grid-mode]) {
     padding-block-start: 0;
     padding-inline: 1px;
+
+    @include breakpoint-down(md) {
+      padding-inline: $spacing-05;
+    }
   }
 
   :host(#{$c4d-prefix}-card-group[with-card-in-card][grid-mode='default']) {

package/scss/components/card-in-card/_card-in-card.scss

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2024
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -24,6 +24,11 @@
   :host(#{$c4d-prefix}-card-in-card) {
     block-size: auto;
 
+    @include breakpoint-down(md) {
+      background: none;
+      padding-inline: $spacing-05;
+    }
+
     .#{$prefix}--card:focus-within {
       border-color: $background;
       outline: none;
@@ -43,6 +48,10 @@
     &:hover {
       cursor: pointer;
 
+      @include breakpoint-down(md) {
+        cursor: auto;
+      }
+
       &::after {
         position: absolute;
         background: $card-background;
@@ -50,6 +59,10 @@
         content: '';
         inline-size: 100%;
         opacity: 0.08;
+
+        @include breakpoint-down(md) {
+          inline-size: auto;
+        }
       }
     }