@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.
- package/dist/cjs/assets/{index-Fy0sGm5F.css → index-nrIFu6l7.css} +228 -228
- package/dist/es/assets/{index-Fy0sGm5F.css → index-nrIFu6l7.css} +228 -228
- package/dist/esm/components/atoms/Amount/Amount.css +1 -1
- package/dist/esm/components/atoms/Breadcrumb/Breadcrumb.css +3 -3
- package/dist/esm/components/atoms/Button/Button.css +8 -8
- package/dist/esm/components/atoms/ButtonAction/ButtonAction.css +10 -10
- package/dist/esm/components/atoms/CheckBox/CheckBox.css +4 -4
- package/dist/esm/components/atoms/Icon/Icon.css +1 -1
- package/dist/esm/components/atoms/InputPassword/InputPassword.css +2 -2
- package/dist/esm/components/atoms/MessageIcon/MessageIcon.css +4 -4
- package/dist/esm/components/atoms/Poster/Poster.css +1 -1
- package/dist/esm/components/atoms/ProgressBar/ProgressBar.css +3 -3
- package/dist/esm/components/atoms/RadioButton/RadioButton.css +2 -2
- package/dist/esm/components/atoms/SearchInput/SearchInput.css +3 -3
- package/dist/esm/components/atoms/Skeleton/Skeleton.css +1 -1
- package/dist/esm/components/atoms/SkeletonText/SkeletonText.css +1 -1
- package/dist/esm/components/atoms/Switch/Switch.css +6 -6
- package/dist/esm/components/molecules/Ballot/Ballot.css +7 -7
- package/dist/esm/components/molecules/ButtonToggle/ButtonToggle.css +8 -8
- package/dist/esm/components/molecules/CheckBoxLabel/CheckBoxLabel.css +4 -4
- package/dist/esm/components/molecules/DayPicker/DayPicker.css +9 -9
- package/dist/esm/components/molecules/DayRangePicker/DayRangePicker.css +9 -9
- package/dist/esm/components/molecules/MoneyField/MoneyField.css +1 -1
- package/dist/esm/components/molecules/MonthPicker/MonthPicker.css +4 -4
- package/dist/esm/components/molecules/MonthTitlePicker/MonthTitlePicker.css +3 -3
- package/dist/esm/components/molecules/NumberField/NumberField.css +1 -1
- package/dist/esm/components/molecules/Pagination/Pagination.css +15 -15
- package/dist/esm/components/molecules/PasswordField/PasswordField.css +4 -4
- package/dist/esm/components/molecules/RadioButtonLabel/RadioButtonLabel.css +4 -4
- package/dist/esm/components/molecules/SwitchLabel/SwitchLabel.css +5 -5
- package/dist/esm/components/molecules/TextField/TextField.css +1 -1
- package/dist/esm/components/molecules/Toolbar/Toolbar.css +6 -6
- package/dist/esm/components/molecules/YearPicker/YearPicker.css +10 -10
- package/dist/esm/components/organisms/AutocompleteField/AutocompleteField.css +10 -10
- package/dist/esm/components/organisms/Card/Card.css +1 -1
- package/dist/esm/components/organisms/Confirmation/Confirmation.css +10 -10
- package/dist/esm/components/organisms/DateField/DateField.css +7 -7
- package/dist/esm/components/organisms/DatePicker/DatePicker.css +14 -14
- package/dist/esm/components/organisms/DateRangeField/DateRangeField.css +7 -7
- package/dist/esm/components/organisms/DateRangePicker/DateRangePicker.css +15 -15
- package/dist/esm/components/organisms/FormNavigation/FormNavigation.css +10 -10
- package/dist/esm/components/organisms/Modal/Modal.css +2 -2
- package/dist/esm/components/organisms/Snackbar/Snackbar.css +11 -11
- package/package.json +2 -2
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
.rls-switch-label {
|
|
2
2
|
--pvt-text-opacity: 1;
|
|
3
|
-
--pvt-text-height: var(--sizing-
|
|
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
|
+
column-gap: var(--sizing-x4);
|
|
9
9
|
}
|
|
10
10
|
.rls-switch-label--disabled {
|
|
11
11
|
--pvt-text-opacity: 0.5;
|
|
@@ -18,13 +18,13 @@
|
|
|
18
18
|
--pvt-text-height: auto;
|
|
19
19
|
}
|
|
20
20
|
.rls-switch-label__component {
|
|
21
|
-
max-width:
|
|
21
|
+
max-width: 20rem;
|
|
22
22
|
}
|
|
23
23
|
.rls-switch-label__text {
|
|
24
24
|
float: left;
|
|
25
|
-
max-width: calc(100% - var(--sizing-
|
|
25
|
+
max-width: calc(100% - var(--sizing-x28));
|
|
26
26
|
height: var(--pvt-text-height);
|
|
27
|
-
line-height: var(--sizing-
|
|
27
|
+
line-height: var(--sizing-x12);
|
|
28
28
|
color: var(--color-theme-300);
|
|
29
29
|
font-size: var(--label-font-size);
|
|
30
30
|
font-weight: var(--font-weight-medium);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
.rls-toolbar {
|
|
2
2
|
display: flex;
|
|
3
3
|
justify-content: space-between;
|
|
4
|
-
column-gap: var(--sizing-
|
|
4
|
+
column-gap: var(--sizing-x6);
|
|
5
5
|
height: var(--rls-toolbar-height);
|
|
6
6
|
}
|
|
7
7
|
.rls-toolbar > * {
|
|
@@ -10,13 +10,13 @@
|
|
|
10
10
|
.rls-toolbar__content {
|
|
11
11
|
display: flex;
|
|
12
12
|
height: 100%;
|
|
13
|
-
padding: var(--sizing-
|
|
13
|
+
padding: var(--sizing-x2) var(--sizing-x6);
|
|
14
14
|
box-sizing: border-box;
|
|
15
15
|
margin: auto 0rem;
|
|
16
16
|
}
|
|
17
17
|
.rls-toolbar__description {
|
|
18
18
|
overflow: hidden;
|
|
19
|
-
padding: 0rem var(--sizing-
|
|
19
|
+
padding: 0rem var(--sizing-x2);
|
|
20
20
|
box-sizing: border-box;
|
|
21
21
|
margin: auto 0rem;
|
|
22
22
|
}
|
|
@@ -30,8 +30,8 @@
|
|
|
30
30
|
}
|
|
31
31
|
.rls-toolbar__title {
|
|
32
32
|
color: var(--color-theme-500);
|
|
33
|
-
height: var(--sizing-
|
|
34
|
-
line-height: var(--sizing-
|
|
33
|
+
height: var(--sizing-x12);
|
|
34
|
+
line-height: var(--sizing-x12);
|
|
35
35
|
font-size: 1.0125rem;
|
|
36
36
|
letter-spacing: var(--label-letter-spacing);
|
|
37
37
|
font-weight: var(--font-weight-bold);
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
display: flex;
|
|
44
44
|
box-sizing: border-box;
|
|
45
45
|
margin: auto 0rem;
|
|
46
|
-
column-gap: var(--sizing-
|
|
46
|
+
column-gap: var(--sizing-x8);
|
|
47
47
|
}
|
|
48
48
|
.rls-toolbar__actions > * {
|
|
49
49
|
margin: auto 0rem;
|
|
@@ -10,21 +10,21 @@
|
|
|
10
10
|
.rls-year-picker__header {
|
|
11
11
|
display: flex;
|
|
12
12
|
box-sizing: border-box;
|
|
13
|
-
padding: var(--sizing-
|
|
13
|
+
padding: var(--sizing-x4) var(--sizing-x6);
|
|
14
14
|
color: var(--color-theme-500);
|
|
15
15
|
background: var(--background-theme-100);
|
|
16
16
|
}
|
|
17
17
|
.rls-year-picker__title {
|
|
18
18
|
width: 100%;
|
|
19
|
-
height: var(--sizing-
|
|
20
|
-
line-height: var(--sizing-
|
|
19
|
+
height: var(--sizing-x16);
|
|
20
|
+
line-height: var(--sizing-x16);
|
|
21
21
|
text-align: center;
|
|
22
22
|
font-weight: var(--font-weight-bold);
|
|
23
23
|
}
|
|
24
24
|
.rls-year-picker__action {
|
|
25
|
-
width: var(--sizing-
|
|
26
|
-
height: var(--sizing-
|
|
27
|
-
line-height: var(--sizing-
|
|
25
|
+
width: var(--sizing-x16);
|
|
26
|
+
height: var(--sizing-x16);
|
|
27
|
+
line-height: var(--sizing-x16);
|
|
28
28
|
}
|
|
29
29
|
.rls-year-picker__action button {
|
|
30
30
|
color: var(--color-theme-500);
|
|
@@ -40,10 +40,10 @@
|
|
|
40
40
|
position: relative;
|
|
41
41
|
display: grid;
|
|
42
42
|
grid-template-columns: repeat(3, 1fr);
|
|
43
|
-
gap: var(--sizing-
|
|
43
|
+
gap: var(--sizing-x4);
|
|
44
44
|
width: 100%;
|
|
45
45
|
float: left;
|
|
46
|
-
padding: var(--sizing-
|
|
46
|
+
padding: var(--sizing-x4);
|
|
47
47
|
box-sizing: border-box;
|
|
48
48
|
}
|
|
49
49
|
.rls-year-picker__year {
|
|
@@ -52,8 +52,8 @@
|
|
|
52
52
|
display: flex;
|
|
53
53
|
box-sizing: border-box;
|
|
54
54
|
text-align: center;
|
|
55
|
-
height: var(--sizing-
|
|
56
|
-
border-radius: var(--sizing-
|
|
55
|
+
height: var(--sizing-x18);
|
|
56
|
+
border-radius: var(--sizing-x4);
|
|
57
57
|
color: var(--color-theme-300);
|
|
58
58
|
}
|
|
59
59
|
.rls-year-picker__year:hover {
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
--pvt-control-opacity: 1;
|
|
4
4
|
}
|
|
5
5
|
.rls-autocomplete-field.rls-box-field--selected {
|
|
6
|
-
--pvt-control-width: calc(100% - var(--sizing-
|
|
6
|
+
--pvt-control-width: calc(100% - var(--sizing-x14));
|
|
7
7
|
}
|
|
8
8
|
.rls-autocomplete-field.rls-box-field--disabled {
|
|
9
9
|
--pvt-control-opacity: 0.5;
|
|
@@ -19,11 +19,11 @@
|
|
|
19
19
|
display: flex;
|
|
20
20
|
align-items: center;
|
|
21
21
|
width: 100%;
|
|
22
|
-
margin-top: var(--sizing-
|
|
23
|
-
margin-bottom: var(--sizing-
|
|
22
|
+
margin-top: var(--sizing-x2);
|
|
23
|
+
margin-bottom: var(--sizing-x6);
|
|
24
24
|
background: var(--background-theme-300);
|
|
25
|
-
border-radius: var(--sizing-
|
|
26
|
-
padding: var(--sizing-
|
|
25
|
+
border-radius: var(--sizing-x4);
|
|
26
|
+
padding: var(--sizing-x4);
|
|
27
27
|
box-sizing: border-box;
|
|
28
28
|
}
|
|
29
29
|
.rls-autocomplete-field .rls-list-field__ul__search button {
|
|
@@ -40,8 +40,8 @@
|
|
|
40
40
|
}
|
|
41
41
|
.rls-autocomplete-field .rls-list-field__ul__control {
|
|
42
42
|
width: 100%;
|
|
43
|
-
height: var(--sizing-
|
|
44
|
-
line-height: var(--sizing-
|
|
43
|
+
height: var(--sizing-x12);
|
|
44
|
+
line-height: var(--sizing-x12);
|
|
45
45
|
padding: 0rem;
|
|
46
46
|
cursor: text;
|
|
47
47
|
border: none;
|
|
@@ -63,11 +63,11 @@
|
|
|
63
63
|
opacity: 0.5;
|
|
64
64
|
}
|
|
65
65
|
.rls-autocomplete-field .rls-list-field__ul .rls-progress-bar {
|
|
66
|
-
margin-bottom: var(--sizing-
|
|
66
|
+
margin-bottom: var(--sizing-x8);
|
|
67
67
|
}
|
|
68
68
|
.rls-autocomplete-field .rls-list-field__element .rls-ballot__title label {
|
|
69
69
|
background: var(--color-rolster-100);
|
|
70
70
|
color: var(--color-rolster-500);
|
|
71
|
-
padding: 0rem var(--sizing-
|
|
72
|
-
border-radius: var(--sizing-
|
|
71
|
+
padding: 0rem var(--sizing-x2);
|
|
72
|
+
border-radius: var(--sizing-x2);
|
|
73
73
|
}
|
|
@@ -40,16 +40,16 @@
|
|
|
40
40
|
position: absolute;
|
|
41
41
|
display: flex;
|
|
42
42
|
flex-direction: column;
|
|
43
|
-
row-gap: var(--sizing-
|
|
44
|
-
width: calc(100% - var(--sizing-
|
|
43
|
+
row-gap: var(--sizing-x8);
|
|
44
|
+
width: calc(100% - var(--sizing-x16));
|
|
45
45
|
max-width: 35rem;
|
|
46
46
|
height: var(--pvt-component-height);
|
|
47
47
|
opacity: var(--pvt-component-opacity);
|
|
48
48
|
visibility: var(--pvt-component-visibility);
|
|
49
|
-
padding: var(--sizing-
|
|
49
|
+
padding: var(--sizing-x8) 0rem;
|
|
50
50
|
box-sizing: border-box;
|
|
51
51
|
z-index: var(--z-index-2);
|
|
52
|
-
border-radius: var(--sizing-
|
|
52
|
+
border-radius: var(--sizing-x4);
|
|
53
53
|
background: var(--background-theme-500);
|
|
54
54
|
box-shadow: var(--shadow-4);
|
|
55
55
|
will-change: transform;
|
|
@@ -62,9 +62,9 @@
|
|
|
62
62
|
position: relative;
|
|
63
63
|
display: flex;
|
|
64
64
|
flex-direction: column;
|
|
65
|
-
row-gap: var(--sizing-
|
|
65
|
+
row-gap: var(--sizing-x2);
|
|
66
66
|
width: 100%;
|
|
67
|
-
padding: 0rem var(--sizing-
|
|
67
|
+
padding: 0rem var(--sizing-x8);
|
|
68
68
|
box-sizing: border-box;
|
|
69
69
|
}
|
|
70
70
|
.rls-confirmation__header__title {
|
|
@@ -88,7 +88,7 @@
|
|
|
88
88
|
.rls-confirmation__body {
|
|
89
89
|
position: relative;
|
|
90
90
|
width: 100%;
|
|
91
|
-
padding: 0rem var(--sizing-
|
|
91
|
+
padding: 0rem var(--sizing-x8);
|
|
92
92
|
box-sizing: border-box;
|
|
93
93
|
}
|
|
94
94
|
.rls-confirmation__body__content {
|
|
@@ -104,7 +104,7 @@
|
|
|
104
104
|
.rls-confirmation__footer {
|
|
105
105
|
position: relative;
|
|
106
106
|
width: 100%;
|
|
107
|
-
padding: var(--sizing-
|
|
107
|
+
padding: var(--sizing-x4) var(--sizing-x8) 0rem var(--sizing-x8);
|
|
108
108
|
box-sizing: border-box;
|
|
109
109
|
}
|
|
110
110
|
.rls-confirmation__footer__actions {
|
|
@@ -113,7 +113,7 @@
|
|
|
113
113
|
display: flex;
|
|
114
114
|
flex-direction: row-reverse;
|
|
115
115
|
justify-content: center;
|
|
116
|
-
column-gap: var(--sizing-
|
|
116
|
+
column-gap: var(--sizing-x8);
|
|
117
117
|
}
|
|
118
118
|
.rls-confirmation__backdrop {
|
|
119
119
|
position: absolute;
|
|
@@ -144,6 +144,6 @@
|
|
|
144
144
|
.rls-confirmation__footer__actions {
|
|
145
145
|
flex-direction: column-reverse;
|
|
146
146
|
column-gap: 0rem;
|
|
147
|
-
row-gap: var(--sizing-
|
|
147
|
+
row-gap: var(--sizing-x8);
|
|
148
148
|
}
|
|
149
149
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
.rls-date-field {
|
|
2
|
-
--rls-boxfield-body-padding: var(--sizing-
|
|
2
|
+
--rls-boxfield-body-padding: var(--sizing-x3) var(--sizing-x4);
|
|
3
3
|
position: relative;
|
|
4
4
|
float: left;
|
|
5
5
|
width: 100%;
|
|
@@ -8,9 +8,9 @@
|
|
|
8
8
|
.rls-date-field__control {
|
|
9
9
|
position: relative;
|
|
10
10
|
float: left;
|
|
11
|
-
width: calc(100% - var(--sizing-
|
|
12
|
-
height: var(--sizing-
|
|
13
|
-
line-height: var(--sizing-
|
|
11
|
+
width: calc(100% - var(--sizing-x14));
|
|
12
|
+
height: var(--sizing-x12);
|
|
13
|
+
line-height: var(--sizing-x12);
|
|
14
14
|
padding: 0rem;
|
|
15
15
|
cursor: default;
|
|
16
16
|
border: none;
|
|
@@ -29,10 +29,10 @@
|
|
|
29
29
|
}
|
|
30
30
|
.rls-date-field__action {
|
|
31
31
|
color: var(--color-theme-300);
|
|
32
|
-
width: var(--sizing-
|
|
33
|
-
height: var(--sizing-
|
|
32
|
+
width: var(--sizing-x12);
|
|
33
|
+
height: var(--sizing-x12);
|
|
34
34
|
padding: 0rem;
|
|
35
|
-
margin-left: var(--sizing-
|
|
35
|
+
margin-left: var(--sizing-x2);
|
|
36
36
|
background: transparent;
|
|
37
37
|
}
|
|
38
38
|
.rls-date-field__action:disabled {
|
|
@@ -7,9 +7,9 @@
|
|
|
7
7
|
}
|
|
8
8
|
.rls-date-picker__header {
|
|
9
9
|
background: var(--color-rolster-100);
|
|
10
|
-
padding: var(--sizing-
|
|
10
|
+
padding: var(--sizing-x4);
|
|
11
11
|
box-sizing: border-box;
|
|
12
|
-
margin-bottom: var(--sizing-
|
|
12
|
+
margin-bottom: var(--sizing-x8);
|
|
13
13
|
}
|
|
14
14
|
.rls-date-picker__title {
|
|
15
15
|
color: var(--color-theme-500);
|
|
@@ -21,23 +21,23 @@
|
|
|
21
21
|
color: var(--color-rolster-500);
|
|
22
22
|
}
|
|
23
23
|
.rls-date-picker__title--description {
|
|
24
|
-
height: var(--sizing-
|
|
25
|
-
line-height: var(--sizing-
|
|
24
|
+
height: var(--sizing-x16);
|
|
25
|
+
line-height: var(--sizing-x16);
|
|
26
26
|
font-size: 1.15rem;
|
|
27
27
|
}
|
|
28
28
|
.rls-date-picker__title--year {
|
|
29
|
-
margin: var(--sizing-
|
|
30
|
-
height: var(--sizing-
|
|
31
|
-
line-height: var(--sizing-
|
|
32
|
-
font-size: var(--sizing-
|
|
29
|
+
margin: var(--sizing-x4) 0rem var(--sizing-x2) 0rem;
|
|
30
|
+
height: var(--sizing-x16);
|
|
31
|
+
line-height: var(--sizing-x16);
|
|
32
|
+
font-size: var(--sizing-x12);
|
|
33
33
|
color: var(--color-theme-300);
|
|
34
34
|
}
|
|
35
35
|
.rls-date-picker__component {
|
|
36
36
|
display: flex;
|
|
37
37
|
width: 18.75rem;
|
|
38
|
-
padding: 0rem var(--sizing-
|
|
38
|
+
padding: 0rem var(--sizing-x2);
|
|
39
39
|
box-sizing: border-box;
|
|
40
|
-
margin-bottom: var(--sizing-
|
|
40
|
+
margin-bottom: var(--sizing-x4);
|
|
41
41
|
}
|
|
42
42
|
.rls-date-picker__component > * {
|
|
43
43
|
margin: 0rem auto;
|
|
@@ -58,16 +58,16 @@
|
|
|
58
58
|
.rls-date-picker__actions {
|
|
59
59
|
display: flex;
|
|
60
60
|
flex-wrap: wrap;
|
|
61
|
-
gap: var(--sizing-
|
|
62
|
-
padding: var(--sizing-
|
|
61
|
+
gap: var(--sizing-x4);
|
|
62
|
+
padding: var(--sizing-x4) var(--sizing-x8) var(--sizing-x6) var(--sizing-x8);
|
|
63
63
|
overflow: hidden;
|
|
64
64
|
box-sizing: border-box;
|
|
65
65
|
}
|
|
66
66
|
.rls-date-picker__actions--cancel {
|
|
67
|
-
width: calc(50% - var(--sizing-
|
|
67
|
+
width: calc(50% - var(--sizing-x2));
|
|
68
68
|
}
|
|
69
69
|
.rls-date-picker__actions--today {
|
|
70
|
-
width: calc(50% - var(--sizing-
|
|
70
|
+
width: calc(50% - var(--sizing-x2));
|
|
71
71
|
}
|
|
72
72
|
.rls-date-picker__actions--ok {
|
|
73
73
|
width: 100%;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
.rls-date-range-field {
|
|
2
|
-
--rls-boxfield-body-padding: var(--sizing-
|
|
2
|
+
--rls-boxfield-body-padding: var(--sizing-x3) var(--sizing-x4);
|
|
3
3
|
position: relative;
|
|
4
4
|
float: left;
|
|
5
5
|
width: 100%;
|
|
@@ -8,9 +8,9 @@
|
|
|
8
8
|
.rls-date-range-field__control {
|
|
9
9
|
position: relative;
|
|
10
10
|
float: left;
|
|
11
|
-
width: calc(100% - var(--sizing-
|
|
12
|
-
height: var(--sizing-
|
|
13
|
-
line-height: var(--sizing-
|
|
11
|
+
width: calc(100% - var(--sizing-x14));
|
|
12
|
+
height: var(--sizing-x12);
|
|
13
|
+
line-height: var(--sizing-x12);
|
|
14
14
|
padding: 0rem;
|
|
15
15
|
cursor: default;
|
|
16
16
|
border: none;
|
|
@@ -29,9 +29,9 @@
|
|
|
29
29
|
}
|
|
30
30
|
.rls-date-range-field__action {
|
|
31
31
|
color: var(--color-theme-300);
|
|
32
|
-
width: var(--sizing-
|
|
33
|
-
height: var(--sizing-
|
|
32
|
+
width: var(--sizing-x12);
|
|
33
|
+
height: var(--sizing-x12);
|
|
34
34
|
padding: 0rem;
|
|
35
|
-
margin-left: var(--sizing-
|
|
35
|
+
margin-left: var(--sizing-x2);
|
|
36
36
|
background: transparent;
|
|
37
37
|
}
|
|
@@ -6,9 +6,9 @@
|
|
|
6
6
|
}
|
|
7
7
|
.rls-date-range-picker__header {
|
|
8
8
|
background: var(--color-rolster-100);
|
|
9
|
-
padding: var(--sizing-
|
|
9
|
+
padding: var(--sizing-x4);
|
|
10
10
|
box-sizing: border-box;
|
|
11
|
-
margin-bottom: var(--sizing-
|
|
11
|
+
margin-bottom: var(--sizing-x8);
|
|
12
12
|
}
|
|
13
13
|
.rls-date-range-picker__title {
|
|
14
14
|
color: var(--color-theme-500);
|
|
@@ -20,15 +20,15 @@
|
|
|
20
20
|
color: var(--color-rolster-500);
|
|
21
21
|
}
|
|
22
22
|
.rls-date-range-picker__title--description {
|
|
23
|
-
height: var(--sizing-
|
|
24
|
-
line-height: var(--sizing-
|
|
23
|
+
height: var(--sizing-x16);
|
|
24
|
+
line-height: var(--sizing-x16);
|
|
25
25
|
font-size: 1.15rem;
|
|
26
26
|
}
|
|
27
27
|
.rls-date-range-picker__title--year {
|
|
28
|
-
margin: var(--sizing-
|
|
29
|
-
height: var(--sizing-
|
|
30
|
-
line-height: var(--sizing-
|
|
31
|
-
font-size: var(--sizing-
|
|
28
|
+
margin: var(--sizing-x4) 0rem var(--sizing-x2) 0rem;
|
|
29
|
+
height: var(--sizing-x16);
|
|
30
|
+
line-height: var(--sizing-x16);
|
|
31
|
+
font-size: var(--sizing-x12);
|
|
32
32
|
color: var(--color-theme-300);
|
|
33
33
|
}
|
|
34
34
|
.rls-date-range-picker__title--month {
|
|
@@ -36,17 +36,17 @@
|
|
|
36
36
|
justify-content: space-between;
|
|
37
37
|
}
|
|
38
38
|
.rls-date-range-picker__title--month span {
|
|
39
|
-
height: var(--sizing-
|
|
40
|
-
line-height: var(--sizing-
|
|
41
|
-
font-size: var(--sizing-
|
|
39
|
+
height: var(--sizing-x14);
|
|
40
|
+
line-height: var(--sizing-x14);
|
|
41
|
+
font-size: var(--sizing-x10);
|
|
42
42
|
color: var(--color-theme-300);
|
|
43
43
|
margin: auto 0rem;
|
|
44
44
|
}
|
|
45
45
|
.rls-date-range-picker__component {
|
|
46
46
|
display: flex;
|
|
47
|
-
padding: 0rem var(--sizing-
|
|
47
|
+
padding: 0rem var(--sizing-x2);
|
|
48
48
|
box-sizing: border-box;
|
|
49
|
-
margin-bottom: var(--sizing-
|
|
49
|
+
margin-bottom: var(--sizing-x4);
|
|
50
50
|
}
|
|
51
51
|
.rls-date-range-picker__component > * {
|
|
52
52
|
margin: 0rem auto;
|
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
display: none;
|
|
66
66
|
}
|
|
67
67
|
.rls-date-range-picker__actions {
|
|
68
|
-
padding: var(--sizing-
|
|
68
|
+
padding: var(--sizing-x4) var(--sizing-x8) var(--sizing-x6) var(--sizing-x8);
|
|
69
69
|
overflow: hidden;
|
|
70
70
|
box-sizing: border-box;
|
|
71
71
|
}
|
|
@@ -73,7 +73,7 @@
|
|
|
73
73
|
width: 100%;
|
|
74
74
|
}
|
|
75
75
|
.rls-date-range-picker__actions--ok {
|
|
76
|
-
margin-top: var(--sizing-
|
|
76
|
+
margin-top: var(--sizing-x4);
|
|
77
77
|
width: 100%;
|
|
78
78
|
}
|
|
79
79
|
.rls-date-range-picker__actions button {
|
|
@@ -1,29 +1,29 @@
|
|
|
1
1
|
.rls-form-navigation {
|
|
2
2
|
position: fixed;
|
|
3
|
-
top: var(--sizing-
|
|
4
|
-
right: var(--sizing-
|
|
5
|
-
width: calc(100% - var(--sizing-
|
|
3
|
+
top: var(--sizing-x8);
|
|
4
|
+
right: var(--sizing-x8);
|
|
5
|
+
width: calc(100% - var(--sizing-x16));
|
|
6
6
|
max-width: 20rem;
|
|
7
7
|
height: auto;
|
|
8
|
-
max-height: calc(100vh - var(--sizing-
|
|
8
|
+
max-height: calc(100vh - var(--sizing-x16));
|
|
9
9
|
z-index: var(--z-index-12);
|
|
10
|
-
padding: var(--sizing-
|
|
10
|
+
padding: var(--sizing-x8) var(--sizing-x8) var(--sizing-x12) var(--sizing-x8);
|
|
11
11
|
box-sizing: border-box;
|
|
12
12
|
background: var(--background-theme-500);
|
|
13
|
-
border-radius: var(--sizing-
|
|
13
|
+
border-radius: var(--sizing-x4);
|
|
14
14
|
box-shadow: var(--shadow-center-dark-8);
|
|
15
|
-
transform: translateX(calc(100% + var(--sizing-
|
|
15
|
+
transform: translateX(calc(100% + var(--sizing-x16)));
|
|
16
16
|
transition: transform 240ms 0ms var(--standard-curve);
|
|
17
17
|
}
|
|
18
18
|
.rls-form-navigation--visible {
|
|
19
19
|
transform: translateX(0%);
|
|
20
20
|
}
|
|
21
21
|
.rls-form-navigation__header {
|
|
22
|
-
margin-bottom: var(--sizing-
|
|
22
|
+
margin-bottom: var(--sizing-x8);
|
|
23
23
|
}
|
|
24
24
|
.rls-form-navigation__header .rls-button-action {
|
|
25
|
-
width: var(--sizing-
|
|
26
|
-
height: var(--sizing-
|
|
25
|
+
width: var(--sizing-x12);
|
|
26
|
+
height: var(--sizing-x12);
|
|
27
27
|
padding: 0rem;
|
|
28
28
|
float: right;
|
|
29
29
|
}
|
|
@@ -28,13 +28,13 @@
|
|
|
28
28
|
.rls-modal__component {
|
|
29
29
|
position: absolute;
|
|
30
30
|
width: auto;
|
|
31
|
-
max-width: calc(100% - var(--sizing-
|
|
31
|
+
max-width: calc(100% - var(--sizing-x8));
|
|
32
32
|
height: var(--pvt-component-height);
|
|
33
33
|
opacity: var(--pvt-component-opacity);
|
|
34
34
|
visibility: var(--pvt-component-visibility);
|
|
35
35
|
z-index: var(--z-index-2);
|
|
36
36
|
overflow: hidden;
|
|
37
|
-
border-radius: var(--sizing-
|
|
37
|
+
border-radius: var(--sizing-x4);
|
|
38
38
|
background: var(--background-theme-500);
|
|
39
39
|
will-change: transform;
|
|
40
40
|
transform: var(--pvt-component-transform);
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
.rls-snackbar {
|
|
2
2
|
position: fixed;
|
|
3
3
|
display: flex;
|
|
4
|
-
column-gap: var(--sizing-
|
|
4
|
+
column-gap: var(--sizing-x6);
|
|
5
5
|
bottom: 0rem;
|
|
6
6
|
left: var(--rls-snackbar-left);
|
|
7
7
|
z-index: 32;
|
|
8
8
|
width: auto;
|
|
9
9
|
height: auto;
|
|
10
10
|
max-width: 30rem;
|
|
11
|
-
padding: var(--sizing-
|
|
11
|
+
padding: var(--sizing-x6);
|
|
12
12
|
box-sizing: border-box;
|
|
13
|
-
border-radius: var(--sizing-
|
|
13
|
+
border-radius: var(--sizing-x4);
|
|
14
14
|
background: var(--background-theme-500);
|
|
15
15
|
box-shadow: var(--shadow-bottom-light-4);
|
|
16
16
|
border: var(--border-1-rolster-300);
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
transition: transform 160ms 0ms var(--standard-curve);
|
|
20
20
|
}
|
|
21
21
|
.rls-snackbar--visible {
|
|
22
|
-
transform: translate(-50%, calc(0% - var(--sizing-
|
|
22
|
+
transform: translate(-50%, calc(0% - var(--sizing-x8)));
|
|
23
23
|
}
|
|
24
24
|
.rls-snackbar__avatar {
|
|
25
25
|
--rls-icon-color: var(--color-light-500);
|
|
@@ -28,17 +28,17 @@
|
|
|
28
28
|
align-items: center;
|
|
29
29
|
overflow: hidden;
|
|
30
30
|
background: var(--color-rolster-500);
|
|
31
|
-
width: var(--sizing-
|
|
32
|
-
height: var(--sizing-
|
|
33
|
-
border-radius: var(--sizing-
|
|
31
|
+
width: var(--sizing-x18);
|
|
32
|
+
height: var(--sizing-x18);
|
|
33
|
+
border-radius: var(--sizing-x4);
|
|
34
34
|
}
|
|
35
35
|
.rls-snackbar__avatar + .rls-snackbar__component {
|
|
36
|
-
width: calc(100% - var(--sizing-
|
|
36
|
+
width: calc(100% - var(--sizing-x18));
|
|
37
37
|
}
|
|
38
38
|
.rls-snackbar__component {
|
|
39
39
|
display: flex;
|
|
40
40
|
flex-direction: column;
|
|
41
|
-
row-gap: var(--sizing-
|
|
41
|
+
row-gap: var(--sizing-x2);
|
|
42
42
|
}
|
|
43
43
|
.rls-snackbar__title {
|
|
44
44
|
overflow: hidden;
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
letter-spacing: var(--body-letter-spacing);
|
|
51
51
|
}
|
|
52
52
|
.rls-snackbar__content p {
|
|
53
|
-
line-height: var(--sizing-
|
|
53
|
+
line-height: var(--sizing-x10);
|
|
54
54
|
color: var(--color-theme-300);
|
|
55
55
|
font-size: var(--label-font-size);
|
|
56
56
|
font-weight: var(--font-weight-medium);
|
|
@@ -59,6 +59,6 @@
|
|
|
59
59
|
|
|
60
60
|
@media only screen and (max-width: 375px) {
|
|
61
61
|
.rls-snackbar {
|
|
62
|
-
width: calc(100% - var(--sizing-
|
|
62
|
+
width: calc(100% - var(--sizing-x12));
|
|
63
63
|
}
|
|
64
64
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rolster/react-components",
|
|
3
|
-
"version": "18.10.
|
|
3
|
+
"version": "18.10.9",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Package containing UI components for React Project.",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
"@rollup/plugin-commonjs": "^25.0.4",
|
|
59
59
|
"@rollup/plugin-node-resolve": "^15.2.1",
|
|
60
60
|
"@rollup/plugin-typescript": "^11.1.3",
|
|
61
|
-
"@rolster/styles-foundations": "^1.0
|
|
61
|
+
"@rolster/styles-foundations": "^1.1.0",
|
|
62
62
|
"@rolster/types": "^1.0.4",
|
|
63
63
|
"@types/node-sass": "^4.11.4",
|
|
64
64
|
"@types/react": "^18.0.28",
|