From 8bbb9855085526fe12412f225a12271b8c613244 Mon Sep 17 00:00:00 2001
From: Jeri Peier <jeremias.peier@sbb.ch>
Date: Thu, 21 Nov 2024 15:57:52 +0100
Subject: [PATCH] refactor: remove dvh/dvw backwards compatibility (#3228)

---
 src/elements/menu/menu/menu.scss                 |  8 +-------
 .../navigation-section/navigation-section.scss   | 16 ++--------------
 .../navigation/navigation/navigation.scss        |  8 +-------
 3 files changed, 4 insertions(+), 28 deletions(-)

diff --git a/src/elements/menu/menu/menu.scss b/src/elements/menu/menu/menu.scss
index b6bed2a035..f34441c9d5 100644
--- a/src/elements/menu/menu/menu.scss
+++ b/src/elements/menu/menu/menu.scss
@@ -20,7 +20,7 @@
   --sbb-menu-max-width: 100%;
   --sbb-menu-min-width: 100%;
   --sbb-menu-inset: 0 auto auto 0;
-  --sbb-menu-container-height: 100vh;
+  --sbb-menu-container-height: 100dvh;
 
   // 85vh is not an exact value but looks optimized for mobile view.
   --sbb-menu-max-height: calc(85vh - var(--sbb-spacing-fixed-8x));
@@ -29,12 +29,6 @@
   --sbb-menu-visibility: hidden;
   --sbb-menu-backdrop-color: transparent;
 
-  // Needed for backwards compatibility
-  // TODO: Remove once not needed
-  @supports (height: 100dvh) {
-    --sbb-menu-container-height: 100dvh;
-  }
-
   @include sbb.mq($from: medium) {
     --sbb-menu-transform: translateY(var(--sbb-spacing-fixed-2x));
     --sbb-menu-max-width: #{sbb.px-to-rem-build(320)};
diff --git a/src/elements/navigation/navigation-section/navigation-section.scss b/src/elements/navigation/navigation-section/navigation-section.scss
index 5fed1907b2..cbd99f7002 100644
--- a/src/elements/navigation/navigation-section/navigation-section.scss
+++ b/src/elements/navigation/navigation-section/navigation-section.scss
@@ -18,8 +18,8 @@
   --sbb-navigation-section-transform: translateX(100%);
   --sbb-navigation-section-content-padding-inline-start: var(--sbb-spacing-fixed-12x);
   --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);
-  --sbb-navigation-section-width: 100vw;
-  --sbb-navigation-section-height: 100vh;
+  --sbb-navigation-section-width: 100dvw;
+  --sbb-navigation-section-height: 100dvh;
 
   // We have to place the styles on the host as it has to be aligned on the grid of the navigation
   display: var(--sbb-navigation-section-display);
@@ -31,18 +31,6 @@
   height: var(--sbb-navigation-section-height);
   z-index: var(--sbb-navigation-z-index, var(--sbb-overlay-default-z-index));
 
-  // Needed for backwards compatibility
-  // TODO: Remove once not needed
-  @supports (width: 100dvw) {
-    --sbb-navigation-section-width: 100dvw;
-  }
-
-  // Needed for backwards compatibility
-  // TODO: Remove once not needed
-  @supports (height: 100dvh) {
-    --sbb-navigation-section-height: 100dvh;
-  }
-
   @include sbb.mq($from: large) {
     --sbb-navigation-section-column: 5 / 9;
     --sbb-navigation-section-animation-duration: var(
diff --git a/src/elements/navigation/navigation/navigation.scss b/src/elements/navigation/navigation/navigation.scss
index 8bb070ccd7..07d10b96eb 100644
--- a/src/elements/navigation/navigation/navigation.scss
+++ b/src/elements/navigation/navigation/navigation.scss
@@ -31,7 +31,7 @@
   --sbb-navigation-transform: translateX(-100%);
   --sbb-navigation-content-transform: translateX(0);
   --sbb-navigation-width: 100%;
-  --sbb-navigation-height: 100vh;
+  --sbb-navigation-height: 100dvh;
   --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);
 
   display: block;
@@ -40,12 +40,6 @@
   z-index: var(--sbb-navigation-z-index, var(--sbb-overlay-default-z-index));
   overflow: hidden;
 
-  // Needed for backwards compatibility
-  // TODO: Remove once not needed
-  @supports (height: 100dvh) {
-    --sbb-navigation-height: 100dvh;
-  }
-
   @include sbb.mq($from: medium) {
     --sbb-navigation-grid-column: 1 / 9;
   }