@sbb-esta/lyne-elements-dev 4.9.0-dev.1775125493 → 4.9.0-dev.1775130554

package/core/styles/core.scss

@@ -239,6 +239,9 @@ $theme: 'standard' !default;
 @use '../../teaser/teaser.global' as teaser with (
   $theme: $theme
 );
+@use '../../teaser-product/common/teaser-product-common.global' as teaser-product-common with (
+  $theme: $theme
+);
 @use '../../visual-checkbox/visual-checkbox.global' as visual-checkbox with (
   $theme: $theme
 );
@@ -318,6 +321,7 @@ $theme: 'standard' !default;
   @include tab-label-common.base;
   @include tag.base;
   @include teaser.base;
+  @include teaser-product-common.base;
   @include visual-checkbox.base;
 
   @include a11y.if-forced-colors {
@@ -410,6 +414,7 @@ $theme: 'standard' !default;
     @include form-field.base-breakpoint-large;
     @include header.base-breakpoint-large;
     @include menu.base-breakpoint-large;
+    @include teaser-product-common.base-breakpoint-large;
 
     // TODO: Remove complete block when new lean theme is complete
     // Only render the block in standard theme as fallback for CSS class usage
@@ -450,6 +455,7 @@ $theme: 'standard' !default;
 @include sidebar-close-button.rules;
 @include sidebar-container.rules;
 @include tab-nav-bar.rules;
+@include teaser-product-common.rules;
 
 // TODO: discuss where to add these classes
 .sbb-dark {
@@ -571,20 +577,6 @@ img {
   }
 }
 
-// TODO: Move back to the teaser components when the global CSS refactoring happens
-:is(sbb-teaser-product, sbb-teaser-product-static) {
-  :is(sbb-image, img):not(.sbb-figure-overlap-image) {
-    border-radius: 0; // Reset sbb-image border radius in order to control it from teaser product.
-
-    --sbb-image-object-fit: cover;
-    --sbb-image-aspect-ratio: 16 / 9;
-  }
-
-  img:not(.sbb-figure-overlap-image) {
-    place-self: stretch;
-  }
-}
-
 sbb-teaser :is(sbb-image, img):not(.sbb-figure-overlap-image) {
   --sbb-image-object-fit: cover;
   --sbb-image-aspect-ratio: 4 / 3;

package/core.css

@@ -1743,6 +1743,28 @@ slot[name=error]::slotted(*) {
   --sbb-teaser-gap: var(--sbb-spacing-fixed-4x);
   --sbb-teaser-border-radius: var(--sbb-border-radius-4x);
   --sbb-teaser-image-width: 18.75rem;
+  --sbb-teaser-product-background-color: var(--sbb-color-cloud);
+  --sbb-teaser-product-background-color: light-dark(
+    var(--sbb-color-cloud),
+    var(--sbb-color-midnight)
+  );
+  --sbb-teaser-product-background-gradient-direction: to right;
+  --sbb-teaser-product-border-radius: var(--sbb-border-radius-4x);
+  --sbb-teaser-product-min-height: 37.5rem;
+  --sbb-teaser-product-background-gradient-start: 25%;
+  --sbb-teaser-product-background-gradient-end: 75%;
+  --sbb-teaser-product-container-padding-block: var(--sbb-spacing-responsive-s);
+  --sbb-teaser-product-container-padding-inline: var(--sbb-spacing-responsive-s);
+  --sbb-teaser-product-container-spacing: var(--sbb-spacing-responsive-l);
+  --sbb-teaser-product-content-color: var(--sbb-color-4);
+  --sbb-teaser-product-footer-color: var(--sbb-color-anthracite);
+  --sbb-teaser-product-footer-color: light-dark(
+    var(--sbb-color-anthracite),
+    var(--sbb-color-cloud)
+  );
+  --sbb-teaser-product-footer-font-size: var(--sbb-text-font-size-xxs);
+  --sbb-teaser-product-footer-padding-block-start: var(--sbb-spacing-responsive-s);
+  --sbb-teaser-product-footer-padding-block-end: 0;
   --sbb-visual-checkbox-dimension: var(--sbb-checkbox-dimension-m);
   --sbb-visual-checkbox-selection-color: var(--sbb-color-primary);
   --sbb-visual-checkbox-selection-color-negative: var(--sbb-color-primary85);
@@ -1908,6 +1930,12 @@ slot[name=error]::slotted(*) {
     --sbb-menu-max-width: 20rem;
     --sbb-menu-min-width: 11.25rem;
     --sbb-menu-transform-y: var(--sbb-spacing-fixed-2x);
+    --sbb-teaser-product-container-padding-block: var(--sbb-spacing-responsive-l) 0;
+    --sbb-teaser-product-container-padding-inline: var(--sbb-spacing-responsive-xl);
+    --sbb-teaser-product-content-align-content: center;
+    --sbb-teaser-product-footer-padding-block-start: var(--sbb-spacing-responsive-xs);
+    --sbb-teaser-product-footer-padding-block-end: var(--sbb-spacing-responsive-xs);
+    --sbb-teaser-product-footer-min-height: var(--sbb-teaser-product-container-spacing);
   }
   :root.sbb-lean {
     --sbb-title-font-size-level-6-lean: var(--sbb-typo-scale-0-875x);
@@ -2285,6 +2313,15 @@ sbb-tab-nav-bar .sbb-tab-amount {
   text-decoration: var(--sbb-tab-label-text-decoration);
 }
 
+:is(sbb-teaser-product, sbb-teaser-product-static) :is(sbb-image, img):not(.sbb-figure-overlap-image) {
+  border-radius: 0;
+  --sbb-image-object-fit: cover;
+  --sbb-image-aspect-ratio: 16 / 9;
+}
+:is(sbb-teaser-product, sbb-teaser-product-static) img:not(.sbb-figure-overlap-image) {
+  place-self: stretch;
+}
+
 .sbb-dark {
   color-scheme: dark;
 }
@@ -2401,15 +2438,6 @@ img {
   transition: filter var(--sbb-teaser-image-animation-duration) var(--sbb-teaser-image-animation-easing);
 }
 
-:is(sbb-teaser-product, sbb-teaser-product-static) :is(sbb-image, img):not(.sbb-figure-overlap-image) {
-  border-radius: 0;
-  --sbb-image-object-fit: cover;
-  --sbb-image-aspect-ratio: 16 / 9;
-}
-:is(sbb-teaser-product, sbb-teaser-product-static) img:not(.sbb-figure-overlap-image) {
-  place-self: stretch;
-}
-
 sbb-teaser :is(sbb-image, img):not(.sbb-figure-overlap-image) {
   --sbb-image-object-fit: cover;
   --sbb-image-aspect-ratio: 4 / 3;