From 73854b311b827fa2a09286064e3629af1bf46cb2 Mon Sep 17 00:00:00 2001 From: Tommmaso Menga Date: Thu, 21 Mar 2024 17:45:02 +0100 Subject: [PATCH] feat(alert): disable fade-in animation by default --- src/components/alert/alert/alert.scss | 11 +++++++---- src/components/alert/alert/readme.md | 2 +- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/components/alert/alert/alert.scss b/src/components/alert/alert/alert.scss index 8c19d8a9575..79130680099 100644 --- a/src/components/alert/alert/alert.scss +++ b/src/components/alert/alert/alert.scss @@ -19,10 +19,9 @@ $open-anim-opacity-to: 1; --sbb-alert-icon-size: #{sbb.px-to-rem-build(20)}; --sbb-alert-close-icon-size: var(--sbb-size-icon-ui-small); --sbb-alert-gap: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs); - --sbb-alert-animation-duration: var( - --sbb-disable-animation-zero-time, - var(--sbb-animation-duration-6x) - ); + + // By default, the open animation is disabled + --sbb-alert-open-animation-duration: 0.1ms; @include sbb.mq($from: medium) { --sbb-alert-icon-size: #{sbb.px-to-rem-build(28)}; @@ -36,6 +35,10 @@ $open-anim-opacity-to: 1; } } +:host(.sbb-animate) { + --sbb-alert-open-animation-duration: var(--sbb-animation-duration-6x); +} + :host([size='l']) { --sbb-alert-icon-size: var(--sbb-size-icon-ui-small); diff --git a/src/components/alert/alert/readme.md b/src/components/alert/alert/readme.md index 62a14199afe..f3432ea1600 100644 --- a/src/components/alert/alert/readme.md +++ b/src/components/alert/alert/readme.md @@ -73,7 +73,7 @@ Avoid slotting block elements (e.g. `
`) as this violates semantic rules and ## Animation -Add the `sbb-disable-animation` class to disable animation and transition effects for the element and all its children. +By default, the `sbb-alert` does not have an open animation. Add the `.sbb-animate` class to the element to enable a fade-in animation.