@rolster/styles-foundations 2.3.29 → 2.3.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rolster/styles-foundations",
-  "version": "2.3.29",
+  "version": "2.3.31",
   "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.0
 // @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) + 6rem) 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(255, 255, 255, 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/components/field-list.scss

@@ -223,6 +223,9 @@
         bottom: 0px;
         border: none;
         z-index: var(--rls-z-index-4);
+        transition:
+          opacity 240ms 0ms var(--rls-standard-curve),
+          transform 240ms 0ms var(--rls-standard-curve);
       }
     }