@sbb-esta/lyne-elements-dev 5.0.0-next-dev.1776760633 → 5.0.0-next-dev.1776772852

package/core/styles/core.scss

@@ -239,6 +239,9 @@ $theme: 'standard' !default;
 @use '../../teaser/teaser.global' as teaser with (
   $theme: $theme
 );
+@use '../../teaser-panel/teaser-panel.global' as teaser-panel with (
+  $theme: $theme
+);
 @use '../../teaser-product/common/teaser-product-common.global' as teaser-product-common with (
   $theme: $theme
 );
@@ -344,6 +347,7 @@ $theme: 'standard' !default;
   @include tab-label-common.base;
   @include tag.base;
   @include teaser.base;
+  @include teaser-panel.base;
   @include teaser-product-common.base;
   @include timetable-form.base;
   @include timetable-form-details.base;
@@ -445,6 +449,7 @@ $theme: 'standard' !default;
     @include form-field.base-breakpoint-large;
     @include header.base-breakpoint-large;
     @include menu.base-breakpoint-large;
+    @include teaser-panel.base-breakpoint-large;
     @include teaser-product-common.base-breakpoint-large;
 
     // TODO: Remove complete block when new lean theme is complete
@@ -464,6 +469,7 @@ $theme: 'standard' !default;
 
     @include lead-container.base-breakpoint-ultra;
     @include map-container.base-breakpoint-ultra;
+    @include teaser-panel.base-breakpoint-ultra;
   }
 }
 

package/core/styles/mixins/panel.scss

@@ -5,7 +5,9 @@
 // ----------------------------------------------------------------------------------------------------
 // Panel Mixins: Achieve the styling of a panel
 // ----------------------------------------------------------------------------------------------------
+// TODO: delete this file within the next major;
 
+// @deprecated
 @mixin panel-variables {
   --sbb-panel-width: #{functions.px-to-rem-build(223)};
   --sbb-panel-inner-height: #{functions.px-to-rem-build(167)};
@@ -31,7 +33,7 @@
     --sbb-panel-font-size: var(--sbb-typo-scale-2x);
   }
 
-  @include mediaqueries.mq($from: large) {
+  @include mediaqueries.mq($from: ultra) {
     --sbb-panel-width: #{functions.px-to-rem-build(428)};
     --sbb-panel-inner-height: #{functions.px-to-rem-build(320.38)};
     --sbb-panel-triangle-height: #{functions.px-to-rem-build(63.31)};
@@ -40,6 +42,7 @@
   }
 }
 
+// @deprecated
 @mixin panel {
   position: relative;
   display: flex;
@@ -66,6 +69,7 @@
   }
 }
 
+// @deprecated
 @mixin panel-text {
   font-family: var(--sbb-typo-font-family);
   font-size: var(--sbb-panel-font-size);

package/core.css

@@ -1743,6 +1743,18 @@ 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-panel-width: 13.9375rem;
+  --sbb-panel-inner-height: 10.4375rem;
+  --sbb-panel-triangle-height: 2.0625rem;
+  --sbb-panel-line-height: var(--sbb-typo-line-height-heading);
+  --sbb-panel-font-size: var(--sbb-typo-scale-1-5x);
+  --sbb-panel-font-weight: 300;
+  --sbb-panel-color: var(--sbb-color-1-negative);
+  --sbb-panel-background-color: color-mix(in srgb, var(--sbb-color-primary) 90%, transparent);
+  --sbb-panel-background-color-hover: var(--sbb-color-primary);
+  --sbb-panel-padding-inline: var(--sbb-spacing-responsive-m);
+  --sbb-panel-gap: var(--sbb-spacing-responsive-xs);
+  --sbb-panel-animation-easing: var(--sbb-animation-easing);
   --sbb-teaser-product-background-color: var(--sbb-color-cloud);
   --sbb-teaser-product-background-color: light-dark(
     var(--sbb-color-cloud),
@@ -1978,6 +1990,10 @@ 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-panel-width: 20.0625rem;
+    --sbb-panel-inner-height: 15.006875rem;
+    --sbb-panel-triangle-height: 2.965625rem;
+    --sbb-panel-font-size: var(--sbb-typo-scale-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;
@@ -2008,6 +2024,11 @@ slot[name=error]::slotted(*) {
     --sbb-lead-container-image-ratio: 21 / 9;
     --sbb-lead-container-image-border-radius: var(--sbb-lead-container-border-radius);
     --sbb-map-container-sidebar-width: 30rem;
+    --sbb-panel-width: 26.75rem;
+    --sbb-panel-inner-height: 20.02375rem;
+    --sbb-panel-triangle-height: 3.956875rem;
+    --sbb-panel-font-size: var(--sbb-typo-scale-2-5x);
+    --sbb-panel-line-height: 1.2;
   }
 }