@sbb-esta/lyne-elements-dev 5.4.1-dev.1785832479 → 5.4.1-dev.1785836006

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -2801,7 +2801,9 @@ sbb-tab-nav-bar .sbb-tab-amount {
2801
2801
  :is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) :is(sbb-image, img):not(.sbb-figure-overlap-image) {
2802
2802
  will-change: filter, scale;
2803
2803
  filter: brightness(var(--sbb-teaser-image-brightness, 1));
2804
- transition: filter, scale var(--sbb-teaser-image-animation-duration) var(--sbb-teaser-image-animation-easing);
2804
+ transition-duration: var(--sbb-teaser-image-animation-duration);
2805
+ transition-timing-function: var(--sbb-teaser-image-animation-easing);
2806
+ transition-property: filter, scale;
2805
2807
  }
2806
2808
  :is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) .sbb-figure {
2807
2809
  max-width: 100%;
@@ -2801,7 +2801,9 @@ sbb-tab-nav-bar .sbb-tab-amount {
2801
2801
  :is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) :is(sbb-image, img):not(.sbb-figure-overlap-image) {
2802
2802
  will-change: filter, scale;
2803
2803
  filter: brightness(var(--sbb-teaser-image-brightness, 1));
2804
- transition: filter, scale var(--sbb-teaser-image-animation-duration) var(--sbb-teaser-image-animation-easing);
2804
+ transition-duration: var(--sbb-teaser-image-animation-duration);
2805
+ transition-timing-function: var(--sbb-teaser-image-animation-easing);
2806
+ transition-property: filter, scale;
2805
2807
  }
2806
2808
  :is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) .sbb-figure {
2807
2809
  max-width: 100%;
package/lean-theme.css CHANGED
@@ -2801,7 +2801,9 @@ sbb-tab-nav-bar .sbb-tab-amount {
2801
2801
  :is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) :is(sbb-image, img):not(.sbb-figure-overlap-image) {
2802
2802
  will-change: filter, scale;
2803
2803
  filter: brightness(var(--sbb-teaser-image-brightness, 1));
2804
- transition: filter, scale var(--sbb-teaser-image-animation-duration) var(--sbb-teaser-image-animation-easing);
2804
+ transition-duration: var(--sbb-teaser-image-animation-duration);
2805
+ transition-timing-function: var(--sbb-teaser-image-animation-easing);
2806
+ transition-property: filter, scale;
2805
2807
  }
2806
2808
  :is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) .sbb-figure {
2807
2809
  max-width: 100%;
@@ -2801,7 +2801,9 @@ sbb-tab-nav-bar .sbb-tab-amount {
2801
2801
  :is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) :is(sbb-image, img):not(.sbb-figure-overlap-image) {
2802
2802
  will-change: filter, scale;
2803
2803
  filter: brightness(var(--sbb-teaser-image-brightness, 1));
2804
- transition: filter, scale var(--sbb-teaser-image-animation-duration) var(--sbb-teaser-image-animation-easing);
2804
+ transition-duration: var(--sbb-teaser-image-animation-duration);
2805
+ transition-timing-function: var(--sbb-teaser-image-animation-easing);
2806
+ transition-property: filter, scale;
2805
2807
  }
2806
2808
  :is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) .sbb-figure {
2807
2809
  max-width: 100%;
package/package.json CHANGED
@@ -1,12 +1,12 @@
1
1
  {
2
2
  "name": "@sbb-esta/lyne-elements-dev",
3
- "version": "5.4.1-dev.1785832479",
3
+ "version": "5.4.1-dev.1785836006",
4
4
  "description": "Lyne Design System",
5
5
  "keywords": [
6
6
  "design system",
7
7
  "web components",
8
8
  "lit",
9
- "https://github.com/sbb-design-systems/lyne-components/commit/3818b0b196b1ccf3c55b906b1981d1502309ccc3"
9
+ "https://github.com/sbb-design-systems/lyne-components/commit/d3e0bfaf2ba6afaded51e124cfb4e8ec44fa8d0d"
10
10
  ],
11
11
  "type": "module",
12
12
  "exports": {
package/safety-theme.css CHANGED
@@ -2801,7 +2801,9 @@ sbb-tab-nav-bar .sbb-tab-amount {
2801
2801
  :is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) :is(sbb-image, img):not(.sbb-figure-overlap-image) {
2802
2802
  will-change: filter, scale;
2803
2803
  filter: brightness(var(--sbb-teaser-image-brightness, 1));
2804
- transition: filter, scale var(--sbb-teaser-image-animation-duration) var(--sbb-teaser-image-animation-easing);
2804
+ transition-duration: var(--sbb-teaser-image-animation-duration);
2805
+ transition-timing-function: var(--sbb-teaser-image-animation-easing);
2806
+ transition-property: filter, scale;
2805
2807
  }
2806
2808
  :is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) .sbb-figure {
2807
2809
  max-width: 100%;
@@ -2801,7 +2801,9 @@ sbb-tab-nav-bar .sbb-tab-amount {
2801
2801
  :is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) :is(sbb-image, img):not(.sbb-figure-overlap-image) {
2802
2802
  will-change: filter, scale;
2803
2803
  filter: brightness(var(--sbb-teaser-image-brightness, 1));
2804
- transition: filter, scale var(--sbb-teaser-image-animation-duration) var(--sbb-teaser-image-animation-easing);
2804
+ transition-duration: var(--sbb-teaser-image-animation-duration);
2805
+ transition-timing-function: var(--sbb-teaser-image-animation-easing);
2806
+ transition-property: filter, scale;
2805
2807
  }
2806
2808
  :is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) .sbb-figure {
2807
2809
  max-width: 100%;
@@ -35,9 +35,12 @@ $theme: 'standard' !default;
35
35
  // more specific and overrides would not be respected.
36
36
  will-change: filter, scale;
37
37
  filter: brightness(var(--sbb-teaser-image-brightness, 1));
38
- transition:
39
- filter,
40
- scale var(--sbb-teaser-image-animation-duration) var(--sbb-teaser-image-animation-easing);
38
+
39
+ transition: {
40
+ duration: var(--sbb-teaser-image-animation-duration);
41
+ timing-function: var(--sbb-teaser-image-animation-easing);
42
+ property: filter, scale;
43
+ }
41
44
  }
42
45
 
43
46
  .sbb-figure {