diff --git a/src/components/dialog/dialog.scss b/src/components/dialog/dialog.scss index dc23a6c41f..a7f42eb7ef 100644 --- a/src/components/dialog/dialog.scss +++ b/src/components/dialog/dialog.scss @@ -136,11 +136,6 @@ border-radius: 0; } - :host([data-state='closing']) & { - pointer-events: none; - animation-name: close; - } - :host([data-state]:not([data-state='closed'])) & { display: block; @@ -151,6 +146,11 @@ } } + :host([data-state][data-state='closing']) & { + pointer-events: none; + animation-name: close; + } + @include sbb.if-forced-colors { outline: var(--sbb-border-width-1x) solid CanvasText; } diff --git a/src/components/menu/menu/menu.scss b/src/components/menu/menu/menu.scss index 005bd64445..d709fa3de2 100644 --- a/src/components/menu/menu/menu.scss +++ b/src/components/menu/menu/menu.scss @@ -111,11 +111,6 @@ padding: 0; overflow: hidden; - :host([data-state='closing']) & { - pointer-events: none; - animation-name: close; - } - :host([data-state]:not([data-state='closed'])) & { display: block; opacity: 1; @@ -127,6 +122,11 @@ } } + :host([data-state][data-state='closing']) & { + pointer-events: none; + animation-name: close; + } + @include sbb.if-forced-colors { outline: var(--sbb-border-width-1x) solid CanvasText; } diff --git a/src/components/navigation/navigation-section/navigation-section.scss b/src/components/navigation/navigation-section/navigation-section.scss index 1ad0c78b59..ead987bea6 100644 --- a/src/components/navigation/navigation-section/navigation-section.scss +++ b/src/components/navigation/navigation-section/navigation-section.scss @@ -113,10 +113,6 @@ padding: 0; overflow: hidden; - :host([data-state='closing']) & { - animation-name: close; - } - :host([data-state]:not([data-state='closed'])) & { display: block; @@ -127,6 +123,10 @@ } } + :host([data-state][data-state='closing']) & { + animation-name: close; + } + @include sbb.if-forced-colors { outline: var(--sbb-border-width-1x) solid CanvasText; } diff --git a/src/components/navigation/navigation/navigation.scss b/src/components/navigation/navigation/navigation.scss index 7c8211586c..98d3514ec2 100644 --- a/src/components/navigation/navigation/navigation.scss +++ b/src/components/navigation/navigation/navigation.scss @@ -149,11 +149,6 @@ background: var(--sbb-color-midnight-default); } - :host([data-state='closing']) & { - pointer-events: none; - animation-name: close; - } - :host([data-state]:not([data-state='closed'])) & { display: block; pointer-events: all; @@ -165,6 +160,11 @@ } } + :host([data-state][data-state='closing']) & { + pointer-events: none; + animation-name: close; + } + @include sbb.if-forced-colors { outline: var(--sbb-border-width-1x) solid CanvasText; } diff --git a/src/components/tooltip/tooltip/tooltip.scss b/src/components/tooltip/tooltip/tooltip.scss index cad2c5b2fb..fccfe97735 100644 --- a/src/components/tooltip/tooltip/tooltip.scss +++ b/src/components/tooltip/tooltip/tooltip.scss @@ -80,20 +80,20 @@ width: max-content; background-color: var(--sbb-tooltip-background); - :host([data-state='closing']) & { - pointer-events: none; + :host([data-state]:not([data-state='closed'])) & { + display: block; + animation: { - name: close; + name: open; duration: var(--sbb-tooltip-animation-duration); timing-function: var(--sbb-tooltip-animation-easing); } } - :host([data-state]:not([data-state='closed'])) & { - display: block; - + :host([data-state][data-state='closing']) & { + pointer-events: none; animation: { - name: open; + name: close; duration: var(--sbb-tooltip-animation-duration); timing-function: var(--sbb-tooltip-animation-easing); }