@rolster/styles-foundations 1.1.11 → 1.1.13

package/dist/rolster-styles.css

@@ -3723,7 +3723,8 @@ button {
   --rls-card-content-padding: var(--sizing-x8);
   --rls-datatable-letter-spacing: 0.0625em;
   --rls-datatable-font-size: 7rem;
-  --rls-datatable-width-scroll: var(--sizing-x12);
+  --rls-datatable-width-scroll: var(--sizing-x4);
+  --rls-datatable-padding-scroll: 0rem;
   --rls-form-footer-justify-content: end;
   --rls-icon-font-size: var(--sizing-x12);
   --rls-icon-width: var(--sizing-x12);
@@ -3746,6 +3747,11 @@ button {
   --rls-toolbar-height: var(--sizing-x28);
 }
 
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-rolster-300) var(--background-theme-100);
+}
+
 .rls-app__body {
   position: absolute;
   display: flex;
@@ -3915,14 +3921,19 @@ button {
 .rls-datatable {
   --rls-input-font-size: var(--rls-datatable-font-size);
   --rls-input-letter-spacing: var(--rls-datatable-letter-spacing);
-  --pvt-header-padding-right: var(--sizing-x6);
+  --pvt-header-padding-right: var(--rls-datatable-padding-scroll);
   position: relative;
+  display: flex;
   width: 100%;
+  flex-direction: column;
+  row-gap: var(--sizing-x6);
   border-radius: var(--sizing-x4);
   box-sizing: border-box;
 }
 .rls-datatable--scrolleable {
-  --pvt-header-padding-right: var(--sizing-x12);
+  --pvt-header-padding-right: calc(
+    var(--rls-datatable-padding-scroll) + var(--rls-datatable-width-scroll)
+  );
 }
 .rls-datatable > table {
   display: flex;
@@ -3933,12 +3944,14 @@ button {
 }
 .rls-datatable__thead {
   width: 100%;
+  padding-left: var(--rls-datatable-padding-scroll);
+  padding-right: var(--pvt-header-padding-right);
+  box-sizing: border-box;
 }
 .rls-datatable__header {
   display: flex;
   column-gap: var(--sizing-x4);
-  padding-left: var(--sizing-x6);
-  padding-right: var(--pvt-header-padding-right);
+  padding: 0rem var(--sizing-x6);
   box-sizing: border-box;
 }
 .rls-datatable__title {
@@ -3983,8 +3996,16 @@ button {
   display: flex;
   flex-direction: column;
   row-gap: var(--sizing-x6);
+  padding: 0rem var(--rls-datatable-padding-scroll);
+  box-sizing: border-box;
+}
+.rls-datatable__tsummary {
+  padding-left: var(--rls-datatable-padding-scroll);
+  padding-right: var(--pvt-header-padding-right);
+  box-sizing: border-box;
 }
-.rls-datatable__data {
+.rls-datatable__data,
+.rls-datatable__totals {
   position: relative;
   display: flex;
   column-gap: var(--sizing-x4);
@@ -3994,11 +4015,13 @@ button {
   border-radius: var(--sizing-x4);
   background: #fcfcfc;
 }
-.rls-datatable__data--error {
+.rls-datatable__data--error,
+.rls-datatable__totals--error {
   background: var(--color-danger-100);
   border: var(--border-1-danger-300);
 }
-.rls-datatable__cell {
+.rls-datatable__cell,
+.rls-datatable__info {
   position: relative;
   display: flex;
   height: var(--sizing-x20);
@@ -4012,10 +4035,12 @@ button {
   letter-spacing: var(--rls-datatable-letter-spacing);
   font-weight: var(--font-weight-regular);
 }
-.rls-datatable__cell--overflow {
+.rls-datatable__cell--overflow,
+.rls-datatable__info--overflow {
   overflow: initial;
 }
-.rls-datatable__cell--control {
+.rls-datatable__cell--control,
+.rls-datatable__info--control {
   --rls-avatar-border-radius: var(--sizing-x3);
   --rls-avatar-width: var(--sizing-x16);
   --rls-avatar-height: var(--sizing-x16);
@@ -4029,65 +4054,82 @@ button {
   width: var(--sizing-x24);
   padding: 0rem;
 }
-.rls-datatable__cell--control > * {
+.rls-datatable__cell--control > *,
+.rls-datatable__info--control > * {
   margin: auto;
 }
-.rls-datatable__cell > span {
+.rls-datatable__cell > span,
+.rls-datatable__info > span {
   width: 100%;
   text-overflow: ellipsis;
   overflow: hidden;
 }
-.rls-datatable__cell .rls-box-field {
+.rls-datatable__cell .rls-box-field,
+.rls-datatable__info .rls-box-field {
   width: 100%;
   padding: 0rem;
 }
-.rls-datatable__cell .rls-box-field__label {
+.rls-datatable__cell .rls-box-field__label,
+.rls-datatable__info .rls-box-field__label {
   display: none;
 }
-.rls-datatable__cell .rls-box-field__body {
+.rls-datatable__cell .rls-box-field__body,
+.rls-datatable__info .rls-box-field__body {
   background: transparent;
   border: none;
   padding: 0rem;
   box-shadow: none;
 }
-.rls-datatable__cell .rls-box-field__icon {
+.rls-datatable__cell .rls-box-field__icon,
+.rls-datatable__info .rls-box-field__icon {
   padding: 0rem;
 }
-.rls-datatable__cell .rls-box-field__error {
+.rls-datatable__cell .rls-box-field__error,
+.rls-datatable__info .rls-box-field__error {
   display: none;
 }
 .rls-datatable__cell .rls-box-field .rls-input-number,
-.rls-datatable__cell .rls-box-field .rls-input-text {
+.rls-datatable__cell .rls-box-field .rls-input-text,
+.rls-datatable__info .rls-box-field .rls-input-number,
+.rls-datatable__info .rls-box-field .rls-input-text {
   --rls-input-parent-padding: 0rem;
 }
-.rls-datatable__cell .rls-list-field .rls-box-field__body {
+.rls-datatable__cell .rls-list-field .rls-box-field__body,
+.rls-datatable__info .rls-list-field .rls-box-field__body {
   padding: var(--sizing-x4) 0rem;
   border: none;
   box-shadow: none;
 }
-.rls-datatable__cell .rls-list-field__control {
+.rls-datatable__cell .rls-list-field__control,
+.rls-datatable__info .rls-list-field__control {
   font-size: var(--rls-datatable-font-size);
   font-weight: var(--font-weight-medium);
   letter-spacing: var(--body-letter-spacing);
 }
-.rls-datatable__cell .rls-list-field__suggestions {
+.rls-datatable__cell .rls-list-field__suggestions,
+.rls-datatable__info .rls-list-field__suggestions {
   top: var(--sizing-x24);
 }
-.rls-datatable__cell .rls-list-field__suggestions--higher {
+.rls-datatable__cell .rls-list-field__suggestions--higher,
+.rls-datatable__info .rls-list-field__suggestions--higher {
   top: initial;
   bottom: var(--sizing-x24);
 }
-.rls-datatable__cell .rls-list-field__action .rls-icon {
+.rls-datatable__cell .rls-list-field__action .rls-icon,
+.rls-datatable__info .rls-list-field__action .rls-icon {
   font-size: var(--sizing-x10);
 }
-.rls-datatable__cell .rls-input {
+.rls-datatable__cell .rls-input,
+.rls-datatable__info .rls-input {
   margin: var(--sizing-x4) 0rem;
 }
-.rls-datatable__cell .rls-amount {
+.rls-datatable__cell .rls-amount,
+.rls-datatable__info .rls-amount {
   font-size: var(--rls-datatable-font-size);
   width: 100%;
 }
-.rls-datatable__cell .rls-poster {
+.rls-datatable__cell .rls-poster,
+.rls-datatable__info .rls-poster {
   display: flex;
   width: calc(100% - var(--sizing-x2));
   height: 100%;
@@ -4103,25 +4145,29 @@ button {
   background: var(--color-rolster-100);
   color: var(--color-rolster-500);
 }
-.rls-datatable__cell > .rls-ballot {
+.rls-datatable__cell > .rls-ballot,
+.rls-datatable__info > .rls-ballot {
   padding: 0rem;
   height: var(--sizing-x20);
 }
-.rls-datatable__cell > .rls-ballot .rls-ballot__title {
+.rls-datatable__cell > .rls-ballot .rls-ballot__title,
+.rls-datatable__info > .rls-ballot .rls-ballot__title {
   font-weight: var(--font-weight-semibold);
   font-size: var(--smalltext-font-size);
   letter-spacing: var(--smalltext-letter-spacing);
   min-height: var(--sizing-x8);
   line-height: var(--sizing-x8);
 }
-.rls-datatable__cell > .rls-ballot .rls-ballot__subtitle {
+.rls-datatable__cell > .rls-ballot .rls-ballot__subtitle,
+.rls-datatable__info > .rls-ballot .rls-ballot__subtitle {
   margin-top: 0rem;
   font-size: var(--overline-font-size);
   letter-spacing: var(--overline-letter-spacing);
   min-height: var(--sizing-x8);
   line-height: var(--sizing-x8);
 }
-.rls-datatable__cell > a:hover {
+.rls-datatable__cell > a:hover,
+.rls-datatable__info > a:hover {
   color: var(--color-theme-700);
   text-decoration: underline;
 }