@rolster/styles-foundations 2.5.29 → 2.5.31

package/dist/styles.rtl.css

@@ -4289,12 +4289,13 @@ button {
 }
 .rls-app__body {
   --pvt-navbar-width: var(--rlc-app-navbar-width, 160rem);
+  --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);
 }
@@ -4302,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%;
@@ -4316,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;
@@ -4332,7 +4333,7 @@ button {
   position: relative;
   display: flex;
   width: 100%;
-  height: 100vh;
+  height: var(--rls-html-max-height);
   margin: 0rem;
   padding: 0rem;
   overflow: hidden;
@@ -4344,12 +4345,7 @@ button {
   height: 100%;
   margin: 0rem;
   padding: 0rem;
-  box-sizing: border-box;
-  overflow-x: hidden;
-  overflow-y: auto;
-  border-radius: 0rem 0rem 0rem var(--rls-sizing-x16);
-  background: var(--rlc-app-navbar-background, var(--rls-app-color-100));
-  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));
@@ -4366,6 +4362,21 @@ button {
   box-sizing: border-box;
   transition: width 240ms var(--rls-acceleration-curve);
 }
+@media screen and (max-width: 640px) {
+  .rls-app__body {
+    --pvt-navbar-width: 140rem;
+    --pvt-navbar-width-condense: 140rem;
+    --pvt-section-navbar: 0rem;
+  }
+  .rls-app__body--navbar-condense {
+    --pvt-section-navbar: 140rem;
+  }
+  .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 {
   --pvt-datatable-letter-spacing: var(--rlc-datatable-letter-spacing, 0.0625em);
   --pvt-datatable-font-size: var(--rlc-datatable-font-size, 7rem);
@@ -5043,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;