@rolster/styles-foundations 2.4.13 → 2.4.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rolster/styles-foundations",
-  "version": "2.4.13",
+  "version": "2.4.15",
   "description": "Front-end style pack to develop responsive and mobile projects on the web with Rolster.",
   "sass": "scss/styles.scss",
   "style": "dist/styles.css",

package/scss/components/app.scss

@@ -1,9 +1,9 @@
 // Rolster Technology App Component
-// v2.2.1
+// v2.2.3
 // @license MIT
 // Author: Rolster Developers
 // Created: 20/Mar/2018
-// Updated: 18/Abr/2025
+// Updated: 23/Abr/2025
 
 .rls-app {
   &__body {
@@ -19,6 +19,10 @@
     &--snackbar {
       --rlc-snackbar-left: calc(50% + calc(var(--rlc-app-navbar-width) / 2));
     }
+
+    &--navbar-condense {
+      --rlc-app-navbar-width: 36rem;
+    }
   }
 
   &__header {
@@ -64,8 +68,9 @@
       height: 100%;
       margin: 0rem;
       padding: 0rem;
-      overflow: auto;
       box-sizing: border-box;
+      overflow-x: hidden;
+      overflow-y: auto;
       border-radius: 0rem 0rem var(--rls-sizing-x16) 0rem;
       background: var(--rlc-app-navbar-background);
 

package/scss/components/data-table.scss

@@ -1,5 +1,5 @@
 // Rolster Technology Datatable Component
-// v2.3.1
+// v2.3.2
 // @license MIT
 // Author: Rolster Developers
 // Created: 20/Mar/2018
@@ -106,7 +106,6 @@
     padding: 0rem var(--rls-sizing-x6);
     box-sizing: border-box;
     background: var(--rlc-datatable-header-background);
-    border: var(--rls-app-border-1-100);
     border-radius: var(--rls-sizing-x4);
 
     .rls-poster {
@@ -314,14 +313,14 @@
   }
 
   &__summary {
-    --pvt-datatable-record-background: var(--rls-theme-color-050);
+    --pvt-datatable-record-background: var(--rls-app-color-200);
 
     padding-right: var(--pvt-header-padding-right);
     box-sizing: border-box;
   }
 
   &__footer {
-    --pvt-datatable-record-background: var(--rls-theme-color-050);
+    --pvt-datatable-record-background: var(--rls-app-color-200);
 
     position: relative;
     width: 100%;

package/scss/components/field-list.scss

@@ -1,9 +1,9 @@
 // Rolster Technology ListField Component
-// v1.3.8
+// v1.3.9
 // @license MIT
 // Author: Rolster Developers
 // Created: 20/Mar/2018
-// Updated: 19/Abr/2025
+// Updated: 23/Abr/2025
 
 .rls-field-list {
   --pvt-action-font-color: var(--rls-app-color-600);
@@ -66,7 +66,7 @@
     color: var(--pvt-action-font-color);
     padding: 0rem;
     outline: none;
-    border-radius: 50%;
+    border-radius: var(--rlc-fieldbox-action-radius);
     background: var(--rlc-fieldbox-action-background);
 
     .rls-icon {
@@ -85,6 +85,7 @@
     opacity: 0;
     z-index: -1;
     overflow: hidden;
+    padding-bottom: var(--rls-sizing-x6);
 
     &--visible {
       --pvt-list-height: auto;

package/scss/components.scss

@@ -9,9 +9,9 @@
 
 :root {
   --rlc-app-content-background: var(--rls-app-color-050);
-  --rlc-app-header-background: var(--rls-app-color-200);
+  --rlc-app-header-background: var(--rls-app-color-100);
   --rlc-app-header-height: var(--rls-sizing-x28);
-  --rlc-app-navbar-background: var(--rls-app-color-200);
+  --rlc-app-navbar-background: var(--rls-app-color-100);
   --rlc-app-navbar-width: 160rem;
 
   --rlc-action-color: var(--rls-app-color-600);
@@ -58,7 +58,7 @@
   --rlc-datatable-letter-spacing: 0.0625em;
   --rlc-datatable-font-size: 7rem;
   --rlc-datatable-footer-background: var(--rls-theme-color-050);
-  --rlc-datatable-header-background: var(--rls-app-color-200);
+  --rlc-datatable-header-background: var(--rls-theme-color-050);
   --rlc-datatable-header-font-weight: var(--rls-font-weight-semibold);
   --rlc-datatable-padding-scroll: 0rem;
   --rlc-datatable-record-background: var(--rls-app-color-100);
@@ -74,6 +74,7 @@
   --rlc-fieldbox-label-font-color: var(--rls-app-color-600);
   --rlc-fieldbox-action-dimension: var(--rls-sizing-x12);
   --rlc-fieldbox-action-background: var(--rls-app-color-050);
+  --rlc-fieldbox-action-radius: var(--rls-sizing-x2);
 
   --rlc-fieldlist-control-font-size: var(--rlc-input-font-size);
   --rlc-fieldlist-control-font-weight: var(--rls-font-weight-medium);

package/scss/foundations/colors.scss

@@ -1,5 +1,5 @@
 // Rolster Technology Colors Foundations
-// v2.6.1
+// v2.6.2
 // @license MIT
 // Author: Rolster Developers
 // Created: 03/Mar/2022
@@ -28,6 +28,28 @@
 
   --rls-app-color-050: rgb(255, 255, 255);
 
+  *[app-theme='dark'] {
+    --rls-app-color-050: rgb(40, 50, 61);
+
+    --rls-app-color-100: rgb(52, 57, 87);
+
+    --rls-app-color-200: rgb(72, 77, 107);
+
+    --rls-app-color-300: rgb(98, 111, 155);
+
+    --rls-app-color-400: rgb(128, 141, 190);
+
+    --rls-app-color-500: rgb(189, 192, 220);
+
+    --rls-app-color-600: rgb(214, 217, 240);
+
+    --rls-app-color-700: rgb(229, 232, 245);
+
+    --rls-app-color-800: rgb(244, 247, 255);
+
+    --rls-app-color-900: rgb(255, 255, 255);
+  }
+
   @include helpers.rolster-theme(
     'primary',
     #0b2446,
@@ -40,7 +62,7 @@
     #82bef7,
     #bddbfa,
     #e1edfd,
-    #f1f7fe
+    #ebf5ff
   );
 
   @include helpers.rolster-theme(
@@ -223,25 +245,3 @@
     #f5f5f1
   );
 }
-
-*[app-theme='dark'] {
-  --rls-app-color-050: rgb(40, 50, 61);
-
-  --rls-app-color-100: rgb(52, 57, 87);
-
-  --rls-app-color-200: rgb(72, 77, 107);
-
-  --rls-app-color-300: rgb(98, 111, 155);
-
-  --rls-app-color-400: rgb(128, 141, 190);
-
-  --rls-app-color-500: rgb(189, 192, 220);
-
-  --rls-app-color-600: rgb(214, 217, 240);
-
-  --rls-app-color-700: rgb(229, 232, 245);
-
-  --rls-app-color-800: rgb(244, 247, 255);
-
-  --rls-app-color-900: rgb(255, 255, 255);
-}