@egovernments/digit-ui-components-css 0.2.3 → 2.0.0-dev-02

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (70) hide show
  1. package/dist/index.css +3 -15427
  2. package/package.json +30 -35
  3. package/src/digitv2/components/FormComposerV2.scss +6 -5
  4. package/src/digitv2/components/accordionV2.scss +59 -59
  5. package/src/digitv2/components/alertCardV2.scss +43 -43
  6. package/src/digitv2/components/backLinkV2.scss +11 -8
  7. package/src/digitv2/components/bodyContainerV2.scss +2 -1
  8. package/src/digitv2/components/bottomSheetV2.scss +22 -19
  9. package/src/digitv2/components/breadcrumbV2.scss +27 -25
  10. package/src/digitv2/components/buttonsV2.scss +72 -72
  11. package/src/digitv2/components/cardV2.scss +18 -17
  12. package/src/digitv2/components/cardbasedoptionsV2.scss +4 -1
  13. package/src/digitv2/components/cardlabelV2.scss +4 -3
  14. package/src/digitv2/components/checkboxV2.scss +37 -32
  15. package/src/digitv2/components/chipV2.scss +46 -43
  16. package/src/digitv2/components/dividerV2.scss +7 -4
  17. package/src/digitv2/components/errorMessageV2.scss +15 -15
  18. package/src/digitv2/components/fieldV1.scss +65 -64
  19. package/src/digitv2/components/fileUploadV2.scss +129 -126
  20. package/src/digitv2/components/filterCardV2.scss +54 -51
  21. package/src/digitv2/components/footerV2.scss +14 -13
  22. package/src/digitv2/components/formCardV2.scss +52 -49
  23. package/src/digitv2/components/hamburgerV2.scss +145 -142
  24. package/src/digitv2/components/headerV2.scss +60 -57
  25. package/src/digitv2/components/headerdropdownV2.scss +72 -69
  26. package/src/digitv2/components/infobuttonV2.scss +18 -15
  27. package/src/digitv2/components/labelFieldPairV2.scss +11 -8
  28. package/src/digitv2/components/landingpagecardV2.scss +73 -70
  29. package/src/digitv2/components/loaderV2.scss +7 -4
  30. package/src/digitv2/components/menuCardV2.scss +34 -31
  31. package/src/digitv2/components/metricCardV2.scss +55 -52
  32. package/src/digitv2/components/mobileNumberV2.scss +10 -10
  33. package/src/digitv2/components/multiSelectDropdownV2.scss +170 -168
  34. package/src/digitv2/components/otpInputV2.scss +29 -26
  35. package/src/digitv2/components/panelCardV2.scss +46 -43
  36. package/src/digitv2/components/panelV2.scss +34 -31
  37. package/src/digitv2/components/popUpV2.scss +94 -91
  38. package/src/digitv2/components/radiobtnV2.scss +24 -23
  39. package/src/digitv2/components/selectDropdownV2.scss +200 -197
  40. package/src/digitv2/components/selectionTagV2.scss +32 -29
  41. package/src/digitv2/components/sidePanelV2.scss +51 -48
  42. package/src/digitv2/components/sidenavV2.scss +119 -116
  43. package/src/digitv2/components/stepperV2.scss +61 -58
  44. package/src/digitv2/components/summaryCardFieldPairV2.scss +25 -22
  45. package/src/digitv2/components/summaryCardV2.scss +30 -27
  46. package/src/digitv2/components/switchV2.scss +34 -31
  47. package/src/digitv2/components/tabV2.scss +29 -26
  48. package/src/digitv2/components/tableV2.scss +152 -149
  49. package/src/digitv2/components/tagV2.scss +27 -24
  50. package/src/digitv2/components/textInputV2.scss +101 -101
  51. package/src/digitv2/components/textareaV2.scss +23 -20
  52. package/src/digitv2/components/textblockV2.scss +31 -28
  53. package/src/digitv2/components/timelineV2.scss +64 -61
  54. package/src/digitv2/components/toastV2.scss +28 -25
  55. package/src/digitv2/components/toggleV2.scss +55 -46
  56. package/src/digitv2/components/tooltipwrapperV2.scss +97 -94
  57. package/src/digitv2/components/treeSelectV2.scss +64 -55
  58. package/src/digitv2/index.scss +136 -134
  59. package/src/digitv2/pages/employee/boundaryFilter.scss +7 -7
  60. package/src/digitv2/pages/employee/inboxsearchcomposer.scss +48 -48
  61. package/src/digitv2/pages/employee/index.scss +4 -4
  62. package/src/digitv2/pages/employee/reactdatatable.scss +13 -13
  63. package/src/digitv2/pages/employee/workbench.scss +29 -28
  64. package/src/digitv2/typography.scss +633 -640
  65. package/src/index.scss +28 -19
  66. package/src/pages/employee/index.scss +26 -26
  67. package/src/pages/employee/login.scss +4 -4
  68. package/src/theme-variables.css +137 -0
  69. package/CHANGELOG.md +0 -260
  70. package/dist/index.min.css +0 -7
package/src/digitv2/components/sidenavV2.scss CHANGED
@@ -1,23 +1,26 @@
1
+ @import './theme-variables.css';
2
+ @import '../typography.scss';
3
+
1
4
  .digit-sidebar {
2
5
  position: fixed;
3
6
  height: 100%;
4
- background-color: theme(digitv2.lightTheme.primary-2);
7
+ background-color: theme("digitv2.lightTheme.primary-2");
5
8
  overflow-x: hidden;
6
9
  left: 0;
7
10
  top: 0;
8
- width: theme(digitv2.spacers.spacer12);
11
+ width: theme("digitv2.spacers.spacer12");
9
12
  display: flex;
10
13
  flex-direction: column;
11
14
  padding-top: 1.563rem;
12
- padding-left: theme(digitv2.spacers.spacer3);
13
- padding-right: theme(digitv2.spacers.spacer3);
15
+ padding-left: theme("digitv2.spacers.spacer3");
16
+ padding-right: theme("digitv2.spacers.spacer3");
14
17
  transition: width 0.5s ease;
15
18
  z-index: 10000;
16
19
 
17
20
  &.hovered {
18
21
  width: auto;
19
22
  min-width: 15rem;
20
- padding: theme(digitv2.spacers.spacer0);
23
+ padding: theme("digitv2.spacers.spacer0");
21
24
  }
22
25
 
23
26
 
@@ -25,17 +28,17 @@
25
28
  height: 4.5rem;
26
29
  min-width: 15rem;
27
30
  width: auto;
28
- padding: theme(digitv2.spacers.spacer4) !important;
31
+ padding: theme("digitv2.spacers.spacer4") !important;
29
32
 
30
33
  .digit-sidebar-search {
31
- height: theme(digitv2.spacers.spacer10) !important;
34
+ height: theme("digitv2.spacers.spacer10") !important;
32
35
  min-width: 13rem;
33
36
 
34
37
  .digit-text-input-customIcon {
35
- height: theme(digitv2.spacers.spacer6);
36
- width: theme(digitv2.spacers.spacer6);
37
- top: theme(digitv2.spacers.spacer2);
38
- right: theme(digitv2.spacers.spacer2);
38
+ height: theme("digitv2.spacers.spacer6");
39
+ width: theme("digitv2.spacers.spacer6");
40
+ top: theme("digitv2.spacers.spacer2");
41
+ right: theme("digitv2.spacers.spacer2");
39
42
  }
40
43
 
41
44
  .input-container {
@@ -45,74 +48,74 @@
45
48
  input {
46
49
  max-height: 100%;
47
50
  background-color: transparent;
48
- border: 0.063rem solid theme(digitv2.lightTheme.paper-secondary);
49
- color: theme(digitv2.lightTheme.generic-background);
51
+ border: 0.063rem solid theme("digitv2.lightTheme.paper-secondary");
52
+ color: theme("digitv2.lightTheme.generic-background");
50
53
 
51
54
  ::placeholder {
52
- color: theme(digitv2.lightTheme.generic-background);
55
+ color: theme("digitv2.lightTheme.generic-background");
53
56
  }
54
57
  }
55
58
 
56
59
  .input-container:focus-within {
57
60
  input {
58
- border: 0.063rem solid theme(digitv2.lightTheme.paper-secondary) !important;
61
+ border: 0.063rem solid theme("digitv2.lightTheme.paper-secondary") !important;
59
62
  }
60
63
  }
61
64
  }
62
65
 
63
66
  ::placeholder {
64
67
  content: attr(placeholder);
65
- @extend .typography.body-s;
66
- font-family: theme(digitv2.fontFamily.sans);
67
- font-style: theme(digitv2.fontStyle.normal);
68
- font-weight: theme(digitv2.fontWeight.regular);
69
- line-height: theme(digitv2.lineHeight.lineheight2);
68
+ @include typography-body-s;
69
+ font-family: theme("digitv2.fontFamily.sans");
70
+ font-style: theme("digitv2.fontStyle.normal");
71
+ font-weight: theme("digitv2.fontWeight.regular");
72
+ line-height: theme("digitv2.lineHeight.lineheight2");
70
73
 
71
74
  @media (max-aspect-ratio: 9/16) {
72
75
  /* Media query for mobile */
73
- font-size: theme(digitv2.fontSize.body-s.mobile);
76
+ font-size: theme("digitv2.fontSize.body-s.mobile");
74
77
  }
75
78
 
76
79
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
77
80
  /* Media query for tablets */
78
- font-size: theme(digitv2.fontSize.body-s.tablet);
81
+ font-size: theme("digitv2.fontSize.body-s.tablet");
79
82
  }
80
83
 
81
84
  @media (min-aspect-ratio: 3/4) {
82
85
  /* Media query for desktop */
83
- font-size: theme(digitv2.fontSize.body-s.desktop);
86
+ font-size: theme("digitv2.fontSize.body-s.desktop");
84
87
  }
85
- color: theme(digitv2.lightTheme.generic-background);
88
+ color: theme("digitv2.lightTheme.generic-background");
86
89
  }
87
90
  }
88
91
 
89
92
  .digit-sidebar-search-container.light {
90
93
  .digit-sidebar-search {
91
94
  input {
92
- background-color: theme(digitv2.lightTheme.paper-primary);
93
- border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
94
- color: theme(digitv2.lightTheme.text-primary);
95
+ background-color: theme("digitv2.lightTheme.paper-primary");
96
+ border: 0.063rem solid theme("digitv2.lightTheme.generic-divider");
97
+ color: theme("digitv2.lightTheme.text-primary");
95
98
 
96
99
  ::placeholder {
97
- color: theme(digitv2.lightTheme.text-disabled);
100
+ color: theme("digitv2.lightTheme.text-disabled");
98
101
  }
99
102
  }
100
103
 
101
104
  .input-container:focus-within {
102
105
  input {
103
- border: 0.063rem solid theme(digitv2.lightTheme.generic-divider) !important;
106
+ border: 0.063rem solid theme("digitv2.lightTheme.generic-divider") !important;
104
107
  }
105
108
  }
106
109
  }
107
110
 
108
111
  ::placeholder {
109
- color: theme(digitv2.lightTheme.text-disabled);
112
+ color: theme("digitv2.lightTheme.text-disabled");
110
113
  }
111
114
  }
112
115
 
113
116
  &.light {
114
- background-color: theme(digitv2.lightTheme.paper-secondary);
115
- border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
117
+ background-color: theme("digitv2.lightTheme.paper-secondary");
118
+ border: 0.063rem solid theme("digitv2.lightTheme.generic-divider");
116
119
  }
117
120
 
118
121
 
@@ -127,8 +130,8 @@
127
130
  .digit-sidebar-item {
128
131
  display: flex;
129
132
  align-items: center;
130
- padding: theme(digitv2.spacers.spacer4);
131
- color: theme(digitv2.lightTheme.paper-primary);
133
+ padding: theme("digitv2.spacers.spacer4");
134
+ color: theme("digitv2.lightTheme.paper-primary");
132
135
  text-decoration: none;
133
136
  transition: background-color 0.3s;
134
137
  cursor: pointer;
@@ -145,7 +148,7 @@
145
148
  }
146
149
 
147
150
  .digit-sidebar-items-container.dark::-webkit-scrollbar-track {
148
- background: theme(digitv2.lightTheme.primary-2);
151
+ background: theme("digitv2.lightTheme.primary-2");
149
152
  }
150
153
 
151
154
  .digit-sidebar-items-container.dark::-webkit-scrollbar-thumb {
@@ -163,45 +166,45 @@
163
166
 
164
167
  .digit-sidebar-items-container.light::-webkit-scrollbar {
165
168
  width: 0.375rem;
166
- background-color: theme(digitv2.lightTheme.generic-background);
169
+ background-color: theme("digitv2.lightTheme.generic-background");
167
170
  }
168
171
 
169
172
  .digit-sidebar-items-container.light::-webkit-scrollbar-track {
170
- background-color: theme(digitv2.lightTheme.generic-background);
173
+ background-color: theme("digitv2.lightTheme.generic-background");
171
174
  border-radius: 0.563rem;
172
175
  }
173
176
 
174
177
  .digit-sidebar-items-container.light::-webkit-scrollbar-thumb {
175
- background-color: theme(digitv2.lightTheme.generic-divider);
178
+ background-color: theme("digitv2.lightTheme.generic-divider");
176
179
  border-radius: 0.563rem;
177
180
  }
178
181
 
179
182
  .icon {
180
- margin-right: theme(digitv2.spacers.spacer3);
181
- width: theme(digitv2.spacers.spacer6);
182
- height: theme(digitv2.spacers.spacer6);
183
+ margin-right: theme("digitv2.spacers.spacer3");
184
+ width: theme("digitv2.spacers.spacer6");
185
+ height: theme("digitv2.spacers.spacer6");
183
186
  }
184
187
 
185
188
  .item-label {
186
189
 
187
- font-family: theme(digitv2.fontFamily.sans);
188
- font-style: theme(digitv2.fontStyle.normal);
189
- font-weight: theme(digitv2.fontWeight.regular);
190
- line-height: theme(digitv2.lineHeight.lineheight2);
190
+ font-family: theme("digitv2.fontFamily.sans");
191
+ font-style: theme("digitv2.fontStyle.normal");
192
+ font-weight: theme("digitv2.fontWeight.regular");
193
+ line-height: theme("digitv2.lineHeight.lineheight2");
191
194
 
192
195
  @media (max-aspect-ratio: 9/16) {
193
196
  /* Media query for mobile */
194
- font-size: theme(digitv2.fontSize.body-s.mobile);
197
+ font-size: theme("digitv2.fontSize.body-s.mobile");
195
198
  }
196
199
 
197
200
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
198
201
  /* Media query for tablets */
199
- font-size: theme(digitv2.fontSize.body-s.tablet);
202
+ font-size: theme("digitv2.fontSize.body-s.tablet");
200
203
  }
201
204
 
202
205
  @media (min-aspect-ratio: 3/4) {
203
206
  /* Media query for desktop */
204
- font-size: theme(digitv2.fontSize.body-s.desktop);
207
+ font-size: theme("digitv2.fontSize.body-s.desktop");
205
208
  }
206
209
 
207
210
  opacity: 0;
@@ -209,8 +212,8 @@
209
212
  }
210
213
 
211
214
  .expand-icon {
212
- width: theme(digitv2.spacers.spacer6);
213
- height: theme(digitv2.spacers.spacer6);
215
+ width: theme("digitv2.spacers.spacer6");
216
+ height: theme("digitv2.spacers.spacer6");
214
217
  margin-left: auto !important;
215
218
  }
216
219
 
@@ -219,12 +222,12 @@
219
222
  }
220
223
 
221
224
  .digit-sidebar-item.light:hover {
222
- background-color: theme(digitv2.lightTheme.generic-background);
225
+ background-color: theme("digitv2.lightTheme.generic-background");
223
226
  }
224
227
 
225
228
  .digit-sidebar-item.light {
226
229
  .item-label {
227
- color: theme(digitv2.lightTheme.primary-2);
230
+ color: theme("digitv2.lightTheme.primary-2");
228
231
  }
229
232
  }
230
233
 
@@ -232,30 +235,30 @@
232
235
  .digit-sidebar-item.selected,
233
236
  .digit-sidebar-item:active:hover,
234
237
  .digit-sidebar-item.selected:hover {
235
- background: theme(digitv2.lightTheme.primary-1);
238
+ background: theme("digitv2.lightTheme.primary-1");
236
239
 
237
240
  .item-label {
238
- @extend .typography.heading-s;
239
- font-family: theme(digitv2.fontFamily.sans);
240
- font-style: theme(digitv2.fontStyle.normal);
241
- font-weight: theme(digitv2.fontWeight.bold);
242
- line-height: theme(digitv2.lineHeight.lineheight1);
241
+ @include typography-heading-s;
242
+ font-family: theme("digitv2.fontFamily.sans");
243
+ font-style: theme("digitv2.fontStyle.normal");
244
+ font-weight: theme("digitv2.fontWeight.bold");
245
+ line-height: theme("digitv2.lineHeight.lineheight1");
243
246
 
244
247
  @media (max-aspect-ratio: 9/16) {
245
248
  /* Media query for mobile */
246
- font-size: theme(digitv2.fontSize.heading-s.mobile);
249
+ font-size: theme("digitv2.fontSize.heading-s.mobile");
247
250
  }
248
251
 
249
252
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
250
253
  /* Media query for tablets */
251
- font-size: theme(digitv2.fontSize.heading-s.tablet);
254
+ font-size: theme("digitv2.fontSize.heading-s.tablet");
252
255
  }
253
256
 
254
257
  @media (min-aspect-ratio: 3/4) {
255
258
  /* Media query for desktop */
256
- font-size: theme(digitv2.fontSize.heading-s.desktop);
259
+ font-size: theme("digitv2.fontSize.heading-s.desktop");
257
260
  }
258
- color: theme(digitv2.lightTheme.paper-primary);
261
+ color: theme("digitv2.lightTheme.paper-primary");
259
262
  }
260
263
  }
261
264
 
@@ -268,10 +271,10 @@
268
271
  top: 0.062rem;
269
272
  left: 0;
270
273
  bottom: 0.063rem;
271
- width: theme(digitv2.spacers.spacer2);
272
- background: theme(digitv2.lightTheme.paper-primary);
273
- border-top-right-radius: theme(digitv2.spacers.spacer1);
274
- border-bottom-right-radius: theme(digitv2.spacers.spacer1);
274
+ width: theme("digitv2.spacers.spacer2");
275
+ background: theme("digitv2.lightTheme.paper-primary");
276
+ border-top-right-radius: theme("digitv2.spacers.spacer1");
277
+ border-bottom-right-radius: theme("digitv2.spacers.spacer1");
275
278
  }
276
279
 
277
280
  .digit-sidebar-item.secondary:active,
@@ -288,7 +291,7 @@
288
291
  background: #c84c0e1a;
289
292
 
290
293
  .item-label {
291
- color: theme(digitv2.lightTheme.primary-2);
294
+ color: theme("digitv2.lightTheme.primary-2");
292
295
  }
293
296
  }
294
297
 
@@ -301,10 +304,10 @@
301
304
  top: 0.063rem;
302
305
  left: 0;
303
306
  bottom: 0.063rem;
304
- width: theme(digitv2.spacers.spacer2);
305
- background: theme(digitv2.lightTheme.primary-1);
306
- border-top-right-radius: theme(digitv2.spacers.spacer1);
307
- border-bottom-right-radius: theme(digitv2.spacers.spacer1);
307
+ width: theme("digitv2.spacers.spacer2");
308
+ background: theme("digitv2.lightTheme.primary-1");
309
+ border-top-right-radius: theme("digitv2.spacers.spacer1");
310
+ border-bottom-right-radius: theme("digitv2.spacers.spacer1");
308
311
  }
309
312
 
310
313
  .digit-sidebar.hovered .item-label {
@@ -312,26 +315,26 @@
312
315
  }
313
316
 
314
317
  .digit-sidebar-children {
315
- margin-left: theme(digitv2.spacers.spacer6);
316
- border-left: 0.031rem solid theme(digitv2.lightTheme.text-disabled);
318
+ margin-left: theme("digitv2.spacers.spacer6");
319
+ border-left: 0.031rem solid theme("digitv2.lightTheme.text-disabled");
317
320
  }
318
321
 
319
322
  .digit-sidebar-bottom {
320
323
  background-color: #FFFFFF33;
321
324
  z-index: 5;
322
- padding: theme(digitv2.spacers.spacer4);
325
+ padding: theme("digitv2.spacers.spacer4");
323
326
  display: flex;
324
327
  flex-direction: column;
325
- gap: theme(digitv2.spacers.spacer4);
326
- padding-right: theme(digitv2.spacers.spacer0);
327
- padding-left: theme(digitv2.spacers.spacer0);
328
+ gap: theme("digitv2.spacers.spacer4");
329
+ padding-right: theme("digitv2.spacers.spacer0");
330
+ padding-left: theme("digitv2.spacers.spacer0");
328
331
 
329
332
  .digit-sidebar-bottom-item {
330
333
  display: flex;
331
334
  align-items: center;
332
- gap: theme(digitv2.spacers.spacer2);
335
+ gap: theme("digitv2.spacers.spacer2");
333
336
  cursor: pointer;
334
- height: theme(digitv2.spacers.spacer10);
337
+ height: theme("digitv2.spacers.spacer10");
335
338
 
336
339
  &:hover {
337
340
  background-color: #FFFFFF4D;
@@ -339,44 +342,44 @@
339
342
 
340
343
  svg {
341
344
  flex-shrink: 0;
342
- margin-left: theme(digitv2.spacers.spacer6);
345
+ margin-left: theme("digitv2.spacers.spacer6");
343
346
  }
344
347
 
345
348
  .digit-sidebar-bottom-item-text {
346
349
 
347
- font-family: theme(digitv2.fontFamily.sans);
348
- font-style: theme(digitv2.fontStyle.normal);
349
- font-weight: theme(digitv2.fontWeight.regular);
350
- line-height: theme(digitv2.lineHeight.lineheight2);
350
+ font-family: theme("digitv2.fontFamily.sans");
351
+ font-style: theme("digitv2.fontStyle.normal");
352
+ font-weight: theme("digitv2.fontWeight.regular");
353
+ line-height: theme("digitv2.lineHeight.lineheight2");
351
354
 
352
355
  @media (max-aspect-ratio: 9/16) {
353
356
  /* Media query for mobile */
354
- font-size: theme(digitv2.fontSize.body-xs.mobile);
357
+ font-size: theme("digitv2.fontSize.body-xs.mobile");
355
358
  }
356
359
 
357
360
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
358
361
  /* Media query for tablets */
359
- font-size: theme(digitv2.fontSize.body-xs.tablet);
362
+ font-size: theme("digitv2.fontSize.body-xs.tablet");
360
363
  }
361
364
 
362
365
  @media (min-aspect-ratio: 3/4) {
363
366
  /* Media query for desktop */
364
- font-size: theme(digitv2.fontSize.body-xs.desktop);
367
+ font-size: theme("digitv2.fontSize.body-xs.desktop");
365
368
  }
366
369
 
367
- color: theme(digitv2.lightTheme.paper-primary);
370
+ color: theme("digitv2.lightTheme.paper-primary");
368
371
  }
369
372
  }
370
373
 
371
374
  &.light .digit-sidebar-bottom-item .digit-sidebar-bottom-item-text {
372
- color: theme(digitv2.lightTheme.primary-2);
375
+ color: theme("digitv2.lightTheme.primary-2");
373
376
  }
374
377
 
375
378
  &.light {
376
- border-top: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
379
+ border-top: 0.063rem solid theme("digitv2.lightTheme.generic-divider");
377
380
 
378
381
  .digit-sidebar-bottom-item:hover {
379
- background-color: theme(digitv2.lightTheme.generic-background);
382
+ background-color: theme("digitv2.lightTheme.generic-background");
380
383
  }
381
384
 
382
385
  }
@@ -384,51 +387,51 @@
384
387
  .divider {
385
388
  width: 80%;
386
389
  height: 0.031rem;
387
- background-color: theme(digitv2.lightTheme.generic-divider);
390
+ background-color: theme("digitv2.lightTheme.generic-divider");
388
391
  }
389
392
  }
390
393
 
391
394
  .digit-sidebar {
392
395
  &.collapsed {
393
396
 
394
- padding-left: theme(digitv2.spacers.spacer0);
395
- padding-right: theme(digitv2.spacers.spacer0);
397
+ padding-left: theme("digitv2.spacers.spacer0");
398
+ padding-right: theme("digitv2.spacers.spacer0");
396
399
 
397
400
  .digit-sidebar-search-container-collapsed {
398
- padding-left: theme(digitv2.spacers.spacer3);
399
- padding-right: theme(digitv2.spacers.spacer3);
401
+ padding-left: theme("digitv2.spacers.spacer3");
402
+ padding-right: theme("digitv2.spacers.spacer3");
400
403
  display: flex;
401
404
  align-items: center;
402
405
  justify-content: center;
403
406
  }
404
407
 
405
408
  &.searchDisabled{
406
- padding-top: theme(digitv2.spacers.spacer0);
409
+ padding-top: theme("digitv2.spacers.spacer0");
407
410
  }
408
411
 
409
412
  .digit-sidebar-items-container {
410
413
 
411
414
  display: flex !important;
412
415
  flex-direction: column;
413
- gap: theme(digitv2.spacers.spacer6);
414
- margin-top: theme(digitv2.spacers.spacer6);
416
+ gap: theme("digitv2.spacers.spacer6");
417
+ margin-top: theme("digitv2.spacers.spacer6");
415
418
 
416
419
  .item-child-wrapper {
417
420
  width: 100%;
418
- height: theme(digitv2.spacers.spacer10);
421
+ height: theme("digitv2.spacers.spacer10");
419
422
  display: flex;
420
423
  align-items: center;
421
424
  justify-content: center;
422
425
 
423
426
  .digit-sidebar-item {
424
- padding: theme(digitv2.spacers.spacer0);
425
- width: theme(digitv2.spacers.spacer6);
427
+ padding: theme("digitv2.spacers.spacer0");
428
+ width: theme("digitv2.spacers.spacer6");
426
429
  height: 100%;
427
430
 
428
431
 
429
432
  .icon {
430
- margin-right: theme(digitv2.spacers.spacer3);
431
- margin-left: theme(digitv2.spacers.spacer3);
433
+ margin-right: theme("digitv2.spacers.spacer3");
434
+ margin-left: theme("digitv2.spacers.spacer3");
432
435
  }
433
436
 
434
437
  &.parentLevel {
@@ -439,7 +442,7 @@
439
442
  .digit-sidebar-item:active,
440
443
  .digit-sidebar-item.selected,
441
444
  .digit-sidebar-item.selectedAsParent {
442
- background: theme(digitv2.lightTheme.primary-1);
445
+ background: theme("digitv2.lightTheme.primary-1");
443
446
  display: flex;
444
447
  align-items: center;
445
448
  justify-content: center;
@@ -455,10 +458,10 @@
455
458
  top: 0.062rem;
456
459
  left: 0;
457
460
  bottom: 0.063rem;
458
- width: theme(digitv2.spacers.spacer1);
459
- background: theme(digitv2.lightTheme.paper-primary);
460
- border-top-right-radius: theme(digitv2.spacers.spacer1);
461
- border-bottom-right-radius: theme(digitv2.spacers.spacer1);
461
+ width: theme("digitv2.spacers.spacer1");
462
+ background: theme("digitv2.lightTheme.paper-primary");
463
+ border-top-right-radius: theme("digitv2.spacers.spacer1");
464
+ border-bottom-right-radius: theme("digitv2.spacers.spacer1");
462
465
  }
463
466
 
464
467
  .digit-sidebar-item.secondary:active,
@@ -479,7 +482,7 @@
479
482
  background: #c84c0e1a;
480
483
 
481
484
  .item-label {
482
- color: theme(digitv2.lightTheme.primary-2);
485
+ color: theme("digitv2.lightTheme.primary-2");
483
486
  }
484
487
  }
485
488
 
@@ -494,16 +497,16 @@
494
497
  top: 0.063rem;
495
498
  left: 0;
496
499
  bottom: 0.063rem;
497
- width: theme(digitv2.spacers.spacer1);
498
- background: theme(digitv2.lightTheme.primary-1);
499
- border-top-right-radius: theme(digitv2.spacers.spacer1);
500
- border-bottom-right-radius: theme(digitv2.spacers.spacer1);
500
+ width: theme("digitv2.spacers.spacer1");
501
+ background: theme("digitv2.lightTheme.primary-1");
502
+ border-top-right-radius: theme("digitv2.spacers.spacer1");
503
+ border-bottom-right-radius: theme("digitv2.spacers.spacer1");
501
504
  }
502
505
 
503
506
  }
504
507
 
505
508
  &.searchDisabled{
506
- margin-top: theme(digitv2.spacers.spacer0);
509
+ margin-top: theme("digitv2.spacers.spacer0");
507
510
  }
508
511
  }
509
512
  }
@@ -511,6 +514,6 @@
511
514
 
512
515
  .digit-sidebar-footer-img {
513
516
  width: 6.563rem;
514
- height: theme(digitv2.spacers.spacer3);
517
+ height: theme("digitv2.spacers.spacer3");
515
518
  margin-left: 25%;
516
519
  }