@rolster/react-components 18.12.9 → 18.13.0
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-7UzJ6VgT.css → index-fykwrWLx.css} +747 -648
- package/dist/cjs/index.js +760 -776
- package/dist/cjs/index.js.map +1 -1
- package/dist/es/assets/{index-7UzJ6VgT.css → index-fykwrWLx.css} +747 -648
- package/dist/es/index.js +760 -778
- package/dist/es/index.js.map +1 -1
- package/dist/esm/components/atoms/Amount/Amount.css +3 -3
- package/dist/esm/components/atoms/Avatar/Avatar.css +7 -7
- package/dist/esm/components/atoms/Badge/Badge.css +7 -7
- package/dist/esm/components/atoms/Breadcrumb/Breadcrumb.css +12 -12
- package/dist/esm/components/atoms/Button/Button.css +74 -53
- package/dist/esm/components/atoms/Button/Button.d.ts +1 -1
- package/dist/esm/components/atoms/Button/Button.js +1 -1
- package/dist/esm/components/atoms/Button/Button.js.map +1 -1
- package/dist/esm/components/atoms/ButtonAction/ButtonAction.css +22 -22
- package/dist/esm/components/atoms/ButtonAction/ButtonAction.d.ts +1 -1
- package/dist/esm/components/atoms/CheckBox/CheckBox.css +8 -8
- package/dist/esm/components/atoms/Icon/Icon.css +7 -8
- package/dist/esm/components/atoms/Input/Input.css +13 -15
- package/dist/esm/components/atoms/InputMoney/InputMoney.css +1 -1
- package/dist/esm/components/atoms/InputNumber/InputNumber.css +1 -1
- package/dist/esm/components/atoms/InputPassword/InputPassword.css +8 -8
- package/dist/esm/components/atoms/InputText/InputText.css +1 -1
- package/dist/esm/components/atoms/Label/Label.css +1 -1
- package/dist/esm/components/atoms/MessageIcon/MessageIcon.css +6 -6
- package/dist/esm/components/atoms/Poster/Poster.css +6 -6
- package/dist/esm/components/atoms/ProgressBar/ProgressBar.css +7 -7
- package/dist/esm/components/atoms/ProgressCircular/ProgressCircular.css +44 -0
- package/dist/esm/components/atoms/ProgressCircular/ProgressCircular.d.ts +7 -0
- package/dist/esm/components/atoms/ProgressCircular/ProgressCircular.js +6 -0
- package/dist/esm/components/atoms/ProgressCircular/ProgressCircular.js.map +1 -0
- package/dist/esm/components/atoms/RadioButton/RadioButton.css +6 -6
- package/dist/esm/components/atoms/SearchInput/SearchInput.css +4 -4
- package/dist/esm/components/atoms/Skeleton/Skeleton.css +6 -6
- package/dist/esm/components/atoms/SkeletonText/SkeletonText.css +6 -8
- package/dist/esm/components/atoms/Switch/Switch.css +16 -16
- package/dist/esm/components/atoms/TabularText/TabularText.css +2 -2
- package/dist/esm/components/atoms/index.d.ts +1 -0
- package/dist/esm/components/atoms/index.js +1 -0
- package/dist/esm/components/atoms/index.js.map +1 -1
- package/dist/esm/components/definitions.d.ts +1 -1
- package/dist/esm/components/molecules/Ballot/Ballot.css +27 -34
- package/dist/esm/components/molecules/ButtonProgress/ButtonProgress.css +7 -0
- package/dist/esm/components/molecules/ButtonProgress/ButtonProgress.d.ts +12 -0
- package/dist/esm/components/molecules/ButtonProgress/ButtonProgress.js +8 -0
- package/dist/esm/components/molecules/ButtonProgress/ButtonProgress.js.map +1 -0
- package/dist/esm/components/molecules/ButtonToggle/ButtonToggle.css +32 -30
- package/dist/esm/components/molecules/CheckBoxLabel/CheckBoxLabel.css +8 -8
- package/dist/esm/components/molecules/DayPicker/DayPicker.css +39 -27
- package/dist/esm/components/molecules/DayPicker/DayPicker.d.ts +3 -1
- package/dist/esm/components/molecules/DayPicker/DayPicker.js +32 -24
- package/dist/esm/components/molecules/DayPicker/DayPicker.js.map +1 -1
- package/dist/esm/components/molecules/DayRangePicker/DayRangePicker.css +28 -28
- package/dist/esm/components/molecules/DayRangePicker/DayRangePicker.js +18 -21
- package/dist/esm/components/molecules/DayRangePicker/DayRangePicker.js.map +1 -1
- package/dist/esm/components/molecules/MoneyField/MoneyField.css +1 -2
- package/dist/esm/components/molecules/MonthPicker/MonthPicker.css +34 -19
- package/dist/esm/components/molecules/MonthPicker/MonthPicker.d.ts +2 -1
- package/dist/esm/components/molecules/MonthPicker/MonthPicker.js +30 -19
- package/dist/esm/components/molecules/MonthPicker/MonthPicker.js.map +1 -1
- package/dist/esm/components/molecules/MonthTitlePicker/MonthTitlePicker.css +6 -6
- package/dist/esm/components/molecules/MonthTitlePicker/MonthTitlePicker.d.ts +1 -1
- package/dist/esm/components/molecules/MonthTitlePicker/MonthTitlePicker.js +26 -21
- package/dist/esm/components/molecules/MonthTitlePicker/MonthTitlePicker.js.map +1 -1
- package/dist/esm/components/molecules/NumberField/NumberField.css +1 -2
- package/dist/esm/components/molecules/Pagination/Pagination.css +29 -30
- package/dist/esm/components/molecules/PasswordField/PasswordField.css +4 -5
- package/dist/esm/components/molecules/RadioButtonLabel/RadioButtonLabel.css +8 -10
- package/dist/esm/components/molecules/SwitchLabel/SwitchLabel.css +8 -9
- package/dist/esm/components/molecules/TextField/TextField.css +1 -2
- package/dist/esm/components/molecules/Toolbar/Toolbar.css +10 -10
- package/dist/esm/components/molecules/YearPicker/YearPicker.css +42 -28
- package/dist/esm/components/molecules/YearPicker/YearPicker.d.ts +1 -1
- package/dist/esm/components/molecules/YearPicker/YearPicker.js +33 -26
- package/dist/esm/components/molecules/YearPicker/YearPicker.js.map +1 -1
- package/dist/esm/components/molecules/index.d.ts +1 -0
- package/dist/esm/components/molecules/index.js +1 -0
- package/dist/esm/components/molecules/index.js.map +1 -1
- package/dist/esm/components/organisms/AutocompleteField/AutocompleteField.css +22 -22
- package/dist/esm/components/organisms/AutocompleteField/AutocompleteField.d.ts +1 -1
- package/dist/esm/components/organisms/AutocompleteField/AutocompleteField.js +1 -1
- package/dist/esm/components/organisms/AutocompleteField/AutocompleteField.js.map +1 -1
- package/dist/esm/components/organisms/AutocompleteField/AutocompleteFieldHook.d.ts +1 -1
- package/dist/esm/components/organisms/AutocompleteField/AutocompleteFieldHook.js +27 -81
- package/dist/esm/components/organisms/AutocompleteField/AutocompleteFieldHook.js.map +1 -1
- package/dist/esm/components/organisms/Card/Card.css +5 -5
- package/dist/esm/components/organisms/Confirmation/Confirmation.css +38 -38
- package/dist/esm/components/organisms/DateField/DateField.css +15 -15
- package/dist/esm/components/organisms/DateField/DateField.d.ts +2 -2
- package/dist/esm/components/organisms/DateField/DateField.js +28 -16
- package/dist/esm/components/organisms/DateField/DateField.js.map +1 -1
- package/dist/esm/components/organisms/DatePicker/DatePicker.css +27 -24
- package/dist/esm/components/organisms/DatePicker/DatePicker.d.ts +2 -2
- package/dist/esm/components/organisms/DatePicker/DatePicker.js +38 -56
- package/dist/esm/components/organisms/DatePicker/DatePicker.js.map +1 -1
- package/dist/esm/components/organisms/DateRangeField/DateRangeField.css +13 -15
- package/dist/esm/components/organisms/DateRangeField/DateRangeField.js +5 -5
- package/dist/esm/components/organisms/DateRangeField/DateRangeField.js.map +1 -1
- package/dist/esm/components/organisms/DateRangePicker/DateRangePicker.css +20 -20
- package/dist/esm/components/organisms/DateRangePicker/DateRangePicker.d.ts +2 -2
- package/dist/esm/components/organisms/DateRangePicker/DateRangePicker.js +16 -36
- package/dist/esm/components/organisms/DateRangePicker/DateRangePicker.js.map +1 -1
- package/dist/esm/components/organisms/FormNavigation/FormNavigation.css +15 -14
- package/dist/esm/components/organisms/Modal/Modal.css +11 -11
- package/dist/esm/components/organisms/SelectField/SelectField.css +1 -1
- package/dist/esm/components/organisms/SelectField/SelectField.d.ts +1 -1
- package/dist/esm/components/organisms/SelectField/SelectField.js +1 -1
- package/dist/esm/components/organisms/SelectField/SelectField.js.map +1 -1
- package/dist/esm/components/organisms/SelectField/SelectFieldHook.d.ts +1 -1
- package/dist/esm/components/organisms/SelectField/SelectFieldHook.js +18 -35
- package/dist/esm/components/organisms/SelectField/SelectFieldHook.js.map +1 -1
- package/dist/esm/components/organisms/Snackbar/Snackbar.css +26 -26
- package/dist/esm/constants/index.d.ts +1 -0
- package/dist/esm/constants/index.js +2 -0
- package/dist/esm/constants/index.js.map +1 -0
- package/dist/esm/constants/picker.constant.d.ts +1 -0
- package/dist/esm/constants/picker.constant.js +2 -0
- package/dist/esm/constants/picker.constant.js.map +1 -0
- package/dist/esm/helpers/date-range-picker.d.ts +1 -12
- package/dist/esm/helpers/date-range-picker.js +5 -105
- package/dist/esm/helpers/date-range-picker.js.map +1 -1
- package/dist/esm/helpers/index.d.ts +2 -0
- package/dist/esm/helpers/index.js +3 -0
- package/dist/esm/helpers/index.js.map +1 -0
- package/dist/esm/hooks/ListControlHook.d.ts +2 -3
- package/dist/esm/hooks/ListControlHook.js +22 -92
- package/dist/esm/hooks/ListControlHook.js.map +1 -1
- package/dist/esm/index.d.ts +1 -2
- package/dist/esm/index.js +1 -2
- package/dist/esm/index.js.map +1 -1
- package/package.json +7 -6
- package/dist/esm/helpers/date-picker.d.ts +0 -1
- package/dist/esm/helpers/date-picker.js +0 -5
- package/dist/esm/helpers/date-picker.js.map +0 -1
- package/dist/esm/helpers/day-picker.d.ts +0 -9
- package/dist/esm/helpers/day-picker.js +0 -84
- package/dist/esm/helpers/day-picker.js.map +0 -1
- package/dist/esm/helpers/month-picker.d.ts +0 -14
- package/dist/esm/helpers/month-picker.js +0 -78
- package/dist/esm/helpers/month-picker.js.map +0 -1
- package/dist/esm/helpers/year-picker.d.ts +0 -17
- package/dist/esm/helpers/year-picker.js +0 -83
- package/dist/esm/helpers/year-picker.js.map +0 -1
- package/dist/esm/models.d.ts +0 -58
- package/dist/esm/models.js +0 -9
- package/dist/esm/models.js.map +0 -1
- package/dist/esm/types.d.ts +0 -12
- package/dist/esm/types.js +0 -7
- package/dist/esm/types.js.map +0 -1
|
@@ -5,22 +5,22 @@
|
|
|
5
5
|
display: block;
|
|
6
6
|
float: left;
|
|
7
7
|
text-align: center;
|
|
8
|
-
width: var(--
|
|
8
|
+
width: var(--rlc-tabulartext-char-width);
|
|
9
9
|
}
|
|
10
10
|
.rls-tabular-text__pointer {
|
|
11
11
|
display: block;
|
|
12
12
|
float: left;
|
|
13
13
|
text-align: center;
|
|
14
|
-
width: var(--
|
|
14
|
+
width: var(--rlc-tabulartext-pointer-width);
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
.rls-amount {
|
|
18
18
|
display: flex;
|
|
19
|
-
justify-content: var(--
|
|
20
|
-
column-gap: var(--sizing-x2);
|
|
19
|
+
justify-content: var(--rlc-amount-text-align);
|
|
20
|
+
column-gap: var(--rls-sizing-x2);
|
|
21
21
|
}
|
|
22
22
|
.rls-amount[rls-theme] {
|
|
23
|
-
color: var(--color-
|
|
23
|
+
color: var(--rls-theme-color-500);
|
|
24
24
|
}
|
|
25
25
|
|
|
26
26
|
.rls-avatar {
|
|
@@ -28,15 +28,15 @@
|
|
|
28
28
|
display: flex;
|
|
29
29
|
justify-content: center;
|
|
30
30
|
overflow: hidden;
|
|
31
|
-
font-size: var(--
|
|
32
|
-
width: var(--
|
|
33
|
-
height: var(--
|
|
34
|
-
background: var(--gradient-
|
|
35
|
-
color: var(--
|
|
36
|
-
border-radius: var(--
|
|
31
|
+
font-size: var(--rlc-avatar-font-size);
|
|
32
|
+
width: var(--rlc-avatar-width);
|
|
33
|
+
height: var(--rlc-avatar-height);
|
|
34
|
+
background: var(--rls-theme-gradient-500);
|
|
35
|
+
color: var(--rls-theme-font-500);
|
|
36
|
+
border-radius: var(--rlc-avatar-border-radius);
|
|
37
37
|
}
|
|
38
38
|
.rls-avatar--skeleton {
|
|
39
|
-
background: var(--color-
|
|
39
|
+
background: var(--rls-theme-color-100);
|
|
40
40
|
}
|
|
41
41
|
.rls-avatar--skeleton > * {
|
|
42
42
|
display: none;
|
|
@@ -55,14 +55,14 @@
|
|
|
55
55
|
position: relative;
|
|
56
56
|
display: inline-block;
|
|
57
57
|
width: auto;
|
|
58
|
-
padding: var(--sizing-x2);
|
|
58
|
+
padding: var(--rls-sizing-x2);
|
|
59
59
|
box-sizing: border-box;
|
|
60
|
-
font-size: var(--caption-font-size);
|
|
61
|
-
letter-spacing: var(--caption-letter-spacing);
|
|
62
|
-
line-height: var(--caption-line-height);
|
|
63
|
-
color: var(--color-
|
|
64
|
-
background: var(--color-
|
|
65
|
-
border-radius: var(--sizing-x2);
|
|
60
|
+
font-size: var(--rls-caption-font-size);
|
|
61
|
+
letter-spacing: var(--rls-caption-letter-spacing);
|
|
62
|
+
line-height: var(--rls-caption-line-height);
|
|
63
|
+
color: var(--rls-theme-color-500);
|
|
64
|
+
background: var(--rls-theme-color-100);
|
|
65
|
+
border-radius: var(--rls-sizing-x2);
|
|
66
66
|
}
|
|
67
67
|
.rls-badge > span {
|
|
68
68
|
font-size: inherit;
|
|
@@ -71,18 +71,18 @@
|
|
|
71
71
|
}
|
|
72
72
|
|
|
73
73
|
.rls-breadcrumb {
|
|
74
|
-
--pvt-link-font-color: var(--color-
|
|
74
|
+
--pvt-link-font-color: var(--rls-app-color-300);
|
|
75
75
|
display: -webkit-box;
|
|
76
76
|
width: 100%;
|
|
77
|
-
height: var(--
|
|
78
|
-
line-height: var(--
|
|
79
|
-
padding: 0rem var(--sizing-x8);
|
|
77
|
+
height: var(--rlc-breadcrumb-height);
|
|
78
|
+
line-height: var(--rlc-breadcrumb-height);
|
|
79
|
+
padding: 0rem var(--rls-sizing-x8);
|
|
80
80
|
box-sizing: border-box;
|
|
81
81
|
user-select: none;
|
|
82
82
|
overflow: auto;
|
|
83
83
|
overflow-y: hidden;
|
|
84
|
-
color: var(--color-
|
|
85
|
-
font-weight: var(--font-weight-medium);
|
|
84
|
+
color: var(--rls-app-color-300);
|
|
85
|
+
font-weight: var(--rls-font-weight-medium);
|
|
86
86
|
}
|
|
87
87
|
.rls-breadcrumb::-webkit-scrollbar {
|
|
88
88
|
width: 0rem;
|
|
@@ -95,8 +95,8 @@
|
|
|
95
95
|
cursor: pointer;
|
|
96
96
|
font-weight: inherit;
|
|
97
97
|
color: inherit;
|
|
98
|
-
font-size: var(--body-font-size);
|
|
99
|
-
letter-spacing: var(--body-letter-spacing);
|
|
98
|
+
font-size: var(--rls-body-font-size);
|
|
99
|
+
letter-spacing: var(--rls-body-letter-spacing);
|
|
100
100
|
}
|
|
101
101
|
.rls-breadcrumb__label:first-child::before {
|
|
102
102
|
display: none;
|
|
@@ -105,10 +105,10 @@
|
|
|
105
105
|
font-family: -rolster-icons;
|
|
106
106
|
display: inline-block;
|
|
107
107
|
content: '\e911';
|
|
108
|
-
margin: 0rem var(--sizing-x2);
|
|
108
|
+
margin: 0rem var(--rls-sizing-x2);
|
|
109
109
|
cursor: default;
|
|
110
110
|
color: inherit;
|
|
111
|
-
font-size: var(--sizing-x12);
|
|
111
|
+
font-size: var(--rls-sizing-x12);
|
|
112
112
|
font-weight: normal;
|
|
113
113
|
font-style: normal;
|
|
114
114
|
letter-spacing: normal;
|
|
@@ -116,7 +116,7 @@
|
|
|
116
116
|
-webkit-font-smoothing: antialiased;
|
|
117
117
|
}
|
|
118
118
|
.rls-breadcrumb__label--active {
|
|
119
|
-
--pvt-link-font-color: var(--color-
|
|
119
|
+
--pvt-link-font-color: var(--rls-theme-color-500);
|
|
120
120
|
}
|
|
121
121
|
.rls-breadcrumb__label__a {
|
|
122
122
|
display: inline-block;
|
|
@@ -124,27 +124,26 @@
|
|
|
124
124
|
color: var(--pvt-link-font-color);
|
|
125
125
|
}
|
|
126
126
|
.rls-breadcrumb__label__a:hover {
|
|
127
|
-
color: var(--color-
|
|
127
|
+
color: var(--rls-theme-color-500);
|
|
128
128
|
text-decoration: underline;
|
|
129
129
|
}
|
|
130
130
|
|
|
131
131
|
.rls-icon {
|
|
132
132
|
--pvt-icon-display: block;
|
|
133
133
|
position: relative;
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
height: var(--
|
|
138
|
-
line-height: var(--rls-icon-height);
|
|
134
|
+
font-size: var(--rlc-icon-font-size);
|
|
135
|
+
width: var(--rlc-icon-width);
|
|
136
|
+
height: var(--rlc-icon-height);
|
|
137
|
+
line-height: var(--rlc-icon-height);
|
|
139
138
|
}
|
|
140
139
|
.rls-icon--skeleton {
|
|
141
140
|
--pvt-icon-display: none;
|
|
142
|
-
background: var(--theme-
|
|
143
|
-
border-radius: var(--sizing-x2);
|
|
141
|
+
background: var(--rls-theme-color-300);
|
|
142
|
+
border-radius: var(--rls-sizing-x2);
|
|
144
143
|
}
|
|
145
144
|
.rls-icon > i {
|
|
146
145
|
display: var(--pvt-icon-display);
|
|
147
|
-
color: var(--
|
|
146
|
+
color: var(--rlc-icon-color);
|
|
148
147
|
float: left;
|
|
149
148
|
width: 100%;
|
|
150
149
|
height: 100%;
|
|
@@ -155,24 +154,26 @@
|
|
|
155
154
|
.rls-button {
|
|
156
155
|
--pvt-button-content-background: none;
|
|
157
156
|
--pvt-button-content-border: none;
|
|
158
|
-
--pvt-button-content-font-color: var(--color-
|
|
157
|
+
--pvt-button-content-font-color: var(--rls-theme-color-500);
|
|
159
158
|
--pvt-button-content-animation: none;
|
|
160
159
|
--pvt-button-content-visibility: hidden;
|
|
161
|
-
--pvt-button-ripple-background: var(--color-
|
|
162
|
-
--pvt-
|
|
163
|
-
--pvt-
|
|
164
|
-
--pvt-
|
|
165
|
-
--pvt-flat-background: var(--color-
|
|
166
|
-
--pvt-flat-font-color: var(--color-
|
|
160
|
+
--pvt-button-ripple-background: var(--rls-theme-color-700);
|
|
161
|
+
--pvt-raised-background: var(--rls-theme-gradient-500);
|
|
162
|
+
--pvt-raised-font-color: var(--rls-theme-font-500);
|
|
163
|
+
--pvt-raised-border: none;
|
|
164
|
+
--pvt-flat-background: var(--rls-theme-color-200);
|
|
165
|
+
--pvt-flat-font-color: var(--rls-theme-color-500);
|
|
167
166
|
--pvt-flat-border: none;
|
|
167
|
+
--pvt-stroked-background: transparent;
|
|
168
|
+
--pvt-stroked-font-color: var(--rls-theme-color-500);
|
|
169
|
+
--pvt-stroked-border: var(--rls-theme-border-1-500);
|
|
168
170
|
--pvt-outline-background: transparent;
|
|
169
|
-
--pvt-outline-font-color: var(--color-
|
|
170
|
-
--pvt-outline-border: var(--border-1-
|
|
171
|
-
--pvt-
|
|
172
|
-
--pvt-
|
|
173
|
-
--pvt-
|
|
171
|
+
--pvt-outline-font-color: var(--rls-app-color-300);
|
|
172
|
+
--pvt-outline-border: var(--rls-app-border-1-300);
|
|
173
|
+
--pvt-ghost-background: none;
|
|
174
|
+
--pvt-ghost-font-color: var(--rls-theme-color-500);
|
|
175
|
+
--pvt-ghost-border: none;
|
|
174
176
|
position: relative;
|
|
175
|
-
float: left;
|
|
176
177
|
padding: 0rem;
|
|
177
178
|
overflow: hidden;
|
|
178
179
|
outline: none;
|
|
@@ -180,38 +181,56 @@
|
|
|
180
181
|
}
|
|
181
182
|
.rls-button:not(:disabled):not(:active) {
|
|
182
183
|
--pvt-button-content-animation: ripple-squarecenter 1000ms
|
|
183
|
-
var(--standard-curve);
|
|
184
|
+
var(--rls-standard-curve);
|
|
184
185
|
}
|
|
185
186
|
.rls-button:not(:disabled):focus {
|
|
186
187
|
--pvt-button-content-visibility: visible;
|
|
187
188
|
}
|
|
188
189
|
.rls-button:not(:disabled):hover {
|
|
189
|
-
--pvt-
|
|
190
|
-
--pvt-
|
|
191
|
-
--pvt-
|
|
192
|
-
--pvt-flat-background: var(--color-
|
|
193
|
-
--pvt-flat-font-color: var(--
|
|
190
|
+
--pvt-raised-background: var(--rls-theme-color-700);
|
|
191
|
+
--pvt-raised-font-color: var(--rls-theme-font-900);
|
|
192
|
+
--pvt-raised-border: none;
|
|
193
|
+
--pvt-flat-background: var(--rls-theme-color-500);
|
|
194
|
+
--pvt-flat-font-color: var(--rls-theme-font-500);
|
|
194
195
|
--pvt-flat-border: none;
|
|
196
|
+
--pvt-stroked-background: var(--rls-theme-color-100);
|
|
197
|
+
--pvt-stroked-font-color: var(--rls-theme-color-700);
|
|
198
|
+
--pvt-stroked-border: var(--rls-theme-border-1-700);
|
|
195
199
|
--pvt-outline-background: transparent;
|
|
196
|
-
--pvt-outline-font-color: var(--color-
|
|
197
|
-
--pvt-outline-border: var(--border-1-
|
|
198
|
-
--pvt-
|
|
199
|
-
--pvt-
|
|
200
|
-
--pvt-
|
|
200
|
+
--pvt-outline-font-color: var(--rls-theme-color-500);
|
|
201
|
+
--pvt-outline-border: var(--rls-theme-border-1-500);
|
|
202
|
+
--pvt-ghost-background: var(--rls-theme-color-200);
|
|
203
|
+
--pvt-ghost-font-color: var(--rls-theme-font-100);
|
|
204
|
+
--pvt-ghost-border: none;
|
|
201
205
|
}
|
|
202
206
|
.rls-button:disabled {
|
|
203
|
-
|
|
207
|
+
--pvt-raised-background: var(--rls-theme-color-200);
|
|
208
|
+
--pvt-raised-font-color: var(--rls-theme-color-400);
|
|
209
|
+
--pvt-raised-border: none;
|
|
210
|
+
--pvt-flat-background: var(--rls-theme-color-100);
|
|
211
|
+
--pvt-flat-font-color: var(--rls-theme-color-300);
|
|
212
|
+
--pvt-flat-border: none;
|
|
213
|
+
--pvt-stroked-background: transparent;
|
|
214
|
+
--pvt-stroked-font-color: var(--rls-theme-color-300);
|
|
215
|
+
--pvt-stroked-border: var(--rls-theme-border-1-300);
|
|
216
|
+
--pvt-outline-background: transparent;
|
|
217
|
+
--pvt-outline-font-color: var(--rls-app-color-100);
|
|
218
|
+
--pvt-outline-border: var(--rls-app-border-1-100);
|
|
219
|
+
--pvt-ghost-background: transparent;
|
|
220
|
+
--pvt-ghost-font-color: var(--rls-theme-color-300);
|
|
221
|
+
--pvt-ghost-border: none;
|
|
204
222
|
pointer-events: none;
|
|
205
223
|
}
|
|
206
224
|
.rls-button__content {
|
|
207
225
|
display: flex;
|
|
208
226
|
justify-content: center;
|
|
227
|
+
align-items: center;
|
|
209
228
|
overflow: hidden;
|
|
210
|
-
line-height: var(--sizing-x20);
|
|
211
|
-
height: var(--sizing-x20);
|
|
212
|
-
padding: var(--
|
|
229
|
+
line-height: var(--rls-sizing-x20);
|
|
230
|
+
height: var(--rls-sizing-x20);
|
|
231
|
+
padding: var(--rlc-button-content-padding);
|
|
213
232
|
box-sizing: border-box;
|
|
214
|
-
border-radius: var(--
|
|
233
|
+
border-radius: var(--rlc-button-content-radius);
|
|
215
234
|
color: var(--pvt-button-content-font-color);
|
|
216
235
|
border: var(--pvt-button-content-border);
|
|
217
236
|
background: var(--pvt-button-content-background);
|
|
@@ -222,52 +241,53 @@
|
|
|
222
241
|
content: '';
|
|
223
242
|
top: 50%;
|
|
224
243
|
left: 50%;
|
|
225
|
-
padding-top: calc(100% - var(--sizing-x8));
|
|
226
|
-
padding-left: calc(100% - var(--sizing-x8));
|
|
227
|
-
margin-top: calc(-50% + var(--sizing-x4));
|
|
228
|
-
margin-left: calc(-50% + var(--sizing-x4));
|
|
244
|
+
padding-top: calc(100% - var(--rls-sizing-x8));
|
|
245
|
+
padding-left: calc(100% - var(--rls-sizing-x8));
|
|
246
|
+
margin-top: calc(-50% + var(--rls-sizing-x4));
|
|
247
|
+
margin-left: calc(-50% + var(--rls-sizing-x4));
|
|
229
248
|
border-radius: 50%;
|
|
230
249
|
opacity: 0.26;
|
|
231
250
|
transform: scale(0);
|
|
232
|
-
z-index: var(--z-index-2);
|
|
251
|
+
z-index: var(--rls-z-index-2);
|
|
233
252
|
background: var(--pvt-button-ripple-background);
|
|
234
253
|
animation: var(--pvt-button-content-animation);
|
|
235
254
|
visibility: var(--pvt-button-content-visibility);
|
|
236
255
|
}
|
|
237
|
-
.rls-button__content--
|
|
238
|
-
--pvt-button-content-
|
|
239
|
-
--pvt-button-content-
|
|
240
|
-
--pvt-button-content-border: var(--pvt-
|
|
256
|
+
.rls-button__content--raised {
|
|
257
|
+
--pvt-button-content-background: var(--pvt-raised-background);
|
|
258
|
+
--pvt-button-content-font-color: var(--pvt-raised-font-color);
|
|
259
|
+
--pvt-button-content-border: var(--pvt-raised-border);
|
|
260
|
+
--pvt-button-ripple-background: var(--rls-theme-font-900);
|
|
241
261
|
}
|
|
242
262
|
.rls-button__content--flat {
|
|
243
263
|
--pvt-button-content-font-color: var(--pvt-flat-font-color);
|
|
244
264
|
--pvt-button-content-background: var(--pvt-flat-background);
|
|
245
265
|
--pvt-button-content-border: var(--pvt-flat-border);
|
|
246
|
-
--pvt-button-ripple-background: var(--
|
|
266
|
+
--pvt-button-ripple-background: var(--rls-theme-font-900);
|
|
267
|
+
}
|
|
268
|
+
.rls-button__content--stroked {
|
|
269
|
+
--pvt-button-content-font-color: var(--pvt-stroked-font-color);
|
|
270
|
+
--pvt-button-content-background: var(--pvt-stroked-background);
|
|
271
|
+
--pvt-button-content-border: var(--pvt-stroked-border);
|
|
247
272
|
}
|
|
248
273
|
.rls-button__content--outline {
|
|
249
274
|
--pvt-button-content-font-color: var(--pvt-outline-font-color);
|
|
250
275
|
--pvt-button-content-background: var(--pvt-outline-background);
|
|
251
276
|
--pvt-button-content-border: var(--pvt-outline-border);
|
|
252
277
|
}
|
|
253
|
-
.rls-button__content--
|
|
254
|
-
--pvt-button-content-
|
|
255
|
-
--pvt-button-content-
|
|
256
|
-
--pvt-button-content-border: var(--pvt-
|
|
257
|
-
--pvt-button-ripple-background: var(--color-light-500);
|
|
258
|
-
}
|
|
259
|
-
.rls-button .rls-icon {
|
|
260
|
-
margin: auto var(--sizing-x2);
|
|
278
|
+
.rls-button__content--ghost {
|
|
279
|
+
--pvt-button-content-font-color: var(--pvt-ghost-font-color);
|
|
280
|
+
--pvt-button-content-background: var(--pvt-ghost-background);
|
|
281
|
+
--pvt-button-content-border: var(--pvt-ghost-border);
|
|
261
282
|
}
|
|
262
283
|
.rls-button__label {
|
|
263
|
-
padding: 0rem var(--sizing-x2);
|
|
284
|
+
padding: 0rem var(--rls-sizing-x2);
|
|
264
285
|
line-height: initial;
|
|
265
286
|
width: auto;
|
|
266
|
-
|
|
267
|
-
font-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
text-transform: var(--rls-button-label-text-transform);
|
|
287
|
+
font-size: var(--rls-button-font-size);
|
|
288
|
+
font-weight: var(--rls-font-weight-bold);
|
|
289
|
+
letter-spacing: var(--rls-button-letter-spacing);
|
|
290
|
+
text-transform: var(--rlc-button-label-text-transform);
|
|
271
291
|
text-overflow: ellipsis;
|
|
272
292
|
overflow: hidden;
|
|
273
293
|
white-space: nowrap;
|
|
@@ -294,16 +314,16 @@
|
|
|
294
314
|
--pvt-tooltip-transition-delay: 0ms;
|
|
295
315
|
--pvt-tooltip-opacity: 0;
|
|
296
316
|
position: relative;
|
|
297
|
-
width: var(--sizing-x16);
|
|
298
|
-
height: var(--sizing-x16);
|
|
317
|
+
width: var(--rls-sizing-x16);
|
|
318
|
+
height: var(--rls-sizing-x16);
|
|
299
319
|
border: none;
|
|
300
320
|
outline: none;
|
|
301
|
-
padding: var(--sizing-x2);
|
|
321
|
+
padding: var(--rls-sizing-x2);
|
|
302
322
|
box-sizing: border-box;
|
|
303
323
|
user-select: none;
|
|
304
324
|
cursor: default;
|
|
305
325
|
background: transparent;
|
|
306
|
-
color: var(--
|
|
326
|
+
color: var(--rlc-action-color);
|
|
307
327
|
}
|
|
308
328
|
.rls-button-action::before {
|
|
309
329
|
position: absolute;
|
|
@@ -315,14 +335,14 @@
|
|
|
315
335
|
visibility: hidden;
|
|
316
336
|
border-radius: 50%;
|
|
317
337
|
transform: scale(0);
|
|
318
|
-
background: var(--
|
|
319
|
-
padding-top: calc(120% - var(--sizing-x4));
|
|
320
|
-
padding-left: calc(120% - var(--sizing-x4));
|
|
321
|
-
margin-top: calc(-60% + var(--sizing-x2));
|
|
322
|
-
margin-left: calc(-60% + var(--sizing-x2));
|
|
338
|
+
background: var(--rlc-action-ripple-color);
|
|
339
|
+
padding-top: calc(120% - var(--rls-sizing-x4));
|
|
340
|
+
padding-left: calc(120% - var(--rls-sizing-x4));
|
|
341
|
+
margin-top: calc(-60% + var(--rls-sizing-x2));
|
|
342
|
+
margin-left: calc(-60% + var(--rls-sizing-x2));
|
|
323
343
|
}
|
|
324
344
|
.rls-button-action:not(:active)::before {
|
|
325
|
-
animation: ripple-button-action 1000ms var(--standard-curve);
|
|
345
|
+
animation: ripple-button-action 1000ms var(--rls-standard-curve);
|
|
326
346
|
}
|
|
327
347
|
.rls-button-action:focus::before {
|
|
328
348
|
visibility: visible;
|
|
@@ -333,14 +353,14 @@
|
|
|
333
353
|
top: 50%;
|
|
334
354
|
left: 50%;
|
|
335
355
|
opacity: 0.24;
|
|
336
|
-
width: var(--
|
|
337
|
-
height: var(--
|
|
338
|
-
margin-top: var(--
|
|
339
|
-
margin-left: var(--
|
|
356
|
+
width: var(--rlc-action-ripple-dimension);
|
|
357
|
+
height: var(--rlc-action-ripple-dimension);
|
|
358
|
+
margin-top: var(--rlc-action-ripple-position);
|
|
359
|
+
margin-left: var(--rlc-action-ripple-position);
|
|
340
360
|
border-radius: 50%;
|
|
341
|
-
background: var(--
|
|
361
|
+
background: var(--rlc-action-ripple-color);
|
|
342
362
|
transform: scale(0);
|
|
343
|
-
transition: transform 160ms 0ms var(--sharp-curve);
|
|
363
|
+
transition: transform 160ms 0ms var(--rls-sharp-curve);
|
|
344
364
|
}
|
|
345
365
|
.rls-button-action:not(:disabled):hover {
|
|
346
366
|
--pvt-tooltip-opacity: 1;
|
|
@@ -355,18 +375,18 @@
|
|
|
355
375
|
}
|
|
356
376
|
.rls-button-action__tooltip {
|
|
357
377
|
position: absolute;
|
|
358
|
-
top: calc(100% + var(--sizing-x6));
|
|
378
|
+
top: calc(100% + var(--rls-sizing-x6));
|
|
359
379
|
left: 50%;
|
|
360
380
|
width: auto;
|
|
361
381
|
float: initial;
|
|
362
|
-
padding: var(--sizing-x4);
|
|
363
|
-
border-radius: var(--sizing-x2);
|
|
382
|
+
padding: var(--rls-sizing-x4);
|
|
383
|
+
border-radius: var(--rls-sizing-x2);
|
|
364
384
|
white-space: nowrap;
|
|
365
385
|
pointer-events: none;
|
|
366
386
|
transform: translateX(-50%);
|
|
367
|
-
background: var(--
|
|
368
|
-
color: var(--
|
|
369
|
-
transition: opacity 200ms 0ms var(--deceleration-curve);
|
|
387
|
+
background: var(--rls-dark-color-500);
|
|
388
|
+
color: var(--rls-light-color-500);
|
|
389
|
+
transition: opacity 200ms 0ms var(--rls-deceleration-curve);
|
|
370
390
|
opacity: var(--pvt-tooltip-opacity);
|
|
371
391
|
transition-delay: var(--pvt-tooltip-transition-delay);
|
|
372
392
|
}
|
|
@@ -389,45 +409,44 @@
|
|
|
389
409
|
position: relative;
|
|
390
410
|
float: left;
|
|
391
411
|
display: flex;
|
|
392
|
-
width: var(--sizing-x12);
|
|
393
|
-
height: var(--sizing-x12);
|
|
412
|
+
width: var(--rls-sizing-x12);
|
|
413
|
+
height: var(--rls-sizing-x12);
|
|
394
414
|
box-sizing: border-box;
|
|
395
415
|
outline: none;
|
|
396
|
-
border-radius: var(--sizing-x2);
|
|
397
|
-
border: var(--border-1-
|
|
416
|
+
border-radius: var(--rls-sizing-x2);
|
|
417
|
+
border: var(--rls-app-border-1-300);
|
|
398
418
|
}
|
|
399
419
|
.rls-checkbox:hover {
|
|
400
420
|
cursor: pointer;
|
|
401
421
|
}
|
|
402
422
|
.rls-checkbox--checked {
|
|
403
423
|
--pvt-component-transform: scale(1);
|
|
404
|
-
border: var(--border-1-
|
|
424
|
+
border: var(--rls-theme-border-1-500);
|
|
405
425
|
}
|
|
406
426
|
.rls-checkbox--disabled {
|
|
407
427
|
opacity: 0.5;
|
|
408
428
|
pointer-events: none;
|
|
409
429
|
}
|
|
410
430
|
.rls-checkbox__component {
|
|
411
|
-
border-radius: var(--sizing-x1);
|
|
431
|
+
border-radius: var(--rls-sizing-x1);
|
|
412
432
|
width: 7rem;
|
|
413
433
|
height: 7rem;
|
|
414
434
|
margin: auto;
|
|
415
|
-
background: var(--gradient-
|
|
435
|
+
background: var(--rls-theme-gradient-500);
|
|
416
436
|
transform: var(--pvt-component-transform);
|
|
417
437
|
transform-origin: 50% 50%;
|
|
418
|
-
transition: all 160ms 0ms var(--standard-curve);
|
|
438
|
+
transition: all 160ms 0ms var(--rls-standard-curve);
|
|
419
439
|
}
|
|
420
440
|
|
|
421
441
|
.rls-input {
|
|
422
|
-
--pvt-value-font-color: var(--
|
|
442
|
+
--pvt-value-font-color: var(--rlc-input-font-color);
|
|
423
443
|
--pvt-value-opacity: 1;
|
|
424
444
|
--pvt-component-font-color: transparent;
|
|
425
445
|
position: relative;
|
|
426
|
-
float: left;
|
|
427
446
|
width: 100%;
|
|
428
447
|
}
|
|
429
448
|
.rls-input--focused {
|
|
430
|
-
--pvt-component-font-color: var(--
|
|
449
|
+
--pvt-component-font-color: var(--rlc-input-font-color);
|
|
431
450
|
--pvt-value-font-color: transparent;
|
|
432
451
|
}
|
|
433
452
|
.rls-input--disabled {
|
|
@@ -435,19 +454,18 @@
|
|
|
435
454
|
}
|
|
436
455
|
.rls-input__component {
|
|
437
456
|
position: relative;
|
|
438
|
-
float: left;
|
|
439
457
|
width: 100%;
|
|
440
|
-
height: var(--
|
|
441
|
-
line-height: var(--
|
|
458
|
+
height: var(--rlc-input-height);
|
|
459
|
+
line-height: var(--rlc-input-height);
|
|
442
460
|
padding: 0rem;
|
|
443
461
|
cursor: text;
|
|
444
462
|
border: none;
|
|
445
463
|
outline: none;
|
|
446
464
|
background: transparent;
|
|
447
465
|
color: var(--pvt-component-font-color);
|
|
448
|
-
font-weight: var(--font-weight-medium);
|
|
466
|
+
font-weight: var(--rls-font-weight-medium);
|
|
449
467
|
font-size: var(--rls-input-font-size);
|
|
450
|
-
text-align: var(--
|
|
468
|
+
text-align: var(--rlc-input-text-align);
|
|
451
469
|
letter-spacing: var(--rls-input-letter-spacing);
|
|
452
470
|
}
|
|
453
471
|
.rls-input__component::-webkit-outer-spin-button,
|
|
@@ -456,11 +474,11 @@
|
|
|
456
474
|
-webkit-appearance: none;
|
|
457
475
|
}
|
|
458
476
|
.rls-input__component::placeholder {
|
|
459
|
-
color: var(--color-
|
|
477
|
+
color: var(--rls-app-color-100);
|
|
460
478
|
}
|
|
461
479
|
.rls-input__component::selection {
|
|
462
|
-
background: var(--color-
|
|
463
|
-
color: var(--
|
|
480
|
+
background: var(--rls-theme-color-700);
|
|
481
|
+
color: var(--rls-light-color-500);
|
|
464
482
|
}
|
|
465
483
|
.rls-input__component:disabled {
|
|
466
484
|
opacity: 0.5;
|
|
@@ -470,17 +488,17 @@
|
|
|
470
488
|
top: 0rem;
|
|
471
489
|
left: 0rem;
|
|
472
490
|
width: 100%;
|
|
473
|
-
height: var(--
|
|
474
|
-
line-height: var(--
|
|
491
|
+
height: var(--rlc-input-height);
|
|
492
|
+
line-height: var(--rlc-input-height);
|
|
475
493
|
background: transparent;
|
|
476
494
|
pointer-events: none;
|
|
477
495
|
overflow: hidden;
|
|
478
496
|
white-space: nowrap;
|
|
479
497
|
opacity: var(--pvt-value-opacity);
|
|
480
498
|
color: var(--pvt-value-font-color);
|
|
481
|
-
font-weight: var(--font-weight-medium);
|
|
499
|
+
font-weight: var(--rls-font-weight-medium);
|
|
482
500
|
font-size: var(--rls-input-font-size);
|
|
483
|
-
text-align: var(--
|
|
501
|
+
text-align: var(--rlc-input-text-align);
|
|
484
502
|
letter-spacing: var(--rls-input-letter-spacing);
|
|
485
503
|
}
|
|
486
504
|
|
|
@@ -488,7 +506,7 @@
|
|
|
488
506
|
position: relative;
|
|
489
507
|
float: left;
|
|
490
508
|
width: 100%;
|
|
491
|
-
padding: var(--
|
|
509
|
+
padding: var(--rlc-input-parent-padding);
|
|
492
510
|
box-sizing: border-box;
|
|
493
511
|
}
|
|
494
512
|
|
|
@@ -496,7 +514,7 @@
|
|
|
496
514
|
position: relative;
|
|
497
515
|
float: left;
|
|
498
516
|
width: 100%;
|
|
499
|
-
padding: var(--
|
|
517
|
+
padding: var(--rlc-input-parent-padding);
|
|
500
518
|
box-sizing: border-box;
|
|
501
519
|
}
|
|
502
520
|
|
|
@@ -504,22 +522,22 @@
|
|
|
504
522
|
position: relative;
|
|
505
523
|
float: left;
|
|
506
524
|
width: 100%;
|
|
507
|
-
padding: var(--
|
|
525
|
+
padding: var(--rlc-input-parent-padding);
|
|
508
526
|
box-sizing: border-box;
|
|
509
527
|
}
|
|
510
528
|
.rls-input-password__component {
|
|
511
529
|
position: relative;
|
|
512
530
|
float: left;
|
|
513
531
|
width: 100%;
|
|
514
|
-
height: var(--sizing-x12);
|
|
515
|
-
line-height: var(--sizing-x12);
|
|
532
|
+
height: var(--rls-sizing-x12);
|
|
533
|
+
line-height: var(--rls-sizing-x12);
|
|
516
534
|
padding: 0rem;
|
|
517
535
|
cursor: text;
|
|
518
536
|
border: none;
|
|
519
537
|
outline: none;
|
|
520
538
|
background: transparent;
|
|
521
|
-
color: var(--
|
|
522
|
-
font-weight: var(--font-weight-medium);
|
|
539
|
+
color: var(--rlc-input-font-color);
|
|
540
|
+
font-weight: var(--rls-font-weight-medium);
|
|
523
541
|
font-size: var(--rls-input-font-size);
|
|
524
542
|
letter-spacing: var(--rls-input-letter-spacing);
|
|
525
543
|
}
|
|
@@ -529,11 +547,11 @@
|
|
|
529
547
|
-webkit-appearance: none;
|
|
530
548
|
}
|
|
531
549
|
.rls-input-password__component::placeholder {
|
|
532
|
-
color: var(--color-
|
|
550
|
+
color: var(--rls-app-color-100);
|
|
533
551
|
}
|
|
534
552
|
.rls-input-password__component::selection {
|
|
535
|
-
background: var(--color-
|
|
536
|
-
color: var(--
|
|
553
|
+
background: var(--rls-theme-color-700);
|
|
554
|
+
color: var(--rls-light-color-500);
|
|
537
555
|
}
|
|
538
556
|
.rls-input-password__component:disabled {
|
|
539
557
|
opacity: 0.5;
|
|
@@ -543,34 +561,34 @@
|
|
|
543
561
|
position: relative;
|
|
544
562
|
float: left;
|
|
545
563
|
width: 100%;
|
|
546
|
-
padding: var(--
|
|
564
|
+
padding: var(--rlc-input-parent-padding);
|
|
547
565
|
box-sizing: border-box;
|
|
548
566
|
}
|
|
549
567
|
|
|
550
568
|
.rls-message-icon {
|
|
551
|
-
--
|
|
552
|
-
--
|
|
553
|
-
--
|
|
554
|
-
--
|
|
569
|
+
--rlc-icon-color: var(--rls-theme-color-500);
|
|
570
|
+
--rlc-icon-width: var(--rls-sizing-x8);
|
|
571
|
+
--rlc-icon-height: var(--rls-sizing-x8);
|
|
572
|
+
--rlc-icon-font-size: var(--rls-sizing-x8);
|
|
555
573
|
display: flex;
|
|
556
574
|
align-items: center;
|
|
557
|
-
column-gap: var(--sizing-x2);
|
|
575
|
+
column-gap: var(--rls-sizing-x2);
|
|
558
576
|
}
|
|
559
577
|
.rls-message-icon span {
|
|
560
|
-
color: var(--color-
|
|
578
|
+
color: var(--rls-app-color-300);
|
|
561
579
|
}
|
|
562
580
|
|
|
563
581
|
.rls-poster {
|
|
564
582
|
position: relative;
|
|
565
583
|
float: left;
|
|
566
584
|
width: auto;
|
|
567
|
-
height: var(--
|
|
568
|
-
line-height: var(--
|
|
569
|
-
padding: var(--
|
|
585
|
+
height: var(--rlc-poster-height);
|
|
586
|
+
line-height: var(--rlc-poster-height);
|
|
587
|
+
padding: var(--rlc-poster-padding);
|
|
570
588
|
box-sizing: border-box;
|
|
571
|
-
border-radius: var(--sizing-x2);
|
|
572
|
-
color: var(--
|
|
573
|
-
background: var(--gradient-
|
|
589
|
+
border-radius: var(--rls-sizing-x2);
|
|
590
|
+
color: var(--rls-light-color-500);
|
|
591
|
+
background: var(--rls-theme-gradient-500);
|
|
574
592
|
}
|
|
575
593
|
|
|
576
594
|
.rls-progress-bar {
|
|
@@ -578,9 +596,9 @@
|
|
|
578
596
|
position: relative;
|
|
579
597
|
float: left;
|
|
580
598
|
width: 100%;
|
|
581
|
-
height: var(--sizing-x2);
|
|
599
|
+
height: var(--rls-sizing-x2);
|
|
582
600
|
overflow: hidden;
|
|
583
|
-
background: var(--color-
|
|
601
|
+
background: var(--rls-theme-color-100);
|
|
584
602
|
}
|
|
585
603
|
.rls-progress-bar--indeterminate {
|
|
586
604
|
--pvt-component-display: none;
|
|
@@ -591,8 +609,8 @@
|
|
|
591
609
|
content: '';
|
|
592
610
|
top: 0rem;
|
|
593
611
|
width: 0%;
|
|
594
|
-
height: var(--sizing-x2);
|
|
595
|
-
background: var(--gradient-
|
|
612
|
+
height: var(--rls-sizing-x2);
|
|
613
|
+
background: var(--rls-theme-gradient-500);
|
|
596
614
|
}
|
|
597
615
|
.rls-progress-bar--indeterminate::after {
|
|
598
616
|
animation: progress-bar-indeterminate-after 2000ms infinite;
|
|
@@ -604,10 +622,10 @@
|
|
|
604
622
|
position: absolute;
|
|
605
623
|
top: 0rem;
|
|
606
624
|
width: 0%;
|
|
607
|
-
height: var(--sizing-x4);
|
|
625
|
+
height: var(--rls-sizing-x4);
|
|
608
626
|
display: var(--pvt-component-display);
|
|
609
|
-
background: var(--gradient-
|
|
610
|
-
transition: width 320ms 0ms var(--standard-curve);
|
|
627
|
+
background: var(--rls-theme-gradient-500);
|
|
628
|
+
transition: width 320ms 0ms var(--rls-standard-curve);
|
|
611
629
|
}
|
|
612
630
|
|
|
613
631
|
@keyframes progress-bar-indeterminate-before {
|
|
@@ -640,24 +658,69 @@
|
|
|
640
658
|
}
|
|
641
659
|
}
|
|
642
660
|
|
|
661
|
+
.rls-progress-circular {
|
|
662
|
+
position: relative;
|
|
663
|
+
width: var(--rlc-progress-circular-dimension);
|
|
664
|
+
height: var(--rlc-progress-circular-dimension);
|
|
665
|
+
padding: var(--rls-sizing-x2);
|
|
666
|
+
box-sizing: border-box;
|
|
667
|
+
stroke: var(--rls-theme-color-500);
|
|
668
|
+
}
|
|
669
|
+
.rls-progress-circular__svg {
|
|
670
|
+
height: 100%;
|
|
671
|
+
width: 100%;
|
|
672
|
+
transform: rotate(990deg);
|
|
673
|
+
animation: progress-circular-svg 3500ms linear infinite;
|
|
674
|
+
}
|
|
675
|
+
.rls-progress-circular__circle {
|
|
676
|
+
fill: none;
|
|
677
|
+
stroke-width: 4px;
|
|
678
|
+
stroke: inherit;
|
|
679
|
+
stroke-dasharray: 65;
|
|
680
|
+
stroke-dashoffset: 65;
|
|
681
|
+
opacity: 1;
|
|
682
|
+
animation: progress-circular-circle 1750ms var(--rls-standard-curve) infinite;
|
|
683
|
+
}
|
|
684
|
+
|
|
685
|
+
@keyframes progress-circular-svg {
|
|
686
|
+
0% {
|
|
687
|
+
transform: rotate(0deg);
|
|
688
|
+
}
|
|
689
|
+
50% {
|
|
690
|
+
transform: rotate(180deg);
|
|
691
|
+
}
|
|
692
|
+
100% {
|
|
693
|
+
transform: rotate(360deg);
|
|
694
|
+
}
|
|
695
|
+
}
|
|
696
|
+
|
|
697
|
+
@keyframes progress-circular-circle {
|
|
698
|
+
50% {
|
|
699
|
+
stroke-dashoffset: 0;
|
|
700
|
+
}
|
|
701
|
+
100% {
|
|
702
|
+
stroke-dashoffset: -65;
|
|
703
|
+
}
|
|
704
|
+
}
|
|
705
|
+
|
|
643
706
|
.rls-radiobutton {
|
|
644
707
|
--pvt-component-transform: scale(0);
|
|
645
708
|
position: relative;
|
|
646
709
|
float: left;
|
|
647
710
|
display: flex;
|
|
648
711
|
outline: none;
|
|
649
|
-
width: var(--sizing-x12);
|
|
650
|
-
height: var(--sizing-x12);
|
|
712
|
+
width: var(--rls-sizing-x12);
|
|
713
|
+
height: var(--rls-sizing-x12);
|
|
651
714
|
border-radius: 50%;
|
|
652
715
|
box-sizing: border-box;
|
|
653
|
-
border: var(--border-1-
|
|
716
|
+
border: var(--rls-app-border-1-300);
|
|
654
717
|
}
|
|
655
718
|
.rls-radiobutton:hover {
|
|
656
719
|
cursor: pointer;
|
|
657
720
|
}
|
|
658
721
|
.rls-radiobutton--checked {
|
|
659
722
|
--pvt-component-transform: scale(1);
|
|
660
|
-
border: var(--border-1-
|
|
723
|
+
border: var(--rls-theme-border-1-500);
|
|
661
724
|
}
|
|
662
725
|
.rls-radiobutton--disabled {
|
|
663
726
|
opacity: 0.5;
|
|
@@ -668,22 +731,22 @@
|
|
|
668
731
|
width: 7rem;
|
|
669
732
|
height: 7rem;
|
|
670
733
|
margin: auto;
|
|
671
|
-
background: var(--gradient-
|
|
734
|
+
background: var(--rls-theme-gradient-500);
|
|
672
735
|
transform: var(--pvt-component-transform);
|
|
673
736
|
transform-origin: 50% 50%;
|
|
674
|
-
transition: all 160ms 0ms var(--standard-curve);
|
|
737
|
+
transition: all 160ms 0ms var(--rls-standard-curve);
|
|
675
738
|
}
|
|
676
739
|
|
|
677
740
|
.rls-search-input {
|
|
678
|
-
--
|
|
741
|
+
--rlc-input-height: var(--rls-sizing-x14);
|
|
679
742
|
position: relative;
|
|
680
743
|
float: left;
|
|
681
744
|
display: flex;
|
|
682
745
|
align-items: center;
|
|
683
|
-
padding: var(--sizing-x4) var(--sizing-x6);
|
|
746
|
+
padding: var(--rls-sizing-x4) var(--rls-sizing-x6);
|
|
684
747
|
box-sizing: border-box;
|
|
685
|
-
border: var(--border-1-
|
|
686
|
-
border-radius: var(--sizing-x4);
|
|
748
|
+
border: var(--rls-app-border-1-300);
|
|
749
|
+
border-radius: var(--rls-sizing-x4);
|
|
687
750
|
}
|
|
688
751
|
|
|
689
752
|
.rls-skeleton {
|
|
@@ -696,8 +759,8 @@
|
|
|
696
759
|
line-height: inherit;
|
|
697
760
|
letter-spacing: inherit;
|
|
698
761
|
overflow: hidden;
|
|
699
|
-
background: var(--color-
|
|
700
|
-
border-radius: var(--sizing-x2);
|
|
762
|
+
background: var(--rls-theme-color-100);
|
|
763
|
+
border-radius: var(--rls-sizing-x2);
|
|
701
764
|
}
|
|
702
765
|
.rls-skeleton::after {
|
|
703
766
|
position: absolute;
|
|
@@ -709,10 +772,10 @@
|
|
|
709
772
|
transform: translateX(-100%);
|
|
710
773
|
background-image: linear-gradient(
|
|
711
774
|
90deg,
|
|
712
|
-
var(--skeleton-
|
|
713
|
-
var(--skeleton-
|
|
714
|
-
var(--skeleton-
|
|
715
|
-
var(--skeleton-
|
|
775
|
+
var(--rls-theme-skeleton-100) 0%,
|
|
776
|
+
var(--rls-theme-skeleton-100) 20%,
|
|
777
|
+
var(--rls-theme-skeleton-300) 60%,
|
|
778
|
+
var(--rls-theme-skeleton-100)
|
|
716
779
|
);
|
|
717
780
|
animation: skeleton-animation 1600ms infinite;
|
|
718
781
|
}
|
|
@@ -726,7 +789,6 @@
|
|
|
726
789
|
.rls-skeleton-text {
|
|
727
790
|
--pvt-value-visibility: visible;
|
|
728
791
|
position: relative;
|
|
729
|
-
float: left;
|
|
730
792
|
width: 100%;
|
|
731
793
|
max-height: inherit;
|
|
732
794
|
min-height: inherit;
|
|
@@ -737,8 +799,8 @@
|
|
|
737
799
|
}
|
|
738
800
|
.rls-skeleton-text--active {
|
|
739
801
|
--pvt-value-visibility: hidden;
|
|
740
|
-
background: var(--color-
|
|
741
|
-
border-radius: var(--sizing-x2);
|
|
802
|
+
background: var(--rls-theme-color-100);
|
|
803
|
+
border-radius: var(--rls-sizing-x2);
|
|
742
804
|
}
|
|
743
805
|
.rls-skeleton-text--active::after {
|
|
744
806
|
animation: skeleton-text-animation 1600ms infinite;
|
|
@@ -753,16 +815,15 @@
|
|
|
753
815
|
transform: translateX(-100%);
|
|
754
816
|
background-image: linear-gradient(
|
|
755
817
|
90deg,
|
|
756
|
-
var(--skeleton-
|
|
757
|
-
var(--skeleton-
|
|
758
|
-
var(--skeleton-
|
|
759
|
-
var(--skeleton-
|
|
818
|
+
var(--rls-theme-skeleton-100) 0%,
|
|
819
|
+
var(--rls-theme-skeleton-100) 20%,
|
|
820
|
+
var(--rls-theme-skeleton-300) 60%,
|
|
821
|
+
var(--rls-theme-skeleton-100)
|
|
760
822
|
);
|
|
761
823
|
}
|
|
762
824
|
.rls-skeleton-text__value {
|
|
763
825
|
position: relative;
|
|
764
826
|
display: block;
|
|
765
|
-
float: left;
|
|
766
827
|
width: 100%;
|
|
767
828
|
height: inherit;
|
|
768
829
|
max-height: inherit;
|
|
@@ -784,20 +845,20 @@
|
|
|
784
845
|
}
|
|
785
846
|
|
|
786
847
|
.rls-switch {
|
|
787
|
-
--pvt-element-left: var(--sizing-x1);
|
|
788
|
-
--pvt-element-background: var(--background-
|
|
789
|
-
--pvt-bar-background: var(--background-
|
|
790
|
-
max-width: var(--sizing-x20);
|
|
848
|
+
--pvt-element-left: var(--rls-sizing-x1);
|
|
849
|
+
--pvt-element-background: var(--rls-app-background-500);
|
|
850
|
+
--pvt-bar-background: var(--rls-app-background-100);
|
|
851
|
+
max-width: var(--rls-sizing-x20);
|
|
791
852
|
}
|
|
792
853
|
.rls-switch:hover {
|
|
793
854
|
cursor: pointer;
|
|
794
855
|
}
|
|
795
856
|
.rls-switch--checked {
|
|
796
|
-
--pvt-element-background: var(--gradient-
|
|
857
|
+
--pvt-element-background: var(--rls-theme-gradient-500);
|
|
797
858
|
--pvt-element-left: calc(
|
|
798
|
-
100% - var(--
|
|
859
|
+
100% - var(--rlc-switch-element-size) - var(--rls-sizing-x1)
|
|
799
860
|
);
|
|
800
|
-
--pvt-bar-background: var(--color-
|
|
861
|
+
--pvt-bar-background: var(--rls-theme-color-300);
|
|
801
862
|
}
|
|
802
863
|
.rls-switch--disabled {
|
|
803
864
|
opacity: 0.5;
|
|
@@ -806,22 +867,22 @@
|
|
|
806
867
|
.rls-switch__component {
|
|
807
868
|
position: relative;
|
|
808
869
|
width: 100%;
|
|
809
|
-
padding: var(--sizing-x3) var(--sizing-x1);
|
|
870
|
+
padding: var(--rls-sizing-x3) var(--rls-sizing-x1);
|
|
810
871
|
box-sizing: border-box;
|
|
811
872
|
}
|
|
812
873
|
.rls-switch__component__element {
|
|
813
874
|
position: absolute;
|
|
814
875
|
top: 0rem;
|
|
815
876
|
left: var(--pvt-element-left);
|
|
816
|
-
width: var(--
|
|
817
|
-
height: var(--
|
|
818
|
-
z-index: var(--z-index-2);
|
|
819
|
-
padding: var(--sizing-x2);
|
|
877
|
+
width: var(--rlc-switch-element-size);
|
|
878
|
+
height: var(--rlc-switch-element-size);
|
|
879
|
+
z-index: var(--rls-z-index-2);
|
|
880
|
+
padding: var(--rls-sizing-x2);
|
|
820
881
|
box-sizing: border-box;
|
|
821
882
|
border-radius: 50%;
|
|
822
|
-
background: var(--background-
|
|
883
|
+
background: var(--rls-app-background-500);
|
|
823
884
|
box-shadow: 0 0 2rem 0 rgba(37, 38, 65, 0.38);
|
|
824
|
-
transition: left 240ms var(--standard-curve);
|
|
885
|
+
transition: left 240ms var(--rls-standard-curve);
|
|
825
886
|
}
|
|
826
887
|
.rls-switch__component__element::before {
|
|
827
888
|
display: block;
|
|
@@ -834,67 +895,68 @@
|
|
|
834
895
|
.rls-switch__component__bar {
|
|
835
896
|
background: var(--pvt-bar-background);
|
|
836
897
|
width: 100%;
|
|
837
|
-
height: var(--
|
|
838
|
-
border-radius: var(--
|
|
898
|
+
height: var(--rlc-switch-bar-height);
|
|
899
|
+
border-radius: var(--rlc-switch-bar-radius);
|
|
839
900
|
}
|
|
840
901
|
|
|
841
902
|
.rls-ballot {
|
|
842
|
-
--
|
|
843
|
-
--
|
|
903
|
+
--rlc-avatar-width: var(--rls-sizing-x20);
|
|
904
|
+
--rlc-avatar-height: var(--rls-sizing-x20);
|
|
844
905
|
position: relative;
|
|
845
|
-
float: left;
|
|
846
906
|
display: flex;
|
|
847
907
|
width: 100%;
|
|
848
|
-
|
|
908
|
+
align-content: center;
|
|
909
|
+
column-gap: var(--rls-sizing-x4);
|
|
910
|
+
padding: var(--rls-sizing-x4);
|
|
849
911
|
box-sizing: border-box;
|
|
850
912
|
overflow: hidden;
|
|
851
913
|
}
|
|
852
914
|
.rls-ballot--bordered {
|
|
853
|
-
border-radius: var(--sizing-x4);
|
|
854
|
-
border: var(--border-1-
|
|
915
|
+
border-radius: var(--rls-sizing-x4);
|
|
916
|
+
border: var(--rls-app-border-1-300);
|
|
855
917
|
}
|
|
856
918
|
.rls-ballot--skeleton {
|
|
857
|
-
--subtitle-width: 60%;
|
|
858
|
-
}
|
|
859
|
-
.rls-ballot > .rls-avatar {
|
|
860
|
-
margin: auto 0rem;
|
|
861
|
-
}
|
|
862
|
-
.rls-ballot > .rls-avatar + .rls-ballot__component {
|
|
863
|
-
width: calc(100% - var(--sizing-x28));
|
|
864
|
-
margin-left: var(--sizing-x4);
|
|
919
|
+
--rls-subtitle-width: 60%;
|
|
865
920
|
}
|
|
866
921
|
.rls-ballot__component {
|
|
922
|
+
display: flex;
|
|
867
923
|
overflow: hidden;
|
|
868
|
-
|
|
924
|
+
flex-direction: column;
|
|
925
|
+
row-gap: var(--rls-sizing-x2);
|
|
869
926
|
}
|
|
870
927
|
.rls-ballot__title {
|
|
871
928
|
position: relative;
|
|
872
|
-
float: left;
|
|
873
929
|
width: 100%;
|
|
874
|
-
color: var(--color-
|
|
930
|
+
color: var(--rls-app-color-500);
|
|
875
931
|
overflow: hidden;
|
|
876
932
|
white-space: nowrap;
|
|
877
933
|
text-overflow: ellipsis;
|
|
878
|
-
font-weight: var(--font-weight-medium);
|
|
879
|
-
font-size: var(--label-font-size);
|
|
880
|
-
letter-spacing: var(--label-letter-spacing);
|
|
881
|
-
min-height: var(--label-line-height);
|
|
882
|
-
line-height: var(--label-line-height);
|
|
934
|
+
font-weight: var(--rls-font-weight-medium);
|
|
935
|
+
font-size: var(--rls-label-font-size);
|
|
936
|
+
letter-spacing: var(--rls-label-letter-spacing);
|
|
937
|
+
min-height: var(--rls-label-line-height);
|
|
938
|
+
line-height: var(--rls-label-line-height);
|
|
883
939
|
}
|
|
884
940
|
.rls-ballot__subtitle {
|
|
885
941
|
position: relative;
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
942
|
+
width: var(--rlc-ballot-subtitle-width);
|
|
943
|
+
color: var(--rls-app-color-300);
|
|
944
|
+
font-weight: var(--rls-font-weight-semibold);
|
|
945
|
+
font-size: var(--rls-smalltext-font-size);
|
|
946
|
+
letter-spacing: var(--rls-smalltext-letter-spacing);
|
|
947
|
+
min-height: var(--rlc-ballot-subtitle-height);
|
|
948
|
+
line-height: var(--rlc-ballot-subtitle-height);
|
|
949
|
+
overflow: var(--rlc-ballot-subtitle-overflow);
|
|
950
|
+
text-overflow: var(--rlc-ballot-subtitle-text-overflow);
|
|
951
|
+
white-space: var(--rlc-ballot-subtitle-white-space);
|
|
952
|
+
}
|
|
953
|
+
|
|
954
|
+
.rls-button-progress {
|
|
955
|
+
--rlc-progress-circular-dimension: var(--rls-sizing-x16);
|
|
956
|
+
position: relative;
|
|
957
|
+
display: flex;
|
|
958
|
+
justify-content: center;
|
|
959
|
+
align-items: center;
|
|
898
960
|
}
|
|
899
961
|
|
|
900
962
|
.rls-button-toggle {
|
|
@@ -905,34 +967,36 @@
|
|
|
905
967
|
justify-content: center;
|
|
906
968
|
}
|
|
907
969
|
.rls-button-toggle__action {
|
|
908
|
-
--
|
|
970
|
+
--rlc-button-content-radius: var(--rls-sizing-x2) 0rem 0rem
|
|
971
|
+
var(--rls-sizing-x2);
|
|
909
972
|
width: auto;
|
|
910
973
|
}
|
|
911
974
|
.rls-button-toggle__icon {
|
|
912
|
-
--
|
|
913
|
-
|
|
975
|
+
--rlc-button-content-radius: 0rem var(--rls-sizing-x2) var(--rls-sizing-x2)
|
|
976
|
+
0rem;
|
|
977
|
+
--rlc-button-content-padding: var(--rls-sizing-x2);
|
|
914
978
|
width: auto;
|
|
915
979
|
}
|
|
916
980
|
.rls-button-toggle__list {
|
|
917
|
-
--
|
|
918
|
-
--
|
|
919
|
-
--
|
|
981
|
+
--rlc-button-toggle-ul-height: 0rem;
|
|
982
|
+
--rlc-button-toggle-ul-opacity: 0;
|
|
983
|
+
--rlc-button-toggle-ul-transform: none;
|
|
920
984
|
position: absolute;
|
|
921
985
|
top: 22.5rem;
|
|
922
986
|
left: 0rem;
|
|
923
987
|
width: 100%;
|
|
924
988
|
height: 0rem;
|
|
925
989
|
overflow: hidden;
|
|
926
|
-
z-index: var(--z-index-4);
|
|
990
|
+
z-index: var(--rls-z-index-4);
|
|
927
991
|
}
|
|
928
992
|
.rls-button-toggle__list--hide {
|
|
929
|
-
--
|
|
930
|
-
--
|
|
993
|
+
--rlc-button-toggle-ul-opacity: 0;
|
|
994
|
+
--rlc-button-toggle-ul-transform: scale(0, 0);
|
|
931
995
|
}
|
|
932
996
|
.rls-button-toggle__list--visible {
|
|
933
|
-
--
|
|
934
|
-
--
|
|
935
|
-
--
|
|
997
|
+
--rlc-button-toggle-ul-height: auto;
|
|
998
|
+
--rlc-button-toggle-ul-opacity: 1;
|
|
999
|
+
--rlc-button-toggle-ul-transform: scale(1, 1);
|
|
936
1000
|
overflow: initial;
|
|
937
1001
|
opacity: 1;
|
|
938
1002
|
height: auto;
|
|
@@ -943,48 +1007,48 @@
|
|
|
943
1007
|
flex-direction: column;
|
|
944
1008
|
float: left;
|
|
945
1009
|
width: 100%;
|
|
946
|
-
height: var(--
|
|
947
|
-
opacity: var(--
|
|
948
|
-
padding: var(--sizing-x4) 0rem;
|
|
949
|
-
border-radius: var(--sizing-x4);
|
|
1010
|
+
height: var(--rlc-button-toggle-ul-height);
|
|
1011
|
+
opacity: var(--rlc-button-toggle-ul-opacity);
|
|
1012
|
+
padding: var(--rls-sizing-x4) 0rem;
|
|
1013
|
+
border-radius: var(--rls-sizing-x4);
|
|
950
1014
|
box-sizing: border-box;
|
|
951
1015
|
overflow-y: auto;
|
|
952
1016
|
overflow-x: hidden;
|
|
953
|
-
z-index: var(--z-index-2);
|
|
954
|
-
background: var(--background-
|
|
955
|
-
border: var(--border-1-
|
|
956
|
-
transform: var(--
|
|
1017
|
+
z-index: var(--rls-z-index-2);
|
|
1018
|
+
background: var(--rls-app-background-500);
|
|
1019
|
+
border: var(--rls-theme-border-1-500);
|
|
1020
|
+
transform: var(--rlc-button-toggle-ul-transform);
|
|
957
1021
|
transform-origin: 0% 0%;
|
|
958
|
-
transition: transform 240ms 0ms var(--standard-curve),
|
|
959
|
-
opacity 240ms 0ms var(--standard-curve);
|
|
1022
|
+
transition: transform 240ms 0ms var(--rls-standard-curve),
|
|
1023
|
+
opacity 240ms 0ms var(--rls-standard-curve);
|
|
960
1024
|
will-change: opacity, transform;
|
|
961
|
-
box-shadow: 0px 0px 0px 3px var(--
|
|
1025
|
+
box-shadow: 0px 0px 0px 3px var(--rls-theme-shadow-500);
|
|
962
1026
|
}
|
|
963
1027
|
.rls-button-toggle__list ul li {
|
|
964
|
-
padding: 0rem var(--sizing-x6);
|
|
1028
|
+
padding: 0rem var(--rls-sizing-x6);
|
|
965
1029
|
box-sizing: border-box;
|
|
966
|
-
height: var(--sizing-x20);
|
|
967
|
-
line-height: var(--sizing-x20);
|
|
1030
|
+
height: var(--rls-sizing-x20);
|
|
1031
|
+
line-height: var(--rls-sizing-x20);
|
|
968
1032
|
cursor: default;
|
|
969
|
-
font-weight: var(--font-weight-semibold);
|
|
1033
|
+
font-weight: var(--rls-font-weight-semibold);
|
|
970
1034
|
font-size: 6rem;
|
|
971
1035
|
letter-spacing: 0.825px;
|
|
972
1036
|
text-transform: uppercase;
|
|
973
|
-
color: var(--color-
|
|
1037
|
+
color: var(--rls-app-color-300);
|
|
974
1038
|
}
|
|
975
1039
|
.rls-button-toggle__list ul li:hover {
|
|
976
|
-
background: var(--background-
|
|
977
|
-
color: var(--color-
|
|
1040
|
+
background: var(--rls-app-background-300);
|
|
1041
|
+
color: var(--rls-app-color-500);
|
|
978
1042
|
}
|
|
979
1043
|
|
|
980
1044
|
.rls-checkbox-label {
|
|
981
1045
|
--pvt-text-opacity: 1;
|
|
982
|
-
--pvt-text-height: var(--sizing-x12);
|
|
1046
|
+
--pvt-text-height: var(--rls-sizing-x12);
|
|
983
1047
|
--pvt-text-overflow: hidden;
|
|
984
1048
|
--pvt-text-white-space: nowrap;
|
|
985
1049
|
--pvt-text-text-overflow: ellipsis;
|
|
986
1050
|
display: flex;
|
|
987
|
-
column-gap: var(--sizing-x4);
|
|
1051
|
+
column-gap: var(--rls-sizing-x4);
|
|
988
1052
|
}
|
|
989
1053
|
.rls-checkbox-label--disabled {
|
|
990
1054
|
--pvt-text-opacity: 0.5;
|
|
@@ -1000,13 +1064,13 @@
|
|
|
1000
1064
|
width: auto;
|
|
1001
1065
|
}
|
|
1002
1066
|
.rls-checkbox-label__text {
|
|
1003
|
-
max-width: calc(100% - var(--sizing-x16));
|
|
1067
|
+
max-width: calc(100% - var(--rls-sizing-x16));
|
|
1004
1068
|
height: var(--pvt-text-height);
|
|
1005
|
-
line-height: var(--sizing-x12);
|
|
1006
|
-
color: var(--color-
|
|
1007
|
-
font-size: var(--label-font-size);
|
|
1008
|
-
font-weight: var(--font-weight-medium);
|
|
1009
|
-
letter-spacing: var(--label-letter-spacing);
|
|
1069
|
+
line-height: var(--rls-sizing-x12);
|
|
1070
|
+
color: var(--rls-app-color-300);
|
|
1071
|
+
font-size: var(--rls-label-font-size);
|
|
1072
|
+
font-weight: var(--rls-font-weight-medium);
|
|
1073
|
+
letter-spacing: var(--rls-label-letter-spacing);
|
|
1010
1074
|
user-select: none;
|
|
1011
1075
|
opacity: var(--pvt-text-opacity);
|
|
1012
1076
|
overflow: var(--pvt-text-overflow);
|
|
@@ -1015,11 +1079,10 @@
|
|
|
1015
1079
|
}
|
|
1016
1080
|
|
|
1017
1081
|
.rls-day-picker {
|
|
1018
|
-
--pvt-span-nothover-background: transparent;
|
|
1019
|
-
--pvt-span-nothover-font-color: inherit;
|
|
1020
1082
|
--pvt-span-background: transparent;
|
|
1083
|
+
--pvt-span-font-color: var(--rls-app-color-500);
|
|
1084
|
+
--pvt-span-border: var(--rls-border-1) solid transparent;
|
|
1021
1085
|
position: relative;
|
|
1022
|
-
float: left;
|
|
1023
1086
|
width: 100%;
|
|
1024
1087
|
max-width: 140rem;
|
|
1025
1088
|
box-sizing: border-box;
|
|
@@ -1027,58 +1090,71 @@
|
|
|
1027
1090
|
}
|
|
1028
1091
|
.rls-day-picker__header {
|
|
1029
1092
|
display: flex;
|
|
1030
|
-
margin-bottom: var(--sizing-x4);
|
|
1031
|
-
background: var(--background-
|
|
1032
|
-
color: var(--color-
|
|
1033
|
-
border-radius: var(--sizing-x2);
|
|
1093
|
+
margin-bottom: var(--rls-sizing-x4);
|
|
1094
|
+
background: var(--rls-app-background-100);
|
|
1095
|
+
color: var(--rls-app-color-500);
|
|
1096
|
+
border-radius: var(--rls-sizing-x2);
|
|
1034
1097
|
}
|
|
1035
1098
|
.rls-day-picker__label {
|
|
1036
|
-
padding: var(--sizing-x6) 0rem;
|
|
1099
|
+
padding: var(--rls-sizing-x6) 0rem;
|
|
1037
1100
|
text-align: center;
|
|
1038
1101
|
width: 100%;
|
|
1039
|
-
font-size: var(--sizing-x6);
|
|
1040
|
-
font-weight: var(--font-weight-bold);
|
|
1102
|
+
font-size: var(--rls-sizing-x6);
|
|
1103
|
+
font-weight: var(--rls-font-weight-bold);
|
|
1041
1104
|
}
|
|
1042
1105
|
.rls-day-picker__week {
|
|
1043
1106
|
display: flex;
|
|
1044
1107
|
}
|
|
1045
1108
|
.rls-day-picker__day {
|
|
1046
1109
|
text-align: center;
|
|
1047
|
-
padding: var(--sizing-x1);
|
|
1110
|
+
padding: var(--rls-sizing-x1);
|
|
1048
1111
|
box-sizing: border-box;
|
|
1049
1112
|
}
|
|
1050
1113
|
.rls-day-picker__day__span {
|
|
1051
1114
|
position: relative;
|
|
1052
1115
|
display: block;
|
|
1053
|
-
color: var(--color-theme-500);
|
|
1054
|
-
border-radius: var(--sizing-x4);
|
|
1055
|
-
height: var(--sizing-x18);
|
|
1056
|
-
line-height: var(--sizing-x18);
|
|
1057
|
-
margin: var(--sizing-x1) 0rem;
|
|
1058
1116
|
font-size: 7rem;
|
|
1059
|
-
font-weight: var(--font-weight-semibold);
|
|
1060
|
-
|
|
1117
|
+
font-weight: var(--rls-font-weight-semibold);
|
|
1118
|
+
margin: var(--rls-sizing-x1) 0rem;
|
|
1119
|
+
border-radius: var(--rls-sizing-x4);
|
|
1120
|
+
height: var(--rls-sizing-x18);
|
|
1121
|
+
line-height: var(--rls-sizing-x18);
|
|
1122
|
+
box-sizing: border-box;
|
|
1061
1123
|
}
|
|
1062
1124
|
.rls-day-picker__day__span:not(:hover) {
|
|
1063
|
-
|
|
1064
|
-
|
|
1125
|
+
color: var(--pvt-span-font-color);
|
|
1126
|
+
border: var(--pvt-span-border);
|
|
1127
|
+
background: var(--pvt-span-background);
|
|
1065
1128
|
}
|
|
1066
1129
|
.rls-day-picker__day__span:hover {
|
|
1067
|
-
background: var(--color-
|
|
1068
|
-
color: var(--
|
|
1130
|
+
background: var(--rls-theme-color-900);
|
|
1131
|
+
color: var(--rls-theme-font-900);
|
|
1132
|
+
border: var(--rls-theme-border-1-900);
|
|
1133
|
+
}
|
|
1134
|
+
.rls-day-picker__day--today {
|
|
1135
|
+
--pvt-span-background: transparent;
|
|
1136
|
+
--pvt-span-font-color: var(--rls-theme-color-500);
|
|
1137
|
+
--pvt-span-border: var(--rls-theme-border-1-500);
|
|
1069
1138
|
}
|
|
1070
1139
|
.rls-day-picker__day--selected {
|
|
1071
|
-
--pvt-span-
|
|
1072
|
-
|
|
1140
|
+
--pvt-span-border: var(--rls-app-border-1-300);
|
|
1141
|
+
}
|
|
1142
|
+
.rls-day-picker__day--focused {
|
|
1143
|
+
--pvt-span-background: var(--rls-theme-color-500);
|
|
1144
|
+
--pvt-span-font-color: var(--rls-theme-font-500);
|
|
1145
|
+
--pvt-span-border: var(--rls-theme-border-1-500);
|
|
1073
1146
|
}
|
|
1074
1147
|
.rls-day-picker__day--forbidden {
|
|
1075
|
-
--pvt-span-background: var(--background-
|
|
1148
|
+
--pvt-span-background: var(--rls-app-background-300);
|
|
1149
|
+
--pvt-span-font-color: var(--rls-app-color-100);
|
|
1150
|
+
--pvt-span-border: var(--rls-border-1) solid var(--rls-app-background-300);
|
|
1076
1151
|
pointer-events: none;
|
|
1077
|
-
opacity: 0.5;
|
|
1078
1152
|
}
|
|
1079
1153
|
.rls-day-picker__day--disabled {
|
|
1154
|
+
--pvt-span-background: transparent;
|
|
1155
|
+
--pvt-span-font-color: var(--rls-app-color-100);
|
|
1156
|
+
--pvt-span-border: var(--rls-border-1) solid transparent;
|
|
1080
1157
|
pointer-events: none;
|
|
1081
|
-
opacity: 0.5;
|
|
1082
1158
|
}
|
|
1083
1159
|
|
|
1084
1160
|
.rls-day-range-picker {
|
|
@@ -1090,72 +1166,72 @@
|
|
|
1090
1166
|
width: 100%;
|
|
1091
1167
|
max-width: 140rem;
|
|
1092
1168
|
flex-direction: column;
|
|
1093
|
-
row-gap: var(--sizing-x4);
|
|
1169
|
+
row-gap: var(--rls-sizing-x4);
|
|
1094
1170
|
box-sizing: border-box;
|
|
1095
1171
|
user-select: none;
|
|
1096
1172
|
}
|
|
1097
1173
|
.rls-day-range-picker__title {
|
|
1098
|
-
color: var(--color-
|
|
1174
|
+
color: var(--rls-theme-color-500);
|
|
1099
1175
|
text-align: center;
|
|
1100
|
-
padding: var(--sizing-x4) 0rem;
|
|
1101
|
-
font-size: var(--subtitle-font-size);
|
|
1102
|
-
letter-spacing: var(--subtitle-letter-spacing);
|
|
1103
|
-
line-height: var(--subtitle-line-height);
|
|
1104
|
-
font-weight: var(--font-weight-bold);
|
|
1176
|
+
padding: var(--rls-sizing-x4) 0rem;
|
|
1177
|
+
font-size: var(--rls-subtitle-font-size);
|
|
1178
|
+
letter-spacing: var(--rls-subtitle-letter-spacing);
|
|
1179
|
+
line-height: var(--rls-subtitle-line-height);
|
|
1180
|
+
font-weight: var(--rls-font-weight-bold);
|
|
1105
1181
|
}
|
|
1106
1182
|
.rls-day-range-picker__header {
|
|
1107
1183
|
display: flex;
|
|
1108
|
-
background: var(--background-
|
|
1109
|
-
color: var(--color-
|
|
1110
|
-
border-radius: var(--sizing-x2);
|
|
1184
|
+
background: var(--rls-app-background-100);
|
|
1185
|
+
color: var(--rls-app-color-500);
|
|
1186
|
+
border-radius: var(--rls-sizing-x2);
|
|
1111
1187
|
}
|
|
1112
1188
|
.rls-day-range-picker__label {
|
|
1113
|
-
padding: var(--sizing-x6) 0rem;
|
|
1189
|
+
padding: var(--rls-sizing-x6) 0rem;
|
|
1114
1190
|
text-align: center;
|
|
1115
1191
|
width: 100%;
|
|
1116
|
-
font-size: var(--sizing-x6);
|
|
1117
|
-
font-weight: var(--font-weight-bold);
|
|
1192
|
+
font-size: var(--rls-sizing-x6);
|
|
1193
|
+
font-weight: var(--rls-font-weight-bold);
|
|
1118
1194
|
}
|
|
1119
1195
|
.rls-day-range-picker__week {
|
|
1120
1196
|
display: flex;
|
|
1121
1197
|
}
|
|
1122
1198
|
.rls-day-range-picker__day {
|
|
1123
1199
|
text-align: center;
|
|
1124
|
-
padding: var(--sizing-x1);
|
|
1200
|
+
padding: var(--rls-sizing-x1);
|
|
1125
1201
|
box-sizing: border-box;
|
|
1126
1202
|
}
|
|
1127
1203
|
.rls-day-range-picker__day__span {
|
|
1128
1204
|
position: relative;
|
|
1129
1205
|
display: block;
|
|
1130
|
-
color: var(--color-
|
|
1131
|
-
border-radius: var(--sizing-x4);
|
|
1132
|
-
height: var(--sizing-x18);
|
|
1133
|
-
line-height: var(--sizing-x18);
|
|
1134
|
-
margin: var(--sizing-x1) 0rem;
|
|
1206
|
+
color: var(--rls-app-color-500);
|
|
1207
|
+
border-radius: var(--rls-sizing-x4);
|
|
1208
|
+
height: var(--rls-sizing-x18);
|
|
1209
|
+
line-height: var(--rls-sizing-x18);
|
|
1210
|
+
margin: var(--rls-sizing-x1) 0rem;
|
|
1135
1211
|
font-size: 7rem;
|
|
1136
|
-
font-weight: var(--font-weight-semibold);
|
|
1212
|
+
font-weight: var(--rls-font-weight-semibold);
|
|
1137
1213
|
}
|
|
1138
1214
|
.rls-day-range-picker__day__span:not(:hover) {
|
|
1139
1215
|
background: var(--pvt-span-nothover-background);
|
|
1140
1216
|
color: var(--pvt-span-nothover-font-color);
|
|
1141
1217
|
}
|
|
1142
1218
|
.rls-day-range-picker__day__span:hover {
|
|
1143
|
-
color: var(--
|
|
1144
|
-
background: var(--color-
|
|
1219
|
+
color: var(--rls-light-color-500);
|
|
1220
|
+
background: var(--rls-theme-color-900);
|
|
1145
1221
|
}
|
|
1146
1222
|
.rls-day-range-picker__day--end {
|
|
1147
|
-
--pvt-span-nothover-background: var(--color-
|
|
1148
|
-
--pvt-span-nothover-font-color: var(--background-
|
|
1223
|
+
--pvt-span-nothover-background: var(--rls-app-color-500);
|
|
1224
|
+
--pvt-span-nothover-font-color: var(--rls-app-background-500);
|
|
1149
1225
|
}
|
|
1150
1226
|
.rls-day-range-picker__day--source {
|
|
1151
|
-
--pvt-span-nothover-background: var(--color-
|
|
1152
|
-
--pvt-span-nothover-font-color: var(--
|
|
1227
|
+
--pvt-span-nothover-background: var(--rls-theme-color-500);
|
|
1228
|
+
--pvt-span-nothover-font-color: var(--rls-light-color-500);
|
|
1153
1229
|
}
|
|
1154
1230
|
.rls-day-range-picker__day--ranged {
|
|
1155
|
-
--pvt-span-nothover-background: var(--color-
|
|
1231
|
+
--pvt-span-nothover-background: var(--rls-theme-color-100);
|
|
1156
1232
|
}
|
|
1157
1233
|
.rls-day-range-picker__day--forbidden {
|
|
1158
|
-
--pvt-span-background: var(--background-
|
|
1234
|
+
--pvt-span-background: var(--rls-app-background-100);
|
|
1159
1235
|
pointer-events: none;
|
|
1160
1236
|
opacity: 0.5;
|
|
1161
1237
|
}
|
|
@@ -1165,52 +1241,66 @@
|
|
|
1165
1241
|
}
|
|
1166
1242
|
|
|
1167
1243
|
.rls-money-field {
|
|
1168
|
-
--
|
|
1244
|
+
--rlc-input-parent-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
|
|
1169
1245
|
position: relative;
|
|
1170
|
-
float: left;
|
|
1171
1246
|
width: 100%;
|
|
1172
1247
|
box-sizing: border-box;
|
|
1173
1248
|
}
|
|
1174
1249
|
|
|
1175
1250
|
.rls-month-picker {
|
|
1251
|
+
--pvt-component-background: transparent;
|
|
1252
|
+
--pvt-component-font-color: var(--rls-app-color-500);
|
|
1253
|
+
--pvt-component-border: var(--rls-border-1) solid transparent;
|
|
1176
1254
|
position: relative;
|
|
1177
|
-
float: left;
|
|
1178
|
-
width: 100%;
|
|
1179
|
-
max-width: 140rem;
|
|
1180
1255
|
display: grid;
|
|
1181
1256
|
grid-template-columns: repeat(3, 1fr);
|
|
1182
|
-
|
|
1183
|
-
|
|
1257
|
+
width: 100%;
|
|
1258
|
+
max-width: 140rem;
|
|
1259
|
+
column-gap: var(--rls-sizing-x2);
|
|
1260
|
+
row-gap: var(--rls-sizing-x4);
|
|
1261
|
+
padding: var(--rls-sizing-x1);
|
|
1184
1262
|
box-sizing: border-box;
|
|
1185
1263
|
}
|
|
1186
1264
|
.rls-month-picker__component {
|
|
1187
1265
|
position: relative;
|
|
1188
|
-
float: left;
|
|
1189
1266
|
display: flex;
|
|
1190
1267
|
box-sizing: border-box;
|
|
1191
|
-
|
|
1192
|
-
|
|
1193
|
-
|
|
1194
|
-
|
|
1268
|
+
justify-content: center;
|
|
1269
|
+
align-items: center;
|
|
1270
|
+
height: var(--rls-sizing-x20);
|
|
1271
|
+
border-radius: var(--rls-sizing-x4);
|
|
1272
|
+
box-sizing: border-box;
|
|
1273
|
+
}
|
|
1274
|
+
.rls-month-picker__component:not(:hover) {
|
|
1275
|
+
color: var(--pvt-component-font-color);
|
|
1276
|
+
border: var(--pvt-component-border);
|
|
1277
|
+
background: var(--pvt-component-background);
|
|
1195
1278
|
}
|
|
1196
1279
|
.rls-month-picker__component:hover {
|
|
1197
|
-
background: var(--color-
|
|
1198
|
-
color: var(--
|
|
1280
|
+
background: var(--rls-theme-color-900);
|
|
1281
|
+
color: var(--rls-theme-font-900);
|
|
1282
|
+
border: var(--rls-theme-border-1-900);
|
|
1283
|
+
}
|
|
1284
|
+
.rls-month-picker__component--selected {
|
|
1285
|
+
--pvt-component-border: var(--rls-app-border-1-300);
|
|
1199
1286
|
}
|
|
1200
|
-
.rls-month-picker__component--
|
|
1201
|
-
background: var(--color-
|
|
1202
|
-
color: var(--
|
|
1287
|
+
.rls-month-picker__component--focused {
|
|
1288
|
+
--pvt-component-background: var(--rls-theme-color-500);
|
|
1289
|
+
--pvt-component-font-color: var(--rls-theme-font-500);
|
|
1290
|
+
--pvt-component-border: var(--rls-theme-border-1-500);
|
|
1203
1291
|
}
|
|
1204
1292
|
.rls-month-picker__component--disabled {
|
|
1293
|
+
--pvt-component-background: transparent;
|
|
1294
|
+
--pvt-component-font-color: var(--rls-app-color-100);
|
|
1295
|
+
--pvt-component-border: var(--rls-border-1) solid transparent;
|
|
1205
1296
|
pointer-events: none;
|
|
1206
|
-
opacity: 0.5;
|
|
1207
1297
|
}
|
|
1208
1298
|
.rls-month-picker__span {
|
|
1209
|
-
font-
|
|
1210
|
-
|
|
1299
|
+
font-weight: var(--rls-font-weight-semibold);
|
|
1300
|
+
font-size: 6rem;
|
|
1211
1301
|
cursor: default;
|
|
1212
1302
|
pointer-events: none;
|
|
1213
|
-
|
|
1303
|
+
letter-spacing: 0.25rem;
|
|
1214
1304
|
}
|
|
1215
1305
|
|
|
1216
1306
|
.rls-month-title-picker {
|
|
@@ -1218,22 +1308,21 @@
|
|
|
1218
1308
|
justify-content: space-between;
|
|
1219
1309
|
}
|
|
1220
1310
|
.rls-month-title-picker span {
|
|
1221
|
-
color: var(--color-
|
|
1311
|
+
color: var(--rls-app-color-300);
|
|
1222
1312
|
cursor: default;
|
|
1223
1313
|
margin: auto 0rem;
|
|
1224
|
-
height: var(--sizing-x14);
|
|
1225
|
-
line-height: var(--sizing-x14);
|
|
1226
|
-
font-size: var(--sizing-x10);
|
|
1227
|
-
font-weight: var(--font-weight-bold);
|
|
1314
|
+
height: var(--rls-sizing-x14);
|
|
1315
|
+
line-height: var(--rls-sizing-x14);
|
|
1316
|
+
font-size: var(--rls-sizing-x10);
|
|
1317
|
+
font-weight: var(--rls-font-weight-bold);
|
|
1228
1318
|
}
|
|
1229
1319
|
.rls-month-title-picker span:hover {
|
|
1230
|
-
color: var(--color-
|
|
1320
|
+
color: var(--rls-theme-color-500);
|
|
1231
1321
|
}
|
|
1232
1322
|
|
|
1233
1323
|
.rls-number-field {
|
|
1234
|
-
--
|
|
1324
|
+
--rlc-input-parent-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
|
|
1235
1325
|
position: relative;
|
|
1236
|
-
float: left;
|
|
1237
1326
|
width: 100%;
|
|
1238
1327
|
box-sizing: border-box;
|
|
1239
1328
|
}
|
|
@@ -1242,49 +1331,48 @@
|
|
|
1242
1331
|
position: relative;
|
|
1243
1332
|
display: flex;
|
|
1244
1333
|
justify-content: center;
|
|
1245
|
-
float: left;
|
|
1246
1334
|
width: 100%;
|
|
1247
1335
|
overflow: hidden;
|
|
1248
|
-
height: var(--sizing-x20);
|
|
1249
|
-
padding: 0rem var(--sizing-x6);
|
|
1336
|
+
height: var(--rls-sizing-x20);
|
|
1337
|
+
padding: 0rem var(--rls-sizing-x6);
|
|
1250
1338
|
box-sizing: border-box;
|
|
1251
1339
|
}
|
|
1252
1340
|
.rls-pagination__pages {
|
|
1253
1341
|
display: flex;
|
|
1254
|
-
gap: var(--sizing-x4);
|
|
1342
|
+
gap: var(--rls-sizing-x4);
|
|
1255
1343
|
width: auto;
|
|
1256
|
-
margin: 0rem var(--sizing-x4);
|
|
1344
|
+
margin: 0rem var(--rls-sizing-x4);
|
|
1257
1345
|
}
|
|
1258
1346
|
.rls-pagination__page {
|
|
1259
|
-
background: var(--background-
|
|
1260
|
-
color: var(--color-
|
|
1347
|
+
background: var(--rls-app-background-100);
|
|
1348
|
+
color: var(--rls-app-color-500);
|
|
1261
1349
|
cursor: default;
|
|
1262
1350
|
margin: auto 0rem;
|
|
1263
1351
|
text-align: center;
|
|
1264
|
-
width: var(--sizing-x16);
|
|
1265
|
-
height: var(--sizing-x16);
|
|
1266
|
-
line-height: var(--sizing-x16);
|
|
1267
|
-
border-radius: var(--sizing-x2);
|
|
1268
|
-
font-size: var(--body-font-size);
|
|
1269
|
-
letter-spacing: var(--body-letter-spacing);
|
|
1352
|
+
width: var(--rls-sizing-x16);
|
|
1353
|
+
height: var(--rls-sizing-x16);
|
|
1354
|
+
line-height: var(--rls-sizing-x16);
|
|
1355
|
+
border-radius: var(--rls-sizing-x2);
|
|
1356
|
+
font-size: var(--rls-body-font-size);
|
|
1357
|
+
letter-spacing: var(--rls-body-letter-spacing);
|
|
1270
1358
|
}
|
|
1271
1359
|
.rls-pagination__page:hover {
|
|
1272
|
-
background: var(--color-
|
|
1273
|
-
color: var(--color-
|
|
1360
|
+
background: var(--rls-theme-color-300);
|
|
1361
|
+
color: var(--rls-theme-color-900);
|
|
1274
1362
|
}
|
|
1275
1363
|
.rls-pagination__page--active {
|
|
1276
|
-
background: var(--gradient-
|
|
1277
|
-
color: var(--
|
|
1364
|
+
background: var(--rls-theme-gradient-500);
|
|
1365
|
+
color: var(--rls-light-color-500);
|
|
1278
1366
|
}
|
|
1279
1367
|
.rls-pagination__description {
|
|
1280
|
-
color: var(--color-
|
|
1281
|
-
margin: 0rem var(--sizing-x4);
|
|
1368
|
+
color: var(--rls-app-color-500);
|
|
1369
|
+
margin: 0rem var(--rls-sizing-x4);
|
|
1282
1370
|
width: auto;
|
|
1283
|
-
height: var(--sizing-x20);
|
|
1284
|
-
line-height: var(--sizing-x20);
|
|
1285
|
-
font-size: var(--body-font-size);
|
|
1286
|
-
font-weight: var(--font-weight-bold);
|
|
1287
|
-
letter-spacing: var(--body-letter-spacing);
|
|
1371
|
+
height: var(--rls-sizing-x20);
|
|
1372
|
+
line-height: var(--rls-sizing-x20);
|
|
1373
|
+
font-size: var(--rls-body-font-size);
|
|
1374
|
+
font-weight: var(--rls-font-weight-bold);
|
|
1375
|
+
letter-spacing: var(--rls-body-letter-spacing);
|
|
1288
1376
|
}
|
|
1289
1377
|
.rls-pagination__actions {
|
|
1290
1378
|
width: auto;
|
|
@@ -1292,14 +1380,14 @@
|
|
|
1292
1380
|
.rls-pagination__action {
|
|
1293
1381
|
background: none;
|
|
1294
1382
|
outline: none;
|
|
1295
|
-
color: var(--color-
|
|
1296
|
-
height: var(--sizing-x18);
|
|
1297
|
-
width: var(--sizing-x18);
|
|
1298
|
-
padding: var(--sizing-x3);
|
|
1299
|
-
margin: var(--sizing-x1) 0rem;
|
|
1383
|
+
color: var(--rls-app-color-300);
|
|
1384
|
+
height: var(--rls-sizing-x18);
|
|
1385
|
+
width: var(--rls-sizing-x18);
|
|
1386
|
+
padding: var(--rls-sizing-x3);
|
|
1387
|
+
margin: var(--rls-sizing-x1) 0rem;
|
|
1300
1388
|
}
|
|
1301
1389
|
.rls-pagination__action:hover {
|
|
1302
|
-
color: var(--color-
|
|
1390
|
+
color: var(--rls-theme-color-300);
|
|
1303
1391
|
cursor: pointer;
|
|
1304
1392
|
}
|
|
1305
1393
|
.rls-pagination__action:disabled {
|
|
@@ -1308,26 +1396,24 @@
|
|
|
1308
1396
|
}
|
|
1309
1397
|
|
|
1310
1398
|
.rls-password-field {
|
|
1311
|
-
--
|
|
1312
|
-
--
|
|
1313
|
-
--
|
|
1399
|
+
--rlc-input-parent-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
|
|
1400
|
+
--rlc-action-ripple-dimension: var(--rls-sizing-x16);
|
|
1401
|
+
--rlc-action-ripple-position: -8rem;
|
|
1314
1402
|
position: relative;
|
|
1315
|
-
float: left;
|
|
1316
1403
|
width: 100%;
|
|
1317
1404
|
box-sizing: border-box;
|
|
1318
1405
|
}
|
|
1319
1406
|
.rls-password-field .rls-button-action {
|
|
1320
|
-
margin: auto var(--sizing-x2) auto 0rem;
|
|
1407
|
+
margin: auto var(--rls-sizing-x2) auto 0rem;
|
|
1321
1408
|
}
|
|
1322
1409
|
|
|
1323
1410
|
.rls-radiobutton-label {
|
|
1324
1411
|
--pvt-text-opacity: 1;
|
|
1325
|
-
--pvt-text-height: var(--sizing-x12);
|
|
1412
|
+
--pvt-text-height: var(--rls-sizing-x12);
|
|
1326
1413
|
--pvt-text-overflow: hidden;
|
|
1327
1414
|
--pvt-text-white-space: nowrap;
|
|
1328
1415
|
--pvt-text-text-overflow: ellipsis;
|
|
1329
1416
|
position: relative;
|
|
1330
|
-
float: left;
|
|
1331
1417
|
width: 100%;
|
|
1332
1418
|
display: flex;
|
|
1333
1419
|
}
|
|
@@ -1342,18 +1428,17 @@
|
|
|
1342
1428
|
--pvt-text-height: auto;
|
|
1343
1429
|
}
|
|
1344
1430
|
.rls-radiobutton-label__component {
|
|
1345
|
-
margin-right: var(--sizing-x4);
|
|
1431
|
+
margin-right: var(--rls-sizing-x4);
|
|
1346
1432
|
width: auto;
|
|
1347
1433
|
}
|
|
1348
1434
|
.rls-radiobutton-label__text {
|
|
1349
|
-
|
|
1350
|
-
max-width: calc(100% - var(--sizing-x16));
|
|
1435
|
+
max-width: calc(100% - var(--rls-sizing-x16));
|
|
1351
1436
|
height: var(--pvt-text-height);
|
|
1352
|
-
line-height: var(--sizing-x12);
|
|
1353
|
-
color: var(--color-
|
|
1354
|
-
font-size: var(--label-font-size);
|
|
1355
|
-
font-weight: var(--font-weight-medium);
|
|
1356
|
-
letter-spacing: var(--label-letter-spacing);
|
|
1437
|
+
line-height: var(--rls-sizing-x12);
|
|
1438
|
+
color: var(--rls-app-color-300);
|
|
1439
|
+
font-size: var(--rls-label-font-size);
|
|
1440
|
+
font-weight: var(--rls-font-weight-medium);
|
|
1441
|
+
letter-spacing: var(--rls-label-letter-spacing);
|
|
1357
1442
|
user-select: none;
|
|
1358
1443
|
opacity: var(--pvt-text-opacity);
|
|
1359
1444
|
overflow: var(--pvt-text-overflow);
|
|
@@ -1363,12 +1448,12 @@
|
|
|
1363
1448
|
|
|
1364
1449
|
.rls-switch-label {
|
|
1365
1450
|
--pvt-text-opacity: 1;
|
|
1366
|
-
--pvt-text-height: var(--sizing-x12);
|
|
1451
|
+
--pvt-text-height: var(--rls-sizing-x12);
|
|
1367
1452
|
--pvt-text-overflow: hidden;
|
|
1368
1453
|
--pvt-text-white-space: nowrap;
|
|
1369
1454
|
--pvt-text-text-overflow: ellipsis;
|
|
1370
1455
|
display: flex;
|
|
1371
|
-
column-gap: var(--sizing-x4);
|
|
1456
|
+
column-gap: var(--rls-sizing-x4);
|
|
1372
1457
|
}
|
|
1373
1458
|
.rls-switch-label--disabled {
|
|
1374
1459
|
--pvt-text-opacity: 0.5;
|
|
@@ -1384,14 +1469,13 @@
|
|
|
1384
1469
|
max-width: 20rem;
|
|
1385
1470
|
}
|
|
1386
1471
|
.rls-switch-label__text {
|
|
1387
|
-
|
|
1388
|
-
max-width: calc(100% - var(--sizing-x28));
|
|
1472
|
+
max-width: calc(100% - var(--rls-sizing-x28));
|
|
1389
1473
|
height: var(--pvt-text-height);
|
|
1390
|
-
line-height: var(--sizing-x12);
|
|
1391
|
-
color: var(--color-
|
|
1392
|
-
font-size: var(--label-font-size);
|
|
1393
|
-
font-weight: var(--font-weight-medium);
|
|
1394
|
-
letter-spacing: var(--label-letter-spacing);
|
|
1474
|
+
line-height: var(--rls-sizing-x12);
|
|
1475
|
+
color: var(--rls-app-color-300);
|
|
1476
|
+
font-size: var(--rls-label-font-size);
|
|
1477
|
+
font-weight: var(--rls-font-weight-medium);
|
|
1478
|
+
letter-spacing: var(--rls-label-letter-spacing);
|
|
1395
1479
|
user-select: none;
|
|
1396
1480
|
opacity: var(--pvt-text-opacity);
|
|
1397
1481
|
overflow: var(--pvt-text-overflow);
|
|
@@ -1400,9 +1484,8 @@
|
|
|
1400
1484
|
}
|
|
1401
1485
|
|
|
1402
1486
|
.rls-text-field {
|
|
1403
|
-
--
|
|
1487
|
+
--rlc-input-parent-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
|
|
1404
1488
|
position: relative;
|
|
1405
|
-
float: left;
|
|
1406
1489
|
width: 100%;
|
|
1407
1490
|
box-sizing: border-box;
|
|
1408
1491
|
}
|
|
@@ -1411,8 +1494,8 @@
|
|
|
1411
1494
|
display: flex;
|
|
1412
1495
|
justify-content: space-between;
|
|
1413
1496
|
align-items: center;
|
|
1414
|
-
column-gap: var(--sizing-x6);
|
|
1415
|
-
height: var(--
|
|
1497
|
+
column-gap: var(--rls-sizing-x6);
|
|
1498
|
+
height: var(--rlc-toolbar-height);
|
|
1416
1499
|
}
|
|
1417
1500
|
.rls-toolbar > * {
|
|
1418
1501
|
width: auto;
|
|
@@ -1420,7 +1503,7 @@
|
|
|
1420
1503
|
.rls-toolbar__description {
|
|
1421
1504
|
display: flex;
|
|
1422
1505
|
flex-direction: column;
|
|
1423
|
-
row-gap: var(--sizing-x2);
|
|
1506
|
+
row-gap: var(--rls-sizing-x2);
|
|
1424
1507
|
overflow: hidden;
|
|
1425
1508
|
}
|
|
1426
1509
|
.rls-toolbar__description > label {
|
|
@@ -1431,26 +1514,28 @@
|
|
|
1431
1514
|
white-space: nowrap;
|
|
1432
1515
|
}
|
|
1433
1516
|
.rls-toolbar__title {
|
|
1434
|
-
color: var(--color-
|
|
1435
|
-
height: var(--sizing-x12);
|
|
1436
|
-
line-height: var(--sizing-x12);
|
|
1517
|
+
color: var(--rls-app-color-500);
|
|
1518
|
+
height: var(--rls-sizing-x12);
|
|
1519
|
+
line-height: var(--rls-sizing-x12);
|
|
1437
1520
|
font-size: 8.125rem;
|
|
1438
|
-
letter-spacing: var(--label-letter-spacing);
|
|
1439
|
-
font-weight: var(--font-weight-bold);
|
|
1521
|
+
letter-spacing: var(--rls-label-letter-spacing);
|
|
1522
|
+
font-weight: var(--rls-font-weight-bold);
|
|
1440
1523
|
}
|
|
1441
1524
|
.rls-toolbar__subtitle {
|
|
1442
|
-
color: var(--color-
|
|
1525
|
+
color: var(--rls-app-color-300);
|
|
1443
1526
|
}
|
|
1444
1527
|
.rls-toolbar__actions {
|
|
1445
1528
|
display: flex;
|
|
1446
1529
|
box-sizing: border-box;
|
|
1447
|
-
column-gap: var(--sizing-x8);
|
|
1530
|
+
column-gap: var(--rls-sizing-x8);
|
|
1448
1531
|
align-items: center;
|
|
1449
1532
|
}
|
|
1450
1533
|
|
|
1451
1534
|
.rls-year-picker {
|
|
1535
|
+
--pvt-component-background: transparent;
|
|
1536
|
+
--pvt-component-font-color: var(--rls-app-color-500);
|
|
1537
|
+
--pvt-component-border: var(--rls-border-1) solid transparent;
|
|
1452
1538
|
position: relative;
|
|
1453
|
-
float: left;
|
|
1454
1539
|
width: 100%;
|
|
1455
1540
|
max-width: 140rem;
|
|
1456
1541
|
box-sizing: border-box;
|
|
@@ -1462,24 +1547,25 @@
|
|
|
1462
1547
|
justify-content: space-between;
|
|
1463
1548
|
align-items: center;
|
|
1464
1549
|
box-sizing: border-box;
|
|
1465
|
-
padding: var(--sizing-x4) var(--sizing-x6);
|
|
1466
|
-
color: var(--color-
|
|
1467
|
-
background: var(--background-
|
|
1550
|
+
padding: var(--rls-sizing-x4) var(--rls-sizing-x6);
|
|
1551
|
+
color: var(--rls-app-color-500);
|
|
1552
|
+
background: var(--rls-app-background-100);
|
|
1553
|
+
border-radius: var(--rls-sizing-x4);
|
|
1468
1554
|
}
|
|
1469
1555
|
.rls-year-picker__action {
|
|
1470
|
-
width: var(--sizing-x16);
|
|
1471
|
-
height: var(--sizing-x16);
|
|
1472
|
-
line-height: var(--sizing-x16);
|
|
1556
|
+
width: var(--rls-sizing-x16);
|
|
1557
|
+
height: var(--rls-sizing-x16);
|
|
1558
|
+
line-height: var(--rls-sizing-x16);
|
|
1473
1559
|
}
|
|
1474
1560
|
.rls-year-picker__action button {
|
|
1475
|
-
color: var(--color-
|
|
1561
|
+
color: var(--rls-app-color-500);
|
|
1476
1562
|
background: transparent;
|
|
1477
1563
|
outline: none;
|
|
1478
1564
|
width: inherit;
|
|
1479
1565
|
height: inherit;
|
|
1480
1566
|
}
|
|
1481
|
-
.rls-year-picker__action button:hover {
|
|
1482
|
-
color: var(--color-
|
|
1567
|
+
.rls-year-picker__action button:not(:disabled):hover {
|
|
1568
|
+
color: var(--rls-theme-color-500);
|
|
1483
1569
|
}
|
|
1484
1570
|
.rls-year-picker__action button:disabled {
|
|
1485
1571
|
opacity: 0.5;
|
|
@@ -1487,42 +1573,53 @@
|
|
|
1487
1573
|
.rls-year-picker__component {
|
|
1488
1574
|
position: relative;
|
|
1489
1575
|
display: grid;
|
|
1490
|
-
grid-template-columns: repeat(3, 1fr);
|
|
1491
|
-
gap: var(--sizing-x4);
|
|
1492
1576
|
width: 100%;
|
|
1493
|
-
|
|
1494
|
-
padding: var(--sizing-x4);
|
|
1577
|
+
grid-template-columns: repeat(3, 1fr);
|
|
1578
|
+
padding: var(--rls-sizing-x4);
|
|
1495
1579
|
box-sizing: border-box;
|
|
1580
|
+
row-gap: var(--rls-sizing-x6);
|
|
1581
|
+
column-gap: var(--rls-sizing-x8);
|
|
1496
1582
|
}
|
|
1497
1583
|
.rls-year-picker__year {
|
|
1498
1584
|
position: relative;
|
|
1499
|
-
float: left;
|
|
1500
1585
|
display: flex;
|
|
1586
|
+
align-items: center;
|
|
1587
|
+
justify-content: center;
|
|
1501
1588
|
box-sizing: border-box;
|
|
1502
1589
|
text-align: center;
|
|
1503
|
-
height: var(--sizing-
|
|
1504
|
-
border-radius: var(--sizing-x4);
|
|
1505
|
-
|
|
1590
|
+
height: var(--rls-sizing-x20);
|
|
1591
|
+
border-radius: var(--rls-sizing-x4);
|
|
1592
|
+
}
|
|
1593
|
+
.rls-year-picker__year:not(:hover) {
|
|
1594
|
+
color: var(--pvt-component-font-color);
|
|
1595
|
+
border: var(--pvt-component-border);
|
|
1596
|
+
background: var(--pvt-component-background);
|
|
1506
1597
|
}
|
|
1507
1598
|
.rls-year-picker__year:hover {
|
|
1508
|
-
background: var(--color-
|
|
1509
|
-
color: var(--
|
|
1599
|
+
background: var(--rls-theme-color-900);
|
|
1600
|
+
color: var(--rls-theme-font-900);
|
|
1601
|
+
border: var(--rls-theme-border-1-900);
|
|
1510
1602
|
}
|
|
1511
|
-
.rls-year-picker__year--selected
|
|
1512
|
-
|
|
1513
|
-
|
|
1603
|
+
.rls-year-picker__year--selected {
|
|
1604
|
+
--pvt-component-border: var(--rls-app-border-1-300);
|
|
1605
|
+
}
|
|
1606
|
+
.rls-year-picker__year--focused {
|
|
1607
|
+
--pvt-component-background: var(--rls-theme-color-500);
|
|
1608
|
+
--pvt-component-font-color: var(--rls-theme-font-500);
|
|
1609
|
+
--pvt-component-border: var(--rls-theme-border-1-500);
|
|
1514
1610
|
}
|
|
1515
1611
|
.rls-year-picker__year--disabled {
|
|
1612
|
+
--pvt-span-background: var(--rls-app-background-300);
|
|
1613
|
+
--pvt-component-font-color: var(--rls-app-color-100);
|
|
1614
|
+
--pvt-span-border: var(--rls-border-1) solid var(--rls-app-background-300);
|
|
1516
1615
|
pointer-events: none;
|
|
1517
|
-
border: none;
|
|
1518
|
-
opacity: 0.5;
|
|
1519
1616
|
}
|
|
1520
1617
|
.rls-year-picker__year__span {
|
|
1521
|
-
font-
|
|
1522
|
-
|
|
1618
|
+
font-weight: var(--rls-font-weight-semibold);
|
|
1619
|
+
font-size: var(--rls-sizing-x8);
|
|
1523
1620
|
cursor: default;
|
|
1524
1621
|
pointer-events: none;
|
|
1525
|
-
|
|
1622
|
+
letter-spacing: 0.325rem;
|
|
1526
1623
|
}
|
|
1527
1624
|
|
|
1528
1625
|
.rls-autocomplete-field {
|
|
@@ -1530,7 +1627,7 @@
|
|
|
1530
1627
|
--pvt-control-opacity: 1;
|
|
1531
1628
|
}
|
|
1532
1629
|
.rls-autocomplete-field.rls-box-field--selected {
|
|
1533
|
-
--pvt-control-width: calc(100% - var(--sizing-x14));
|
|
1630
|
+
--pvt-control-width: calc(100% - var(--rls-sizing-x14));
|
|
1534
1631
|
}
|
|
1535
1632
|
.rls-autocomplete-field.rls-box-field--disabled {
|
|
1536
1633
|
--pvt-control-opacity: 0.5;
|
|
@@ -1546,72 +1643,72 @@
|
|
|
1546
1643
|
display: flex;
|
|
1547
1644
|
align-items: center;
|
|
1548
1645
|
width: 100%;
|
|
1549
|
-
margin-top: var(--sizing-x2);
|
|
1550
|
-
margin-bottom: var(--sizing-x6);
|
|
1551
|
-
background: var(--background-
|
|
1552
|
-
border-radius: var(--sizing-x4);
|
|
1553
|
-
padding: var(--sizing-x4);
|
|
1646
|
+
margin-top: var(--rls-sizing-x2);
|
|
1647
|
+
margin-bottom: var(--rls-sizing-x6);
|
|
1648
|
+
background: var(--rls-app-background-300);
|
|
1649
|
+
border-radius: var(--rls-sizing-x4);
|
|
1650
|
+
padding: var(--rls-sizing-x4);
|
|
1554
1651
|
box-sizing: border-box;
|
|
1555
1652
|
}
|
|
1556
1653
|
.rls-autocomplete-field .rls-list-field__ul__search button {
|
|
1557
|
-
color: var(--color-
|
|
1654
|
+
color: var(--rls-app-color-300);
|
|
1558
1655
|
background: transparent;
|
|
1559
1656
|
}
|
|
1560
1657
|
.rls-autocomplete-field
|
|
1561
1658
|
.rls-list-field__ul__search
|
|
1562
1659
|
button:not(:disabled):hover {
|
|
1563
|
-
color: var(--color-
|
|
1660
|
+
color: var(--rls-theme-color-300);
|
|
1564
1661
|
}
|
|
1565
1662
|
.rls-autocomplete-field .rls-list-field__ul__search button:disabled {
|
|
1566
1663
|
opacity: 0.5;
|
|
1567
1664
|
}
|
|
1568
1665
|
.rls-autocomplete-field .rls-list-field__ul__control {
|
|
1569
1666
|
width: 100%;
|
|
1570
|
-
height: var(--sizing-x12);
|
|
1571
|
-
line-height: var(--sizing-x12);
|
|
1667
|
+
height: var(--rls-sizing-x12);
|
|
1668
|
+
line-height: var(--rls-sizing-x12);
|
|
1572
1669
|
padding: 0rem;
|
|
1573
1670
|
cursor: text;
|
|
1574
1671
|
border: none;
|
|
1575
1672
|
outline: none;
|
|
1576
1673
|
background: transparent;
|
|
1577
|
-
color: var(--color-
|
|
1578
|
-
font-size: var(--input-font-size);
|
|
1579
|
-
font-weight: var(--font-weight-medium);
|
|
1580
|
-
letter-spacing: var(--input-letter-spacing);
|
|
1674
|
+
color: var(--rls-app-color-500);
|
|
1675
|
+
font-size: var(--rls-input-font-size);
|
|
1676
|
+
font-weight: var(--rls-font-weight-medium);
|
|
1677
|
+
letter-spacing: var(--rls-input-letter-spacing);
|
|
1581
1678
|
}
|
|
1582
1679
|
.rls-autocomplete-field .rls-list-field__ul__control::placeholder {
|
|
1583
|
-
color: var(--color-
|
|
1680
|
+
color: var(--rls-app-color-100);
|
|
1584
1681
|
}
|
|
1585
1682
|
.rls-autocomplete-field .rls-list-field__ul__control::selection {
|
|
1586
|
-
background: var(--color-
|
|
1587
|
-
color: var(--
|
|
1683
|
+
background: var(--rls-theme-color-700);
|
|
1684
|
+
color: var(--rls-light-color-500);
|
|
1588
1685
|
}
|
|
1589
1686
|
.rls-autocomplete-field .rls-list-field__ul__control:disabled {
|
|
1590
1687
|
opacity: 0.5;
|
|
1591
1688
|
}
|
|
1592
1689
|
.rls-autocomplete-field .rls-list-field__ul .rls-progress-bar {
|
|
1593
|
-
margin-bottom: var(--sizing-x8);
|
|
1690
|
+
margin-bottom: var(--rls-sizing-x8);
|
|
1594
1691
|
}
|
|
1595
1692
|
.rls-autocomplete-field .rls-list-field__element .rls-ballot__title label {
|
|
1596
|
-
background: var(--color-
|
|
1597
|
-
color: var(--color-
|
|
1598
|
-
padding: 0rem var(--sizing-x2);
|
|
1599
|
-
border-radius: var(--sizing-x2);
|
|
1693
|
+
background: var(--rls-theme-color-100);
|
|
1694
|
+
color: var(--rls-theme-color-500);
|
|
1695
|
+
padding: 0rem var(--rls-sizing-x2);
|
|
1696
|
+
border-radius: var(--rls-sizing-x2);
|
|
1600
1697
|
}
|
|
1601
1698
|
|
|
1602
1699
|
.rls-card {
|
|
1603
|
-
background: var(--background-
|
|
1604
|
-
border-radius: var(--sizing-x4);
|
|
1605
|
-
box-shadow: var(--shadow-center-
|
|
1700
|
+
background: var(--rls-app-background-500);
|
|
1701
|
+
border-radius: var(--rls-sizing-x4);
|
|
1702
|
+
box-shadow: var(--rls-light-shadow-center-8);
|
|
1606
1703
|
}
|
|
1607
1704
|
.rls-card--outline {
|
|
1608
|
-
border: var(--border-1-
|
|
1705
|
+
border: var(--rls-app-border-1-100);
|
|
1609
1706
|
box-shadow: none;
|
|
1610
1707
|
}
|
|
1611
1708
|
.rls-card__content {
|
|
1612
1709
|
display: flex;
|
|
1613
1710
|
flex-direction: column;
|
|
1614
|
-
padding: var(--
|
|
1711
|
+
padding: var(--rlc-card-content-padding);
|
|
1615
1712
|
box-sizing: border-box;
|
|
1616
1713
|
}
|
|
1617
1714
|
|
|
@@ -1620,13 +1717,13 @@
|
|
|
1620
1717
|
--pvt-component-height: 0rem;
|
|
1621
1718
|
--pvt-component-opacity: 0;
|
|
1622
1719
|
--pvt-component-visibility: hidden;
|
|
1623
|
-
--pvt-title-font-size: var(--heading5-font-size);
|
|
1624
|
-
--pvt-title-letter-spacing: var(--heading5-letter-spacing);
|
|
1625
|
-
--pvt-title-line-height: var(--heading5-line-height);
|
|
1720
|
+
--pvt-title-font-size: var(--rls-heading5-font-size);
|
|
1721
|
+
--pvt-title-letter-spacing: var(--rls-heading5-letter-spacing);
|
|
1722
|
+
--pvt-title-line-height: var(--rls-heading5-line-height);
|
|
1626
1723
|
--pvt-title-text-transform: initial;
|
|
1627
|
-
--pvt-subtitle-font-size: var(--body-font-size);
|
|
1628
|
-
--pvt-subtitle-letter-spacing: var(--body-letter-spacing);
|
|
1629
|
-
--pvt-subtitle-line-height: var(--body-line-height);
|
|
1724
|
+
--pvt-subtitle-font-size: var(--rls-body-font-size);
|
|
1725
|
+
--pvt-subtitle-letter-spacing: var(--rls-body-letter-spacing);
|
|
1726
|
+
--pvt-subtitle-line-height: var(--rls-body-line-height);
|
|
1630
1727
|
--pvt-subtitle-text-transform: initial;
|
|
1631
1728
|
--pvt-content-font-size: 7.4rem;
|
|
1632
1729
|
--pvt-content-letter-spacing: 0.05em;
|
|
@@ -1641,7 +1738,7 @@
|
|
|
1641
1738
|
left: 0rem;
|
|
1642
1739
|
width: 100vw;
|
|
1643
1740
|
height: 100vh;
|
|
1644
|
-
z-index: var(--z-index-24);
|
|
1741
|
+
z-index: var(--rls-z-index-24);
|
|
1645
1742
|
visibility: hidden;
|
|
1646
1743
|
}
|
|
1647
1744
|
.rls-confirmation--visible {
|
|
@@ -1657,37 +1754,37 @@
|
|
|
1657
1754
|
position: absolute;
|
|
1658
1755
|
display: flex;
|
|
1659
1756
|
flex-direction: column;
|
|
1660
|
-
row-gap: var(--sizing-x8);
|
|
1661
|
-
width: calc(100% - var(--sizing-x16));
|
|
1757
|
+
row-gap: var(--rls-sizing-x8);
|
|
1758
|
+
width: calc(100% - var(--rls-sizing-x16));
|
|
1662
1759
|
max-width: 280rem;
|
|
1663
1760
|
height: var(--pvt-component-height);
|
|
1664
1761
|
opacity: var(--pvt-component-opacity);
|
|
1665
1762
|
visibility: var(--pvt-component-visibility);
|
|
1666
|
-
padding: var(--sizing-x8) 0rem;
|
|
1763
|
+
padding: var(--rls-sizing-x8) 0rem;
|
|
1667
1764
|
box-sizing: border-box;
|
|
1668
|
-
z-index: var(--z-index-2);
|
|
1669
|
-
border-radius: var(--sizing-x4);
|
|
1670
|
-
background: var(--background-
|
|
1671
|
-
box-shadow: var(--shadow-4);
|
|
1765
|
+
z-index: var(--rls-z-index-2);
|
|
1766
|
+
border-radius: var(--rls-sizing-x4);
|
|
1767
|
+
background: var(--rls-app-background-500);
|
|
1768
|
+
box-shadow: var(--rls-app-shadow-4);
|
|
1672
1769
|
will-change: transform;
|
|
1673
1770
|
transform: var(--pvt-component-transform);
|
|
1674
|
-
transition: opacity 125ms 0ms var(--deceleration-curve),
|
|
1675
|
-
transform 125ms 0ms var(--deceleration-curve),
|
|
1676
|
-
visibility 125ms 0ms var(--deceleration-curve);
|
|
1771
|
+
transition: opacity 125ms 0ms var(--rls-deceleration-curve),
|
|
1772
|
+
transform 125ms 0ms var(--rls-deceleration-curve),
|
|
1773
|
+
visibility 125ms 0ms var(--rls-deceleration-curve);
|
|
1677
1774
|
}
|
|
1678
1775
|
.rls-confirmation__header {
|
|
1679
1776
|
position: relative;
|
|
1680
1777
|
display: flex;
|
|
1681
1778
|
flex-direction: column;
|
|
1682
|
-
row-gap: var(--sizing-x2);
|
|
1779
|
+
row-gap: var(--rls-sizing-x2);
|
|
1683
1780
|
width: 100%;
|
|
1684
|
-
padding: 0rem var(--sizing-x8);
|
|
1781
|
+
padding: 0rem var(--rls-sizing-x8);
|
|
1685
1782
|
box-sizing: border-box;
|
|
1686
1783
|
}
|
|
1687
1784
|
.rls-confirmation__header__title {
|
|
1688
1785
|
text-align: center;
|
|
1689
|
-
color: var(--color-
|
|
1690
|
-
font-weight: var(--font-weight-bold);
|
|
1786
|
+
color: var(--rls-app-color-500);
|
|
1787
|
+
font-weight: var(--rls-font-weight-bold);
|
|
1691
1788
|
font-size: var(--pvt-title-font-size);
|
|
1692
1789
|
line-height: var(--pvt-title-line-height);
|
|
1693
1790
|
letter-spacing: var(--pvt-title-letter-spacing);
|
|
@@ -1695,8 +1792,8 @@
|
|
|
1695
1792
|
}
|
|
1696
1793
|
.rls-confirmation__header__subtitle {
|
|
1697
1794
|
text-align: center;
|
|
1698
|
-
color: var(--color-
|
|
1699
|
-
font-weight: var(--font-weight-bold);
|
|
1795
|
+
color: var(--rls-theme-color-300);
|
|
1796
|
+
font-weight: var(--rls-font-weight-bold);
|
|
1700
1797
|
font-size: var(--pvt-subtitle-font-size);
|
|
1701
1798
|
line-height: var(--pvt-subtitle-line-height);
|
|
1702
1799
|
letter-spacing: var(--pvt-subtitle-letter-spacing);
|
|
@@ -1705,15 +1802,15 @@
|
|
|
1705
1802
|
.rls-confirmation__body {
|
|
1706
1803
|
position: relative;
|
|
1707
1804
|
width: 100%;
|
|
1708
|
-
padding: 0rem var(--sizing-x8);
|
|
1805
|
+
padding: 0rem var(--rls-sizing-x8);
|
|
1709
1806
|
box-sizing: border-box;
|
|
1710
1807
|
}
|
|
1711
1808
|
.rls-confirmation__body__content {
|
|
1712
|
-
color: var(--color-
|
|
1809
|
+
color: var(--rls-app-color-300);
|
|
1713
1810
|
text-align: center;
|
|
1714
1811
|
}
|
|
1715
1812
|
.rls-confirmation__body__content p {
|
|
1716
|
-
font-weight: var(--font-weight-medium);
|
|
1813
|
+
font-weight: var(--rls-font-weight-medium);
|
|
1717
1814
|
font-size: var(--pvt-content-font-size);
|
|
1718
1815
|
line-height: var(--pvt-content-line-height);
|
|
1719
1816
|
letter-spacing: var(--pvt-content-letter-spacing);
|
|
@@ -1721,7 +1818,7 @@
|
|
|
1721
1818
|
.rls-confirmation__footer {
|
|
1722
1819
|
position: relative;
|
|
1723
1820
|
width: 100%;
|
|
1724
|
-
padding: var(--sizing-x4) var(--sizing-x8) 0rem var(--sizing-x8);
|
|
1821
|
+
padding: var(--rls-sizing-x4) var(--rls-sizing-x8) 0rem var(--rls-sizing-x8);
|
|
1725
1822
|
box-sizing: border-box;
|
|
1726
1823
|
}
|
|
1727
1824
|
.rls-confirmation__footer__actions {
|
|
@@ -1730,7 +1827,7 @@
|
|
|
1730
1827
|
display: flex;
|
|
1731
1828
|
flex-direction: row-reverse;
|
|
1732
1829
|
justify-content: center;
|
|
1733
|
-
column-gap: var(--sizing-x8);
|
|
1830
|
+
column-gap: var(--rls-sizing-x8);
|
|
1734
1831
|
}
|
|
1735
1832
|
.rls-confirmation__backdrop {
|
|
1736
1833
|
position: absolute;
|
|
@@ -1742,26 +1839,26 @@
|
|
|
1742
1839
|
opacity: var(--pvt-backdrop-opacity);
|
|
1743
1840
|
z-index: 1;
|
|
1744
1841
|
will-change: opacity;
|
|
1745
|
-
background: var(--backdrop-
|
|
1842
|
+
background: var(--rls-theme-backdrop-900);
|
|
1746
1843
|
backdrop-filter: blur(2px);
|
|
1747
|
-
transition: opacity 120ms 0ms var(--deceleration-curve),
|
|
1748
|
-
bottom 120ms 0ms var(--deceleration-curve);
|
|
1844
|
+
transition: opacity 120ms 0ms var(--rls-deceleration-curve),
|
|
1845
|
+
bottom 120ms 0ms var(--rls-deceleration-curve);
|
|
1749
1846
|
}
|
|
1750
1847
|
|
|
1751
1848
|
@media screen and (max-width: 480px) {
|
|
1752
1849
|
.rls-confirmation {
|
|
1753
|
-
--pvt-title-font-size: var(--title-font-size);
|
|
1754
|
-
--pvt-title-letter-spacing: var(--title-letter-spacing);
|
|
1755
|
-
--pvt-title-line-height: var(--title-line-height);
|
|
1756
|
-
--pvt-subtitle-font-size: var(--smalltext-font-size);
|
|
1757
|
-
--pvt-subtitle-letter-spacing: var(--smalltext-letter-spacing);
|
|
1758
|
-
--pvt-subtitle-line-height: var(--smalltext-line-height);
|
|
1850
|
+
--pvt-title-font-size: var(--rls-title-font-size);
|
|
1851
|
+
--pvt-title-letter-spacing: var(--rls-title-letter-spacing);
|
|
1852
|
+
--pvt-title-line-height: var(--rls-title-line-height);
|
|
1853
|
+
--pvt-subtitle-font-size: var(--rls-smalltext-font-size);
|
|
1854
|
+
--pvt-subtitle-letter-spacing: var(--rls-smalltext-letter-spacing);
|
|
1855
|
+
--pvt-subtitle-line-height: var(--rls-smalltext-line-height);
|
|
1759
1856
|
--pvt-content-font-size: 7.325rem;
|
|
1760
1857
|
}
|
|
1761
1858
|
.rls-confirmation__footer__actions {
|
|
1762
1859
|
flex-direction: column-reverse;
|
|
1763
1860
|
column-gap: 0rem;
|
|
1764
|
-
row-gap: var(--sizing-x8);
|
|
1861
|
+
row-gap: var(--rls-sizing-x8);
|
|
1765
1862
|
}
|
|
1766
1863
|
}
|
|
1767
1864
|
|
|
@@ -1769,45 +1866,50 @@
|
|
|
1769
1866
|
position: relative;
|
|
1770
1867
|
display: flex;
|
|
1771
1868
|
flex-direction: column;
|
|
1772
|
-
overflow: hidden;
|
|
1773
1869
|
max-width: 150rem;
|
|
1870
|
+
overflow: hidden;
|
|
1871
|
+
row-gap: var(--rls-sizing-x4);
|
|
1774
1872
|
}
|
|
1775
1873
|
.rls-date-picker__header {
|
|
1776
|
-
|
|
1777
|
-
|
|
1874
|
+
display: flex;
|
|
1875
|
+
flex-direction: column;
|
|
1876
|
+
row-gap: var(--rls-sizing-x4);
|
|
1877
|
+
padding: var(--rls-sizing-x4);
|
|
1878
|
+
box-sizing: border-box;
|
|
1879
|
+
background: var(--rls-theme-color-100);
|
|
1880
|
+
}
|
|
1881
|
+
.rls-date-picker__header .rls-month-title-picker {
|
|
1882
|
+
padding: 0rem var(--rls-sizing-x6);
|
|
1778
1883
|
box-sizing: border-box;
|
|
1779
|
-
margin-bottom: var(--sizing-x8);
|
|
1780
1884
|
}
|
|
1781
1885
|
.rls-date-picker__title {
|
|
1782
|
-
color: var(--color-
|
|
1886
|
+
color: var(--rls-app-color-500);
|
|
1783
1887
|
text-align: center;
|
|
1784
1888
|
cursor: default;
|
|
1785
|
-
font-weight: var(--font-weight-bold);
|
|
1889
|
+
font-weight: var(--rls-font-weight-bold);
|
|
1786
1890
|
}
|
|
1787
1891
|
.rls-date-picker__title:hover {
|
|
1788
|
-
color: var(--color-
|
|
1892
|
+
color: var(--rls-theme-color-500);
|
|
1789
1893
|
}
|
|
1790
1894
|
.rls-date-picker__title--description {
|
|
1791
|
-
height: var(--sizing-x16);
|
|
1792
|
-
line-height: var(--sizing-x16);
|
|
1895
|
+
height: var(--rls-sizing-x16);
|
|
1896
|
+
line-height: var(--rls-sizing-x16);
|
|
1793
1897
|
font-size: 9.25rem;
|
|
1794
1898
|
}
|
|
1795
1899
|
.rls-date-picker__title--year {
|
|
1796
|
-
|
|
1797
|
-
height: var(--sizing-x16);
|
|
1798
|
-
|
|
1799
|
-
|
|
1800
|
-
color: var(--color-theme-300);
|
|
1900
|
+
height: var(--rls-sizing-x16);
|
|
1901
|
+
line-height: var(--rls-sizing-x16);
|
|
1902
|
+
font-size: var(--rls-sizing-x12);
|
|
1903
|
+
color: var(--rls-app-color-300);
|
|
1801
1904
|
}
|
|
1802
1905
|
.rls-date-picker__component {
|
|
1803
1906
|
display: flex;
|
|
1907
|
+
justify-content: center;
|
|
1804
1908
|
width: 150rem;
|
|
1805
|
-
padding: 0rem var(--sizing-x2);
|
|
1909
|
+
padding: 0rem var(--rls-sizing-x2);
|
|
1806
1910
|
box-sizing: border-box;
|
|
1807
|
-
margin-bottom: var(--sizing-x4);
|
|
1808
1911
|
}
|
|
1809
1912
|
.rls-date-picker__component > * {
|
|
1810
|
-
margin: 0rem auto;
|
|
1811
1913
|
display: none;
|
|
1812
1914
|
}
|
|
1813
1915
|
.rls-date-picker__component--day .rls-day-picker {
|
|
@@ -1819,22 +1921,20 @@
|
|
|
1819
1921
|
.rls-date-picker__component--year .rls-year-picker {
|
|
1820
1922
|
display: block;
|
|
1821
1923
|
}
|
|
1822
|
-
.rls-date-picker__footer--hidden {
|
|
1823
|
-
display: none;
|
|
1824
|
-
}
|
|
1825
1924
|
.rls-date-picker__actions {
|
|
1826
1925
|
display: flex;
|
|
1827
1926
|
flex-wrap: wrap;
|
|
1828
|
-
gap: var(--sizing-x4);
|
|
1829
|
-
padding: var(--sizing-x4) var(--sizing-x8) var(--sizing-x6)
|
|
1927
|
+
gap: var(--rls-sizing-x4);
|
|
1928
|
+
padding: var(--rls-sizing-x4) var(--rls-sizing-x8) var(--rls-sizing-x6)
|
|
1929
|
+
var(--rls-sizing-x8);
|
|
1830
1930
|
overflow: hidden;
|
|
1831
1931
|
box-sizing: border-box;
|
|
1832
1932
|
}
|
|
1833
1933
|
.rls-date-picker__actions--cancel {
|
|
1834
|
-
width: calc(50% - var(--sizing-x2));
|
|
1934
|
+
width: calc(50% - var(--rls-sizing-x2));
|
|
1835
1935
|
}
|
|
1836
1936
|
.rls-date-picker__actions--today {
|
|
1837
|
-
width: calc(50% - var(--sizing-x2));
|
|
1937
|
+
width: calc(50% - var(--rls-sizing-x2));
|
|
1838
1938
|
}
|
|
1839
1939
|
.rls-date-picker__actions--ok {
|
|
1840
1940
|
width: 100%;
|
|
@@ -1856,7 +1956,7 @@
|
|
|
1856
1956
|
left: 0rem;
|
|
1857
1957
|
width: 100%;
|
|
1858
1958
|
height: 100%;
|
|
1859
|
-
z-index: var(--z-index-24);
|
|
1959
|
+
z-index: var(--rls-z-index-24);
|
|
1860
1960
|
visibility: hidden;
|
|
1861
1961
|
align-items: center;
|
|
1862
1962
|
justify-content: center;
|
|
@@ -1873,19 +1973,19 @@
|
|
|
1873
1973
|
.rls-modal__component {
|
|
1874
1974
|
position: absolute;
|
|
1875
1975
|
width: auto;
|
|
1876
|
-
max-width: calc(100% - var(--sizing-x8));
|
|
1976
|
+
max-width: calc(100% - var(--rls-sizing-x8));
|
|
1877
1977
|
height: var(--pvt-component-height);
|
|
1878
1978
|
opacity: var(--pvt-component-opacity);
|
|
1879
1979
|
visibility: var(--pvt-component-visibility);
|
|
1880
|
-
z-index: var(--z-index-2);
|
|
1980
|
+
z-index: var(--rls-z-index-2);
|
|
1881
1981
|
overflow: hidden;
|
|
1882
|
-
border-radius: var(--sizing-x4);
|
|
1883
|
-
background: var(--background-
|
|
1982
|
+
border-radius: var(--rls-sizing-x4);
|
|
1983
|
+
background: var(--rls-app-background-500);
|
|
1884
1984
|
will-change: transform;
|
|
1885
1985
|
transform: var(--pvt-component-transform);
|
|
1886
|
-
transition: opacity 125ms 0ms var(--deceleration-curve),
|
|
1887
|
-
transform 125ms 0ms var(--deceleration-curve),
|
|
1888
|
-
visibility 125ms 0ms var(--deceleration-curve);
|
|
1986
|
+
transition: opacity 125ms 0ms var(--rls-deceleration-curve),
|
|
1987
|
+
transform 125ms 0ms var(--rls-deceleration-curve),
|
|
1988
|
+
visibility 125ms 0ms var(--rls-deceleration-curve);
|
|
1889
1989
|
}
|
|
1890
1990
|
.rls-modal__backdrop {
|
|
1891
1991
|
position: absolute;
|
|
@@ -1897,47 +1997,47 @@
|
|
|
1897
1997
|
opacity: var(--pvt-backdrop-opacity);
|
|
1898
1998
|
z-index: 1;
|
|
1899
1999
|
will-change: opacity;
|
|
1900
|
-
background: var(--backdrop-
|
|
2000
|
+
background: var(--rls-theme-backdrop-900);
|
|
1901
2001
|
backdrop-filter: blur(2px);
|
|
1902
|
-
transition: opacity 120ms 0ms var(--deceleration-curve),
|
|
1903
|
-
bottom 120ms 0ms var(--deceleration-curve);
|
|
2002
|
+
transition: opacity 120ms 0ms var(--rls-deceleration-curve),
|
|
2003
|
+
bottom 120ms 0ms var(--rls-deceleration-curve);
|
|
1904
2004
|
}
|
|
1905
2005
|
|
|
1906
2006
|
.rls-date-field {
|
|
1907
|
-
--
|
|
2007
|
+
--rlc-boxfield-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
|
|
1908
2008
|
position: relative;
|
|
1909
|
-
float: left;
|
|
1910
2009
|
width: 100%;
|
|
1911
2010
|
box-sizing: border-box;
|
|
1912
2011
|
}
|
|
2012
|
+
.rls-date-field .rls-box-field__body {
|
|
2013
|
+
column-gap: var(--rls-sizing-x2);
|
|
2014
|
+
}
|
|
1913
2015
|
.rls-date-field__control {
|
|
1914
2016
|
position: relative;
|
|
1915
|
-
|
|
1916
|
-
|
|
1917
|
-
height: var(--sizing-x12);
|
|
1918
|
-
line-height: var(--sizing-x12);
|
|
2017
|
+
width: calc(100% - var(--rls-sizing-x14));
|
|
2018
|
+
height: var(--rls-sizing-x12);
|
|
2019
|
+
line-height: var(--rls-sizing-x12);
|
|
1919
2020
|
padding: 0rem;
|
|
1920
2021
|
cursor: default;
|
|
1921
2022
|
border: none;
|
|
1922
2023
|
outline: none;
|
|
1923
|
-
color: var(--color-theme-input);
|
|
1924
2024
|
background: transparent;
|
|
1925
|
-
|
|
1926
|
-
font-
|
|
1927
|
-
|
|
2025
|
+
color: var(--rls-app-color-500);
|
|
2026
|
+
font-size: var(--rls-input-font-size);
|
|
2027
|
+
font-weight: var(--rls-font-weight-medium);
|
|
2028
|
+
letter-spacing: var(--rls-input-letter-spacing);
|
|
1928
2029
|
}
|
|
1929
2030
|
.rls-date-field__control::placeholder {
|
|
1930
|
-
color: var(--color-
|
|
2031
|
+
color: var(--rls-app-color-100);
|
|
1931
2032
|
}
|
|
1932
2033
|
.rls-date-field__control:disabled {
|
|
1933
2034
|
opacity: 0.5;
|
|
1934
2035
|
}
|
|
1935
2036
|
.rls-date-field__action {
|
|
1936
|
-
color: var(--color-
|
|
1937
|
-
width: var(--sizing-x12);
|
|
1938
|
-
height: var(--sizing-x12);
|
|
2037
|
+
color: var(--rls-app-color-300);
|
|
2038
|
+
width: var(--rls-sizing-x12);
|
|
2039
|
+
height: var(--rls-sizing-x12);
|
|
1939
2040
|
padding: 0rem;
|
|
1940
|
-
margin-left: var(--sizing-x2);
|
|
1941
2041
|
background: transparent;
|
|
1942
2042
|
}
|
|
1943
2043
|
.rls-date-field__action:disabled {
|
|
@@ -1948,52 +2048,52 @@
|
|
|
1948
2048
|
position: relative;
|
|
1949
2049
|
display: flex;
|
|
1950
2050
|
flex-direction: column;
|
|
1951
|
-
row-gap: var(--sizing-x4);
|
|
2051
|
+
row-gap: var(--rls-sizing-x4);
|
|
1952
2052
|
overflow: hidden;
|
|
1953
2053
|
max-width: 150rem;
|
|
1954
2054
|
}
|
|
1955
2055
|
.rls-date-range-picker__header {
|
|
1956
|
-
background: var(--color-
|
|
1957
|
-
padding: var(--sizing-x4);
|
|
2056
|
+
background: var(--rls-theme-color-100);
|
|
2057
|
+
padding: var(--rls-sizing-x4);
|
|
1958
2058
|
box-sizing: border-box;
|
|
1959
2059
|
}
|
|
1960
2060
|
.rls-date-range-picker__title {
|
|
1961
|
-
color: var(--color-
|
|
2061
|
+
color: var(--rls-app-color-500);
|
|
1962
2062
|
text-align: center;
|
|
1963
2063
|
cursor: default;
|
|
1964
|
-
font-weight: var(--font-weight-bold);
|
|
2064
|
+
font-weight: var(--rls-font-weight-bold);
|
|
1965
2065
|
}
|
|
1966
2066
|
.rls-date-range-picker__title:hover {
|
|
1967
|
-
color: var(--color-
|
|
2067
|
+
color: var(--rls-theme-color-500);
|
|
1968
2068
|
}
|
|
1969
2069
|
.rls-date-range-picker__title--description {
|
|
1970
|
-
height: var(--sizing-x16);
|
|
1971
|
-
line-height: var(--sizing-x16);
|
|
2070
|
+
height: var(--rls-sizing-x16);
|
|
2071
|
+
line-height: var(--rls-sizing-x16);
|
|
1972
2072
|
font-size: 9.25rem;
|
|
1973
2073
|
}
|
|
1974
2074
|
.rls-date-range-picker__title--year {
|
|
1975
|
-
margin: var(--sizing-x4) 0rem var(--sizing-x2) 0rem;
|
|
1976
|
-
height: var(--sizing-x16);
|
|
1977
|
-
line-height: var(--sizing-x16);
|
|
1978
|
-
font-size: var(--sizing-x12);
|
|
1979
|
-
color: var(--color-
|
|
2075
|
+
margin: var(--rls-sizing-x4) 0rem var(--rls-sizing-x2) 0rem;
|
|
2076
|
+
height: var(--rls-sizing-x16);
|
|
2077
|
+
line-height: var(--rls-sizing-x16);
|
|
2078
|
+
font-size: var(--rls-sizing-x12);
|
|
2079
|
+
color: var(--rls-app-color-300);
|
|
1980
2080
|
}
|
|
1981
2081
|
.rls-date-range-picker__title--month {
|
|
1982
2082
|
display: flex;
|
|
1983
2083
|
justify-content: space-between;
|
|
1984
2084
|
}
|
|
1985
2085
|
.rls-date-range-picker__title--month span {
|
|
1986
|
-
height: var(--sizing-x14);
|
|
1987
|
-
line-height: var(--sizing-x14);
|
|
1988
|
-
font-size: var(--sizing-x10);
|
|
1989
|
-
color: var(--color-
|
|
2086
|
+
height: var(--rls-sizing-x14);
|
|
2087
|
+
line-height: var(--rls-sizing-x14);
|
|
2088
|
+
font-size: var(--rls-sizing-x10);
|
|
2089
|
+
color: var(--rls-app-color-300);
|
|
1990
2090
|
margin: auto 0rem;
|
|
1991
2091
|
}
|
|
1992
2092
|
.rls-date-range-picker__component {
|
|
1993
2093
|
display: flex;
|
|
1994
2094
|
justify-content: center;
|
|
1995
2095
|
width: 150rem;
|
|
1996
|
-
padding: 0rem var(--sizing-x2);
|
|
2096
|
+
padding: 0rem var(--rls-sizing-x2);
|
|
1997
2097
|
box-sizing: border-box;
|
|
1998
2098
|
}
|
|
1999
2099
|
.rls-date-range-picker__component > * {
|
|
@@ -2014,8 +2114,8 @@
|
|
|
2014
2114
|
.rls-date-range-picker__actions {
|
|
2015
2115
|
display: flex;
|
|
2016
2116
|
flex-wrap: wrap;
|
|
2017
|
-
gap: var(--sizing-x4);
|
|
2018
|
-
padding: 0rem var(--sizing-x8) var(--sizing-x6) var(--sizing-x8);
|
|
2117
|
+
gap: var(--rls-sizing-x4);
|
|
2118
|
+
padding: 0rem var(--rls-sizing-x8) var(--rls-sizing-x6) var(--rls-sizing-x8);
|
|
2019
2119
|
overflow: hidden;
|
|
2020
2120
|
box-sizing: border-box;
|
|
2021
2121
|
}
|
|
@@ -2024,69 +2124,68 @@
|
|
|
2024
2124
|
}
|
|
2025
2125
|
|
|
2026
2126
|
.rls-date-range-field {
|
|
2027
|
-
--
|
|
2127
|
+
--rlc-boxfield-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
|
|
2028
2128
|
position: relative;
|
|
2029
|
-
float: left;
|
|
2030
2129
|
width: 100%;
|
|
2031
2130
|
box-sizing: border-box;
|
|
2032
2131
|
}
|
|
2033
2132
|
.rls-date-range-field__control {
|
|
2034
2133
|
position: relative;
|
|
2035
|
-
|
|
2036
|
-
|
|
2037
|
-
height: var(--sizing-x12);
|
|
2038
|
-
line-height: var(--sizing-x12);
|
|
2134
|
+
width: calc(100% - var(--rls-sizing-x14));
|
|
2135
|
+
height: var(--rls-sizing-x12);
|
|
2136
|
+
line-height: var(--rls-sizing-x12);
|
|
2039
2137
|
padding: 0rem;
|
|
2040
2138
|
cursor: default;
|
|
2041
2139
|
border: none;
|
|
2042
2140
|
outline: none;
|
|
2043
|
-
color: var(--
|
|
2141
|
+
color: var(--rlc-input-font-color);
|
|
2044
2142
|
background: transparent;
|
|
2045
|
-
font-size: var(--input-font-size);
|
|
2046
|
-
font-weight: var(--font-weight-medium);
|
|
2047
|
-
letter-spacing: var(--input-letter-spacing);
|
|
2143
|
+
font-size: var(--rls-input-font-size);
|
|
2144
|
+
font-weight: var(--rls-font-weight-medium);
|
|
2145
|
+
letter-spacing: var(--rls-input-letter-spacing);
|
|
2048
2146
|
}
|
|
2049
2147
|
.rls-date-range-field__control::placeholder {
|
|
2050
|
-
color: var(--color-
|
|
2148
|
+
color: var(--rls-app-color-100);
|
|
2051
2149
|
}
|
|
2052
2150
|
.rls-date-range-field__control:disabled {
|
|
2053
2151
|
opacity: 0.5;
|
|
2054
2152
|
}
|
|
2055
2153
|
.rls-date-range-field__action {
|
|
2056
|
-
color: var(--color-
|
|
2057
|
-
width: var(--sizing-x12);
|
|
2058
|
-
height: var(--sizing-x12);
|
|
2154
|
+
color: var(--rls-app-color-300);
|
|
2155
|
+
width: var(--rls-sizing-x12);
|
|
2156
|
+
height: var(--rls-sizing-x12);
|
|
2059
2157
|
padding: 0rem;
|
|
2060
|
-
margin-left: var(--sizing-x2);
|
|
2158
|
+
margin-left: var(--rls-sizing-x2);
|
|
2061
2159
|
background: transparent;
|
|
2062
2160
|
}
|
|
2063
2161
|
|
|
2064
2162
|
.rls-form-navigation {
|
|
2065
2163
|
position: fixed;
|
|
2066
|
-
top: var(--sizing-x8);
|
|
2067
|
-
right: var(--sizing-x8);
|
|
2068
|
-
width: calc(100% - var(--sizing-x16));
|
|
2164
|
+
top: var(--rls-sizing-x8);
|
|
2165
|
+
right: var(--rls-sizing-x8);
|
|
2166
|
+
width: calc(100% - var(--rls-sizing-x16));
|
|
2069
2167
|
max-width: 160rem;
|
|
2070
2168
|
height: auto;
|
|
2071
|
-
max-height: calc(100vh - var(--sizing-x16));
|
|
2072
|
-
z-index: var(--z-index-12);
|
|
2073
|
-
padding: var(--sizing-x8) var(--sizing-x8) var(--sizing-x12)
|
|
2169
|
+
max-height: calc(100vh - var(--rls-sizing-x16));
|
|
2170
|
+
z-index: var(--rls-z-index-12);
|
|
2171
|
+
padding: var(--rls-sizing-x8) var(--rls-sizing-x8) var(--rls-sizing-x12)
|
|
2172
|
+
var(--rls-sizing-x8);
|
|
2074
2173
|
box-sizing: border-box;
|
|
2075
|
-
background: var(--background-
|
|
2076
|
-
border-radius: var(--sizing-x4);
|
|
2077
|
-
box-shadow: var(--shadow-center-
|
|
2078
|
-
transform: translateX(calc(100% + var(--sizing-x16)));
|
|
2079
|
-
transition: transform 240ms 0ms var(--standard-curve);
|
|
2174
|
+
background: var(--rls-app-background-500);
|
|
2175
|
+
border-radius: var(--rls-sizing-x4);
|
|
2176
|
+
box-shadow: var(--rls-dark-shadow-center-8);
|
|
2177
|
+
transform: translateX(calc(100% + var(--rls-sizing-x16)));
|
|
2178
|
+
transition: transform 240ms 0ms var(--rls-standard-curve);
|
|
2080
2179
|
}
|
|
2081
2180
|
.rls-form-navigation--visible {
|
|
2082
2181
|
transform: translateX(0%);
|
|
2083
2182
|
}
|
|
2084
2183
|
.rls-form-navigation__header {
|
|
2085
|
-
margin-bottom: var(--sizing-x8);
|
|
2184
|
+
margin-bottom: var(--rls-sizing-x8);
|
|
2086
2185
|
}
|
|
2087
2186
|
.rls-form-navigation__header .rls-button-action {
|
|
2088
|
-
width: var(--sizing-x12);
|
|
2089
|
-
height: var(--sizing-x12);
|
|
2187
|
+
width: var(--rls-sizing-x12);
|
|
2188
|
+
height: var(--rls-sizing-x12);
|
|
2090
2189
|
padding: 0rem;
|
|
2091
2190
|
float: right;
|
|
2092
2191
|
}
|
|
@@ -2096,7 +2195,7 @@
|
|
|
2096
2195
|
}
|
|
2097
2196
|
|
|
2098
2197
|
.rls-select-field .rls-list-field__action {
|
|
2099
|
-
transition: transform 160ms 0ms var(--sharp-curve);
|
|
2198
|
+
transition: transform 160ms 0ms var(--rls-sharp-curve);
|
|
2100
2199
|
}
|
|
2101
2200
|
.rls-select-field .rls-list-field__action--visible {
|
|
2102
2201
|
transform: rotate(180deg);
|
|
@@ -2105,64 +2204,64 @@
|
|
|
2105
2204
|
.rls-snackbar {
|
|
2106
2205
|
position: fixed;
|
|
2107
2206
|
display: flex;
|
|
2108
|
-
column-gap: var(--sizing-x6);
|
|
2207
|
+
column-gap: var(--rls-sizing-x6);
|
|
2109
2208
|
bottom: 0rem;
|
|
2110
|
-
left: var(--
|
|
2209
|
+
left: var(--rlc-snackbar-left);
|
|
2111
2210
|
z-index: 32;
|
|
2112
2211
|
width: auto;
|
|
2113
2212
|
height: auto;
|
|
2114
2213
|
max-width: 240rem;
|
|
2115
|
-
padding: var(--sizing-x6);
|
|
2214
|
+
padding: var(--rls-sizing-x6);
|
|
2116
2215
|
box-sizing: border-box;
|
|
2117
|
-
border-radius: var(--sizing-x4);
|
|
2118
|
-
background: var(--background-
|
|
2119
|
-
box-shadow: var(--shadow-bottom-
|
|
2120
|
-
border: var(--border-1-
|
|
2216
|
+
border-radius: var(--rls-sizing-x4);
|
|
2217
|
+
background: var(--rls-app-background-500);
|
|
2218
|
+
box-shadow: var(--rls-light-shadow-bottom-4);
|
|
2219
|
+
border: var(--rls-theme-border-1-300);
|
|
2121
2220
|
will-change: transform;
|
|
2122
2221
|
transform: translate(-50%, 100%);
|
|
2123
|
-
transition: transform 160ms 0ms var(--standard-curve);
|
|
2222
|
+
transition: transform 160ms 0ms var(--rls-standard-curve);
|
|
2124
2223
|
}
|
|
2125
2224
|
.rls-snackbar--visible {
|
|
2126
|
-
transform: translate(-50%, calc(0% - var(--sizing-x8)));
|
|
2225
|
+
transform: translate(-50%, calc(0% - var(--rls-sizing-x8)));
|
|
2127
2226
|
}
|
|
2128
2227
|
.rls-snackbar__avatar {
|
|
2129
|
-
--
|
|
2228
|
+
--rlc-icon-color: var(--rls-light-color-500);
|
|
2130
2229
|
display: flex;
|
|
2131
2230
|
justify-content: center;
|
|
2132
2231
|
align-items: center;
|
|
2133
2232
|
overflow: hidden;
|
|
2134
|
-
background: var(--color-
|
|
2135
|
-
width: var(--sizing-x18);
|
|
2136
|
-
height: var(--sizing-x18);
|
|
2137
|
-
border-radius: var(--sizing-x4);
|
|
2233
|
+
background: var(--rls-theme-color-500);
|
|
2234
|
+
width: var(--rls-sizing-x18);
|
|
2235
|
+
height: var(--rls-sizing-x18);
|
|
2236
|
+
border-radius: var(--rls-sizing-x4);
|
|
2138
2237
|
}
|
|
2139
2238
|
.rls-snackbar__avatar + .rls-snackbar__component {
|
|
2140
|
-
width: calc(100% - var(--sizing-x18));
|
|
2239
|
+
width: calc(100% - var(--rls-sizing-x18));
|
|
2141
2240
|
}
|
|
2142
2241
|
.rls-snackbar__component {
|
|
2143
2242
|
display: flex;
|
|
2144
2243
|
flex-direction: column;
|
|
2145
|
-
row-gap: var(--sizing-x2);
|
|
2244
|
+
row-gap: var(--rls-sizing-x2);
|
|
2146
2245
|
}
|
|
2147
2246
|
.rls-snackbar__title {
|
|
2148
2247
|
overflow: hidden;
|
|
2149
2248
|
text-overflow: ellipsis;
|
|
2150
2249
|
white-space: nowrap;
|
|
2151
|
-
color: var(--color-
|
|
2152
|
-
font-size: var(--body-font-size);
|
|
2153
|
-
font-weight: var(--font-weight-bold);
|
|
2154
|
-
letter-spacing: var(--body-letter-spacing);
|
|
2250
|
+
color: var(--rls-theme-color-500);
|
|
2251
|
+
font-size: var(--rls-body-font-size);
|
|
2252
|
+
font-weight: var(--rls-font-weight-bold);
|
|
2253
|
+
letter-spacing: var(--rls-body-letter-spacing);
|
|
2155
2254
|
}
|
|
2156
2255
|
.rls-snackbar__content p {
|
|
2157
|
-
line-height: var(--sizing-x10);
|
|
2158
|
-
color: var(--color-
|
|
2159
|
-
font-size: var(--label-font-size);
|
|
2160
|
-
font-weight: var(--font-weight-medium);
|
|
2161
|
-
letter-spacing: var(--label-letter-spacing);
|
|
2256
|
+
line-height: var(--rls-sizing-x10);
|
|
2257
|
+
color: var(--rls-app-color-300);
|
|
2258
|
+
font-size: var(--rls-label-font-size);
|
|
2259
|
+
font-weight: var(--rls-font-weight-medium);
|
|
2260
|
+
letter-spacing: var(--rls-label-letter-spacing);
|
|
2162
2261
|
}
|
|
2163
2262
|
|
|
2164
2263
|
@media only screen and (max-width: 375px) {
|
|
2165
2264
|
.rls-snackbar {
|
|
2166
|
-
width: calc(100% - var(--sizing-x12));
|
|
2265
|
+
width: calc(100% - var(--rls-sizing-x12));
|
|
2167
2266
|
}
|
|
2168
2267
|
}
|