@robosophy/ui-vue 1.1.10 → 1.1.12

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/index.css CHANGED
@@ -1,651 +1,679 @@
1
- .rs-icon {
2
- align-items: center;
3
- color: var(--rs-icon-color, currentColor);
4
- display: inline-flex;
5
- flex: 0 0 auto;
6
- flex-shrink: 0;
7
- height: var(--rs-icon-size, 24px);
8
- justify-content: center;
9
- user-select: none;
10
- width: var(--rs-icon-size, 24px);
11
- }
12
-
13
- .rs-icon--interactive {
14
- cursor: pointer;
15
- }
16
-
17
- .rs-icon--primary {
18
- color: var(--rs-color-icon-primary, #48a0d4);
19
- }
20
-
21
- .rs-icon--secondary {
22
- color: var(--rs-color-icon-secondary, #000000);
23
- }
24
-
25
- .rs-icon--success {
26
- color: var(--rs-color-icon-success, #4EAE01);
27
- }
28
-
29
- .rs-icon--warning {
30
- color: var(--rs-color-icon-warning, #FF9001);
31
- }
32
-
33
- .rs-icon--danger {
34
- color: var(--rs-color-icon-danger, #d80115);
35
- }
36
-
37
- .rs-icon--inherit {
38
- color: currentColor;
39
- }
40
- .rs-icon {
41
- align-items: center;
42
- color: var(--rs-icon-color, currentColor);
43
- display: inline-flex;
44
- flex: 0 0 auto;
45
- flex-shrink: 0;
46
- height: var(--rs-icon-size, 24px);
47
- justify-content: center;
48
- user-select: none;
1
+ .rs-icon {
2
+ align-items: center;
3
+ color: var(--rs-icon-color, currentColor);
4
+ display: inline-flex;
5
+ flex: 0 0 auto;
6
+ flex-shrink: 0;
7
+ height: var(--rs-icon-size, 24px);
8
+ justify-content: center;
9
+ user-select: none;
10
+ width: var(--rs-icon-size, 24px);
11
+ }
12
+
13
+ .rs-icon--interactive {
14
+ cursor: pointer;
15
+ }
16
+
17
+ .rs-icon--primary {
18
+ color: var(--rs-color-icon-primary, #48a0d4);
19
+ }
20
+
21
+ .rs-icon--secondary {
22
+ color: var(--rs-color-icon-secondary, #000000);
23
+ }
24
+
25
+ .rs-icon--success {
26
+ color: var(--rs-color-icon-success, #4EAE01);
27
+ }
28
+
29
+ .rs-icon--warning {
30
+ color: var(--rs-color-icon-warning, #FF9001);
31
+ }
32
+
33
+ .rs-icon--danger {
34
+ color: var(--rs-color-icon-danger, #d80115);
35
+ }
36
+
37
+ .rs-icon--inherit {
38
+ color: currentColor;
39
+ }
40
+
41
+ .rs-icon-wrap {
42
+ position: relative;
43
+ display: inline-flex;
44
+ align-items: center;
45
+ justify-content: center;
46
+ vertical-align: middle;
47
+ }
48
+
49
+ .rs-icon__notification {
50
+ position: absolute;
51
+ top: 0;
52
+ right: 0;
53
+ width: 10px;
54
+ height: 10px;
55
+ border-radius: 50%;
56
+ background-color: var(--rs-color-yellow-500, #ff9001);
57
+ }
58
+ .rs-icon {
59
+ align-items: center;
60
+ color: var(--rs-icon-color, currentColor);
61
+ display: inline-flex;
62
+ flex: 0 0 auto;
63
+ flex-shrink: 0;
64
+ height: var(--rs-icon-size, 24px);
65
+ justify-content: center;
66
+ user-select: none;
49
67
  width: var(--rs-icon-size, 24px);
50
68
  }
51
- .rs-icon--interactive {
69
+ .rs-icon--interactive {
52
70
  cursor: pointer;
53
71
  }
54
- .rs-icon--primary {
72
+ .rs-icon--primary {
55
73
  color: var(--rs-color-icon-primary, #48a0d4);
56
74
  }
57
- .rs-icon--secondary {
75
+ .rs-icon--secondary {
58
76
  color: var(--rs-color-icon-secondary, #000000);
59
77
  }
60
- .rs-icon--success {
78
+ .rs-icon--success {
61
79
  color: var(--rs-color-icon-success, #4EAE01);
62
80
  }
63
- .rs-icon--warning {
81
+ .rs-icon--warning {
64
82
  color: var(--rs-color-icon-warning, #FF9001);
65
83
  }
66
- .rs-icon--danger {
84
+ .rs-icon--danger {
67
85
  color: var(--rs-color-icon-danger, #d80115);
68
86
  }
69
- .rs-icon--inherit {
87
+ .rs-icon--inherit {
70
88
  color: currentColor;
71
89
  }
72
- .rs-account-selector-host {
73
- --rs-account-selector-width: 270px;
74
- --rs-account-selector-background: var(--rs-color-surface-primary, #ffffff);
75
- --rs-account-selector-border: var(--rs-color-stroke-default, #d1d1d1);
76
- --rs-account-selector-color: var(--rs-color-text-primary, #000000);
77
- --rs-account-selector-muted: var(--rs-color-text-secondary, #909090);
78
- --rs-account-selector-active: var(--rs-color-text-brand-green, #4eae01);
79
- --rs-account-selector-danger: var(--rs-color-text-brand-red, #d80115);
80
-
81
- display: inline-flex;
90
+ .rs-icon-wrap {
91
+ position: relative;
92
+ display: inline-flex;
93
+ align-items: center;
94
+ justify-content: center;
95
+ vertical-align: middle;
96
+ }
97
+ .rs-icon__notification {
98
+ position: absolute;
99
+ top: 0;
100
+ right: 0;
101
+ width: 10px;
102
+ height: 10px;
103
+ border-radius: 50%;
104
+ background-color: var(--rs-color-yellow-500, #ff9001);
105
+ }
106
+ .rs-account-selector-host {
107
+ --rs-account-selector-width: 270px;
108
+ --rs-account-selector-background: var(--rs-color-surface-primary, #ffffff);
109
+ --rs-account-selector-border: var(--rs-color-stroke-default, #d1d1d1);
110
+ --rs-account-selector-color: var(--rs-color-text-primary, #000000);
111
+ --rs-account-selector-muted: var(--rs-color-text-secondary, #909090);
112
+ --rs-account-selector-active: var(--rs-color-text-brand-green, #4eae01);
113
+ --rs-account-selector-danger: var(--rs-color-text-brand-red, #d80115);
114
+
115
+ display: inline-flex;
82
116
  position: relative;
83
117
  }
84
- .rs-account-selector__trigger.p-button {
85
- align-items: center;
86
- background: transparent;
87
- border: 0;
88
- color: var(--rs-account-selector-color);
89
- display: inline-flex;
90
- flex: 0 0 auto;
91
- gap: 16px;
92
- min-width: 0;
118
+ .rs-account-selector__trigger.p-button {
119
+ align-items: center;
120
+ background: transparent;
121
+ border: 0;
122
+ color: var(--rs-account-selector-color);
123
+ display: inline-flex;
124
+ flex: 0 0 auto;
125
+ gap: 16px;
126
+ min-width: 0;
93
127
  padding: 0;
94
128
  }
95
- .rs-account-selector__trigger.p-button .p-button-label {
96
- align-items: center;
97
- display: inline-flex;
129
+ .rs-account-selector__trigger.p-button .p-button-label {
130
+ align-items: center;
131
+ display: inline-flex;
98
132
  gap: 20px;
99
133
  }
100
- .rs-account-selector__trigger.p-button:hover,
101
- .rs-account-selector__trigger.p-button:focus-visible {
102
- background: transparent !important;
103
- border: 0 !important;
104
- color: var(--rs-account-selector-color);
105
- gap: 16px !important;
134
+ .rs-account-selector__trigger.p-button:hover,
135
+ .rs-account-selector__trigger.p-button:focus-visible {
136
+ background: transparent !important;
137
+ border: 0 !important;
138
+ color: var(--rs-account-selector-color);
139
+ gap: 16px !important;
106
140
  padding: 0 !important;
107
141
  }
108
- .rs-account-selector__trigger-chevron {
142
+ .rs-account-selector__trigger-chevron {
109
143
  transition: transform 160ms ease;
110
144
  }
111
- .rs-account-selector__trigger--open .rs-account-selector__trigger-chevron {
145
+ .rs-account-selector__trigger--open .rs-account-selector__trigger-chevron {
112
146
  transform: rotate(180deg);
113
147
  }
114
- .rs-account-selector__trigger-avatar {
115
- --rs-account-selector-avatar-size: 46px;
116
-
117
- align-items: center;
118
- background: var(--rs-color-background-info, #e6f6fb);
119
- border-radius: 999px;
120
- color: var(--rs-color-text-brand, #48a0d4);
121
- display: inline-flex;
122
- flex: 0 0 auto;
123
- font-size: 0.875rem;
124
- font-weight: 600;
125
- height: var(--rs-account-selector-avatar-size);
126
- justify-content: center;
127
- line-height: 1;
128
- overflow: hidden;
129
- text-transform: uppercase;
148
+ .rs-account-selector__trigger-avatar {
149
+ --rs-account-selector-avatar-size: 46px;
150
+
151
+ align-items: center;
152
+ background: var(--rs-color-background-info, #e6f6fb);
153
+ border-radius: 999px;
154
+ color: var(--rs-color-text-brand, #48a0d4);
155
+ display: inline-flex;
156
+ flex: 0 0 auto;
157
+ font-size: 0.875rem;
158
+ font-weight: 600;
159
+ height: var(--rs-account-selector-avatar-size);
160
+ justify-content: center;
161
+ line-height: 1;
162
+ overflow: hidden;
163
+ text-transform: uppercase;
130
164
  width: var(--rs-account-selector-avatar-size);
131
165
  }
132
- .rs-account-selector {
133
- background: var(--rs-account-selector-background);
134
- border: 1px solid var(--rs-account-selector-border);
135
- border-radius: 8px;
136
- box-sizing: border-box;
137
- color: var(--rs-account-selector-color);
138
- display: flex;
139
- flex-direction: column;
140
- font-family: var(--rs-font-family, "Inter", sans-serif);
141
- font-size: 16px;
142
- gap: 16px;
143
- z-index: 20;
144
- padding: 20px 0 16px;
145
- max-width: calc(100vw - 32px);
166
+ .rs-account-selector {
167
+ background: var(--rs-account-selector-background);
168
+ border: 1px solid var(--rs-account-selector-border);
169
+ border-radius: 8px;
170
+ box-sizing: border-box;
171
+ color: var(--rs-account-selector-color);
172
+ display: flex;
173
+ flex-direction: column;
174
+ font-family: var(--rs-font-family, "Inter", sans-serif);
175
+ font-size: 16px;
176
+ gap: 16px;
177
+ z-index: 20;
178
+ padding: 20px 0 16px;
179
+ max-width: calc(100vw - 32px);
146
180
  width: var(--rs-account-selector-width);
147
181
  }
148
- .rs-account-selector__summary {
149
- align-items: center;
150
- display: flex;
151
- flex-direction: column;
152
- gap: 8px;
153
- padding: 0 16px;
182
+ .rs-account-selector__summary {
183
+ align-items: center;
184
+ display: flex;
185
+ flex-direction: column;
186
+ gap: 8px;
187
+ padding: 0 16px;
154
188
  text-align: center;
155
189
  }
156
- .rs-account-selector__avatar-stack {
157
- align-items: center;
190
+ .rs-account-selector__avatar-stack {
191
+ align-items: center;
158
192
  display: inline-flex;
159
193
  }
160
- .rs-account-selector__avatar {
161
- --rs-account-selector-avatar-size: 44px;
162
-
163
- align-items: center;
164
- background: var(--rs-color-background-info, #e6f6fb);
165
- border: 2px solid var(--rs-color-surface-primary, #ffffff);
166
- border-radius: 999px;
167
- box-sizing: border-box;
168
- color: var(--rs-color-text-brand, #48a0d4);
169
- display: inline-flex;
170
- flex: 0 0 auto;
171
- font-size: 0.875rem;
172
- font-weight: 600;
173
- height: var(--rs-account-selector-avatar-size);
174
- justify-content: center;
175
- line-height: 1;
176
- overflow: hidden;
177
- text-transform: uppercase;
194
+ .rs-account-selector__avatar {
195
+ --rs-account-selector-avatar-size: 44px;
196
+
197
+ align-items: center;
198
+ background: var(--rs-color-background-info, #e6f6fb);
199
+ border: 2px solid var(--rs-color-surface-primary, #ffffff);
200
+ border-radius: 999px;
201
+ box-sizing: border-box;
202
+ color: var(--rs-color-text-brand, #48a0d4);
203
+ display: inline-flex;
204
+ flex: 0 0 auto;
205
+ font-size: 0.875rem;
206
+ font-weight: 600;
207
+ height: var(--rs-account-selector-avatar-size);
208
+ justify-content: center;
209
+ line-height: 1;
210
+ overflow: hidden;
211
+ text-transform: uppercase;
178
212
  width: var(--rs-account-selector-avatar-size);
179
213
  }
180
- .rs-account-selector__avatar--sm {
181
- --rs-account-selector-avatar-size: 35px;
182
-
214
+ .rs-account-selector__avatar--sm {
215
+ --rs-account-selector-avatar-size: 35px;
216
+
183
217
  font-size: 0.75rem;
184
218
  }
185
- .rs-account-selector__avatar--lg {
186
- --rs-account-selector-avatar-size: 64px;
187
-
219
+ .rs-account-selector__avatar--lg {
220
+ --rs-account-selector-avatar-size: 64px;
221
+
188
222
  font-size: 1.125rem;
189
223
  }
190
- .rs-account-selector__avatar-image {
191
- display: block;
192
- height: 100%;
193
- object-fit: cover;
224
+ .rs-account-selector__avatar-image {
225
+ display: block;
226
+ height: 100%;
227
+ object-fit: cover;
194
228
  width: 100%;
195
229
  }
196
- .rs-account-selector__avatar-placeholder {
197
- align-items: center;
198
- display: inline-flex;
199
- height: 100%;
200
- justify-content: center;
230
+ .rs-account-selector__avatar-placeholder {
231
+ align-items: center;
232
+ display: inline-flex;
233
+ height: 100%;
234
+ justify-content: center;
201
235
  width: 100%;
202
236
  }
203
- .rs-account-selector__secondary-avatar {
237
+ .rs-account-selector__secondary-avatar {
204
238
  margin-left: -20px;
205
239
  }
206
- .rs-account-selector__user {
207
- display: grid;
208
- gap: 2px;
209
- max-width: 100%;
210
- min-width: 0;
240
+ .rs-account-selector__user {
241
+ display: grid;
242
+ gap: 2px;
243
+ max-width: 100%;
244
+ min-width: 0;
211
245
  width: 100%;
212
246
  }
213
- .rs-account-selector__title,
214
- .rs-account-selector__name,
215
- .rs-account-selector__email,
216
- .rs-account-selector__account-label,
217
- .rs-account-selector__account-state,
218
- .rs-account-selector__state {
247
+ .rs-account-selector__title,
248
+ .rs-account-selector__name,
249
+ .rs-account-selector__email,
250
+ .rs-account-selector__account-label,
251
+ .rs-account-selector__account-state,
252
+ .rs-account-selector__state {
219
253
  margin: 0;
220
254
  }
221
- .rs-account-selector__title {
222
- font-weight: 600;
255
+ .rs-account-selector__title {
256
+ font-weight: 600;
223
257
  line-height: 1.35;
224
258
  }
225
- .rs-account-selector__name {
226
- font-size: 0.875rem;
227
- font-weight: 500;
259
+ .rs-account-selector__name {
260
+ font-size: 0.875rem;
261
+ font-weight: 500;
228
262
  line-height: 1.35;
229
263
  }
230
- .rs-account-selector__email {
231
- color: var(--rs-account-selector-muted);
232
- overflow: hidden;
233
- text-overflow: ellipsis;
264
+ .rs-account-selector__email {
265
+ color: var(--rs-account-selector-muted);
266
+ overflow: hidden;
267
+ text-overflow: ellipsis;
234
268
  white-space: nowrap;
235
269
  }
236
- .rs-account-selector__actions,
237
- .rs-account-selector__footer {
238
- align-items: center;
239
- display: flex;
240
- flex-direction: column;
241
- gap: 8px;
270
+ .rs-account-selector__actions,
271
+ .rs-account-selector__footer {
272
+ align-items: center;
273
+ display: flex;
274
+ flex-direction: column;
275
+ gap: 8px;
242
276
  padding: 0 16px;
243
277
  }
244
- .rs-account-selector__button {
278
+ .rs-account-selector__button {
245
279
  width: max-content;
246
280
  }
247
- .rs-account-selector__button-content {
248
- align-items: center;
249
- display: inline-flex;
281
+ .rs-account-selector__button-content {
282
+ align-items: center;
283
+ display: inline-flex;
250
284
  gap: 8px;
251
285
  }
252
- .rs-account-selector__accounts {
286
+ .rs-account-selector__accounts {
253
287
  display: grid;
254
288
  }
255
- .rs-account-selector__account.p-button {
256
- align-items: center;
257
- background: transparent;
258
- border: 0;
259
- border-top: 1px solid var(--rs-account-selector-border);
260
- box-sizing: border-box;
261
- color: inherit;
262
- cursor: pointer;
263
- display: grid;
264
- font: inherit;
265
- gap: 8px;
266
- grid-template-columns: auto minmax(0, 1fr) auto;
267
- min-height: 58px;
268
- padding: 8px 16px;
269
- text-align: left;
289
+ .rs-account-selector__account.p-button {
290
+ align-items: center;
291
+ background: transparent;
292
+ border: 0;
293
+ border-top: 1px solid var(--rs-account-selector-border);
294
+ box-sizing: border-box;
295
+ color: inherit;
296
+ cursor: pointer;
297
+ display: grid;
298
+ font: inherit;
299
+ gap: 8px;
300
+ grid-template-columns: auto minmax(0, 1fr) auto;
301
+ min-height: 58px;
302
+ padding: 8px 16px;
303
+ text-align: left;
270
304
  width: 100%;
271
305
  }
272
- .rs-account-selector__account.p-button .p-button-label {
306
+ .rs-account-selector__account.p-button .p-button-label {
273
307
  display: contents;
274
308
  }
275
- .rs-account-selector__account.p-button:last-child {
309
+ .rs-account-selector__account.p-button:last-child {
276
310
  border-bottom: 1px solid var(--rs-account-selector-border);
277
311
  }
278
- .rs-account-selector__account.p-button:hover:not(:disabled) {
279
- background: var(--rs-color-background-info, #e6f6fb) !important;
312
+ .rs-account-selector__account.p-button:hover:not(:disabled) {
313
+ background: var(--rs-color-background-info, #e6f6fb) !important;
280
314
  color: inherit;
281
315
  }
282
- .rs-account-selector__account.p-button:disabled {
283
- cursor: default;
316
+ .rs-account-selector__account.p-button:disabled {
317
+ cursor: default;
284
318
  opacity: 1;
285
319
  }
286
- .rs-account-selector__account--active .rs-account-selector__account-label {
320
+ .rs-account-selector__account--active .rs-account-selector__account-label {
287
321
  font-weight: 600;
288
322
  }
289
- .rs-account-selector__account--active .rs-account-selector__account-avatar {
290
- outline: 2px solid var(--rs-account-selector-active);
323
+ .rs-account-selector__account--active .rs-account-selector__account-avatar {
324
+ outline: 2px solid var(--rs-account-selector-active);
291
325
  outline-offset: 2px;
292
326
  }
293
- .rs-account-selector__account--active .rs-account-selector__account-trailing {
327
+ .rs-account-selector__account--active .rs-account-selector__account-trailing {
294
328
  opacity: 0.25;
295
329
  }
296
- .rs-account-selector__account-info {
297
- display: grid;
298
- gap: 2px;
330
+ .rs-account-selector__account-info {
331
+ display: grid;
332
+ gap: 2px;
299
333
  min-width: 0;
300
334
  }
301
- .rs-account-selector__account-label {
302
- line-height: 1.35;
303
- overflow: hidden;
304
- text-overflow: ellipsis;
335
+ .rs-account-selector__account-label {
336
+ line-height: 1.35;
337
+ overflow: hidden;
338
+ text-overflow: ellipsis;
305
339
  white-space: nowrap;
306
340
  }
307
- .rs-account-selector__account-state,
308
- .rs-account-selector__state {
309
- color: var(--rs-account-selector-muted);
310
- font-size: 0.8125rem;
341
+ .rs-account-selector__account-state,
342
+ .rs-account-selector__state {
343
+ color: var(--rs-account-selector-muted);
344
+ font-size: 0.8125rem;
311
345
  line-height: 1.35;
312
346
  }
313
- .rs-account-selector__account-state--active {
347
+ .rs-account-selector__account-state--active {
314
348
  color: var(--rs-account-selector-active);
315
349
  }
316
- .rs-account-selector__account-state--inactive {
350
+ .rs-account-selector__account-state--inactive {
317
351
  color: var(--rs-account-selector-muted);
318
352
  }
319
- .rs-account-selector__account-trailing {
320
- align-items: center;
321
- color: var(--rs-color-icon-secondary, #000000);
322
- display: inline-flex;
353
+ .rs-account-selector__account-trailing {
354
+ align-items: center;
355
+ color: var(--rs-color-icon-secondary, #000000);
356
+ display: inline-flex;
323
357
  justify-content: center;
324
358
  }
325
- .rs-account-selector__state {
326
- padding: 8px 16px;
359
+ .rs-account-selector__state {
360
+ padding: 8px 16px;
327
361
  text-align: center;
328
362
  }
329
363
  @media (max-width: 768px) {
330
- .rs-account-selector {
364
+ .rs-account-selector {
331
365
  width: min(100vw - 32px, var(--rs-account-selector-width));
332
366
  }
333
- }
334
- .rs-sidebar {
335
- --rs-sidebar-background: var(--rs-color-surface-primary, #ffffff);
336
- --rs-sidebar-border: var(--rs-color-stroke-default, #d1d1d1);
337
- --rs-sidebar-color: var(--rs-color-text-primary, #000000);
338
- --rs-sidebar-muted: var(--rs-color-text-secondary, #909090);
339
- --rs-sidebar-active: var(--rs-color-text-button-tertiary, #48a0d4);
340
- --rs-sidebar-hover: var(--rs-color-button-blue-surface, #e6f6fb);
341
- --rs-sidebar-width-collapsed: 72px;
342
- --rs-sidebar-width-expanded: 286px;
343
-
344
- background: var(--rs-sidebar-background);
345
- border-right: 1px solid var(--rs-sidebar-border);
346
- box-sizing: border-box;
347
- color: var(--rs-sidebar-color);
348
- display: flex;
349
- flex-direction: column;
350
- flex-shrink: 0;
351
- font-family: var(--rs-font-family, "Inter", sans-serif);
352
- font-size: 18px;
353
- font-weight: 400;
354
- gap: 52px;
355
- height: 100%;
356
- overflow: hidden;
357
- transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1);
358
- will-change: width;
367
+ }
368
+ .rs-sidebar {
369
+ --rs-sidebar-background: var(--rs-color-surface-primary, #ffffff);
370
+ --rs-sidebar-border: var(--rs-color-stroke-default, #d1d1d1);
371
+ --rs-sidebar-color: var(--rs-color-text-primary, #000000);
372
+ --rs-sidebar-muted: var(--rs-color-text-secondary, #909090);
373
+ --rs-sidebar-active: var(--rs-color-text-button-tertiary, #48a0d4);
374
+ --rs-sidebar-hover: var(--rs-color-button-blue-surface, #e6f6fb);
375
+ --rs-sidebar-width-collapsed: 75px;
376
+ --rs-sidebar-width-expanded: 286px;
377
+
378
+ background: var(--rs-sidebar-background);
379
+ border-right: 1px solid var(--rs-sidebar-border);
380
+ box-sizing: border-box;
381
+ color: var(--rs-sidebar-color);
382
+ display: flex;
383
+ flex-direction: column;
384
+ flex-shrink: 0;
385
+ font-family: var(--rs-font-family, "Inter", sans-serif);
386
+ font-size: 16px;
387
+ font-weight: 400;
388
+ gap: 52px;
389
+ height: 100%;
390
+ overflow: hidden;
391
+ transition: width 0.3s ease-in-out;
392
+ will-change: width;
359
393
  width: var(--rs-sidebar-width-collapsed);
360
394
  }
361
- .rs-sidebar--pc {
362
- --rs-sidebar-active: var(--rs-color-icon-project-pc, #014a9f);
395
+ .rs-sidebar--pc {
396
+ --rs-sidebar-active: var(--rs-color-icon-project-pc, #014a9f);
363
397
  --rs-sidebar-hover: var(--rs-color-darkblue-100, #e5ecf5);
364
398
  }
365
- .rs-sidebar--alta {
366
- --rs-sidebar-active: var(--rs-color-icon-project-alta, #65ac1e);
399
+ .rs-sidebar--alta {
400
+ --rs-sidebar-active: var(--rs-color-icon-project-alta, #65ac1e);
367
401
  --rs-sidebar-hover: var(--rs-color-green-100, #edf7e6);
368
402
  }
369
- .rs-sidebar--cc {
370
- --rs-sidebar-active: var(--rs-color-icon-project-cc, #49a0d4);
403
+ .rs-sidebar--cc {
404
+ --rs-sidebar-active: var(--rs-color-icon-project-cc, #49a0d4);
371
405
  --rs-sidebar-hover: var(--rs-color-blue-100, #e6f6fb);
372
406
  }
373
- .rs-sidebar--pog {
374
- --rs-sidebar-active: var(--rs-color-icon-project-pog, #007c2f);
407
+ .rs-sidebar--pog {
408
+ --rs-sidebar-active: var(--rs-color-icon-project-pog, #007c2f);
375
409
  --rs-sidebar-hover: var(--rs-color-navygreen-100, #e5f1ea);
376
410
  }
377
- .rs-sidebar--cyo {
378
- --rs-sidebar-active: var(--rs-color-icon-project-cyo, #49a0d4);
411
+ .rs-sidebar--cyo {
412
+ --rs-sidebar-active: var(--rs-color-icon-project-cyo, #49a0d4);
379
413
  --rs-sidebar-hover: var(--rs-color-blue-100, #e6f6fb);
380
414
  }
381
- .rs-sidebar--expanded,
382
- .rs-sidebar--mobile-open {
383
- overflow: visible;
415
+ .rs-sidebar--expanded,
416
+ .rs-sidebar--mobile-open {
417
+ overflow: visible;
384
418
  width: var(--rs-sidebar-width-expanded);
385
419
  }
386
- .rs-sidebar__header {
387
- align-items: center;
388
- position: relative;
389
- box-sizing: border-box;
390
- display: flex;
391
- gap: 6px;
392
- height: 88px;
393
- justify-content: flex-start;
420
+ .rs-sidebar__header {
421
+ align-items: center;
422
+ position: relative;
423
+ box-sizing: border-box;
424
+ display: flex;
425
+ gap: 10px;
426
+ justify-content: flex-start;
394
427
  padding: 0;
395
428
  }
396
- .rs-sidebar__brand {
397
- align-items: center;
398
- display: flex;
399
- color: var(--rs-sidebar-active);
400
- flex: 1;
401
- gap: 6px;
402
- min-width: 0;
403
- padding: 0 24px;
404
- }
405
- .rs-sidebar__module-trigger {
406
- align-items: center;
407
- background: transparent;
408
- border: 0;
409
- color: inherit;
410
- cursor: pointer;
411
- display: inline-flex;
412
- justify-content: flex-start;
413
- font: inherit;
414
- gap: 6px;
415
- min-width: 0;
416
- appearance: none;
417
- -webkit-appearance: none;
418
- padding: 0;
419
- text-align: left;
429
+ .rs-sidebar__brand {
430
+ align-items: center;
431
+ display: flex;
432
+ color: var(--rs-sidebar-active);
433
+ flex: 1;
434
+ gap: 10px;
435
+ min-width: 0;
436
+ padding: 32px 24px;
437
+ }
438
+ .rs-sidebar__module-trigger {
439
+ align-items: center;
440
+ background: transparent;
441
+ border: 0;
442
+ color: inherit;
443
+ cursor: pointer;
444
+ display: inline-flex;
445
+ justify-content: flex-start;
446
+ font: inherit;
447
+ gap: 10px;
448
+ min-width: 0;
449
+ appearance: none;
450
+ -webkit-appearance: none;
451
+ padding: 0;
452
+ text-align: left;
420
453
  width: 100%;
421
454
  }
422
- .rs-sidebar__module-trigger:hover:not(:disabled),
423
- .rs-sidebar__module-trigger:active:not(:disabled) {
424
- background: transparent;
455
+ .rs-sidebar__module-trigger:hover:not(:disabled),
456
+ .rs-sidebar__module-trigger:active:not(:disabled) {
457
+ background: transparent;
425
458
  color: inherit;
426
459
  }
427
- .rs-sidebar__module-trigger:focus-visible {
428
- outline: 2px solid var(--rs-color-stroke-focused, #48a0d4);
460
+ .rs-sidebar__module-trigger:focus-visible {
461
+ outline: 2px solid var(--rs-color-stroke-focused, #48a0d4);
429
462
  outline-offset: 2px;
430
463
  }
431
- .rs-sidebar--expanded .rs-sidebar__module-chevron,
432
- .rs-sidebar--mobile-open .rs-sidebar__module-chevron {
464
+ .rs-sidebar--expanded .rs-sidebar__module-chevron,
465
+ .rs-sidebar--mobile-open .rs-sidebar__module-chevron {
433
466
  margin-left: auto;
434
467
  }
435
- .rs-sidebar__module-trigger > .rs-icon:first-child {
468
+ .rs-sidebar__module-trigger > .rs-icon:first-child {
436
469
  margin-left: 0;
437
470
  }
438
- .rs-sidebar__brand > .rs-icon:first-child {
471
+ .rs-sidebar__brand > .rs-icon:first-child {
439
472
  margin-left: 0;
440
473
  }
441
- .rs-sidebar__title,
442
- .rs-sidebar__item-label,
443
- .rs-sidebar__item-chevron,
444
- .rs-sidebar__module-chevron {
445
- max-width: 0;
446
- opacity: 0;
447
- overflow: hidden;
448
- transition:
449
- max-width 220ms cubic-bezier(0.4, 0, 0.2, 1),
450
- opacity 220ms cubic-bezier(0.4, 0, 0.2, 1);
474
+ .rs-sidebar__title,
475
+ .rs-sidebar__item-label,
476
+ .rs-sidebar__item-chevron,
477
+ .rs-sidebar__module-chevron {
478
+ max-width: 0;
479
+ opacity: 0;
480
+ overflow: hidden;
481
+ transition:
482
+ max-width 0.3s ease-in-out,
483
+ opacity 0.3s ease-in-out;
451
484
  white-space: nowrap;
452
485
  }
453
- .rs-sidebar--expanded .rs-sidebar__title,
454
- .rs-sidebar--expanded .rs-sidebar__item-label,
455
- .rs-sidebar--expanded .rs-sidebar__item-chevron,
456
- .rs-sidebar--expanded .rs-sidebar__module-chevron,
457
- .rs-sidebar--mobile-open .rs-sidebar__title,
458
- .rs-sidebar--mobile-open .rs-sidebar__item-label,
459
- .rs-sidebar--mobile-open .rs-sidebar__item-chevron,
460
- .rs-sidebar--mobile-open .rs-sidebar__module-chevron {
461
- max-width: 220px;
486
+ .rs-sidebar--expanded .rs-sidebar__title,
487
+ .rs-sidebar--expanded .rs-sidebar__item-label,
488
+ .rs-sidebar--expanded .rs-sidebar__item-chevron,
489
+ .rs-sidebar--expanded .rs-sidebar__module-chevron,
490
+ .rs-sidebar--mobile-open .rs-sidebar__title,
491
+ .rs-sidebar--mobile-open .rs-sidebar__item-label,
492
+ .rs-sidebar--mobile-open .rs-sidebar__item-chevron,
493
+ .rs-sidebar--mobile-open .rs-sidebar__module-chevron {
494
+ max-width: 220px;
462
495
  opacity: 1;
463
496
  }
464
- .rs-sidebar__title {
465
- color: var(--rs-sidebar-color);
466
- font-family: var(--rs-font-family, "Inter", sans-serif);
467
- font-weight: 400;
468
- line-height: 1;
497
+ .rs-sidebar__title {
498
+ color: var(--rs-sidebar-color);
499
+ font-family: var(--rs-font-family, "Inter", sans-serif);
500
+ font-weight: 400;
501
+ line-height: 1;
469
502
  text-overflow: ellipsis;
470
503
  }
471
- .rs-sidebar__module-menu.p-menu {
472
- background: var(--rs-sidebar-background);
473
- border: 1px solid var(--rs-sidebar-border);
474
- border-radius: 4px;
475
- box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
476
- left: 16px;
477
- min-width: calc(var(--rs-sidebar-width-expanded) - 32px);
478
- overflow: hidden;
479
- padding: 0;
480
- position: absolute;
481
- top: 88px;
504
+ .rs-sidebar__module-menu.p-menu {
505
+ background: var(--rs-sidebar-background);
506
+ border: 1px solid var(--rs-sidebar-border);
507
+ border-radius: 4px;
508
+ box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
509
+ left: 16px;
510
+ min-width: calc(var(--rs-sidebar-width-expanded) - 32px);
511
+ overflow: hidden;
512
+ padding: 0;
513
+ position: absolute;
514
+ top: 88px;
482
515
  z-index: 20;
483
516
  }
484
- .rs-sidebar__module-menu .p-menu-list {
485
- gap: 0;
517
+ .rs-sidebar__module-menu .p-menu-list {
518
+ gap: 0;
486
519
  padding: 0;
487
520
  }
488
- .rs-sidebar__module-option .p-menu-item-content {
489
- color: var(--rs-sidebar-color);
521
+ .rs-sidebar__module-option .p-menu-item-content {
522
+ color: var(--rs-sidebar-color);
490
523
  border-radius: 0;
491
524
  }
492
- .rs-sidebar__module-option .p-menu-item-link {
493
- font-family: inherit;
494
- font-size: inherit;
495
- line-height: 1;
496
- min-height: 38px;
525
+ .rs-sidebar__module-option .p-menu-item-link {
526
+ font-family: inherit;
527
+ font-size: inherit;
528
+ line-height: 1;
529
+ min-height: 38px;
497
530
  padding: 10px 14px;
498
531
  }
499
- .rs-sidebar__module-option:not(.p-disabled) .p-menu-item-content:hover,
500
- .rs-sidebar__module-option--active .p-menu-item-content {
501
- background: var(--rs-sidebar-hover);
532
+ .rs-sidebar__module-option:not(.p-disabled) .p-menu-item-content:hover,
533
+ .rs-sidebar__module-option--active .p-menu-item-content {
534
+ background: var(--rs-sidebar-hover);
502
535
  color: var(--rs-sidebar-color);
503
536
  }
504
- .rs-sidebar__module-option--disabled .p-menu-item-content {
505
- color: var(--rs-sidebar-muted);
537
+ .rs-sidebar__module-option--disabled .p-menu-item-content {
538
+ color: var(--rs-sidebar-muted);
506
539
  cursor: not-allowed;
507
540
  }
508
- .rs-sidebar__module-option--disabled .p-menu-item-content:hover {
541
+ .rs-sidebar__module-option--disabled .p-menu-item-content:hover {
509
542
  background: transparent;
510
543
  }
511
- .rs-sidebar__module-option.p-focus .p-menu-item-content {
512
- background: var(--rs-sidebar-hover);
544
+ .rs-sidebar__module-option.p-focus .p-menu-item-content {
545
+ background: var(--rs-sidebar-hover);
513
546
  color: var(--rs-sidebar-color);
514
547
  }
515
- .rs-sidebar__module-option.p-focus .p-menu-item-link {
516
- outline: 2px solid var(--rs-color-stroke-focused, #48a0d4);
548
+ .rs-sidebar__module-option.p-focus .p-menu-item-link {
549
+ outline: 2px solid var(--rs-color-stroke-focused, #48a0d4);
517
550
  outline-offset: -2px;
518
551
  }
519
- .rs-sidebar__header-button {
520
- align-items: center;
521
- background: transparent;
522
- border: 0;
523
- border-radius: 999px;
524
- color: var(--rs-color-icon-secondary, #000000);
525
- cursor: pointer;
526
- display: inline-flex;
527
- flex: 0 0 auto;
528
- justify-content: center;
529
- appearance: none;
530
- -webkit-appearance: none;
531
- min-height: 24px;
532
- min-width: 24px;
552
+ .rs-sidebar__header-button {
553
+ align-items: center;
554
+ background: transparent;
555
+ border: 0;
556
+ border-radius: 999px;
557
+ color: var(--rs-color-icon-secondary, #000000);
558
+ cursor: pointer;
559
+ display: inline-flex;
560
+ flex: 0 0 auto;
561
+ justify-content: center;
562
+ appearance: none;
563
+ -webkit-appearance: none;
564
+ min-height: 24px;
565
+ min-width: 24px;
533
566
  padding: 2px;
534
567
  }
535
- .rs-sidebar__header-button:hover:not(:disabled),
536
- .rs-sidebar__header-button:active:not(:disabled) {
537
- background: var(--rs-sidebar-hover) !important;
568
+ .rs-sidebar__header-button:hover:not(:disabled),
569
+ .rs-sidebar__header-button:active:not(:disabled) {
570
+ background: var(--rs-sidebar-hover) !important;
538
571
  color: var(--rs-color-icon-secondary, #000000);
539
572
  }
540
- .rs-sidebar__header-button:focus-visible,
541
- .rs-sidebar__item:focus-visible {
542
- outline: 2px solid var(--rs-color-stroke-focused, #48a0d4);
573
+ .rs-sidebar__header-button:focus-visible,
574
+ .rs-sidebar__item:focus-visible {
575
+ outline: 2px solid var(--rs-color-stroke-focused, #48a0d4);
543
576
  outline-offset: -2px;
544
577
  }
545
- .rs-sidebar__content {
546
- display: flex;
547
- flex-direction: column;
548
- flex: 1;
578
+ .rs-sidebar__content {
579
+ display: flex;
580
+ flex-direction: column;
581
+ flex: 1;
549
582
  min-height: 0;
550
583
  }
551
- .rs-sidebar__nav {
552
- flex: 1;
584
+ .rs-sidebar__nav {
585
+ flex: 1;
553
586
  min-height: 0;
554
587
  }
555
- .rs-sidebar__list {
556
- list-style: none;
557
- margin: 0;
588
+ .rs-sidebar__list {
589
+ list-style: none;
590
+ margin: 0;
558
591
  padding: 0;
559
592
  }
560
- .rs-sidebar__item {
561
- align-items: center;
562
- background: transparent;
563
- border: 0;
564
- border-right: 3px solid transparent;
565
- box-sizing: border-box;
566
- color: var(--rs-sidebar-active);
567
- cursor: pointer;
568
- display: flex;
569
- justify-content: flex-start;
570
- font: inherit;
571
- font-weight: 400;
572
- gap: 8px;
573
- appearance: none;
574
- -webkit-appearance: none;
575
- height: 48px;
576
- padding: 12px 0;
577
- padding-left: 24px;
578
- text-align: left;
593
+ .rs-sidebar__item {
594
+ align-items: center;
595
+ background: transparent;
596
+ border: 0;
597
+ border-right: 4px solid transparent;
598
+ box-sizing: border-box;
599
+ color: var(--rs-sidebar-active);
600
+ cursor: pointer;
601
+ display: flex;
602
+ justify-content: flex-start;
603
+ font: inherit;
604
+ font-weight: 300;
605
+ gap: 10px;
606
+ appearance: none;
607
+ -webkit-appearance: none;
608
+ padding: 10px 24px;
609
+ text-align: left;
579
610
  width: 100%;
580
611
  }
581
- .rs-sidebar__item:not(.rs-sidebar__item--footer):hover:not(:disabled),
582
- .rs-sidebar__item:not(.rs-sidebar__item--footer):active:not(:disabled) {
612
+ .rs-sidebar__item:not(.rs-sidebar__item--footer):hover:not(:disabled),
613
+ .rs-sidebar__item:not(.rs-sidebar__item--footer):active:not(:disabled) {
583
614
  background: var(--rs-sidebar-hover) !important;
584
- color: var(--rs-sidebar-active);
585
615
  }
586
- .rs-sidebar__item:disabled {
587
- color: var(--rs-sidebar-muted);
588
- cursor: not-allowed;
616
+ .rs-sidebar__item:disabled {
617
+ color: var(--rs-sidebar-muted);
618
+ cursor: not-allowed;
589
619
  opacity: 1;
590
620
  }
591
- .rs-sidebar__item--active {
592
- background: var(--rs-sidebar-hover) !important;
621
+ .rs-sidebar__item--active {
622
+ background: var(--rs-sidebar-hover) !important;
593
623
  border-right-color: var(--rs-sidebar-active);
594
624
  }
595
- .rs-sidebar__footer {
596
- align-items: center;
597
- display: flex;
598
- height: 88px;
625
+ .rs-sidebar__footer {
626
+ align-items: center;
627
+ display: flex;
599
628
  margin-top: 52px;
600
629
  }
601
- .rs-sidebar__item--footer {
602
- color: var(--rs-sidebar-color);
630
+ .rs-sidebar__item--footer {
631
+ color: var(--rs-sidebar-color);
632
+ padding: 32px 24px;
603
633
  }
604
- .rs-sidebar__item--footer .rs-sidebar__item-icon {
634
+ .rs-sidebar__item--footer .rs-sidebar__item-icon {
605
635
  color: inherit;
606
636
  }
607
- .rs-sidebar__item-icon {
608
- flex: 0 0 auto;
609
- color: var(--rs-sidebar-active);
610
- margin-left: 0;
611
- width: 24px;
637
+ .rs-sidebar__item-icon {
638
+ flex: 0 0 auto;
639
+ color: var(--rs-sidebar-active);
640
+ margin-left: 0;
641
+ width: 24px;
612
642
  height: 24px;
613
643
  }
614
- .rs-sidebar__brand .rs-icon {
615
- width: 24px;
644
+ .rs-sidebar__brand .rs-icon {
645
+ width: 24px;
616
646
  height: 24px;
617
647
  }
618
- .rs-sidebar__item-label {
619
- color: var(--rs-sidebar-color);
620
- font-family: var(--rs-font-family, "Inter", sans-serif);
621
- min-width: 0;
648
+ .rs-sidebar__item-label {
649
+ color: var(--rs-sidebar-color);
650
+ font-family: var(--rs-font-family, "Inter", sans-serif);
651
+ min-width: 0;
622
652
  text-overflow: ellipsis;
623
653
  }
624
- .rs-sidebar__item-chevron {
654
+ .rs-sidebar__item-chevron {
625
655
  margin-left: auto;
626
656
  }
627
- .rs-sidebar--mobile-open {
628
- border-right: 0;
629
- bottom: 0;
630
- gap: clamp(8px, 4vh, 52px);
631
- left: 0;
632
- position: fixed;
633
- right: 0;
634
- top: 0;
635
- width: 100%;
657
+ .rs-sidebar--mobile-open {
658
+ border-right: 0;
659
+ bottom: 0;
660
+ gap: clamp(8px, 4vh, 52px);
661
+ left: 0;
662
+ position: fixed;
663
+ right: 0;
664
+ top: 0;
665
+ width: 100%;
636
666
  z-index: 10000;
637
667
  }
638
- .rs-sidebar--mobile-open .rs-sidebar__header {
639
- height: 88px;
640
- }
641
- .rs-sidebar--mobile-open .rs-sidebar__module-menu {
642
- left: 16px;
643
- min-width: min(320px, calc(100% - 32px));
668
+ .rs-sidebar--mobile-open .rs-sidebar__module-menu {
669
+ left: 16px;
670
+ min-width: min(320px, calc(100% - 32px));
644
671
  top: 88px;
645
672
  }
646
- .rs-sidebar--mobile-open .rs-sidebar__item {
647
- font-size: 18px;
648
- min-height: 48px;
649
- padding-bottom: 12px;
650
- padding-top: 12px;
673
+ .rs-sidebar--mobile-open .rs-sidebar__item {
674
+ font-size: 16px;
675
+ padding: 20px 24px;
651
676
  }
677
+ .rs-sidebar--mobile-open .rs-sidebar__item--footer {
678
+ padding: 32px 24px;
679
+ }