@rolster/styles-foundations 1.0.13 → 1.0.14

package/dist/rolster-styles.css

@@ -20,7 +20,7 @@
   --color-light-100: rgba(128, 141, 190, 1);
   --border-dark-500: rgba(85, 95, 131, 1);
   --border-dark-300: rgba(173, 186, 230, 1);
-  --border-dark-100: rgba(223, 229, 249, 1);
+  --border-dark-100: rgba(209, 214, 239, 1);
   --border-light-500: rgba(255, 255, 255, 1);
   --border-light-300: rgba(185, 195, 231, 1);
   --border-light-100: rgba(128, 141, 190, 1);
@@ -3491,6 +3491,10 @@ button {
 }
 
 :root {
+  --rls-action-color: var(--color-theme-300);
+  --rls-action-ripple-color: var(--rls-action-color);
+  --rls-action-ripple-dimension: var(--sizing-36);
+  --rls-action-ripple-position: -1.125rem;
   --rls-avatar-font-size: var(--title-font-size);
   --rls-avatar-border-radius: var(--sizing-8);
   --rls-avatar-width: var(--sizing-48);
@@ -3504,19 +3508,19 @@ button {
   --rls-boxfield-body-padding: 0rem;
   --rls-boxfield-body-border: var(--border-1-theme-100);
   --rls-boxfield-body-shadow: none;
-  --rls-boxfield-label-font-color: var(--color-theme-100);
+  --rls-boxfield-label-font-color: var(--color-theme-300);
   --rls-breadcrumb-height: var(--sizing-36);
   --rls-button-label-text-transform: uppercase;
   --rls-button-content-padding: 0rem var(--sizing-8);
   --rls-button-content-radius: var(--sizing-4);
-  --rls-action-color: var(--color-theme-300);
-  --rls-action-ripple-color: var(--rls-action-color);
-  --rls-action-ripple-dimension: var(--sizing-36);
-  --rls-action-ripple-position: -1.125rem;
+  --rls-card-content-padding: var(--sizing-16);
+  --rls-datatable-letter-spacing: 0.0625em;
+  --rls-datatable-font-size: 0.875rem;
   --rls-form-footer-justify-content: end;
   --rls-icon-font-size: var(--sizing-24);
   --rls-icon-width: var(--sizing-24);
   --rls-icon-height: var(--sizing-24);
+  --rls-icon-color: inherit;
   --rls-input-font-color: var(--color-theme-500);
   --rls-input-font-size: var(--input-font-size);
   --rls-input-text-align: left;
@@ -3526,6 +3530,9 @@ button {
   --rls-poster-height: var(--sizing-36);
   --rls-poster-padding: var(--sizing-8);
   --rls-snackbar-left: 50%;
+  --rls-switch-element-size: var(--sizing-24);
+  --rls-switch-bar-radius: var(--sizing-6);
+  --rls-switch-bar-height: var(--sizing-12);
   --rls-tabulartext-char-width: 0.625rem;
   --rls-tabulartext-pointer-width: 0.25rem;
   --rls-toolbar-height: var(--sizing-56);
@@ -3604,21 +3611,35 @@ button {
   height: 100%;
   margin: 0rem;
   padding: 0rem;
-  overflow: auto;
+  overflow: hidden;
   box-sizing: border-box;
 }
 
+.rls-divider {
+  height: 0.125rem;
+  background-image: linear-gradient(
+    to right,
+    var(--border-theme-100) 50%,
+    rgba(255, 255, 255, 0) 0%
+  );
+  background-position: bottom;
+  background-size: var(--sizing-8);
+  background-repeat: repeat-x;
+}
+
 .rls-box-field {
   --pvt-body-background: rgba(248, 248, 248, 1);
   --pvt-body-opacity: 1;
   --pvt-label-opacity: 1;
   position: relative;
-  float: left;
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--sizing-4);
   width: 100%;
   box-sizing: border-box;
   transition: height 160ms 0ms var(--standard-curve);
 }
-.rls-box-field--active {
+.rls-box-field--focused {
   --rls-boxfield-body-border: var(--border-1-rolster-500);
   --rls-boxfield-body-shadow: 0px 0px 0px 3px var(--box-shadow-rolster-500);
   --rls-boxfield-label-font-color: var(--color-rolster-500);
@@ -3640,7 +3661,6 @@ button {
   width: 100%;
   padding: 0rem 0.625rem;
   box-sizing: border-box;
-  margin-bottom: var(--sizing-4);
   color: var(--rls-boxfield-label-font-color);
   opacity: var(--pvt-label-opacity);
   overflow: hidden;
@@ -3670,7 +3690,6 @@ button {
   color: var(--color-theme-100);
   padding: 0rem 0.625rem;
   box-sizing: border-box;
-  margin-top: var(--sizing-4);
   font-weight: var(--font-weight-medium);
   font-size: var(--overline-font-size);
   letter-spacing: var(--overline-letter-spacing);
@@ -3680,74 +3699,59 @@ button {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.rls-box-field__helper--error {
-  color: var(--color-danger-500);
+.rls-box-field__error {
+  padding: 0rem var(--sizing-8);
+  box-sizing: border-box;
+  margin-top: var(--sizing-2);
 }
 
 .rls-datatable {
-  --pvt-datatable-letter-spacing: 0.525px;
-  --pvt-datatable-font-size: 0.8725rem;
+  --rls-input-font-size: var(--rls-datatable-font-size);
+  --rls-input-letter-spacing: var(--rls-datatable-letter-spacing);
   position: relative;
-  float: left;
   width: 100%;
   border-radius: var(--sizing-8);
   box-sizing: border-box;
 }
 .rls-datatable > table {
-  position: relative;
-  float: left;
-  width: 100%;
-  display: block;
-}
-.rls-datatable__content {
-  position: relative;
-  display: block;
-  float: left;
-  width: 100%;
-  border-radius: 0rem;
-}
-.rls-datatable__table {
-  display: block;
-  float: left;
-  width: 100%;
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--sizing-8);
   border-spacing: 0;
   border-collapse: collapse;
 }
 .rls-datatable__thead {
-  display: block;
-  float: left;
   width: 100%;
-  margin-bottom: var(--sizing-4);
 }
 .rls-datatable__header {
-  padding: 0rem var(--sizing-12);
   display: flex;
+  column-gap: var(--sizing-8);
+  padding: 0rem var(--sizing-12);
   box-sizing: border-box;
 }
 .rls-datatable__title {
   position: relative;
-  display: block;
-  float: left;
-  text-align: left;
-  padding: 0rem var(--sizing-4);
+  display: flex;
   text-align: left;
   overflow: hidden;
   white-space: nowrap;
-  text-overflow: ellipsis;
   height: var(--sizing-40);
   line-height: var(--sizing-40);
   color: var(--color-theme-500);
-  font-size: var(--pvt-datatable-font-size);
-  letter-spacing: var(--pvt-datatable-letter-spacing);
+  font-size: var(--rls-datatable-font-size);
+  letter-spacing: var(--rls-datatable-letter-spacing);
   font-weight: var(--font-weight-bold);
 }
 .rls-datatable__title--control {
   --rls-avatar-border-radius: var(--sizing-6);
   --rls-avatar-width: var(--sizing-32);
   --rls-avatar-height: var(--sizing-32);
-  --rls-avatar-font-size: var(--pvt-datatable-font-size);
+  --rls-avatar-font-size: var(--rls-datatable-font-size);
   --rls-action-ripple-dimension: var(--sizing-32);
   --rls-action-ripple-position: -1rem;
+  --rls-switch-element-size: var(--sizing-20);
+  --rls-switch-bar-radius: var(--sizing-4);
+  --rls-switch-bar-height: var(--sizing-8);
   display: flex;
   width: var(--sizing-48);
   padding: 0rem;
@@ -3755,15 +3759,23 @@ button {
 .rls-datatable__title--control > * {
   margin: auto;
 }
-.rls-datatable__tbody {
-  position: relative;
-  float: left;
+.rls-datatable__title > span {
   width: 100%;
-  display: block;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.rls-datatable__title > .rls-icon {
+  margin: auto;
+}
+.rls-datatable__tbody {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--sizing-12);
 }
 .rls-datatable__data {
   position: relative;
   display: flex;
+  column-gap: var(--sizing-8);
   padding: 0rem var(--sizing-12);
   box-sizing: border-box;
   border: var(--border-1-theme-100);
@@ -3773,30 +3785,33 @@ button {
 .rls-datatable__data--error {
   border: var(--border-1-danger-100);
 }
-.rls-datatable__data + .rls-datatable__data {
-  margin-top: var(--sizing-12);
-}
 .rls-datatable__cell {
   position: relative;
-  display: block;
-  float: left;
+  display: flex;
   height: var(--sizing-40);
   line-height: var(--sizing-40);
-  padding: 0rem var(--sizing-4);
-  cursor: default;
   text-align: left;
+  cursor: default;
+  overflow: hidden;
+  white-space: nowrap;
   color: var(--rls-input-font-color);
-  font-size: var(--pvt-datatable-font-size);
-  letter-spacing: var(--pvt-datatable-letter-spacing);
+  font-size: var(--rls-datatable-font-size);
+  letter-spacing: var(--rls-datatable-letter-spacing);
   font-weight: var(--font-weight-regular);
 }
+.rls-datatable__cell--overflow {
+  overflow: initial;
+}
 .rls-datatable__cell--control {
   --rls-avatar-border-radius: var(--sizing-6);
   --rls-avatar-width: var(--sizing-32);
   --rls-avatar-height: var(--sizing-32);
-  --rls-avatar-font-size: var(--pvt-datatable-font-size);
+  --rls-avatar-font-size: var(--rls-datatable-font-size);
   --rls-action-ripple-dimension: var(--sizing-32);
   --rls-action-ripple-position: -1rem;
+  --rls-switch-element-size: var(--sizing-20);
+  --rls-switch-bar-radius: var(--sizing-4);
+  --rls-switch-bar-height: var(--sizing-8);
   display: flex;
   width: var(--sizing-48);
   padding: 0rem;
@@ -3804,6 +3819,11 @@ button {
 .rls-datatable__cell--control > * {
   margin: auto;
 }
+.rls-datatable__cell > span {
+  width: 100%;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
 .rls-datatable__cell .rls-box-field {
   width: 100%;
   padding: 0rem;
@@ -3820,24 +3840,21 @@ button {
 .rls-datatable__cell .rls-box-field__body .rls-input-field {
   padding: var(--sizing-8) 0rem !important;
 }
-.rls-datatable__cell .rls-box-field__body .rls-input-field__component,
-.rls-datatable__cell .rls-box-field__body .rls-input-field__value {
-  font-size: var(--pvt-datatable-font-size);
-  font-weight: var(--font-weight-medium);
-  letter-spacing: var(--body-2-letter-spacing);
-}
 .rls-datatable__cell .rls-box-field__icon {
   padding: 0rem;
 }
+.rls-datatable__cell .rls-box-field__error {
+  display: none;
+}
 .rls-datatable__cell .rls-list-field .rls-box-field__body {
   padding: var(--sizing-8) 0rem;
   border: none;
   box-shadow: none;
 }
 .rls-datatable__cell .rls-list-field__control {
-  font-size: var(--pvt-datatable-font-size);
+  font-size: var(--rls-datatable-font-size);
   font-weight: var(--font-weight-medium);
-  letter-spacing: var(--body-2-letter-spacing);
+  letter-spacing: var(--body-letter-spacing);
 }
 .rls-datatable__cell .rls-list-field__suggestions {
   top: var(--sizing-48);
@@ -3852,11 +3869,8 @@ button {
 .rls-datatable__cell .rls-input {
   margin: var(--sizing-8) 0rem;
 }
-.rls-datatable__cell .rls-input__component {
-  font-size: var(--pvt-datatable-font-size);
-}
 .rls-datatable__cell .rls-amount {
-  font-size: var(--pvt-datatable-font-size);
+  font-size: var(--rls-datatable-font-size);
 }
 .rls-datatable__cell .rls-poster {
   display: flex;
@@ -3898,38 +3912,36 @@ button {
 }
 .rls-datatable__tfooter {
   position: relative;
-  float: left;
   width: 100%;
   overflow: hidden;
   background: var(--color-theme-100);
   border-radius: 0rem 0rem var(--sizing-8) var(--sizing-8);
 }
 
+.rls-form {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--sizing-16);
+}
 .rls-form__content {
   position: relative;
-  float: left;
   padding: 0rem var(--sizing-16);
   box-sizing: border-box;
 }
-.rls-form__content + .rls-form__content {
-  margin-top: var(--sizing-24);
-}
-
 .rls-form__footer {
   position: relative;
-  float: left;
   display: flex;
   justify-content: var(--rls-form-footer-justify-content);
   column-gap: var(--sizing-16);
   padding: 0rem var(--sizing-16);
   box-sizing: border-box;
-  margin-top: var(--sizing-24);
 }
 
 .rls-list-field {
   --rls-boxfield-body-padding: var(--sizing-6) var(--sizing-8);
   --pvt-action-font-color: var(--color-theme-300);
   --pvt-list-height: 0rem;
+  --pvt-list-max-height: 20rem;
   --pvt-list-opacity: 0;
   --pvt-list-transform: scale(0, 0);
   --pvt-list-transform-origin: 0% 0%;
@@ -3994,8 +4006,10 @@ button {
   left: 0rem;
   width: 100%;
   height: 0rem;
+  max-height: var(--pvt-list-max-height);
   overflow: hidden;
-  z-index: var(--z-index-4);
+  z-index: var(--z-index-1);
+  padding-bottom: var(--sizing-12);
 }
 .rls-list-field__suggestions--visible {
   --pvt-list-height: auto;
@@ -4004,24 +4018,23 @@ button {
   overflow: initial;
   opacity: 1;
   height: auto;
+  z-index: var(--z-index-4);
 }
 .rls-list-field__suggestions--higher {
   --pvt-list-transform-origin: 0% 100%;
   top: initial;
   bottom: var(--sizing-48);
 }
-.rls-list-field__ul {
-  position: relative;
+.rls-list-field__suggestions__body {
   display: flex;
   flex-direction: column;
-  float: left;
   width: 100%;
   height: var(--pvt-list-height);
-  padding: var(--sizing-8) 0rem;
-  border-radius: 0.5rem;
+  max-height: var(--pvt-list-max-height);
+  padding: var(--sizing-8) var(--sizing-4);
   box-sizing: border-box;
-  overflow-y: auto;
-  overflow-x: hidden;
+  border-radius: 0.5rem;
+  overflow: hidden;
   z-index: var(--z-index-2);
   background: var(--background-theme-500);
   border: var(--border-1-rolster-500);
@@ -4034,13 +4047,24 @@ button {
     opacity 240ms 0ms var(--standard-curve),
     transform 240ms 0ms var(--standard-curve);
 }
+.rls-list-field__ul {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 0rem var(--sizing-8);
+  box-sizing: border-box;
+}
 .rls-list-field__element {
   --rls-ballot-subtitle-overflow: hidden;
   --rls-ballot-subtitle-text-overflow: ellipsis;
   --rls-ballot-subtitle-white-space: nowrap;
-  padding: 0rem var(--sizing-8);
   box-sizing: border-box;
   outline: none;
+  border-radius: var(--sizing-8);
+  padding: var(--sizing-4);
+  box-sizing: border-box;
 }
 .rls-list-field__element:hover {
   background: var(--background-theme-300);
@@ -4050,7 +4074,7 @@ button {
 }
 .rls-list-field__empty {
   display: flex;
-  padding: 0rem var(--sizing-16);
+  padding: 0rem var(--sizing-8);
   box-sizing: border-box;
 }
 .rls-list-field__empty__avatar {
@@ -4061,15 +4085,20 @@ button {
   width: 100%;
 }
 .rls-list-field__empty__description {
-  width: 100%;
-  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--sizing-4);
+  overflow: hidden;
 }
 .rls-list-field__empty__description label {
   display: block;
-  float: left;
   width: 100%;
   color: var(--color-theme-300);
 }
+.rls-list-field__empty__description p {
+  white-space: initial;
+  color: var(--color-theme-300);
+}
 .rls-list-field__backdrop {
   position: absolute;
   display: block;
@@ -4091,6 +4120,7 @@ button {
   .rls-list-field {
     --pvt-list-transform: translateY(100%);
     --pvt-list-transform-origin: initial;
+    --pvt-list-max-height: initial;
   }
   .rls-list-field__suggestions {
     display: flex;