@rolster/react-components 18.10.8 → 18.10.10

package/dist/esm/components/molecules/Pagination/Pagination.css

@@ -5,15 +5,15 @@
   float: left;
   width: 100%;
   overflow: hidden;
-  height: var(--sizing-40);
-  padding: 0rem var(--sizing-12);
+  height: var(--sizing-x20);
+  padding: 0rem var(--sizing-x6);
   box-sizing: border-box;
 }
 .rls-pagination__pages {
   display: flex;
-  gap: var(--sizing-8);
+  gap: var(--sizing-x4);
   width: auto;
-  margin: 0rem var(--sizing-8);
+  margin: 0rem var(--sizing-x4);
 }
 .rls-pagination__page {
   background: var(--background-theme-100);
@@ -21,10 +21,10 @@
   cursor: default;
   margin: auto 0rem;
   text-align: center;
-  width: var(--sizing-32);
-  height: var(--sizing-32);
-  line-height: var(--sizing-32);
-  border-radius: var(--sizing-4);
+  width: var(--sizing-x16);
+  height: var(--sizing-x16);
+  line-height: var(--sizing-x16);
+  border-radius: var(--sizing-x2);
 }
 .rls-pagination__page:hover {
   background: var(--color-rolster-300);
@@ -36,10 +36,10 @@
 }
 .rls-pagination__description {
   color: var(--font-primary-900);
-  margin: 0rem var(--sizing-8);
+  margin: 0rem var(--sizing-x4);
   width: auto;
-  height: var(--sizing-40);
-  line-height: var(--sizing-40);
+  height: var(--sizing-x20);
+  line-height: var(--sizing-x20);
   font-size: var(--body-1-size);
   font-weight: var(--font-weight-bold);
   letter-spacing: var(--body-1-letter-spacing);
@@ -51,10 +51,10 @@
   background: none;
   outline: none;
   color: var(--color-theme-300);
-  height: var(--sizing-36);
-  width: var(--sizing-36);
-  padding: var(--sizing-6);
-  margin: var(--sizing-2) 0rem;
+  height: var(--sizing-x18);
+  width: var(--sizing-x18);
+  padding: var(--sizing-x3);
+  margin: var(--sizing-x1) 0rem;
 }
 .rls-pagination__action:hover {
   color: var(--color-rolster-300);

package/dist/esm/components/molecules/PasswordField/PasswordField.css

@@ -1,12 +1,12 @@
 .rls-password-field {
-  --rls-input-parent-padding: var(--sizing-6) var(--sizing-8);
-  --rls-action-ripple-dimension: var(--sizing-32);
-  --rls-action-ripple-position: -1rem;
+  --rls-input-parent-padding: var(--sizing-x3) var(--sizing-x4);
+  --rls-action-ripple-dimension: var(--sizing-x16);
+  --rls-action-ripple-position: -8rem;
   position: relative;
   float: left;
   width: 100%;
   box-sizing: border-box;
 }
 .rls-password-field .rls-button-action {
-  margin: auto var(--sizing-4) auto 0rem;
+  margin: auto var(--sizing-x2) auto 0rem;
 }

package/dist/esm/components/molecules/RadioButtonLabel/RadioButtonLabel.css

@@ -1,6 +1,6 @@
 .rls-radiobutton-label {
   --pvt-text-opacity: 1;
-  --pvt-text-height: var(--sizing-24);
+  --pvt-text-height: var(--sizing-x12);
   --pvt-text-overflow: hidden;
   --pvt-text-white-space: nowrap;
   --pvt-text-text-overflow: ellipsis;
@@ -20,14 +20,14 @@
   --pvt-text-height: auto;
 }
 .rls-radiobutton-label__component {
-  margin-right: var(--sizing-8);
+  margin-right: var(--sizing-x4);
   width: auto;
 }
 .rls-radiobutton-label__text {
   float: left;
-  max-width: calc(100% - var(--sizing-32));
+  max-width: calc(100% - var(--sizing-x16));
   height: var(--pvt-text-height);
-  line-height: var(--sizing-24);
+  line-height: var(--sizing-x12);
   color: var(--color-theme-300);
   font-size: var(--label-font-size);
   font-weight: var(--font-weight-medium);

package/dist/esm/components/molecules/SwitchLabel/SwitchLabel.css

@@ -1,11 +1,11 @@
 .rls-switch-label {
   --pvt-text-opacity: 1;
-  --pvt-text-height: var(--sizing-24);
+  --pvt-text-height: var(--sizing-x12);
   --pvt-text-overflow: hidden;
   --pvt-text-white-space: nowrap;
   --pvt-text-text-overflow: ellipsis;
   display: flex;
-  column-gap: var(--sizing-8);
+  column-gap: var(--sizing-x4);
 }
 .rls-switch-label--disabled {
   --pvt-text-opacity: 0.5;
@@ -18,13 +18,13 @@
   --pvt-text-height: auto;
 }
 .rls-switch-label__component {
-  max-width: 2.5rem;
+  max-width: 20rem;
 }
 .rls-switch-label__text {
   float: left;
-  max-width: calc(100% - var(--sizing-56));
+  max-width: calc(100% - var(--sizing-x28));
   height: var(--pvt-text-height);
-  line-height: var(--sizing-24);
+  line-height: var(--sizing-x12);
   color: var(--color-theme-300);
   font-size: var(--label-font-size);
   font-weight: var(--font-weight-medium);

package/dist/esm/components/molecules/TextField/TextField.css

@@ -1,5 +1,5 @@
 .rls-text-field {
-  --rls-input-parent-padding: var(--sizing-6) var(--sizing-8);
+  --rls-input-parent-padding: var(--sizing-x3) var(--sizing-x4);
   position: relative;
   float: left;
   width: 100%;

package/dist/esm/components/molecules/Toolbar/Toolbar.css

@@ -1,7 +1,7 @@
 .rls-toolbar {
   display: flex;
   justify-content: space-between;
-  column-gap: var(--sizing-12);
+  column-gap: var(--sizing-x6);
   height: var(--rls-toolbar-height);
 }
 .rls-toolbar > * {
@@ -10,13 +10,13 @@
 .rls-toolbar__content {
   display: flex;
   height: 100%;
-  padding: var(--sizing-4) var(--sizing-12);
+  padding: var(--sizing-x2) var(--sizing-x6);
   box-sizing: border-box;
   margin: auto 0rem;
 }
 .rls-toolbar__description {
   overflow: hidden;
-  padding: 0rem var(--sizing-4);
+  padding: 0rem var(--sizing-x2);
   box-sizing: border-box;
   margin: auto 0rem;
 }
@@ -30,9 +30,9 @@
 }
 .rls-toolbar__title {
   color: var(--color-theme-500);
-  height: var(--sizing-24);
-  line-height: var(--sizing-24);
-  font-size: 1.0125rem;
+  height: var(--sizing-x12);
+  line-height: var(--sizing-x12);
+  font-size: 8.125rem;
   letter-spacing: var(--label-letter-spacing);
   font-weight: var(--font-weight-bold);
 }
@@ -43,7 +43,7 @@
   display: flex;
   box-sizing: border-box;
   margin: auto 0rem;
-  column-gap: var(--sizing-16);
+  column-gap: var(--sizing-x8);
 }
 .rls-toolbar__actions > * {
   margin: auto 0rem;

package/dist/esm/components/molecules/YearPicker/YearPicker.css

@@ -2,7 +2,7 @@
   position: relative;
   float: left;
   width: 100%;
-  max-width: 17.5rem;
+  max-width: 140rem;
   box-sizing: border-box;
   overflow: hidden;
   user-select: none;
@@ -10,21 +10,21 @@
 .rls-year-picker__header {
   display: flex;
   box-sizing: border-box;
-  padding: var(--sizing-8) var(--sizing-12);
+  padding: var(--sizing-x4) var(--sizing-x6);
   color: var(--color-theme-500);
   background: var(--background-theme-100);
 }
 .rls-year-picker__title {
   width: 100%;
-  height: var(--sizing-32);
-  line-height: var(--sizing-32);
+  height: var(--sizing-x16);
+  line-height: var(--sizing-x16);
   text-align: center;
   font-weight: var(--font-weight-bold);
 }
 .rls-year-picker__action {
-  width: var(--sizing-32);
-  height: var(--sizing-32);
-  line-height: var(--sizing-32);
+  width: var(--sizing-x16);
+  height: var(--sizing-x16);
+  line-height: var(--sizing-x16);
 }
 .rls-year-picker__action button {
   color: var(--color-theme-500);
@@ -40,10 +40,10 @@
   position: relative;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: var(--sizing-8);
+  gap: var(--sizing-x4);
   width: 100%;
   float: left;
-  padding: var(--sizing-8);
+  padding: var(--sizing-x4);
   box-sizing: border-box;
 }
 .rls-year-picker__year {
@@ -52,8 +52,8 @@
   display: flex;
   box-sizing: border-box;
   text-align: center;
-  height: var(--sizing-36);
-  border-radius: var(--sizing-8);
+  height: var(--sizing-x18);
+  border-radius: var(--sizing-x4);
   color: var(--color-theme-300);
 }
 .rls-year-picker__year:hover {

package/dist/esm/components/organisms/AutocompleteField/AutocompleteField.css

@@ -3,7 +3,7 @@
   --pvt-control-opacity: 1;
 }
 .rls-autocomplete-field.rls-box-field--selected {
-  --pvt-control-width: calc(100% - var(--sizing-28));
+  --pvt-control-width: calc(100% - var(--sizing-x14));
 }
 .rls-autocomplete-field.rls-box-field--disabled {
   --pvt-control-opacity: 0.5;
@@ -19,11 +19,11 @@
   display: flex;
   align-items: center;
   width: 100%;
-  margin-top: var(--sizing-4);
-  margin-bottom: var(--sizing-12);
+  margin-top: var(--sizing-x2);
+  margin-bottom: var(--sizing-x6);
   background: var(--background-theme-300);
-  border-radius: var(--sizing-8);
-  padding: var(--sizing-8);
+  border-radius: var(--sizing-x4);
+  padding: var(--sizing-x4);
   box-sizing: border-box;
 }
 .rls-autocomplete-field .rls-list-field__ul__search button {
@@ -40,8 +40,8 @@
 }
 .rls-autocomplete-field .rls-list-field__ul__control {
   width: 100%;
-  height: var(--sizing-24);
-  line-height: var(--sizing-24);
+  height: var(--sizing-x12);
+  line-height: var(--sizing-x12);
   padding: 0rem;
   cursor: text;
   border: none;
@@ -63,11 +63,11 @@
   opacity: 0.5;
 }
 .rls-autocomplete-field .rls-list-field__ul .rls-progress-bar {
-  margin-bottom: var(--sizing-16);
+  margin-bottom: var(--sizing-x8);
 }
 .rls-autocomplete-field .rls-list-field__element .rls-ballot__title label {
   background: var(--color-rolster-100);
   color: var(--color-rolster-500);
-  padding: 0rem var(--sizing-4);
-  border-radius: var(--sizing-4);
+  padding: 0rem var(--sizing-x2);
+  border-radius: var(--sizing-x2);
 }

package/dist/esm/components/organisms/Card/Card.css

@@ -1,6 +1,6 @@
 .rls-card {
   background: var(--background-theme-500);
-  border-radius: var(--sizing-8);
+  border-radius: var(--sizing-x4);
   box-shadow: var(--shadow-center-light-8);
 }
 .rls-card--outline {

package/dist/esm/components/organisms/Confirmation/Confirmation.css

@@ -11,9 +11,9 @@
   --pvt-subtitle-letter-spacing: var(--body-letter-spacing);
   --pvt-subtitle-line-height: var(--body-line-height);
   --pvt-subtitle-text-transform: initial;
-  --pvt-content-font-size: 0.925rem;
+  --pvt-content-font-size: 7.4rem;
   --pvt-content-letter-spacing: 0.05em;
-  --pvt-content-line-height: 1.325rem;
+  --pvt-content-line-height: 10.6rem;
   --pvt-backdrop-opacity: 0;
   --pvt-backdrop-bottom: initial;
   position: fixed;
@@ -40,16 +40,16 @@
   position: absolute;
   display: flex;
   flex-direction: column;
-  row-gap: var(--sizing-16);
-  width: calc(100% - var(--sizing-32));
-  max-width: 35rem;
+  row-gap: var(--sizing-x8);
+  width: calc(100% - var(--sizing-x16));
+  max-width: 280rem;
   height: var(--pvt-component-height);
   opacity: var(--pvt-component-opacity);
   visibility: var(--pvt-component-visibility);
-  padding: var(--sizing-16) 0rem;
+  padding: var(--sizing-x8) 0rem;
   box-sizing: border-box;
   z-index: var(--z-index-2);
-  border-radius: var(--sizing-8);
+  border-radius: var(--sizing-x4);
   background: var(--background-theme-500);
   box-shadow: var(--shadow-4);
   will-change: transform;
@@ -62,9 +62,9 @@
   position: relative;
   display: flex;
   flex-direction: column;
-  row-gap: var(--sizing-4);
+  row-gap: var(--sizing-x2);
   width: 100%;
-  padding: 0rem var(--sizing-16);
+  padding: 0rem var(--sizing-x8);
   box-sizing: border-box;
 }
 .rls-confirmation__header__title {
@@ -88,7 +88,7 @@
 .rls-confirmation__body {
   position: relative;
   width: 100%;
-  padding: 0rem var(--sizing-16);
+  padding: 0rem var(--sizing-x8);
   box-sizing: border-box;
 }
 .rls-confirmation__body__content {
@@ -104,7 +104,7 @@
 .rls-confirmation__footer {
   position: relative;
   width: 100%;
-  padding: var(--sizing-8) var(--sizing-16) 0rem var(--sizing-16);
+  padding: var(--sizing-x4) var(--sizing-x8) 0rem var(--sizing-x8);
   box-sizing: border-box;
 }
 .rls-confirmation__footer__actions {
@@ -113,7 +113,7 @@
   display: flex;
   flex-direction: row-reverse;
   justify-content: center;
-  column-gap: var(--sizing-16);
+  column-gap: var(--sizing-x8);
 }
 .rls-confirmation__backdrop {
   position: absolute;
@@ -139,11 +139,11 @@
     --pvt-subtitle-font-size: var(--smalltext-font-size);
     --pvt-subtitle-letter-spacing: var(--smalltext-letter-spacing);
     --pvt-subtitle-line-height: var(--smalltext-line-height);
-    --pvt-content-font-size: 0.9125rem;
+    --pvt-content-font-size: 7.325rem;
   }
   .rls-confirmation__footer__actions {
     flex-direction: column-reverse;
     column-gap: 0rem;
-    row-gap: var(--sizing-16);
+    row-gap: var(--sizing-x8);
   }
 }

package/dist/esm/components/organisms/DateField/DateField.css

@@ -1,5 +1,5 @@
 .rls-date-field {
-  --rls-boxfield-body-padding: var(--sizing-6) var(--sizing-8);
+  --rls-boxfield-body-padding: var(--sizing-x3) var(--sizing-x4);
   position: relative;
   float: left;
   width: 100%;
@@ -8,9 +8,9 @@
 .rls-date-field__control {
   position: relative;
   float: left;
-  width: calc(100% - var(--sizing-28));
-  height: var(--sizing-24);
-  line-height: var(--sizing-24);
+  width: calc(100% - var(--sizing-x14));
+  height: var(--sizing-x12);
+  line-height: var(--sizing-x12);
   padding: 0rem;
   cursor: default;
   border: none;
@@ -29,10 +29,10 @@
 }
 .rls-date-field__action {
   color: var(--color-theme-300);
-  width: var(--sizing-24);
-  height: var(--sizing-24);
+  width: var(--sizing-x12);
+  height: var(--sizing-x12);
   padding: 0rem;
-  margin-left: var(--sizing-4);
+  margin-left: var(--sizing-x2);
   background: transparent;
 }
 .rls-date-field__action:disabled {

package/dist/esm/components/organisms/DatePicker/DatePicker.css

@@ -3,13 +3,13 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  max-width: 18.75rem;
+  max-width: 150rem;
 }
 .rls-date-picker__header {
   background: var(--color-rolster-100);
-  padding: var(--sizing-8);
+  padding: var(--sizing-x4);
   box-sizing: border-box;
-  margin-bottom: var(--sizing-16);
+  margin-bottom: var(--sizing-x8);
 }
 .rls-date-picker__title {
   color: var(--color-theme-500);
@@ -21,23 +21,23 @@
   color: var(--color-rolster-500);
 }
 .rls-date-picker__title--description {
-  height: var(--sizing-32);
-  line-height: var(--sizing-32);
-  font-size: 1.15rem;
+  height: var(--sizing-x16);
+  line-height: var(--sizing-x16);
+  font-size: 9.25rem;
 }
 .rls-date-picker__title--year {
-  margin: var(--sizing-8) 0rem var(--sizing-4) 0rem;
-  height: var(--sizing-32);
-  line-height: var(--sizing-32);
-  font-size: var(--sizing-24);
+  margin: var(--sizing-x4) 0rem var(--sizing-x2) 0rem;
+  height: var(--sizing-x16);
+  line-height: var(--sizing-x16);
+  font-size: var(--sizing-x12);
   color: var(--color-theme-300);
 }
 .rls-date-picker__component {
   display: flex;
-  width: 18.75rem;
-  padding: 0rem var(--sizing-4);
+  width: 150rem;
+  padding: 0rem var(--sizing-x2);
   box-sizing: border-box;
-  margin-bottom: var(--sizing-8);
+  margin-bottom: var(--sizing-x4);
 }
 .rls-date-picker__component > * {
   margin: 0rem auto;
@@ -58,16 +58,16 @@
 .rls-date-picker__actions {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--sizing-8);
-  padding: var(--sizing-8) var(--sizing-16) var(--sizing-12) var(--sizing-16);
+  gap: var(--sizing-x4);
+  padding: var(--sizing-x4) var(--sizing-x8) var(--sizing-x6) var(--sizing-x8);
   overflow: hidden;
   box-sizing: border-box;
 }
 .rls-date-picker__actions--cancel {
-  width: calc(50% - var(--sizing-4));
+  width: calc(50% - var(--sizing-x2));
 }
 .rls-date-picker__actions--today {
-  width: calc(50% - var(--sizing-4));
+  width: calc(50% - var(--sizing-x2));
 }
 .rls-date-picker__actions--ok {
   width: 100%;

package/dist/esm/components/organisms/DateRangeField/DateRangeField.css

@@ -1,5 +1,5 @@
 .rls-date-range-field {
-  --rls-boxfield-body-padding: var(--sizing-6) var(--sizing-8);
+  --rls-boxfield-body-padding: var(--sizing-x3) var(--sizing-x4);
   position: relative;
   float: left;
   width: 100%;
@@ -8,9 +8,9 @@
 .rls-date-range-field__control {
   position: relative;
   float: left;
-  width: calc(100% - var(--sizing-28));
-  height: var(--sizing-24);
-  line-height: var(--sizing-24);
+  width: calc(100% - var(--sizing-x14));
+  height: var(--sizing-x12);
+  line-height: var(--sizing-x12);
   padding: 0rem;
   cursor: default;
   border: none;
@@ -29,9 +29,9 @@
 }
 .rls-date-range-field__action {
   color: var(--color-theme-300);
-  width: var(--sizing-24);
-  height: var(--sizing-24);
+  width: var(--sizing-x12);
+  height: var(--sizing-x12);
   padding: 0rem;
-  margin-left: var(--sizing-4);
+  margin-left: var(--sizing-x2);
   background: transparent;
 }

package/dist/esm/components/organisms/DateRangePicker/DateRangePicker.css

@@ -1,14 +1,14 @@
 .rls-date-range-picker {
   position: relative;
   float: left;
-  max-width: 18.75rem;
+  max-width: 150rem;
   overflow: hidden;
 }
 .rls-date-range-picker__header {
   background: var(--color-rolster-100);
-  padding: var(--sizing-8);
+  padding: var(--sizing-x4);
   box-sizing: border-box;
-  margin-bottom: var(--sizing-16);
+  margin-bottom: var(--sizing-x8);
 }
 .rls-date-range-picker__title {
   color: var(--color-theme-500);
@@ -20,15 +20,15 @@
   color: var(--color-rolster-500);
 }
 .rls-date-range-picker__title--description {
-  height: var(--sizing-32);
-  line-height: var(--sizing-32);
-  font-size: 1.15rem;
+  height: var(--sizing-x16);
+  line-height: var(--sizing-x16);
+  font-size: 9.25rem;
 }
 .rls-date-range-picker__title--year {
-  margin: var(--sizing-8) 0rem var(--sizing-4) 0rem;
-  height: var(--sizing-32);
-  line-height: var(--sizing-32);
-  font-size: var(--sizing-24);
+  margin: var(--sizing-x4) 0rem var(--sizing-x2) 0rem;
+  height: var(--sizing-x16);
+  line-height: var(--sizing-x16);
+  font-size: var(--sizing-x12);
   color: var(--color-theme-300);
 }
 .rls-date-range-picker__title--month {
@@ -36,17 +36,17 @@
   justify-content: space-between;
 }
 .rls-date-range-picker__title--month span {
-  height: var(--sizing-28);
-  line-height: var(--sizing-28);
-  font-size: var(--sizing-20);
+  height: var(--sizing-x14);
+  line-height: var(--sizing-x14);
+  font-size: var(--sizing-x10);
   color: var(--color-theme-300);
   margin: auto 0rem;
 }
 .rls-date-range-picker__component {
   display: flex;
-  padding: 0rem var(--sizing-4);
+  padding: 0rem var(--sizing-x2);
   box-sizing: border-box;
-  margin-bottom: var(--sizing-8);
+  margin-bottom: var(--sizing-x4);
 }
 .rls-date-range-picker__component > * {
   margin: 0rem auto;
@@ -65,7 +65,7 @@
   display: none;
 }
 .rls-date-range-picker__actions {
-  padding: var(--sizing-8) var(--sizing-16) var(--sizing-12) var(--sizing-16);
+  padding: var(--sizing-x4) var(--sizing-x8) var(--sizing-x6) var(--sizing-x8);
   overflow: hidden;
   box-sizing: border-box;
 }
@@ -73,7 +73,7 @@
   width: 100%;
 }
 .rls-date-range-picker__actions--ok {
-  margin-top: var(--sizing-8);
+  margin-top: var(--sizing-x4);
   width: 100%;
 }
 .rls-date-range-picker__actions button {

package/dist/esm/components/organisms/FormNavigation/FormNavigation.css

@@ -1,29 +1,29 @@
 .rls-form-navigation {
   position: fixed;
-  top: var(--sizing-16);
-  right: var(--sizing-16);
-  width: calc(100% - var(--sizing-32));
-  max-width: 20rem;
+  top: var(--sizing-x8);
+  right: var(--sizing-x8);
+  width: calc(100% - var(--sizing-x16));
+  max-width: 160rem;
   height: auto;
-  max-height: calc(100vh - var(--sizing-32));
+  max-height: calc(100vh - var(--sizing-x16));
   z-index: var(--z-index-12);
-  padding: var(--sizing-16) var(--sizing-16) var(--sizing-24) var(--sizing-16);
+  padding: var(--sizing-x8) var(--sizing-x8) var(--sizing-x12) var(--sizing-x8);
   box-sizing: border-box;
   background: var(--background-theme-500);
-  border-radius: var(--sizing-8);
+  border-radius: var(--sizing-x4);
   box-shadow: var(--shadow-center-dark-8);
-  transform: translateX(calc(100% + var(--sizing-32)));
+  transform: translateX(calc(100% + var(--sizing-x16)));
   transition: transform 240ms 0ms var(--standard-curve);
 }
 .rls-form-navigation--visible {
   transform: translateX(0%);
 }
 .rls-form-navigation__header {
-  margin-bottom: var(--sizing-16);
+  margin-bottom: var(--sizing-x8);
 }
 .rls-form-navigation__header .rls-button-action {
-  width: var(--sizing-24);
-  height: var(--sizing-24);
+  width: var(--sizing-x12);
+  height: var(--sizing-x12);
   padding: 0rem;
   float: right;
 }