fix(back-to-top): use logical properties in demo styles

RedHat-UX · Jan 16, 2025 · 903b015 · 903b015
1 parent 8baf8f1
commit 903b015
Show file tree

Hide file tree

Showing 8 changed files with 36 additions and 36 deletions.
diff --git a/elements/rh-back-to-top/demo/always-visible.html b/elements/rh-back-to-top/demo/always-visible.html
@@ -8,13 +8,13 @@
   main {
     display: block;
     scroll-behavior: smooth;
-    max-height: calc(100dvh - var(--pf-demo-header-height)) !important;
+    max-block-size: calc(100svb - var(--pf-demo-header-height)) !important;
   }
   #bottom {
     position: absolute;
-    bottom: 0;
+    inset-block-end: 0;
   }
   #nav {
-    height: calc(100dvh - var(--pf-demo-header-height, 4.375rem)); !important;
+    block-size: calc(100svb - var(--pf-demo-header-height, 4.375rem)); !important;
   }
 </style>
diff --git a/elements/rh-back-to-top/demo/color-context.html b/elements/rh-back-to-top/demo/color-context.html
@@ -33,21 +33,21 @@
   main {
     display: block;
     scroll-behavior: smooth;
-    max-height: calc(100dvh - var(--pf-demo-header-height)) !important;
+    max-block-size: calc(100svb - var(--pf-demo-header-height)) !important;
   }
 
   #nav {
-    height: calc(100dvh - var(--pf-demo-header-height, 4.375rem)) !important;
+    block-size: calc(100svb - var(--pf-demo-header-height, 4.375rem)) !important;
   }
 
   #overflow {
-    min-height: calc(100dvh + 401px);
+    min-block-size: calc(100svb + 401px);
     position: relative;
   }
 
   #bottom {
     position: absolute;
-    bottom: 0;
+    inset-block-end: 0;
   }
 
   @media (prefers-reduced-motion: reduce) {

diff --git a/elements/rh-back-to-top/demo/no-slotted-text.html b/elements/rh-back-to-top/demo/no-slotted-text.html
@@ -13,21 +13,21 @@
   main {
     display: block;
     scroll-behavior: smooth;
-    max-height: calc(100dvh - var(--pf-demo-header-height)) !important;
+    max-block-size: calc(100svb - var(--pf-demo-header-height)) !important;
   }
 
   #nav {
-    height: calc(100dvh - var(--pf-demo-header-height, 4.375rem)) !important;
+    block-size: calc(100svb - var(--pf-demo-header-height, 4.375rem)) !important;
   }
 
   #overflow {
-    min-height: calc(100dvh + 401px);
+    min-block-size: calc(100svb + 401px);
     position: relative;
   }
 
   #bottom {
     position: absolute;
-    bottom: 0;
+    inset-block-end: 0;
   }
 
   @media (prefers-reduced-motion: reduce) {

diff --git a/elements/rh-back-to-top/demo/on-a-scrollable-page.html b/elements/rh-back-to-top/demo/on-a-scrollable-page.html
@@ -13,21 +13,21 @@
   main {
     display: block;
     scroll-behavior: smooth;
-    max-height: calc(100dvh - var(--pf-demo-header-height)) !important;
+    max-block-size: calc(100svb - var(--pf-demo-header-height)) !important;
   }
 
   #nav {
-    height: calc(100dvh - var(--pf-demo-header-height, 4.375rem)) !important;
+    block-size: calc(100svb - var(--pf-demo-header-height, 4.375rem)) !important;
   }
 
   #overflow {
-    min-height: calc(100dvh + 401px);
+    min-block-size: calc(100svb + 401px);
     position: relative;
   }
 
   #bottom {
     position: absolute;
-    bottom: 0;
+    inset-block-end: 0;
   }
 
   @media (prefers-reduced-motion: reduce) {

diff --git a/elements/rh-back-to-top/demo/position-sticky.html b/elements/rh-back-to-top/demo/position-sticky.html
@@ -32,15 +32,15 @@ <h2>Back to Top Demo</h2>
   /* override to place rh-back-to-top in context of page elements */
   rh-back-to-top {
     position: sticky;
-    float: right;
+    float: inline-end;
   }
 
   /* Addtional styles for demo page layout */
   #mock {
-    --_nav-height: 70px;
-    --_footer-height: 400px;
-    --_hero-height: 300px;
-    --_content-width: 60rem;
+    --_nav-block-size: 70px;
+    --_footer-block-size: 400px;
+    --_hero-block-size: 300px;
+    --_content-inline-size: 60rem;
 
     scroll-behavior: smooth;
   }
@@ -49,22 +49,22 @@ <h2>Back to Top Demo</h2>
   }
   #mock .nav {
     background-color: #151515;
-    height: var(--_nav-height);
+    block-size: var(--_nav-block-size);
     color: #ffffff;
   }
   #mock .main {
     position: relative;
     margin: 0 auto;
-    max-width: var(--_content-width);
+    max-inline-size: var(--_content-inline-size);
     margin-block: var(--rh-spacer-2xl, 32px);
     padding: var(--rh-spacer-2xl, 32px);
-    min-height: calc(100dvh - var(--_nav-height) - var(--_hero-height));
+    min-block-size: calc(100svb - var(--_nav-block-size) - var(--_hero-block-size));
 
   }
   #mock .hero {
     display: flex;
     justify-content: space-evenly;
-    height: var(--_hero-height);
+    block-size: var(--_hero-block-size);
     background-color: var(--rh-color-surface-lighter, #f2f2f2);
     padding-inline: var(--rh-spacer-2xl, 32px);
     flex-direction: column;
@@ -75,18 +75,18 @@ <h2>Back to Top Demo</h2>
     flex-direction: column;
     padding-inline: var(--rh-spacer-2xl, 32px);
     margin: 0 auto;
-    max-width: var(--_content-width);
+    max-inline-size: var(--_content-inline-size);
   }
   #mock .footer {
     position: static;
     background-color: #151515;
-    height: var(--_footer-height);
+    block-size: var(--_footer-block-size);
     margin-block-start: var(--rh-space-6xl, 96px);
     color: #ffffff;
   }
   #mock #bottom {
     position: absolute;
-    bottom: 0;
+    inset-block-end: 0;
   }
 
   @media (prefers-reduced-motion: reduce) {

diff --git a/elements/rh-back-to-top/demo/rh-back-to-top.html b/elements/rh-back-to-top/demo/rh-back-to-top.html
@@ -9,7 +9,7 @@
 
 <style>
   #overflow {
-    min-height: calc(100dvh + 401px);
+    min-block-size: calc(100svb + 401px);
   }
 
   p {

diff --git a/elements/rh-back-to-top/demo/scroll-distance.html b/elements/rh-back-to-top/demo/scroll-distance.html
@@ -12,22 +12,22 @@
   main {
     display: block;
     scroll-behavior: smooth;
-    max-height: calc(100dvh - var(--pf-demo-header-height)) !important;
+    max-block-size: calc(100svb - var(--pf-demo-header-height)) !important;
   }
 
   #nav {
-    height: calc(100dvh - var(--pf-demo-header-height, 4.375rem)) !important;
+    block-size: calc(100svb - var(--pf-demo-header-height, 4.375rem)) !important;
   }
 
   #overflow {
     /* scroll distance set to 50px */
-    min-height: calc(100dvh + 51px);
+    min-block-size: calc(100svb + 51px);
     position: relative;
   }
 
   #bottom {
     position: absolute;
-    bottom: 0;
+    inset-block-end: 0;
   }
 
   @media (prefers-reduced-motion: reduce) {

diff --git a/elements/rh-back-to-top/demo/warnings.html b/elements/rh-back-to-top/demo/warnings.html
@@ -15,22 +15,22 @@
   main {
     display: block;
     scroll-behavior: smooth;
-    max-height: calc(100dvh - var(--pf-demo-header-height)) !important;
+    max-block-size: calc(100svb - var(--pf-demo-header-height)) !important;
   }
 
   #nav {
-    height: calc(100dvh - var(--pf-demo-header-height, 4.375rem)) !important;
+    block-size: calc(100svb - var(--pf-demo-header-height, 4.375rem)) !important;
   }
 
   #overflow {
     /* Default scroll distance = 400px */
-    min-height: calc(100dvh + 401px);
+    min-block-size: calc(100svb + 401px);
     position: relative;
   }
 
   #bottom {
     position: absolute;
-    bottom: 0;
+    inset-block-end: 0;
   }
 
   @media (prefers-reduced-motion: reduce) {
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,7 +9,7 @@ @@
     <style>
       #overflow {
-        min-height: calc(100dvh + 401px);
+        min-block-size: calc(100svb + 401px);
       }
       p {
@@ Expand Down @@