@rolster/styles-foundations 2.3.9 → 2.3.11

package/dist/styles.css

@@ -0,0 +1,19 @@
+@use 'foundations';
+@use 'utilities';
+@use 'components';
+.rls-aspect-ratio {
+  --rls-app-font-size-1360: 2.5px;
+  --rls-app-font-size-1820: 2.925px;
+}
+
+@media screen and (min-width: 1360px) {
+  .rls-aspect-ratio {
+    --rls-app-font-size: var(--rls-app-font-size-1360);
+  }
+}
+
+@media screen and (min-width: 1820px) {
+  .rls-aspect-ratio {
+    --rls-app-font-size: var(--rls-app-font-size-1820);
+  }
+}

package/dist/styles.min.css

@@ -0,0 +1 @@
+@use "foundations";@use "utilities";@use "components";.rls-aspect-ratio{--rls-app-font-size-1360:2.5px;--rls-app-font-size-1820:2.925px}@media screen and (min-width:1360px){.rls-aspect-ratio{--rls-app-font-size:var(--rls-app-font-size-1360)}}@media screen and (min-width:1820px){.rls-aspect-ratio{--rls-app-font-size:var(--rls-app-font-size-1820)}}

package/dist/styles.rtl.css

@@ -0,0 +1,19 @@
+@use 'foundations';
+@use 'utilities';
+@use 'components';
+.rls-aspect-ratio {
+  --rls-app-font-size-1360: 2.5px;
+  --rls-app-font-size-1820: 2.925px;
+}
+
+@media screen and (min-width: 1360px) {
+  .rls-aspect-ratio {
+    --rls-app-font-size: var(--rls-app-font-size-1360);
+  }
+}
+
+@media screen and (min-width: 1820px) {
+  .rls-aspect-ratio {
+    --rls-app-font-size: var(--rls-app-font-size-1820);
+  }
+}

package/dist/styles.rtl.min.css

@@ -0,0 +1 @@
+@use "foundations";@use "utilities";@use "components";.rls-aspect-ratio{--rls-app-font-size-1360:2.5px;--rls-app-font-size-1820:2.925px}@media screen and (min-width:1360px){.rls-aspect-ratio{--rls-app-font-size:var(--rls-app-font-size-1360)}}@media screen and (min-width:1820px){.rls-aspect-ratio{--rls-app-font-size:var(--rls-app-font-size-1820)}}

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@rolster/styles-foundations",
-  "version": "2.3.9",
+  "version": "2.3.11",
   "description": "Front-end style pack to develop responsive and mobile projects on the web with Rolster.",
-  "sass": "scss/_rolster-styles.scss",
-  "style": "dist/rolster-styles.css",
+  "sass": "scss/styles.scss",
+  "style": "dist/styles.css",
   "author": "Rolster Technology <rolster.developments@gmail.com>",
   "license": "MIT",
   "files": [
@@ -14,10 +14,10 @@
   ],
   "scripts": {
     "clean": "rimraf ./dist",
-    "sass:build": "node-sass scss/_rolster-styles.scss dist/rolster-styles.css",
+    "sass:build": "node-sass scss/styles.scss dist/styles.css",
     "css:prettier": "prettier --write dist/*.css --ignore-path .prettierignore",
     "css:minify": "css-minify -d dist/ -o dist/",
-    "rltcss": "rtlcss dist/rolster-styles.css dist/rolster-styles.rtl.css",
+    "rltcss": "rtlcss dist/styles.css dist/styles.rtl.css",
     "build": "npm run clean && npm run sass:build && npm run rltcss && npm run css:prettier && npm run css:minify",
     "prepublishOnly": "npm run build"
   },
@@ -26,7 +26,8 @@
     "node-sass": "^9.0.0",
     "prettier": "^3.0.3",
     "rimraf": "^3.0.2",
-    "rtlcss": "^4.1.0"
+    "rtlcss": "^4.1.0",
+    "sass-migrator": "^2.2.1"
   },
   "repository": {
     "type": "git",

package/scss/components/{_app.scss → app.scss}

@@ -1,26 +1,24 @@
 // Rolster Technology App Component
-// v2.1.0
+// v2.2.0
 // @license MIT
 // Author: Rolster Developers
 // Created: 20/Mar/2018
-// Updated: 13/Jun/2024
+// Updated: 28/Oct/2024
 
 .rls-app {
   &__body {
-    position: absolute;
     display: flex;
     flex-direction: column;
-    top: 0rem;
-    left: 0rem;
     padding: 0rem;
     margin: 0rem;
-    width: 100%;
-    height: 100%;
-    z-index: var(--rls-z-index-8);
+    width: 100vw;
+    height: 100vh;
     overflow: hidden;
-    transition:
-      left 240ms 0ms var(--rls-standard-curve),
-      width 240ms 0ms var(--rls-standard-curve);
+    z-index: var(--rls-z-index-8);
+
+    &--snackbar {
+      --rlc-snackbar-left: calc(50% + calc(var(--rlc-app-navbar-width) / 2));
+    }
   }
 
   &__header {
@@ -72,7 +70,7 @@
       background: var(--rlc-app-navbar-background);
 
       & + .rls-app__page__content {
-        --rlc-snackbar-left: calc(50% + 80rem);
+        --rlc-snackbar-left: calc(50% + calc(var(--rlc-app-navbar-width) / 2));
 
         width: calc(100% - var(--rlc-app-navbar-width));
       }

package/scss/components/{_data-table.scss → data-table.scss}

@@ -1,9 +1,9 @@
 // Rolster Technology Datatable Component
-// v2.0.5
+// v2.1.0
 // @license MIT
 // Author: Rolster Developers
 // Created: 20/Mar/2018
-// Updated: 26/Oct/2024
+// Updated: 27/Oct/2024
 
 @mixin datatable_cell_control() {
   --rlc-avatar-border-radius: var(--rls-sizing-x3);
@@ -16,27 +16,46 @@
 
   --rlc-fieldbox-body-background: transparent;
   --rlc-fieldbox-body-border: none;
-  --rlc-fieldbox-body-box-shadow: none;
   --rlc-fieldbox-body-padding: 0rem;
+  --rlc-fieldbox-body-shadow: none;
 
-  --rlc-switch-element-size: var(--rls-sizing-x10);
   --rlc-switch-bar-radius: var(--rls-sizing-x2);
   --rlc-switch-bar-height: var(--rls-sizing-x4);
+  --rlc-switch-element-size: var(--rls-sizing-x10);
 
   display: flex;
+  justify-content: center;
+  align-items: center;
   width: var(--rls-sizing-x24);
   padding: 0rem;
-
-  & > * {
-    margin: auto;
-  }
 }
 
 .rls-datatable {
+  --pvt-datatable-record-background: var(--rlc-datatable-record-background);
   --pvt-header-padding-right: var(--rlc-datatable-padding-scroll);
 
+  --rlc-amount-font-size: var(--rlc-datatable-font-size);
+  --rlc-amount-width: 100%;
+  --rlc-badge-padding: 0.5rem 1.5rem;
+  --rlc-ballot-padding: 0rem;
+  --rlc-ballot-component-row-gap: var(--rls-sizing-x1);
+  --rlc-ballot-title-letter-spacing: var(--rls-smalltext-letter-spacing);
+  --rlc-ballot-title-font-size: var(--rls-smalltext-font-size);
+  --rlc-ballot-title-height: var(--rls-smalltext-line-height);
+  --rlc-ballot-subtitle-letter-spacing: var(--rls-overline-letter-spacing);
+  --rlc-ballot-subtitle-font-size: var(--rls-overline-font-size);
+  --rlc-ballot-subtitle-height: var(--rls-overline-line-height);
+  --rlc-fieldbox-body-background: transparent;
+  --rlc-fieldbox-padding: 0rem;
+  --rlc-fieldbox-width: 100%;
+  --rlc-fieldbox-error-display: none;
+  --rlc-fieldbox-label-display: none;
   --rlc-input-font-size: var(--rlc-datatable-font-size);
   --rlc-input-letter-spacing: var(--rlc-datatable-letter-spacing);
+  --rlc-poster-font-size: var(--rlc-datatable-font-size);
+  --rlc-poster-height: var(--rls-sizing-x8);
+  --rlc-poster-padding: var(--rls-sizing-x2);
+  --rlc-skeleton-text-column-gap: var(--rls-sizing-x2);
 
   position: relative;
   display: flex;
@@ -82,29 +101,26 @@
   &__title {
     position: relative;
     display: flex;
-    text-align: left;
-    overflow: hidden;
-    white-space: nowrap;
     height: var(--rls-sizing-x20);
     line-height: var(--rls-sizing-x20);
     color: var(--rls-app-color-500);
+    font-weight: var(--rlc-datatable-header-font-weight);
     font-size: var(--rlc-datatable-font-size);
     letter-spacing: var(--rlc-datatable-letter-spacing);
-    font-weight: var(--rls-font-weight-bold);
+    text-align: left;
+    overflow: hidden;
+    white-space: nowrap;
 
     &--control {
       @include datatable_cell_control();
     }
 
     & > span {
+      display: block;
       width: 100%;
       text-overflow: ellipsis;
       overflow: hidden;
     }
-
-    & > .rls-icon {
-      margin: auto;
-    }
   }
 
   &__tbody {
@@ -113,15 +129,11 @@
     row-gap: var(--rls-sizing-x6);
     padding: 0rem var(--rlc-datatable-padding-scroll);
     box-sizing: border-box;
+    overflow-y: var(--rlc-datatable-body-overflow);
+    max-height: var(--rlc-datatable-body-max-height);
   }
 
-  &__tsummary {
-    padding-left: var(--rlc-datatable-padding-scroll);
-    padding-right: var(--pvt-header-padding-right);
-    box-sizing: border-box;
-  }
-
-  &__data,
+  &__record,
   &__totals {
     position: relative;
     display: flex;
@@ -130,7 +142,7 @@
     box-sizing: border-box;
     border: var(--rls-app-border-1-100);
     border-radius: var(--rls-sizing-x4);
-    background: var(--rlc-datatable-row-background);
+    background: var(--pvt-datatable-record-background);
 
     &--error {
       background: var(--rls-danger-color-100);
@@ -139,19 +151,17 @@
   }
 
   &__cell,
-  &__info {
+  &__data {
     position: relative;
     display: flex;
-    height: var(--rls-sizing-x20);
-    line-height: var(--rls-sizing-x20);
-    text-align: left;
+    align-items: center;
     cursor: default;
-    overflow: hidden;
-    white-space: nowrap;
+    text-align: left;
+    min-height: var(--rls-sizing-x20);
+    font-weight: var(--rls-font-weight-regular);
     color: var(--rlc-input-font-color);
     font-size: var(--rlc-datatable-font-size);
     letter-spacing: var(--rlc-datatable-letter-spacing);
-    font-weight: var(--rls-font-weight-regular);
 
     &--overflow {
       overflow: initial;
@@ -162,93 +172,36 @@
     }
 
     & > span {
+      display: block;
       width: 100%;
+      white-space: nowrap;
       text-overflow: ellipsis;
       overflow: hidden;
     }
 
-    .rls-field-box {
-      width: 100%;
-      padding: 0rem;
-
-      &__label {
-        display: none;
-      }
-
-      &__icon {
-        padding: 0rem;
-      }
-
-      &__error {
-        display: none;
-      }
+    & > p {
+      padding: var(--rls-sizing-x2) 0rem;
     }
 
     .rls-field-list {
-      .rls-field-box__body {
-        padding: var(--rls-sizing-x4) 0rem;
-        border: none;
-        box-shadow: none;
-      }
-
-      &__control {
-        font-size: var(--rlc-datatable-font-size);
-        font-weight: var(--rls-font-weight-medium);
-        letter-spacing: var(--rls-body-letter-spacing);
-      }
-
-      &__suggestions {
-        top: var(--rls-sizing-x24);
-
-        &--higher {
-          top: initial;
-          bottom: var(--rls-sizing-x24);
-        }
-      }
-
-      &__action {
-        .rls-icon {
-          font-size: var(--rls-sizing-x10);
-        }
-      }
-    }
-
-    .rls-input {
-      margin: var(--rls-sizing-x4) 0rem;
-    }
-
-    .rls-amount {
-      font-size: var(--rlc-datatable-font-size);
-      width: 100%;
+      --rlc-fieldbox-body-border: none;
+      --rlc-fieldbox-body-padding: var(--rls-sizing-x4) 0rem;
+      --rlc-fieldbox-body-shadow: none;
+      --rlc-fieldlist-action-dimension: var(--rls-sizing-x10);
+      --rlc-fieldlist-control-font-size: var(--rlc-datatable-font-size);
+      --rlc-fieldlist-control-font-weight: var(--rls-font-weight-medium);
+      --rlc-fieldlist-control-letter-spacing: var(--rls-body-letter-spacing);
+      --rlc-fieldlist-element-padding: var(--rls-sizing-x4);
+      --rlc-fieldlist-suggestions-bottom: var(--rls-sizing-x24);
+      --rlc-fieldlist-suggestions-top: var(--rls-sizing-x24);
     }
 
-    .rls-poster {
-      display: flex;
+    .rls-poster,
+    rls-poster {
       width: calc(100% - var(--rls-sizing-x2));
-      margin: var(--rls-sizing-x3) var(--rls-sizing-x2);
-      justify-content: center;
-      align-items: center;
-      line-height: var(--rls-sizing-x14);
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
-      background: var(--rls-theme-color-100);
-      color: var(--rls-theme-color-500);
-    }
-
-    & > .rls-ballot {
-      --rlc-badge-padding: 0.5rem 1.5rem;
-      --rlc-ballot-padding: 0rem;
-      --rlc-ballot-component-row-gap: 1rem;
-      --rlc-ballot-title-letter-spacing: var(--rls-smalltext-letter-spacing);
-      --rlc-ballot-title-font-size: var(--rls-smalltext-font-size);
-      --rlc-ballot-title-height: var(--rls-smalltext-line-height);
-      --rlc-ballot-subtitle-letter-spacing: var(--rls-overline-letter-spacing);
-      --rlc-ballot-subtitle-font-size: var(--rls-overline-font-size);
-      --rlc-ballot-subtitle-height: var(--rls-overline-line-height);
-      --rlc-skeleton-text-column-gap: var(--rls-sizing-x2);
-
-      height: var(--rls-sizing-x20);
     }
 
     & > a {
@@ -259,17 +212,21 @@
     }
   }
 
+  &__tsummary {
+    --pvt-datatable-record-background: var(--rls-theme-color-100);
+
+    padding-left: var(--rlc-datatable-padding-scroll);
+    padding-right: var(--pvt-header-padding-right);
+    box-sizing: border-box;
+  }
+
   &__tfooter {
+    --pvt-datatable-record-background: var(--rls-theme-color-100);
+
     position: relative;
     width: 100%;
     overflow: hidden;
     border-radius: 0rem 0rem var(--rls-sizing-x4) var(--rls-sizing-x4);
-    padding-left: var(--rlc-datatable-padding-scroll);
-    padding-right: var(--pvt-header-padding-right);
     box-sizing: border-box;
-
-    tr {
-      background: var(--rlc-datatable-footer-background);
-    }
   }
 }

package/scss/components/{_field-box.scss → field-box.scss}

@@ -1,9 +1,9 @@
 // Rolster Technology FieldBox Component
-// v2.1.1
+// v2.1.3
 // @license MIT
 // Author: Rolster Developers
 // Created: 08/Sep/2022
-// Updated: 25/Jun/2024
+// Updated: 27/Oct/2024
 
 .rls-field-box {
   --pvt-label-opacity: 1;
@@ -11,8 +11,9 @@
 
   position: relative;
   display: flex;
+  width: var(--rlc-fieldbox-width);
   flex-direction: column;
-  width: 100%;
+  padding: var(--rlc-fieldbox-padding);
   box-sizing: border-box;
   transition: height 160ms 0ms var(--rls-standard-curve);
 
@@ -38,6 +39,7 @@
 
   &__label {
     position: relative;
+    display: var(--rlc-fieldbox-label-display);
     width: 100%;
     padding: 0rem 5rem;
     box-sizing: border-box;
@@ -60,6 +62,8 @@
 
   &__body {
     display: flex;
+    align-items: center;
+    column-gap: var(--rls-sizing-x2);
     box-sizing: border-box;
     overflow: hidden;
     opacity: var(--pvt-body-opacity);
@@ -85,6 +89,7 @@
   }
 
   &__error {
+    display: var(--rlc-fieldbox-error-display);
     padding: 0rem var(--rls-sizing-x4);
     box-sizing: border-box;
     margin-top: var(--rls-sizing-x2);

package/scss/components/{_field-list.scss → field-list.scss}

@@ -1,9 +1,9 @@
 // Rolster Technology ListField Component
-// v1.3.1
+// v1.3.2
 // @license MIT
 // Author: Rolster Developers
 // Created: 20/Mar/2018
-// Updated: 23/Oct/2024
+// Updated: 27/Oct/2024
 
 .rls-field-list {
   --pvt-action-font-color: var(--rls-app-color-300);
@@ -32,7 +32,7 @@
 
   &__control {
     position: relative;
-    width: calc(100% - var(--rls-sizing-x14));
+    width: calc(100% - var(--rlc-fieldlist-action-dimension));
     height: var(--rls-sizing-x12);
     line-height: var(--rls-sizing-x12);
     padding: 0rem;
@@ -40,10 +40,10 @@
     border: none;
     outline: none;
     background: transparent;
+    font-weight: var(--rlc-fieldlist-control-font-weight);
+    font-size: var(--rlc-fieldlist-control-font-size);
+    letter-spacing: var(--rlc-fieldlist-control-letter-spacing);
     color: var(--rlc-input-font-color);
-    font-size: var(--rlc-input-font-size);
-    font-weight: var(--rls-font-weight-medium);
-    letter-spacing: var(--rlc-input-letter-spacing);
 
     &::placeholder {
       color: var(--rls-app-color-100);
@@ -57,26 +57,23 @@
     &:disabled {
       opacity: 0.5;
     }
-
-    &__placeholder {
-      position: relative;
-      color: var(--rls-app-color-100);
-    }
   }
 
   &__action {
+    --rlc-icon-dimesion: var(--rlc-fieldlist-action-dimension);
+
     color: var(--pvt-action-font-color);
-    width: var(--rls-sizing-x12);
-    height: var(--rls-sizing-x12);
+    width: var(--rlc-fieldlist-action-dimension);
+    height: var(--rlc-fieldlist-action-dimension);
     padding: 0rem;
-    margin-left: var(--rls-sizing-x2);
     outline: none;
     background: transparent;
   }
 
   &__suggestions {
     position: absolute;
-    top: calc(100% + var(--rls-sizing-x4));
+    top: var(--rlc-fieldlist-suggestions-top);
+    bottom: initial;
     left: 0rem;
     width: 100%;
     height: 0rem;
@@ -100,7 +97,7 @@
       --pvt-list-transform-origin: 0% 100%;
 
       top: initial;
-      bottom: 100%;
+      bottom: var(--rlc-fieldlist-suggestions-bottom);
     }
 
     &__body {
@@ -145,7 +142,7 @@
     box-sizing: border-box;
     outline: none;
     border-radius: var(--rls-sizing-x4);
-    padding: var(--rls-sizing-x2);
+    padding: var(--rlc-fieldlist-element-padding);
     box-sizing: border-box;
 
     &:hover {