refactor: remove dvh/dvw backwards compatibility (#3228)

sbb-design-systems · Nov 21, 2024 · ef10abb · ef10abb
1 parent 4acede6
commit ef10abb
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 28 deletions.
diff --git 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
@@ -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
@@ -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;
   }