@rolster/styles-foundations 2.3.30 → 2.3.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rolster/styles-foundations",
-  "version": "2.3.30",
+  "version": "2.3.32",
   "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/data-table.scss

@@ -1,9 +1,9 @@
 // Rolster Technology Datatable Component
-// v2.1.3
+// v2.2.1
 // @license MIT
 // Author: Rolster Developers
 // Created: 20/Mar/2018
-// Updated: 25/Feb/2025
+// Updated: 02/Mar/2025
 
 @mixin datatable_cell_control() {
   --rlc-avatar-border-radius: var(--rls-sizing-x3);
@@ -32,6 +32,7 @@
 
 .rls-datatable {
   --pvt-datatable-record-background: var(--rlc-datatable-record-background);
+  --pvt-datatable-padding-component: 0rem;
   --pvt-header-padding-right: var(--rlc-datatable-padding-scroll);
 
   --rlc-amount-font-size: var(--rlc-datatable-font-size);
@@ -71,6 +72,10 @@
     --pvt-header-padding-right: calc(
       var(--rlc-datatable-padding-scroll) + var(--rlc-datatable-width-scroll)
     );
+
+    --pvt-datatable-padding-component: 0rem
+      calc(var(--rlc-datatable-padding-scroll) + 5rem) 0rem
+      var(--rlc-datatable-padding-scroll);
   }
 
   & > table {
@@ -81,7 +86,17 @@
     border-collapse: collapse;
   }
 
-  &__thead {
+  &__toolbar {
+    display: flex;
+    column-gap: var(--rls-sizing-x6);
+    padding: var(--pvt-datatable-padding-component);
+    box-sizing: border-box;
+    background: var(--rlc-datatable-header-background);
+    border: var(--rls-app-border-1-100);
+    border-radius: var(--rls-sizing-x4);
+  }
+
+  &__head {
     width: 100%;
     padding-left: var(--rlc-datatable-padding-scroll);
     padding-right: var(--pvt-header-padding-right);
@@ -96,6 +111,14 @@
     background: var(--rlc-datatable-header-background);
     border: var(--rls-app-border-1-100);
     border-radius: var(--rls-sizing-x4);
+
+    .rls-poster {
+      width: calc(100% - var(--rls-sizing-x2));
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      margin: auto 0rem;
+    }
   }
 
   &__title {
@@ -127,7 +150,7 @@
     }
   }
 
-  &__tbody {
+  &__body {
     display: flex;
     flex-direction: column;
     row-gap: var(--rls-sizing-x6);
@@ -137,6 +160,7 @@
     max-height: var(--rlc-datatable-body-max-height);
   }
 
+  &__subheader,
   &__record,
   &__totals {
     position: relative;
@@ -169,6 +193,14 @@
     }
   }
 
+  &__subheader {
+    position: sticky;
+    top: 0px;
+    z-index: var(--rls-z-index-4);
+    background: rgba(241, 238, 247, 0.8);
+    backdrop-filter: blur(2px);
+  }
+
   &__cell,
   &__data {
     position: relative;
@@ -190,6 +222,14 @@
       @include datatable_cell_control();
     }
 
+    &.rls-align-center {
+      & > .rls-checkbox,
+      & > .rls-radiobutton,
+      & > .rls-switch {
+        margin: auto;
+      }
+    }
+
     & > span {
       display: block;
       width: 100%;
@@ -216,8 +256,7 @@
       --rlc-fieldlist-suggestions-top: var(--rls-sizing-x24);
     }
 
-    .rls-poster,
-    rls-poster {
+    .rls-poster {
       width: calc(100% - var(--rls-sizing-x2));
       overflow: hidden;
       text-overflow: ellipsis;
@@ -232,7 +271,7 @@
     }
   }
 
-  &__tsummary {
+  &__summary {
     --pvt-datatable-record-background: var(--rls-theme-color-050);
 
     padding-left: var(--rlc-datatable-padding-scroll);
@@ -240,13 +279,13 @@
     box-sizing: border-box;
   }
 
-  &__tfooter {
+  &__footer {
     --pvt-datatable-record-background: var(--rls-theme-color-050);
 
     position: relative;
     width: 100%;
-    overflow: hidden;
-    border-radius: 0rem 0rem var(--rls-sizing-x4) var(--rls-sizing-x4);
+    padding: var(--pvt-datatable-padding-component);
     box-sizing: border-box;
+    overflow: hidden;
   }
 }

package/scss/foundations/colors.scss

@@ -1,9 +1,9 @@
 // Rolster Technology Colors Foundations
-// v2.5.0
+// v2.5.1
 // @license MIT
 // Author: Rolster Developers
 // Created: 03/Mar/2022
-// Updated: 17/Dic/2024
+// Updated: 12/Mar/2025
 
 @mixin rolster-theme-900($theme, $r, $g, $b) {
   --rls-#{$theme}-backdrop-900: rgba(#{$r}, #{$g}, #{$b}, 0.8);
@@ -320,6 +320,48 @@
     var(--rls-amaizing-color-500) 100%
   );
 
+  // COLORS AMBER
+
+  --rls-amber-color-950: rgba(66, 27, 8, 1);
+
+  @include rolster-theme-900('amber', 123, 59, 19);
+
+  --rls-amber-color-800: rgba(152, 69, 20, 1);
+
+  @include rolster-theme-700('amber', 192, 88, 14);
+
+  --rls-amber-color-600: rgba(238, 119, 15, 1);
+
+  @include rolster-theme-500('amber', 246, 142, 25);
+
+  --rls-amber-color-400: rgba(249, 169, 62, 1);
+
+  --rls-amber-color-300: rgba(251, 202, 118, 1);
+
+  --rls-amber-color-200: rgba(253, 225, 171, 1);
+
+  --rls-amber-color-100: rgba(255, 242, 213, 1);
+
+  --rls-amber-color-050: rgba(255, 249, 237, 1);
+
+  --rls-amber-gradient-700: linear-gradient(
+    180deg,
+    var(--rls-amber-color-700) 0%,
+    var(--rls-amber-color-900) 100%
+  );
+
+  --rls-amber-gradient-500: linear-gradient(
+    180deg,
+    var(--rls-amber-color-500) 0%,
+    var(--rls-amber-color-700) 100%
+  );
+
+  --rls-amber-gradient-300: linear-gradient(
+    180deg,
+    var(--rls-amber-color-300) 0%,
+    var(--rls-amber-color-500) 100%
+  );
+
   // COLORS SMARTNESS
 
   --rls-smartness-color-950: rgba(50, 24, 22, 1);

package/scss/foundations/themes.scss

@@ -1,9 +1,9 @@
 // Rolster Technology Themes Foundations
-// v2.3.2
+// v2.3.3
 // @license MIT
 // Author: Rolster Developers
 // Created: 03/Mar/2022
-// Updated: 17/Dic/2024
+// Updated: 12/Mar/2025
 
 @mixin app-border-token($theme, $token) {
   --rls-app-border-1-#{$token}: var(--rls-border-1) solid
@@ -149,6 +149,7 @@
   @include rolster-border-token('warning');
   @include rolster-border-token('danger');
   @include rolster-border-token('amaizing');
+  @include rolster-border-token('amber');
   @include rolster-border-token('smartness');
   @include rolster-border-token('obsidian');
 
@@ -175,6 +176,10 @@
   @include rolster-theme('amaizing');
 }
 
+*[rls-theme='amber'] {
+  @include rolster-theme('amber');
+}
+
 *[rls-theme='smartness'] {
   @include rolster-theme('smartness');
 }