@rolster/react-components 18.10.8 → 18.10.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (44) hide show
  1. package/dist/cjs/assets/{index-Fy0sGm5F.css → index-nrIFu6l7.css} +228 -228
  2. package/dist/es/assets/{index-Fy0sGm5F.css → index-nrIFu6l7.css} +228 -228
  3. package/dist/esm/components/atoms/Amount/Amount.css +1 -1
  4. package/dist/esm/components/atoms/Breadcrumb/Breadcrumb.css +3 -3
  5. package/dist/esm/components/atoms/Button/Button.css +8 -8
  6. package/dist/esm/components/atoms/ButtonAction/ButtonAction.css +10 -10
  7. package/dist/esm/components/atoms/CheckBox/CheckBox.css +4 -4
  8. package/dist/esm/components/atoms/Icon/Icon.css +1 -1
  9. package/dist/esm/components/atoms/InputPassword/InputPassword.css +2 -2
  10. package/dist/esm/components/atoms/MessageIcon/MessageIcon.css +4 -4
  11. package/dist/esm/components/atoms/Poster/Poster.css +1 -1
  12. package/dist/esm/components/atoms/ProgressBar/ProgressBar.css +3 -3
  13. package/dist/esm/components/atoms/RadioButton/RadioButton.css +2 -2
  14. package/dist/esm/components/atoms/SearchInput/SearchInput.css +3 -3
  15. package/dist/esm/components/atoms/Skeleton/Skeleton.css +1 -1
  16. package/dist/esm/components/atoms/SkeletonText/SkeletonText.css +1 -1
  17. package/dist/esm/components/atoms/Switch/Switch.css +6 -6
  18. package/dist/esm/components/molecules/Ballot/Ballot.css +7 -7
  19. package/dist/esm/components/molecules/ButtonToggle/ButtonToggle.css +8 -8
  20. package/dist/esm/components/molecules/CheckBoxLabel/CheckBoxLabel.css +4 -4
  21. package/dist/esm/components/molecules/DayPicker/DayPicker.css +9 -9
  22. package/dist/esm/components/molecules/DayRangePicker/DayRangePicker.css +9 -9
  23. package/dist/esm/components/molecules/MoneyField/MoneyField.css +1 -1
  24. package/dist/esm/components/molecules/MonthPicker/MonthPicker.css +4 -4
  25. package/dist/esm/components/molecules/MonthTitlePicker/MonthTitlePicker.css +3 -3
  26. package/dist/esm/components/molecules/NumberField/NumberField.css +1 -1
  27. package/dist/esm/components/molecules/Pagination/Pagination.css +15 -15
  28. package/dist/esm/components/molecules/PasswordField/PasswordField.css +4 -4
  29. package/dist/esm/components/molecules/RadioButtonLabel/RadioButtonLabel.css +4 -4
  30. package/dist/esm/components/molecules/SwitchLabel/SwitchLabel.css +5 -5
  31. package/dist/esm/components/molecules/TextField/TextField.css +1 -1
  32. package/dist/esm/components/molecules/Toolbar/Toolbar.css +6 -6
  33. package/dist/esm/components/molecules/YearPicker/YearPicker.css +10 -10
  34. package/dist/esm/components/organisms/AutocompleteField/AutocompleteField.css +10 -10
  35. package/dist/esm/components/organisms/Card/Card.css +1 -1
  36. package/dist/esm/components/organisms/Confirmation/Confirmation.css +10 -10
  37. package/dist/esm/components/organisms/DateField/DateField.css +7 -7
  38. package/dist/esm/components/organisms/DatePicker/DatePicker.css +14 -14
  39. package/dist/esm/components/organisms/DateRangeField/DateRangeField.css +7 -7
  40. package/dist/esm/components/organisms/DateRangePicker/DateRangePicker.css +15 -15
  41. package/dist/esm/components/organisms/FormNavigation/FormNavigation.css +10 -10
  42. package/dist/esm/components/organisms/Modal/Modal.css +2 -2
  43. package/dist/esm/components/organisms/Snackbar/Snackbar.css +11 -11
  44. package/package.json +2 -2
package/dist/esm/components/atoms/Amount/Amount.css CHANGED
@@ -1,7 +1,7 @@
1
1
  .rls-amount {
2
2
  display: flex;
3
3
  justify-content: var(--rls-amount-text-align);
4
- column-gap: var(--sizing-4);
4
+ column-gap: var(--sizing-x2);
5
5
  }
6
6
  .rls-amount[rls-theme] {
7
7
  color: var(--color-rolster-500);
package/dist/esm/components/atoms/Breadcrumb/Breadcrumb.css CHANGED
@@ -4,7 +4,7 @@
4
4
  width: 100%;
5
5
  height: var(--rls-breadcrumb-height);
6
6
  line-height: var(--rls-breadcrumb-height);
7
- padding: 0rem var(--sizing-16);
7
+ padding: 0rem var(--sizing-x8);
8
8
  box-sizing: border-box;
9
9
  user-select: none;
10
10
  overflow: auto;
@@ -33,10 +33,10 @@
33
33
  font-family: -rolster-icons;
34
34
  display: inline-block;
35
35
  content: '\e911';
36
- margin: 0rem var(--sizing-4);
36
+ margin: 0rem var(--sizing-x2);
37
37
  cursor: default;
38
38
  color: inherit;
39
- font-size: var(--sizing-24);
39
+ font-size: var(--sizing-x12);
40
40
  font-weight: normal;
41
41
  font-style: normal;
42
42
  letter-spacing: normal;
package/dist/esm/components/atoms/Button/Button.css CHANGED
@@ -53,8 +53,8 @@
53
53
  display: flex;
54
54
  justify-content: center;
55
55
  overflow: hidden;
56
- line-height: var(--sizing-40);
57
- height: var(--sizing-40);
56
+ line-height: var(--sizing-x20);
57
+ height: var(--sizing-x20);
58
58
  padding: var(--rls-button-content-padding);
59
59
  box-sizing: border-box;
60
60
  border-radius: var(--rls-button-content-radius);
@@ -68,10 +68,10 @@
68
68
  content: '';
69
69
  top: 50%;
70
70
  left: 50%;
71
- padding-top: calc(100% - var(--sizing-16));
72
- padding-left: calc(100% - var(--sizing-16));
73
- margin-top: calc(-50% + var(--sizing-8));
74
- margin-left: calc(-50% + var(--sizing-8));
71
+ padding-top: calc(100% - var(--sizing-x8));
72
+ padding-left: calc(100% - var(--sizing-x8));
73
+ margin-top: calc(-50% + var(--sizing-x4));
74
+ margin-left: calc(-50% + var(--sizing-x4));
75
75
  border-radius: 50%;
76
76
  opacity: 0.26;
77
77
  transform: scale(0);
@@ -103,10 +103,10 @@
103
103
  --pvt-button-ripple-background: var(--color-light-500);
104
104
  }
105
105
  .rls-button .rls-icon {
106
- margin: auto var(--sizing-4);
106
+ margin: auto var(--sizing-x2);
107
107
  }
108
108
  .rls-button__label {
109
- padding: 0rem var(--sizing-4);
109
+ padding: 0rem var(--sizing-x2);
110
110
  line-height: initial;
111
111
  width: auto;
112
112
  margin: auto 0rem;
package/dist/esm/components/atoms/ButtonAction/ButtonAction.css CHANGED
@@ -2,11 +2,11 @@
2
2
  --pvt-tooltip-transition-delay: 0ms;
3
3
  --pvt-tooltip-opacity: 0;
4
4
  position: relative;
5
- width: var(--sizing-32);
6
- height: var(--sizing-32);
5
+ width: var(--sizing-x16);
6
+ height: var(--sizing-x16);
7
7
  border: none;
8
8
  outline: none;
9
- padding: var(--sizing-4);
9
+ padding: var(--sizing-x2);
10
10
  box-sizing: border-box;
11
11
  user-select: none;
12
12
  cursor: default;
@@ -24,10 +24,10 @@
24
24
  border-radius: 50%;
25
25
  transform: scale(0);
26
26
  background: var(--rls-action-ripple-color);
27
- padding-top: calc(120% - var(--sizing-8));
28
- padding-left: calc(120% - var(--sizing-8));
29
- margin-top: calc(-60% + var(--sizing-4));
30
- margin-left: calc(-60% + var(--sizing-4));
27
+ padding-top: calc(120% - var(--sizing-x4));
28
+ padding-left: calc(120% - var(--sizing-x4));
29
+ margin-top: calc(-60% + var(--sizing-x2));
30
+ margin-left: calc(-60% + var(--sizing-x2));
31
31
  }
32
32
  .rls-button-action:not(:active)::before {
33
33
  animation: ripple-button-action 1000ms var(--standard-curve);
@@ -63,12 +63,12 @@
63
63
  }
64
64
  .rls-button-action__tooltip {
65
65
  position: absolute;
66
- top: calc(100% + var(--sizing-12));
66
+ top: calc(100% + var(--sizing-x6));
67
67
  left: 50%;
68
68
  width: auto;
69
69
  float: initial;
70
- padding: var(--sizing-8);
71
- border-radius: var(--sizing-4);
70
+ padding: var(--sizing-x4);
71
+ border-radius: var(--sizing-x2);
72
72
  white-space: nowrap;
73
73
  pointer-events: none;
74
74
  transform: translateX(-50%);
package/dist/esm/components/atoms/CheckBox/CheckBox.css CHANGED
@@ -3,11 +3,11 @@
3
3
  position: relative;
4
4
  float: left;
5
5
  display: flex;
6
- width: var(--sizing-24);
7
- height: var(--sizing-24);
6
+ width: var(--sizing-x12);
7
+ height: var(--sizing-x12);
8
8
  box-sizing: border-box;
9
9
  outline: none;
10
- border-radius: var(--sizing-4);
10
+ border-radius: var(--sizing-x2);
11
11
  border: var(--border-1-theme-300);
12
12
  }
13
13
  .rls-checkbox:hover {
@@ -22,7 +22,7 @@
22
22
  pointer-events: none;
23
23
  }
24
24
  .rls-checkbox__component {
25
- border-radius: var(--sizing-2);
25
+ border-radius: var(--sizing-x1);
26
26
  width: 0.875rem;
27
27
  height: 0.875rem;
28
28
  margin: auto;
package/dist/esm/components/atoms/Icon/Icon.css CHANGED
@@ -10,7 +10,7 @@
10
10
  .rls-icon--skeleton {
11
11
  --pvt-icon-display: none;
12
12
  background: var(--theme-rolster-300);
13
- border-radius: var(--sizing-4);
13
+ border-radius: var(--sizing-x2);
14
14
  }
15
15
  .rls-icon > i {
16
16
  display: var(--pvt-icon-display);
package/dist/esm/components/atoms/InputPassword/InputPassword.css CHANGED
@@ -9,8 +9,8 @@
9
9
  position: relative;
10
10
  float: left;
11
11
  width: 100%;
12
- height: var(--sizing-24);
13
- line-height: var(--sizing-24);
12
+ height: var(--sizing-x12);
13
+ line-height: var(--sizing-x12);
14
14
  padding: 0rem;
15
15
  cursor: text;
16
16
  border: none;
package/dist/esm/components/atoms/MessageIcon/MessageIcon.css CHANGED
@@ -1,11 +1,11 @@
1
1
  .rls-message-icon {
2
2
  --rls-icon-color: var(--color-rolster-500);
3
- --rls-icon-width: var(--sizing-16);
4
- --rls-icon-height: var(--sizing-16);
5
- --rls-icon-font-size: var(--sizing-16);
3
+ --rls-icon-width: var(--sizing-x8);
4
+ --rls-icon-height: var(--sizing-x8);
5
+ --rls-icon-font-size: var(--sizing-x8);
6
6
  display: flex;
7
7
  align-items: center;
8
- column-gap: var(--sizing-4);
8
+ column-gap: var(--sizing-x2);
9
9
  }
10
10
  .rls-message-icon span {
11
11
  color: var(--color-theme-300);
package/dist/esm/components/atoms/Poster/Poster.css CHANGED
@@ -6,7 +6,7 @@
6
6
  line-height: var(--rls-poster-height);
7
7
  padding: var(--rls-poster-padding);
8
8
  box-sizing: border-box;
9
- border-radius: var(--sizing-4);
9
+ border-radius: var(--sizing-x2);
10
10
  color: var(--color-light-500);
11
11
  background: var(--gradient-rolster-500);
12
12
  }
package/dist/esm/components/atoms/ProgressBar/ProgressBar.css CHANGED
@@ -3,7 +3,7 @@
3
3
  position: relative;
4
4
  float: left;
5
5
  width: 100%;
6
- height: var(--sizing-4);
6
+ height: var(--sizing-x2);
7
7
  overflow: hidden;
8
8
  background: var(--color-rolster-100);
9
9
  }
@@ -16,7 +16,7 @@
16
16
  content: '';
17
17
  top: 0rem;
18
18
  width: 0%;
19
- height: var(--sizing-4);
19
+ height: var(--sizing-x2);
20
20
  background: var(--gradient-rolster-500);
21
21
  }
22
22
  .rls-progress-bar--indeterminate::after {
@@ -29,7 +29,7 @@
29
29
  position: absolute;
30
30
  top: 0rem;
31
31
  width: 0%;
32
- height: var(--sizing-8);
32
+ height: var(--sizing-x4);
33
33
  display: var(--pvt-component-display);
34
34
  background: var(--gradient-rolster-500);
35
35
  transition: width 320ms 0ms var(--standard-curve);
package/dist/esm/components/atoms/RadioButton/RadioButton.css CHANGED
@@ -4,8 +4,8 @@
4
4
  float: left;
5
5
  display: flex;
6
6
  outline: none;
7
- width: var(--sizing-24);
8
- height: var(--sizing-24);
7
+ width: var(--sizing-x12);
8
+ height: var(--sizing-x12);
9
9
  border-radius: 50%;
10
10
  box-sizing: border-box;
11
11
  border: var(--border-1-theme-300);
package/dist/esm/components/atoms/SearchInput/SearchInput.css CHANGED
@@ -1,11 +1,11 @@
1
1
  .rls-search-input {
2
- --rls-input-height: var(--sizing-28);
2
+ --rls-input-height: var(--sizing-x14);
3
3
  position: relative;
4
4
  float: left;
5
5
  display: flex;
6
6
  align-items: center;
7
- padding: var(--sizing-8) var(--sizing-12);
7
+ padding: var(--sizing-x4) var(--sizing-x6);
8
8
  box-sizing: border-box;
9
9
  border: var(--border-1-theme-300);
10
- border-radius: var(--sizing-8);
10
+ border-radius: var(--sizing-x4);
11
11
  }
package/dist/esm/components/atoms/Skeleton/Skeleton.css CHANGED
@@ -9,7 +9,7 @@
9
9
  letter-spacing: inherit;
10
10
  overflow: hidden;
11
11
  background: var(--color-rolster-100);
12
- border-radius: var(--sizing-4);
12
+ border-radius: var(--sizing-x2);
13
13
  }
14
14
  .rls-skeleton::after {
15
15
  position: absolute;
package/dist/esm/components/atoms/SkeletonText/SkeletonText.css CHANGED
@@ -13,7 +13,7 @@
13
13
  .rls-skeleton-text--active {
14
14
  --pvt-value-visibility: hidden;
15
15
  background: var(--color-rolster-100);
16
- border-radius: var(--sizing-4);
16
+ border-radius: var(--sizing-x2);
17
17
  }
18
18
  .rls-skeleton-text--active::after {
19
19
  animation: skeleton-text-animation 1600ms infinite;
package/dist/esm/components/atoms/Switch/Switch.css CHANGED
@@ -1,8 +1,8 @@
1
1
  .rls-switch {
2
- --pvt-element-left: var(--sizing-2);
2
+ --pvt-element-left: var(--sizing-x1);
3
3
  --pvt-element-background: var(--background-theme-500);
4
4
  --pvt-bar-background: var(--background-theme-100);
5
- max-width: var(--sizing-40);
5
+ max-width: var(--sizing-x20);
6
6
  }
7
7
  .rls-switch:hover {
8
8
  cursor: pointer;
@@ -10,7 +10,7 @@
10
10
  .rls-switch--checked {
11
11
  --pvt-element-background: var(--gradient-rolster-500);
12
12
  --pvt-element-left: calc(
13
- 100% - var(--rls-switch-element-size) - var(--sizing-2)
13
+ 100% - var(--rls-switch-element-size) - var(--sizing-x1)
14
14
  );
15
15
  --pvt-bar-background: var(--color-rolster-300);
16
16
  }
@@ -21,7 +21,7 @@
21
21
  .rls-switch__component {
22
22
  position: relative;
23
23
  width: 100%;
24
- padding: var(--sizing-6) var(--sizing-2);
24
+ padding: var(--sizing-x3) var(--sizing-x1);
25
25
  box-sizing: border-box;
26
26
  }
27
27
  .rls-switch__component__element {
@@ -31,11 +31,11 @@
31
31
  width: var(--rls-switch-element-size);
32
32
  height: var(--rls-switch-element-size);
33
33
  z-index: var(--z-index-2);
34
- padding: var(--sizing-4);
34
+ padding: var(--sizing-x2);
35
35
  box-sizing: border-box;
36
36
  border-radius: 50%;
37
37
  background: var(--background-theme-500);
38
- box-shadow: 0 0 0.25rem 0 rgba(37, 38, 65, 0.38);
38
+ box-shadow: 0 0 2rem 0 rgba(37, 38, 65, 0.38);
39
39
  transition: left 240ms var(--standard-curve);
40
40
  }
41
41
  .rls-switch__component__element::before {
package/dist/esm/components/molecules/Ballot/Ballot.css CHANGED
@@ -1,16 +1,16 @@
1
1
  .rls-ballot {
2
- --rls-avatar-width: var(--sizing-40);
3
- --rls-avatar-height: var(--sizing-40);
2
+ --rls-avatar-width: var(--sizing-x20);
3
+ --rls-avatar-height: var(--sizing-x20);
4
4
  position: relative;
5
5
  float: left;
6
6
  display: flex;
7
7
  width: 100%;
8
- padding: var(--sizing-8);
8
+ padding: var(--sizing-x4);
9
9
  box-sizing: border-box;
10
10
  overflow: hidden;
11
11
  }
12
12
  .rls-ballot--bordered {
13
- border-radius: var(--sizing-8);
13
+ border-radius: var(--sizing-x4);
14
14
  border: var(--border-1-theme-300);
15
15
  }
16
16
  .rls-ballot--skeleton {
@@ -20,8 +20,8 @@
20
20
  margin: auto 0rem;
21
21
  }
22
22
  .rls-ballot > .rls-avatar + .rls-ballot__component {
23
- width: calc(100% - var(--sizing-56));
24
- margin-left: var(--sizing-8);
23
+ width: calc(100% - var(--sizing-x28));
24
+ margin-left: var(--sizing-x4);
25
25
  }
26
26
  .rls-ballot__component {
27
27
  overflow: hidden;
@@ -46,7 +46,7 @@
46
46
  float: left;
47
47
  width: var(--rls-ballot-subtitle-width);
48
48
  color: var(--color-theme-300);
49
- margin-top: var(--sizing-4);
49
+ margin-top: var(--sizing-x2);
50
50
  font-weight: var(--font-weight-semibold);
51
51
  font-size: var(--smalltext-font-size);
52
52
  letter-spacing: var(--smalltext-letter-spacing);
package/dist/esm/components/molecules/ButtonToggle/ButtonToggle.css CHANGED
@@ -6,12 +6,12 @@
6
6
  justify-content: center;
7
7
  }
8
8
  .rls-button-toggle__action {
9
- --rls-button-content-radius: var(--sizing-4) 0rem 0rem var(--sizing-4);
9
+ --rls-button-content-radius: var(--sizing-x2) 0rem 0rem var(--sizing-x2);
10
10
  width: auto;
11
11
  }
12
12
  .rls-button-toggle__icon {
13
- --rls-button-content-radius: 0rem var(--sizing-4) var(--sizing-4) 0rem;
14
- --rls-button-content-padding: var(--sizing-4);
13
+ --rls-button-content-radius: 0rem var(--sizing-x2) var(--sizing-x2) 0rem;
14
+ --rls-button-content-padding: var(--sizing-x2);
15
15
  width: auto;
16
16
  }
17
17
  .rls-button-toggle__list {
@@ -46,8 +46,8 @@
46
46
  width: 100%;
47
47
  height: var(--rls-button-toggle-ul-height);
48
48
  opacity: var(--rls-button-toggle-ul-opacity);
49
- padding: var(--sizing-8) 0rem;
50
- border-radius: var(--sizing-8);
49
+ padding: var(--sizing-x4) 0rem;
50
+ border-radius: var(--sizing-x4);
51
51
  box-sizing: border-box;
52
52
  overflow-y: auto;
53
53
  overflow-x: hidden;
@@ -61,10 +61,10 @@
61
61
  will-change: opacity, transform;
62
62
  }
63
63
  .rls-button-toggle__list ul li {
64
- padding: 0rem var(--sizing-12);
64
+ padding: 0rem var(--sizing-x6);
65
65
  box-sizing: border-box;
66
- height: var(--sizing-40);
67
- line-height: var(--sizing-40);
66
+ height: var(--sizing-x20);
67
+ line-height: var(--sizing-x20);
68
68
  cursor: default;
69
69
  font-weight: var(--font-weight-bold);
70
70
  font-size: 0.825rem;
package/dist/esm/components/molecules/CheckBoxLabel/CheckBoxLabel.css CHANGED
@@ -1,11 +1,11 @@
1
1
  .rls-checkbox-label {
2
2
  --pvt-text-opacity: 1;
3
- --pvt-text-height: var(--sizing-24);
3
+ --pvt-text-height: var(--sizing-x12);
4
4
  --pvt-text-overflow: hidden;
5
5
  --pvt-text-white-space: nowrap;
6
6
  --pvt-text-text-overflow: ellipsis;
7
7
  display: flex;
8
- column-gap: var(--sizing-8);
8
+ column-gap: var(--sizing-x4);
9
9
  }
10
10
  .rls-checkbox-label--disabled {
11
11
  --pvt-text-opacity: 0.5;
@@ -21,9 +21,9 @@
21
21
  width: auto;
22
22
  }
23
23
  .rls-checkbox-label__text {
24
- max-width: calc(100% - var(--sizing-32));
24
+ max-width: calc(100% - var(--sizing-x16));
25
25
  height: var(--pvt-text-height);
26
- line-height: var(--sizing-24);
26
+ line-height: var(--sizing-x12);
27
27
  color: var(--color-theme-300);
28
28
  font-size: var(--label-font-size);
29
29
  font-weight: var(--font-weight-medium);
package/dist/esm/components/molecules/DayPicker/DayPicker.css CHANGED
@@ -11,16 +11,16 @@
11
11
  }
12
12
  .rls-day-picker__header {
13
13
  display: flex;
14
- margin-bottom: var(--sizing-8);
14
+ margin-bottom: var(--sizing-x4);
15
15
  background: var(--background-theme-100);
16
16
  color: var(--color-theme-500);
17
- border-radius: var(--sizing-4);
17
+ border-radius: var(--sizing-x2);
18
18
  }
19
19
  .rls-day-picker__label {
20
- padding: var(--sizing-12) 0rem;
20
+ padding: var(--sizing-x6) 0rem;
21
21
  text-align: center;
22
22
  width: 100%;
23
- font-size: var(--sizing-12);
23
+ font-size: var(--sizing-x6);
24
24
  font-weight: var(--font-weight-bold);
25
25
  }
26
26
  .rls-day-picker__week {
@@ -28,17 +28,17 @@
28
28
  }
29
29
  .rls-day-picker__day {
30
30
  text-align: center;
31
- padding: var(--sizing-2);
31
+ padding: var(--sizing-x1);
32
32
  box-sizing: border-box;
33
33
  }
34
34
  .rls-day-picker__day__span {
35
35
  position: relative;
36
36
  display: block;
37
37
  color: var(--color-theme-500);
38
- border-radius: var(--sizing-8);
39
- height: var(--sizing-36);
40
- line-height: var(--sizing-36);
41
- margin: var(--sizing-2) 0rem;
38
+ border-radius: var(--sizing-x4);
39
+ height: var(--sizing-x18);
40
+ line-height: var(--sizing-x18);
41
+ margin: var(--sizing-x1) 0rem;
42
42
  font-size: 0.875rem;
43
43
  font-weight: var(--font-weight-semibold);
44
44
  background: var(--pvt-span-background);
package/dist/esm/components/molecules/DayRangePicker/DayRangePicker.css CHANGED
@@ -11,16 +11,16 @@
11
11
  }
12
12
  .rls-day-range-picker__header {
13
13
  display: flex;
14
- margin-bottom: var(--sizing-8);
14
+ margin-bottom: var(--sizing-x4);
15
15
  background: var(--background-theme-100);
16
16
  color: var(--color-theme-500);
17
- border-radius: var(--sizing-4);
17
+ border-radius: var(--sizing-x2);
18
18
  }
19
19
  .rls-day-range-picker__label {
20
- padding: var(--sizing-12) 0rem;
20
+ padding: var(--sizing-x6) 0rem;
21
21
  text-align: center;
22
22
  width: 100%;
23
- font-size: var(--sizing-12);
23
+ font-size: var(--sizing-x6);
24
24
  font-weight: var(--font-weight-bold);
25
25
  }
26
26
  .rls-day-range-picker__week {
@@ -28,17 +28,17 @@
28
28
  }
29
29
  .rls-day-range-picker__day {
30
30
  text-align: center;
31
- padding: var(--sizing-2);
31
+ padding: var(--sizing-x1);
32
32
  box-sizing: border-box;
33
33
  }
34
34
  .rls-day-range-picker__day__span {
35
35
  position: relative;
36
36
  display: block;
37
37
  color: var(--color-theme-500);
38
- border-radius: var(--sizing-8);
39
- height: var(--sizing-36);
40
- line-height: var(--sizing-36);
41
- margin: var(--sizing-2) 0rem;
38
+ border-radius: var(--sizing-x4);
39
+ height: var(--sizing-x18);
40
+ line-height: var(--sizing-x18);
41
+ margin: var(--sizing-x1) 0rem;
42
42
  font-size: 0.875rem;
43
43
  font-weight: var(--font-weight-semibold);
44
44
  }
package/dist/esm/components/molecules/MoneyField/MoneyField.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .rls-money-field {
2
- --rls-input-parent-padding: var(--sizing-6) var(--sizing-8);
2
+ --rls-input-parent-padding: var(--sizing-x3) var(--sizing-x4);
3
3
  position: relative;
4
4
  float: left;
5
5
  width: 100%;
package/dist/esm/components/molecules/MonthPicker/MonthPicker.css CHANGED
@@ -5,8 +5,8 @@
5
5
  max-width: 17.5rem;
6
6
  display: grid;
7
7
  grid-template-columns: repeat(3, 1fr);
8
- gap: var(--sizing-4);
9
- padding: var(--sizing-2);
8
+ gap: var(--sizing-x2);
9
+ padding: var(--sizing-x1);
10
10
  box-sizing: border-box;
11
11
  }
12
12
  .rls-month-picker__component {
@@ -15,8 +15,8 @@
15
15
  display: flex;
16
16
  box-sizing: border-box;
17
17
  text-align: center;
18
- height: var(--sizing-36);
19
- border-radius: var(--sizing-8);
18
+ height: var(--sizing-x18);
19
+ border-radius: var(--sizing-x4);
20
20
  color: var(--color-theme-300);
21
21
  }
22
22
  .rls-month-picker__component:hover {
package/dist/esm/components/molecules/MonthTitlePicker/MonthTitlePicker.css CHANGED
@@ -6,9 +6,9 @@
6
6
  color: var(--color-theme-300);
7
7
  cursor: default;
8
8
  margin: auto 0rem;
9
- height: var(--sizing-28);
10
- line-height: var(--sizing-28);
11
- font-size: var(--sizing-20);
9
+ height: var(--sizing-x14);
10
+ line-height: var(--sizing-x14);
11
+ font-size: var(--sizing-x10);
12
12
  font-weight: var(--font-weight-bold);
13
13
  }
14
14
  .rls-month-title-picker span:hover {
package/dist/esm/components/molecules/NumberField/NumberField.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .rls-number-field {
2
- --rls-input-parent-padding: var(--sizing-6) var(--sizing-8);
2
+ --rls-input-parent-padding: var(--sizing-x3) var(--sizing-x4);
3
3
  position: relative;
4
4
  float: left;
5
5
  width: 100%;
package/dist/esm/components/molecules/Pagination/Pagination.css CHANGED
@@ -5,15 +5,15 @@
5
5
  float: left;
6
6
  width: 100%;
7
7
  overflow: hidden;
8
- height: var(--sizing-40);
9
- padding: 0rem var(--sizing-12);
8
+ height: var(--sizing-x20);
9
+ padding: 0rem var(--sizing-x6);
10
10
  box-sizing: border-box;
11
11
  }
12
12
  .rls-pagination__pages {
13
13
  display: flex;
14
- gap: var(--sizing-8);
14
+ gap: var(--sizing-x4);
15
15
  width: auto;
16
- margin: 0rem var(--sizing-8);
16
+ margin: 0rem var(--sizing-x4);
17
17
  }
18
18
  .rls-pagination__page {
19
19
  background: var(--background-theme-100);
@@ -21,10 +21,10 @@
21
21
  cursor: default;
22
22
  margin: auto 0rem;
23
23
  text-align: center;
24
- width: var(--sizing-32);
25
- height: var(--sizing-32);
26
- line-height: var(--sizing-32);
27
- border-radius: var(--sizing-4);
24
+ width: var(--sizing-x16);
25
+ height: var(--sizing-x16);
26
+ line-height: var(--sizing-x16);
27
+ border-radius: var(--sizing-x2);
28
28
  }
29
29
  .rls-pagination__page:hover {
30
30
  background: var(--color-rolster-300);
@@ -36,10 +36,10 @@
36
36
  }
37
37
  .rls-pagination__description {
38
38
  color: var(--font-primary-900);
39
- margin: 0rem var(--sizing-8);
39
+ margin: 0rem var(--sizing-x4);
40
40
  width: auto;
41
- height: var(--sizing-40);
42
- line-height: var(--sizing-40);
41
+ height: var(--sizing-x20);
42
+ line-height: var(--sizing-x20);
43
43
  font-size: var(--body-1-size);
44
44
  font-weight: var(--font-weight-bold);
45
45
  letter-spacing: var(--body-1-letter-spacing);
@@ -51,10 +51,10 @@
51
51
  background: none;
52
52
  outline: none;
53
53
  color: var(--color-theme-300);
54
- height: var(--sizing-36);
55
- width: var(--sizing-36);
56
- padding: var(--sizing-6);
57
- margin: var(--sizing-2) 0rem;
54
+ height: var(--sizing-x18);
55
+ width: var(--sizing-x18);
56
+ padding: var(--sizing-x3);
57
+ margin: var(--sizing-x1) 0rem;
58
58
  }
59
59
  .rls-pagination__action:hover {
60
60
  color: var(--color-rolster-300);
package/dist/esm/components/molecules/PasswordField/PasswordField.css CHANGED
@@ -1,12 +1,12 @@
1
1
  .rls-password-field {
2
- --rls-input-parent-padding: var(--sizing-6) var(--sizing-8);
3
- --rls-action-ripple-dimension: var(--sizing-32);
4
- --rls-action-ripple-position: -1rem;
2
+ --rls-input-parent-padding: var(--sizing-x3) var(--sizing-x4);
3
+ --rls-action-ripple-dimension: var(--sizing-x16);
4
+ --rls-action-ripple-position: -8rem;
5
5
  position: relative;
6
6
  float: left;
7
7
  width: 100%;
8
8
  box-sizing: border-box;
9
9
  }
10
10
  .rls-password-field .rls-button-action {
11
- margin: auto var(--sizing-4) auto 0rem;
11
+ margin: auto var(--sizing-x2) auto 0rem;
12
12
  }
package/dist/esm/components/molecules/RadioButtonLabel/RadioButtonLabel.css CHANGED
@@ -1,6 +1,6 @@
1
1
  .rls-radiobutton-label {
2
2
  --pvt-text-opacity: 1;
3
- --pvt-text-height: var(--sizing-24);
3
+ --pvt-text-height: var(--sizing-x12);
4
4
  --pvt-text-overflow: hidden;
5
5
  --pvt-text-white-space: nowrap;
6
6
  --pvt-text-text-overflow: ellipsis;
@@ -20,14 +20,14 @@
20
20
  --pvt-text-height: auto;
21
21
  }
22
22
  .rls-radiobutton-label__component {
23
- margin-right: var(--sizing-8);
23
+ margin-right: var(--sizing-x4);
24
24
  width: auto;
25
25
  }
26
26
  .rls-radiobutton-label__text {
27
27
  float: left;
28
- max-width: calc(100% - var(--sizing-32));
28
+ max-width: calc(100% - var(--sizing-x16));
29
29
  height: var(--pvt-text-height);
30
- line-height: var(--sizing-24);
30
+ line-height: var(--sizing-x12);
31
31
  color: var(--color-theme-300);
32
32
  font-size: var(--label-font-size);
33
33
  font-weight: var(--font-weight-medium);