@rolster/styles-foundations 1.1.0 → 1.1.2

package/dist/rolster-styles.rtl.css

@@ -1250,12 +1250,12 @@ select,
 textarea {
   font-family: inherit;
   line-height: normal;
+  font-size: 8rem;
 }
 
 textarea {
   overflow: auto;
   height: auto;
-  font: inherit;
   color: inherit;
 }
 
@@ -1268,7 +1268,6 @@ input,
 optgroup,
 select {
   margin: 0rem;
-  font: inherit;
   color: inherit;
 }
 
@@ -1642,22 +1641,22 @@ p {
 .xs-flex-grid-12 {
   --flex-grid-12-gap: 7.3125rem;
   --flex-grid-8-gap: 7rem;
-  --flex-grid-6-gap: 6, 6475rem;
+  --flex-grid-6-gap: 6.6475rem;
   --flex-grid-4-gap: 6rem;
-  --flex-grid-12-col-2: 6, 624rem;
+  --flex-grid-12-col-2: 6.624rem;
   --flex-grid-12-col-3: 6rem;
-  --flex-grid-12-col-4: 5, 38rem;
-  --flex-grid-12-col-6: 4, 1rem;
+  --flex-grid-12-col-4: 5.38rem;
+  --flex-grid-12-col-6: 4.1rem;
   --flex-grid-12-col-8: 3rem;
-  --flex-grid-8-col-2: 6, 182rem;
-  --flex-grid-8-col-3: 5, 2rem;
+  --flex-grid-8-col-2: 6.182rem;
+  --flex-grid-8-col-3: 5.2rem;
   --flex-grid-8-col-4: 4rem;
-  --flex-grid-8-col-6: 2, 2rem;
-  --flex-grid-6-col-2: 5, 4rem;
+  --flex-grid-8-col-6: 2.2rem;
+  --flex-grid-6-col-2: 5.4rem;
   --flex-grid-6-col-3: 4rem;
-  --flex-grid-6-col-4: 2, 84rem;
+  --flex-grid-6-col-4: 2.84rem;
   --flex-grid-4-col-2: 4rem;
-  --flex-grid-4-col-3: 2, 2rem;
+  --flex-grid-4-col-3: 2.2rem;
   display: inline-flex;
   flex-wrap: wrap;
   gap: var(--sizing-x6);
@@ -1666,22 +1665,22 @@ p {
 .xs-flex-grid-16 {
   --flex-grid-12-gap: 7.3125rem;
   --flex-grid-8-gap: 7rem;
-  --flex-grid-6-gap: 6, 6475rem;
+  --flex-grid-6-gap: 6.6475rem;
   --flex-grid-4-gap: 6rem;
   --flex-grid-12-col-2: 6.66rem;
   --flex-grid-12-col-3: 6rem;
-  --flex-grid-12-col-4: 5, 38rem;
-  --flex-grid-12-col-6: 4, 1rem;
+  --flex-grid-12-col-4: 5.38rem;
+  --flex-grid-12-col-6: 4.1rem;
   --flex-grid-12-col-8: 3rem;
-  --flex-grid-8-col-2: 6, 182rem;
-  --flex-grid-8-col-3: 5, 2rem;
+  --flex-grid-8-col-2: 6.182rem;
+  --flex-grid-8-col-3: 5.2rem;
   --flex-grid-8-col-4: 4rem;
-  --flex-grid-8-col-6: 2, 2rem;
-  --flex-grid-6-col-2: 5, 4rem;
+  --flex-grid-8-col-6: 2.2rem;
+  --flex-grid-6-col-2: 5.4rem;
   --flex-grid-6-col-3: 4rem;
-  --flex-grid-6-col-4: 2, 84rem;
+  --flex-grid-6-col-4: 2.84rem;
   --flex-grid-4-col-2: 4rem;
-  --flex-grid-4-col-3: 2, 2rem;
+  --flex-grid-4-col-3: 2.2rem;
   display: inline-flex;
   flex-wrap: wrap;
   gap: var(--sizing-x8);
@@ -1802,22 +1801,22 @@ p {
   .sm-flex-grid-12 {
     --flex-grid-12-gap: 7.3125rem;
     --flex-grid-8-gap: 7rem;
-    --flex-grid-6-gap: 6, 6475rem;
+    --flex-grid-6-gap: 6.6475rem;
     --flex-grid-4-gap: 6rem;
-    --flex-grid-12-col-2: 6, 624rem;
+    --flex-grid-12-col-2: 6.624rem;
     --flex-grid-12-col-3: 6rem;
-    --flex-grid-12-col-4: 5, 38rem;
-    --flex-grid-12-col-6: 4, 1rem;
+    --flex-grid-12-col-4: 5.38rem;
+    --flex-grid-12-col-6: 4.1rem;
     --flex-grid-12-col-8: 3rem;
-    --flex-grid-8-col-2: 6, 182rem;
-    --flex-grid-8-col-3: 5, 2rem;
+    --flex-grid-8-col-2: 6.182rem;
+    --flex-grid-8-col-3: 5.2rem;
     --flex-grid-8-col-4: 4rem;
-    --flex-grid-8-col-6: 2, 2rem;
-    --flex-grid-6-col-2: 5, 4rem;
+    --flex-grid-8-col-6: 2.2rem;
+    --flex-grid-6-col-2: 5.4rem;
     --flex-grid-6-col-3: 4rem;
-    --flex-grid-6-col-4: 2, 84rem;
+    --flex-grid-6-col-4: 2.84rem;
     --flex-grid-4-col-2: 4rem;
-    --flex-grid-4-col-3: 2, 2rem;
+    --flex-grid-4-col-3: 2.2rem;
     display: inline-flex;
     flex-wrap: wrap;
     gap: var(--sizing-x6);
@@ -1825,22 +1824,22 @@ p {
   .sm-flex-grid-16 {
     --flex-grid-12-gap: 7.3125rem;
     --flex-grid-8-gap: 7rem;
-    --flex-grid-6-gap: 6, 6475rem;
+    --flex-grid-6-gap: 6.6475rem;
     --flex-grid-4-gap: 6rem;
     --flex-grid-12-col-2: 6.66rem;
     --flex-grid-12-col-3: 6rem;
-    --flex-grid-12-col-4: 5, 38rem;
-    --flex-grid-12-col-6: 4, 1rem;
+    --flex-grid-12-col-4: 5.38rem;
+    --flex-grid-12-col-6: 4.1rem;
     --flex-grid-12-col-8: 3rem;
-    --flex-grid-8-col-2: 6, 182rem;
-    --flex-grid-8-col-3: 5, 2rem;
+    --flex-grid-8-col-2: 6.182rem;
+    --flex-grid-8-col-3: 5.2rem;
     --flex-grid-8-col-4: 4rem;
-    --flex-grid-8-col-6: 2, 2rem;
-    --flex-grid-6-col-2: 5, 4rem;
+    --flex-grid-8-col-6: 2.2rem;
+    --flex-grid-6-col-2: 5.4rem;
     --flex-grid-6-col-3: 4rem;
-    --flex-grid-6-col-4: 2, 84rem;
+    --flex-grid-6-col-4: 2.84rem;
     --flex-grid-4-col-2: 4rem;
-    --flex-grid-4-col-3: 2, 2rem;
+    --flex-grid-4-col-3: 2.2rem;
     display: inline-flex;
     flex-wrap: wrap;
     gap: var(--sizing-x8);
@@ -1958,22 +1957,22 @@ p {
   .md-flex-grid-12 {
     --flex-grid-12-gap: 7.3125rem;
     --flex-grid-8-gap: 7rem;
-    --flex-grid-6-gap: 6, 6475rem;
+    --flex-grid-6-gap: 6.6475rem;
     --flex-grid-4-gap: 6rem;
-    --flex-grid-12-col-2: 6, 624rem;
+    --flex-grid-12-col-2: 6.624rem;
     --flex-grid-12-col-3: 6rem;
-    --flex-grid-12-col-4: 5, 38rem;
-    --flex-grid-12-col-6: 4, 1rem;
+    --flex-grid-12-col-4: 5.38rem;
+    --flex-grid-12-col-6: 4.1rem;
     --flex-grid-12-col-8: 3rem;
-    --flex-grid-8-col-2: 6, 182rem;
-    --flex-grid-8-col-3: 5, 2rem;
+    --flex-grid-8-col-2: 6.182rem;
+    --flex-grid-8-col-3: 5.2rem;
     --flex-grid-8-col-4: 4rem;
-    --flex-grid-8-col-6: 2, 2rem;
-    --flex-grid-6-col-2: 5, 4rem;
+    --flex-grid-8-col-6: 2.2rem;
+    --flex-grid-6-col-2: 5.4rem;
     --flex-grid-6-col-3: 4rem;
-    --flex-grid-6-col-4: 2, 84rem;
+    --flex-grid-6-col-4: 2.84rem;
     --flex-grid-4-col-2: 4rem;
-    --flex-grid-4-col-3: 2, 2rem;
+    --flex-grid-4-col-3: 2.2rem;
     display: inline-flex;
     flex-wrap: wrap;
     gap: var(--sizing-x6);
@@ -1981,22 +1980,22 @@ p {
   .md-flex-grid-16 {
     --flex-grid-12-gap: 7.3125rem;
     --flex-grid-8-gap: 7rem;
-    --flex-grid-6-gap: 6, 6475rem;
+    --flex-grid-6-gap: 6.6475rem;
     --flex-grid-4-gap: 6rem;
     --flex-grid-12-col-2: 6.66rem;
     --flex-grid-12-col-3: 6rem;
-    --flex-grid-12-col-4: 5, 38rem;
-    --flex-grid-12-col-6: 4, 1rem;
+    --flex-grid-12-col-4: 5.38rem;
+    --flex-grid-12-col-6: 4.1rem;
     --flex-grid-12-col-8: 3rem;
-    --flex-grid-8-col-2: 6, 182rem;
-    --flex-grid-8-col-3: 5, 2rem;
+    --flex-grid-8-col-2: 6.182rem;
+    --flex-grid-8-col-3: 5.2rem;
     --flex-grid-8-col-4: 4rem;
-    --flex-grid-8-col-6: 2, 2rem;
-    --flex-grid-6-col-2: 5, 4rem;
+    --flex-grid-8-col-6: 2.2rem;
+    --flex-grid-6-col-2: 5.4rem;
     --flex-grid-6-col-3: 4rem;
-    --flex-grid-6-col-4: 2, 84rem;
+    --flex-grid-6-col-4: 2.84rem;
     --flex-grid-4-col-2: 4rem;
-    --flex-grid-4-col-3: 2, 2rem;
+    --flex-grid-4-col-3: 2.2rem;
     display: inline-flex;
     flex-wrap: wrap;
     gap: var(--sizing-x8);
@@ -2114,22 +2113,22 @@ p {
   .lg-flex-grid-12 {
     --flex-grid-12-gap: 7.3125rem;
     --flex-grid-8-gap: 7rem;
-    --flex-grid-6-gap: 6, 6475rem;
+    --flex-grid-6-gap: 6.6475rem;
     --flex-grid-4-gap: 6rem;
-    --flex-grid-12-col-2: 6, 624rem;
+    --flex-grid-12-col-2: 6.624rem;
     --flex-grid-12-col-3: 6rem;
-    --flex-grid-12-col-4: 5, 38rem;
-    --flex-grid-12-col-6: 4, 1rem;
+    --flex-grid-12-col-4: 5.38rem;
+    --flex-grid-12-col-6: 4.1rem;
     --flex-grid-12-col-8: 3rem;
-    --flex-grid-8-col-2: 6, 182rem;
-    --flex-grid-8-col-3: 5, 2rem;
+    --flex-grid-8-col-2: 6.182rem;
+    --flex-grid-8-col-3: 5.2rem;
     --flex-grid-8-col-4: 4rem;
-    --flex-grid-8-col-6: 2, 2rem;
-    --flex-grid-6-col-2: 5, 4rem;
+    --flex-grid-8-col-6: 2.2rem;
+    --flex-grid-6-col-2: 5.4rem;
     --flex-grid-6-col-3: 4rem;
-    --flex-grid-6-col-4: 2, 84rem;
+    --flex-grid-6-col-4: 2.84rem;
     --flex-grid-4-col-2: 4rem;
-    --flex-grid-4-col-3: 2, 2rem;
+    --flex-grid-4-col-3: 2.2rem;
     display: inline-flex;
     flex-wrap: wrap;
     gap: var(--sizing-x6);
@@ -2137,22 +2136,22 @@ p {
   .lg-flex-grid-16 {
     --flex-grid-12-gap: 7.3125rem;
     --flex-grid-8-gap: 7rem;
-    --flex-grid-6-gap: 6, 6475rem;
+    --flex-grid-6-gap: 6.6475rem;
     --flex-grid-4-gap: 6rem;
     --flex-grid-12-col-2: 6.66rem;
     --flex-grid-12-col-3: 6rem;
-    --flex-grid-12-col-4: 5, 38rem;
-    --flex-grid-12-col-6: 4, 1rem;
+    --flex-grid-12-col-4: 5.38rem;
+    --flex-grid-12-col-6: 4.1rem;
     --flex-grid-12-col-8: 3rem;
-    --flex-grid-8-col-2: 6, 182rem;
-    --flex-grid-8-col-3: 5, 2rem;
+    --flex-grid-8-col-2: 6.182rem;
+    --flex-grid-8-col-3: 5.2rem;
     --flex-grid-8-col-4: 4rem;
-    --flex-grid-8-col-6: 2, 2rem;
-    --flex-grid-6-col-2: 5, 4rem;
+    --flex-grid-8-col-6: 2.2rem;
+    --flex-grid-6-col-2: 5.4rem;
     --flex-grid-6-col-3: 4rem;
-    --flex-grid-6-col-4: 2, 84rem;
+    --flex-grid-6-col-4: 2.84rem;
     --flex-grid-4-col-2: 4rem;
-    --flex-grid-4-col-3: 2, 2rem;
+    --flex-grid-4-col-3: 2.2rem;
     display: inline-flex;
     flex-wrap: wrap;
     gap: var(--sizing-x8);
@@ -2270,22 +2269,22 @@ p {
   .xl-flex-grid-12 {
     --flex-grid-12-gap: 7.3125rem;
     --flex-grid-8-gap: 7rem;
-    --flex-grid-6-gap: 6, 6475rem;
+    --flex-grid-6-gap: 6.6475rem;
     --flex-grid-4-gap: 6rem;
-    --flex-grid-12-col-2: 6, 624rem;
+    --flex-grid-12-col-2: 6.624rem;
     --flex-grid-12-col-3: 6rem;
-    --flex-grid-12-col-4: 5, 38rem;
-    --flex-grid-12-col-6: 4, 1rem;
+    --flex-grid-12-col-4: 5.38rem;
+    --flex-grid-12-col-6: 4.1rem;
     --flex-grid-12-col-8: 3rem;
-    --flex-grid-8-col-2: 6, 182rem;
-    --flex-grid-8-col-3: 5, 2rem;
+    --flex-grid-8-col-2: 6.182rem;
+    --flex-grid-8-col-3: 5.2rem;
     --flex-grid-8-col-4: 4rem;
-    --flex-grid-8-col-6: 2, 2rem;
-    --flex-grid-6-col-2: 5, 4rem;
+    --flex-grid-8-col-6: 2.2rem;
+    --flex-grid-6-col-2: 5.4rem;
     --flex-grid-6-col-3: 4rem;
-    --flex-grid-6-col-4: 2, 84rem;
+    --flex-grid-6-col-4: 2.84rem;
     --flex-grid-4-col-2: 4rem;
-    --flex-grid-4-col-3: 2, 2rem;
+    --flex-grid-4-col-3: 2.2rem;
     display: inline-flex;
     flex-wrap: wrap;
     gap: var(--sizing-x6);
@@ -2293,22 +2292,22 @@ p {
   .xl-flex-grid-16 {
     --flex-grid-12-gap: 7.3125rem;
     --flex-grid-8-gap: 7rem;
-    --flex-grid-6-gap: 6, 6475rem;
+    --flex-grid-6-gap: 6.6475rem;
     --flex-grid-4-gap: 6rem;
     --flex-grid-12-col-2: 6.66rem;
     --flex-grid-12-col-3: 6rem;
-    --flex-grid-12-col-4: 5, 38rem;
-    --flex-grid-12-col-6: 4, 1rem;
+    --flex-grid-12-col-4: 5.38rem;
+    --flex-grid-12-col-6: 4.1rem;
     --flex-grid-12-col-8: 3rem;
-    --flex-grid-8-col-2: 6, 182rem;
-    --flex-grid-8-col-3: 5, 2rem;
+    --flex-grid-8-col-2: 6.182rem;
+    --flex-grid-8-col-3: 5.2rem;
     --flex-grid-8-col-4: 4rem;
-    --flex-grid-8-col-6: 2, 2rem;
-    --flex-grid-6-col-2: 5, 4rem;
+    --flex-grid-8-col-6: 2.2rem;
+    --flex-grid-6-col-2: 5.4rem;
     --flex-grid-6-col-3: 4rem;
-    --flex-grid-6-col-4: 2, 84rem;
+    --flex-grid-6-col-4: 2.84rem;
     --flex-grid-4-col-2: 4rem;
-    --flex-grid-4-col-3: 2, 2rem;
+    --flex-grid-4-col-3: 2.2rem;
     display: inline-flex;
     flex-wrap: wrap;
     gap: var(--sizing-x8);
@@ -3494,7 +3493,7 @@ button {
   --rls-action-color: var(--color-theme-300);
   --rls-action-ripple-color: var(--rls-action-color);
   --rls-action-ripple-dimension: var(--sizing-x18);
-  --rls-action-ripple-position: -1.125rem;
+  --rls-action-ripple-position: -9rem;
   --rls-avatar-font-size: var(--title-font-size);
   --rls-avatar-border-radius: var(--sizing-x4);
   --rls-avatar-width: var(--sizing-x24);
@@ -3515,7 +3514,7 @@ button {
   --rls-button-content-radius: var(--sizing-x2);
   --rls-card-content-padding: var(--sizing-x8);
   --rls-datatable-letter-spacing: 0.0625em;
-  --rls-datatable-font-size: 0.875rem;
+  --rls-datatable-font-size: 7rem;
   --rls-form-footer-justify-content: end;
   --rls-icon-font-size: var(--sizing-x12);
   --rls-icon-width: var(--sizing-x12);
@@ -3533,7 +3532,7 @@ button {
   --rls-switch-element-size: var(--sizing-x12);
   --rls-switch-bar-radius: var(--sizing-x3);
   --rls-switch-bar-height: var(--sizing-x6);
-  --rls-tabulartext-char-width: 0.625rem;
+  --rls-tabulartext-char-width: 5rem;
   --rls-tabulartext-pointer-width: 2rem;
   --rls-toolbar-height: var(--sizing-x28);
 }
@@ -3559,14 +3558,14 @@ button {
   --rls-toolbar-height: 100%;
   position: relative;
   width: 100%;
-  height: 28rem;
+  height: var(--sizing-x28);
   box-sizing: border-box;
   z-index: var(--z-index-8);
   background: var(--background-theme-100);
 }
 .rls-app__header + .rls-app__page,
 .rls-app__header + .rls-app__content {
-  height: calc(100vh - 28rem);
+  height: calc(100vh - var(--sizing-x28));
 }
 
 .rls-app__content {
@@ -3591,18 +3590,18 @@ button {
 }
 .rls-app__page__nav {
   position: relative;
-  width: 20rem;
+  width: 160rem;
   height: 100%;
   margin: 0rem;
   padding: 0rem;
   overflow: auto;
   box-sizing: border-box;
-  border-radius: 0rem 0rem 0rem 16rem;
+  border-radius: 0rem 0rem 0rem var(--sizing-x16);
   background: var(--background-theme-100);
 }
 .rls-app__page__nav + .rls-app__page__content {
-  --rls-snackbar-left: calc(50% + 10rem);
-  width: calc(100% - 20rem);
+  --rls-snackbar-left: calc(50% + 80rem);
+  width: calc(100% - 160rem);
 }
 .rls-app__page__content {
   display: flex;
@@ -3616,7 +3615,7 @@ button {
 }
 
 .rls-divider {
-  height: 1rem;
+  height: var(--sizing-x1);
   background-image: linear-gradient(
     to left,
     var(--border-theme-100) 50%,
@@ -3657,9 +3656,8 @@ button {
 }
 .rls-box-field__label {
   position: relative;
-  float: right;
   width: 100%;
-  padding: 0rem 0.625rem;
+  padding: 0rem 5rem;
   box-sizing: border-box;
   color: var(--rls-boxfield-label-font-color);
   opacity: var(--pvt-label-opacity);
@@ -3688,7 +3686,7 @@ button {
 }
 .rls-box-field__helper {
   color: var(--color-theme-100);
-  padding: 0rem 0.625rem;
+  padding: 0rem 5rem;
   box-sizing: border-box;
   font-weight: var(--font-weight-medium);
   font-size: var(--overline-font-size);
@@ -3896,15 +3894,15 @@ button {
   font-weight: var(--font-weight-semibold);
   font-size: var(--smalltext-font-size);
   letter-spacing: var(--smalltext-letter-spacing);
-  min-height: 8rem;
-  line-height: 8rem;
+  min-height: var(--sizing-x8);
+  line-height: var(--sizing-x8);
 }
 .rls-datatable__cell > .rls-ballot .rls-ballot__subtitle {
   margin-top: 0rem;
   font-size: var(--overline-font-size);
   letter-spacing: var(--overline-letter-spacing);
-  min-height: 8rem;
-  line-height: 8rem;
+  min-height: var(--sizing-x8);
+  line-height: var(--sizing-x8);
 }
 .rls-datatable__cell > a:hover {
   color: var(--color-theme-700);
@@ -3941,7 +3939,7 @@ button {
   --rls-boxfield-body-padding: var(--sizing-x3) var(--sizing-x4);
   --pvt-action-font-color: var(--color-theme-300);
   --pvt-list-height: 0rem;
-  --pvt-list-max-height: 20rem;
+  --pvt-list-max-height: 160rem;
   --pvt-list-opacity: 0;
   --pvt-list-transform: scale(0, 0);
   --pvt-list-transform-origin: 0% 0%;
@@ -3969,7 +3967,7 @@ button {
   outline: none;
   background: transparent;
   color: var(--rls-input-font-color);
-  font-size: var(--rls-input-size);
+  font-size: var(--rls-input-font-size);
   font-weight: var(--font-weight-medium);
   letter-spacing: var(--rls-input-letter-spacing);
 }
@@ -4030,7 +4028,7 @@ button {
   max-height: var(--pvt-list-max-height);
   padding: var(--sizing-x4) var(--sizing-x2);
   box-sizing: border-box;
-  border-radius: 4rem;
+  border-radius: var(--sizing-x4);
   overflow: hidden;
   z-index: var(--z-index-2);
   background: var(--background-theme-500);
@@ -4137,7 +4135,7 @@ button {
     position: absolute;
     bottom: 0rem;
     width: 100%;
-    max-width: 25rem;
+    max-width: 200rem;
     max-height: 75%;
     padding: var(--sizing-x8) var(--sizing-x2);
     border-radius: var(--sizing-x4) var(--sizing-x4) 0rem 0rem;
@@ -4152,7 +4150,7 @@ button {
   .rls-list-field__empty__avatar {
     width: 100%;
     height: auto;
-    max-width: 8rem;
+    max-width: var(--sizing-x8);
     margin: auto;
     padding-bottom: var(--sizing-x6);
   }