@rolster/styles-foundations 2.5.30 → 2.5.31

package/dist/styles.rtl.css

@@ -4289,13 +4289,13 @@ button {
 }
 .rls-app__body {
   --pvt-navbar-width: var(--rlc-app-navbar-width, 160rem);
-  --pvt-navbar-left: 0%;
+  --pvt-navbar-width-condense: 36rem;
   display: flex;
   flex-direction: column;
   padding: 0rem;
   margin: 0rem;
-  width: 100vw;
-  height: 100vh;
+  width: var(--rls-html-max-width);
+  height: var(--rls-html-max-height);
   overflow: hidden;
   z-index: var(--rls-z-index-8);
 }
@@ -4303,7 +4303,7 @@ button {
   --rlc-snackbar-left: calc(50% + calc(var(--pvt-navbar-width) / 2));
 }
 .rls-app__body--navbar-condense {
-  --pvt-navbar-width: 36rem;
+  --pvt-navbar-width: var(--pvt-navbar-width-condense);
 }
 .rls-app__header {
   --rlc-toolbar-height: 100%;
@@ -4317,12 +4317,12 @@ button {
 }
 .rls-app__header + .rls-app__page,
 .rls-app__header + .rls-app__content {
-  height: calc(100vh - var(--pvt-header-height));
+  height: calc(var(--rls-html-max-height) - var(--pvt-header-height));
 }
 .rls-app__content {
   position: relative;
   width: 100%;
-  height: 100vh;
+  height: var(--rls-html-max-height);
   margin: 0rem;
   padding: 0rem;
   overflow: auto;
@@ -4333,7 +4333,7 @@ button {
   position: relative;
   display: flex;
   width: 100%;
-  height: 100vh;
+  height: var(--rls-html-max-height);
   margin: 0rem;
   padding: 0rem;
   overflow: hidden;
@@ -4345,22 +4345,12 @@ button {
   height: 100%;
   margin: 0rem;
   padding: 0rem;
-  transition: width 240ms var(--rls-acceleration-curve);
+  transition: width 280ms var(--rls-acceleration-curve);
 }
 .rls-app__page__nav + .rls-app__page__content {
   --rlc-snackbar-left: calc(50% + calc(var(--pvt-navbar-width) / 2));
   width: calc(100% - var(--pvt-navbar-width));
 }
-.rls-app__page__nav__content {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  background: var(--rlc-app-navbar-background, var(--rls-app-color-100));
-  border-radius: 0rem 0rem 0rem var(--rls-sizing-x16);
-  overflow-x: hidden;
-  overflow-y: auto;
-  box-sizing: border-box;
-}
 .rls-app__page__content {
   display: flex;
   flex-direction: column;
@@ -4372,22 +4362,19 @@ button {
   box-sizing: border-box;
   transition: width 240ms var(--rls-acceleration-curve);
 }
-@media screen and (max-width: 560px) {
+@media screen and (max-width: 640px) {
   .rls-app__body {
-    --pvt-navbar-width: 0rem;
-    --pvt-navbar-left: -100%;
-  }
-  .rls-app__body--snackbar {
-    --rlc-snackbar-left: 50%;
+    --pvt-navbar-width: 140rem;
+    --pvt-navbar-width-condense: 140rem;
+    --pvt-section-navbar: 0rem;
   }
   .rls-app__body--navbar-condense {
-    --pvt-navbar-width: 0rem;
-    --pvt-navbar-left: 0%;
+    --pvt-section-navbar: 140rem;
   }
-  .rls-app__page__navbar {
-    position: absolute;
-    right: var(--pvt-navbar-left);
-    transition: right 240ms var(--rls-acceleration-curve);
+  .rls-app__page {
+    width: calc(var(--rls-html-max-width) + var(--pvt-navbar-width));
+    right: calc(var(--pvt-section-navbar) * -1);
+    transition: right 280ms var(--rls-standard-curve);
   }
 }
 .rls-datatable {
@@ -5067,6 +5054,10 @@ button {
   background-size: var(--rlc-divider-size, var(--rls-sizing-x4));
   background-repeat: repeat-x;
 }
+:root {
+  --rls-html-max-width: 100%;
+  --rls-html-max-height: 100%;
+}
 .rls-aspect-ratio {
   --rls-app-font-size-1360: 2.5px;
   --rls-app-font-size-1820: 2.925px;