@egovernments/digit-ui-components-css 0.0.2-beta.12 → 0.0.2-beta.13

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.
@@ -0,0 +1,409 @@
1
+ .sidebar {
2
+ position: fixed;
3
+ height: 100%;
4
+ background-color: theme(digitv2.lightTheme.primary-2);
5
+ overflow-x: hidden;
6
+ left: 0;
7
+ top: 0;
8
+ width: theme(digitv2.spacers.spacer12);
9
+ display: flex;
10
+ flex-direction: column;
11
+ padding-top: 1.563rem;
12
+ padding-left:theme(digitv2.spacers.spacer3);
13
+ padding-right:theme(digitv2.spacers.spacer3);
14
+
15
+ &.hovered {
16
+ width: auto;
17
+ min-width: 15rem;
18
+ padding: theme(digitv2.spacers.spacer0);
19
+ }
20
+
21
+
22
+ .sidebar-search-container {
23
+ height: 4.5rem;
24
+ min-width: 15rem;
25
+ width: auto;
26
+ padding:theme(digitv2.spacers.spacer4) !important;
27
+
28
+ .sidebar-search {
29
+ height:theme(digitv2.spacers.spacer10) !important;
30
+ min-width: 13rem;
31
+
32
+ .digit-text-input-customIcon {
33
+ height:theme(digitv2.spacers.spacer6);
34
+ width:theme(digitv2.spacers.spacer6);
35
+ top:theme(digitv2.spacers.spacer2);
36
+ right:theme(digitv2.spacers.spacer2);
37
+ }
38
+
39
+ .input-container {
40
+ max-height: 100%;
41
+ }
42
+
43
+ input {
44
+ max-height: 100%;
45
+ background-color: transparent;
46
+ border: 0.063rem solid theme(digitv2.lightTheme.paper-secondary);
47
+ color: theme(digitv2.lightTheme.generic-background);
48
+
49
+ ::placeholder {
50
+ color: theme(digitv2.lightTheme.generic-background);
51
+ }
52
+ }
53
+
54
+ .input-container:focus-within {
55
+ input {
56
+ border: 0.063rem solid theme(digitv2.lightTheme.paper-secondary) !important;
57
+ }
58
+ }
59
+ }
60
+
61
+ ::placeholder {
62
+ content: attr(placeholder);
63
+ @extend .typography.body-s;
64
+ color: theme(digitv2.lightTheme.generic-background);
65
+ }
66
+ }
67
+
68
+ .sidebar-search-container.light {
69
+ .sidebar-search {
70
+ input {
71
+ background-color: theme(digitv2.lightTheme.paper-primary);
72
+ border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
73
+ color: theme(digitv2.lightTheme.text-primary);
74
+
75
+ ::placeholder {
76
+ color: theme(digitv2.lightTheme.text-disabled);
77
+ }
78
+ }
79
+
80
+ .input-container:focus-within {
81
+ input {
82
+ border: 0.063rem solid theme(digitv2.lightTheme.generic-divider) !important;
83
+ }
84
+ }
85
+ }
86
+
87
+ ::placeholder {
88
+ color: theme(digitv2.lightTheme.text-disabled);
89
+ }
90
+ }
91
+
92
+ &.light {
93
+ background-color: theme(digitv2.lightTheme.paper-secondary);
94
+ border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
95
+ }
96
+
97
+
98
+ }
99
+
100
+ .sidebar-items-container {
101
+ flex: 1;
102
+ overflow-y: auto;
103
+ overflow-x: hidden;
104
+ }
105
+
106
+ .sidebar-item {
107
+ display: flex;
108
+ align-items: center;
109
+ padding:theme(digitv2.spacers.spacer4);
110
+ color: theme(digitv2.lightTheme.paper-primary);
111
+ text-decoration: none;
112
+ transition: background-color 0.3s;
113
+ cursor: pointer;
114
+ outline: none;
115
+ position: relative;
116
+ }
117
+
118
+ .sidebar-items-container::-webkit-scrollbar {
119
+ width: 0.375rem;
120
+ }
121
+
122
+ .sidebar-items-container.dark::-webkit-scrollbar-track {
123
+ background: theme(digitv2.lightTheme.primary-2);
124
+ }
125
+
126
+ .sidebar-items-container.dark::-webkit-scrollbar-thumb {
127
+ background-color: #89ABBA;
128
+ border-radius: 0.563rem;
129
+ }
130
+
131
+ .sidebar-items-container.dark::-webkit-scrollbar-thumb:hover {
132
+ background-color: #6C98A8;
133
+ }
134
+
135
+ .sidebar-items-container.dark::-webkit-scrollbar-thumb:active {
136
+ background-color: #56818E;
137
+ }
138
+
139
+ .sidebar-items-container.light::-webkit-scrollbar {
140
+ width: 0.375rem;
141
+ background-color: theme(digitv2.lightTheme.generic-background);
142
+ }
143
+
144
+ .sidebar-items-container.light::-webkit-scrollbar-track {
145
+ background-color: theme(digitv2.lightTheme.generic-background);
146
+ border-radius: 0.563rem;
147
+ }
148
+
149
+ .sidebar-items-container.light::-webkit-scrollbar-thumb {
150
+ background-color: theme(digitv2.lightTheme.generic-divider);
151
+ border-radius: 0.563rem;
152
+ }
153
+
154
+ .icon {
155
+ margin-right:theme(digitv2.spacers.spacer3);
156
+ width:theme(digitv2.spacers.spacer6);
157
+ height:theme(digitv2.spacers.spacer6);
158
+ }
159
+
160
+ .item-label {
161
+
162
+ font-family: theme(digitv2.fontFamily.sans);
163
+ font-style: theme(digitv2.fontStyle.normal);
164
+ font-weight: theme(digitv2.fontWeight.regular);
165
+ line-height: theme(digitv2.lineHeight.lineheight2);
166
+
167
+ @media (max-aspect-ratio: 9/16) {
168
+ /* Media query for mobile */
169
+ font-size: theme(digitv2.fontSize.body-s.mobile);
170
+ }
171
+
172
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
173
+ /* Media query for tablets */
174
+ font-size: theme(digitv2.fontSize.body-s.tablet);
175
+ }
176
+
177
+ @media (min-aspect-ratio: 3/4) {
178
+ /* Media query for desktop */
179
+ font-size: theme(digitv2.fontSize.body-s.desktop);
180
+ }
181
+
182
+ opacity: 0;
183
+ transition: opacity 0.3s;
184
+ }
185
+
186
+ .expand-icon {
187
+ width:theme(digitv2.spacers.spacer6);
188
+ height:theme(digitv2.spacers.spacer6);
189
+ margin-left: auto !important;
190
+ }
191
+
192
+ .sidebar-item:hover {
193
+ background-color: #FFFFFF4D;
194
+ }
195
+
196
+ .sidebar-item.light:hover {
197
+ background-color: theme(digitv2.lightTheme.generic-background);
198
+ }
199
+
200
+ .sidebar-item.light {
201
+ .item-label {
202
+ color: theme(digitv2.lightTheme.primary-2);
203
+ }
204
+ }
205
+
206
+ .sidebar-item:active,
207
+ .sidebar-item.selected,
208
+ .sidebar-item:active:hover,
209
+ .sidebar-item.selected:hover {
210
+ background: theme(digitv2.lightTheme.primary-1);
211
+
212
+ .item-label {
213
+ @extend .typography.heading-s;
214
+ color: theme(digitv2.lightTheme.paper-primary);
215
+ }
216
+ }
217
+
218
+ .sidebar-item.selected::before,
219
+ .sidebar-item:active::before,
220
+ .sidebar-item:active:hover::before,
221
+ .sidebar-item.selected:hover::before{
222
+ content: '';
223
+ position: absolute;
224
+ top: 0.062rem;
225
+ left: 0;
226
+ bottom: 0.063rem;
227
+ width: theme(digitv2.spacers.spacer2);
228
+ background: theme(digitv2.lightTheme.paper-primary);
229
+ border-top-right-radius: theme(digitv2.spacers.spacer1);
230
+ border-bottom-right-radius: theme(digitv2.spacers.spacer1);
231
+ }
232
+
233
+ .sidebar-item.secondary:active,
234
+ .sidebar-item.secondary.selected,
235
+ .sidebar-item.secondary:active:hover,
236
+ .sidebar-item.secondary.selected:hover {
237
+ background: #FFFFFF4D;
238
+ }
239
+
240
+ .sidebar-item.light.secondary:active,
241
+ .sidebar-item.light.secondary.selected,
242
+ .sidebar-item.light.secondary:active:hover,
243
+ .sidebar-item.light.secondary.selected:hover {
244
+ background: #c84c0e1a;
245
+
246
+ .item-label {
247
+ color: theme(digitv2.lightTheme.primary-2);
248
+ }
249
+ }
250
+
251
+ .sidebar-item.light.secondary.selected::before,
252
+ .sidebar-item.light.secondary:active::before,
253
+ .sidebar-item.light.secondary:active:hover::before,
254
+ .sidebar-item.light.secondary.selected:hover::before{
255
+ content: '';
256
+ position: absolute;
257
+ top: 0.063rem;
258
+ left: 0;
259
+ bottom: 0.063rem;
260
+ width: theme(digitv2.spacers.spacer2);
261
+ background:theme(digitv2.lightTheme.primary-1);
262
+ border-top-right-radius: theme(digitv2.spacers.spacer1);
263
+ border-bottom-right-radius: theme(digitv2.spacers.spacer1);
264
+ }
265
+
266
+ .sidebar.hovered .item-label {
267
+ opacity: 1;
268
+ }
269
+
270
+ .sidebar-children {
271
+ margin-left:theme(digitv2.spacers.spacer6);
272
+ border-left: 0.031rem solid theme(digitv2.lightTheme.text-disabled);
273
+ }
274
+
275
+ .sidebar-bottom {
276
+ background-color: #FFFFFF33;
277
+ z-index: 5;
278
+ padding:theme(digitv2.spacers.spacer4);
279
+ display: flex;
280
+ flex-direction: column;
281
+ gap:theme(digitv2.spacers.spacer4);
282
+ padding-right: theme(digitv2.spacers.spacer0);
283
+ padding-left: theme(digitv2.spacers.spacer0);
284
+
285
+ .sidebar-bottom-item {
286
+ display: flex;
287
+ align-items: center;
288
+ gap:theme(digitv2.spacers.spacer2);
289
+ cursor: pointer;
290
+ height:theme(digitv2.spacers.spacer10);
291
+
292
+ &:hover {
293
+ background-color: #FFFFFF4D;
294
+ }
295
+
296
+ svg {
297
+ flex-shrink: 0;
298
+ margin-left:theme(digitv2.spacers.spacer6);
299
+ }
300
+
301
+ .sidebar-bottom-item-text {
302
+
303
+ font-family: theme(digitv2.fontFamily.sans);
304
+ font-style: theme(digitv2.fontStyle.normal);
305
+ font-weight: theme(digitv2.fontWeight.regular);
306
+ line-height: theme(digitv2.lineHeight.lineheight2);
307
+
308
+ @media (max-aspect-ratio: 9/16) {
309
+ /* Media query for mobile */
310
+ font-size: theme(digitv2.fontSize.body-xs.mobile);
311
+ }
312
+
313
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
314
+ /* Media query for tablets */
315
+ font-size: theme(digitv2.fontSize.body-xs.tablet);
316
+ }
317
+
318
+ @media (min-aspect-ratio: 3/4) {
319
+ /* Media query for desktop */
320
+ font-size: theme(digitv2.fontSize.body-xs.desktop);
321
+ }
322
+
323
+ color: theme(digitv2.lightTheme.paper-primary);
324
+ }
325
+ }
326
+
327
+ &.light .sidebar-bottom-item .sidebar-bottom-item-text {
328
+ color: theme(digitv2.lightTheme.primary-2);
329
+ }
330
+
331
+ &.light {
332
+ border-top: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
333
+
334
+ .sidebar-bottom-item:hover {
335
+ background-color: theme(digitv2.lightTheme.generic-background);
336
+ }
337
+
338
+ }
339
+
340
+ .divider {
341
+ width: 80%;
342
+ height: 0.031rem;
343
+ background-color: theme(digitv2.lightTheme.generic-divider);
344
+ }
345
+ }
346
+
347
+ .sidebar {
348
+ &.collapsed {
349
+
350
+ padding-left: theme(digitv2.spacers.spacer0);
351
+ padding-right: theme(digitv2.spacers.spacer0);
352
+
353
+ .sidebar-search-container-collapsed {
354
+ padding-left:theme(digitv2.spacers.spacer3);
355
+ padding-right:theme(digitv2.spacers.spacer3);
356
+ }
357
+
358
+ .sidebar-items-container {
359
+
360
+ display: flex !important;
361
+ flex-direction: column;
362
+ gap:theme(digitv2.spacers.spacer6);
363
+ margin-top:theme(digitv2.spacers.spacer6);
364
+
365
+ .item-child-wrapper {
366
+ width: 100%;
367
+ height:theme(digitv2.spacers.spacer10);
368
+ display: flex;
369
+ align-items: center;
370
+ justify-content: center;
371
+
372
+ .sidebar-item {
373
+ padding: theme(digitv2.spacers.spacer0);
374
+ width:theme(digitv2.spacers.spacer6);
375
+ height: 100%;
376
+
377
+
378
+ .icon {
379
+ margin-right:theme(digitv2.spacers.spacer3);
380
+ margin-left:theme(digitv2.spacers.spacer3);
381
+ }
382
+
383
+ &.parentLevel {
384
+ width: 100%;
385
+ }
386
+ }
387
+
388
+ .sidebar-item:active,
389
+ .sidebar-item.selected,
390
+ .sidebar-item.selectedAsParent {
391
+ background: theme(digitv2.lightTheme.primary-1);
392
+ border-left: 0.25rem solid theme(digitv2.lightTheme.paper-primary);
393
+ display: flex;
394
+ align-items: center;
395
+ justify-content: center;
396
+
397
+ }
398
+
399
+
400
+ }
401
+ }
402
+ }
403
+ }
404
+
405
+ .digit-sidebar-footer-img {
406
+ width: 6.563rem;
407
+ height:theme(digitv2.spacers.spacer3);
408
+ margin-left: 25%;
409
+ }
@@ -0,0 +1,96 @@
1
+ .tooltip-wrapper {
2
+ position: relative;
3
+ display: inline-block;
4
+ }
5
+
6
+ .tooltip-content{
7
+ position: absolute;
8
+ background-color: theme(digitv2.lightTheme.generic-inputborder);
9
+ color: theme(digitv2.lightTheme.paper-primary);
10
+ padding: theme(digitv2.spacers.spacer2);
11
+ border-radius: theme(digitv2.spacers.spacer1);
12
+ z-index: 1000;
13
+ pointer-events: none;
14
+ width: max-content;
15
+ transition: all 0.5s ease;
16
+
17
+ min-width: 4.125rem;
18
+ max-width: 14.563rem;
19
+
20
+ font-family: theme(digitv2.fontFamily.sans);
21
+ font-style: theme(digitv2.fontStyle.normal);
22
+ font-weight: theme(digitv2.fontWeight.regular);
23
+ line-height: theme(digitv2.lineHeight.lineheight2);
24
+
25
+ @media (max-aspect-ratio: 9/16) {
26
+ font-size: theme(digitv2.fontSize.body-s.mobile);
27
+ }
28
+
29
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
30
+ font-size: theme(digitv2.fontSize.body-s.tablet);
31
+ }
32
+
33
+ @media (min-aspect-ratio: 3/4) {
34
+ font-size: theme(digitv2.fontSize.body-s.desktop);
35
+ }
36
+ }
37
+
38
+ .tooltip-content.tooltip-left{
39
+ left: -10rem;
40
+ }
41
+
42
+ .tooltip-content.tooltip-right{
43
+ left: 10rem;
44
+ }
45
+
46
+ .tooltip-content.tooltip-top{
47
+ top: -3.75rem;
48
+ }
49
+
50
+ .tooltip-content.tooltip-bottom{
51
+ top: 3.75rem;
52
+ }
53
+
54
+ .tooltip-left:before{
55
+ content: "";
56
+ position: absolute;
57
+ top: 0;
58
+ right:-0.625rem;
59
+ border-left:0.625rem solid transparent;
60
+ border-right:0.625rem solid transparent;
61
+ border-top:0.625rem solid theme(digitv2.lightTheme.generic-inputborder);
62
+ border-bottom:0.625rem solid transparent;
63
+ }
64
+
65
+ .tooltip-right:before{
66
+ content: "";
67
+ position: absolute;
68
+ top: 0;
69
+ left:-0.625rem;
70
+ border-left:0.625rem solid transparent;
71
+ border-right:0.625rem solid transparent;
72
+ border-top:0.625rem solid theme(digitv2.lightTheme.generic-inputborder);
73
+ border-bottom:0.625rem solid transparent;
74
+ }
75
+
76
+ .tooltip-top:before{
77
+ content: "";
78
+ position: absolute;
79
+ bottom:-0.625rem;
80
+ right:0rem;
81
+ border-left:0.625rem solid transparent;
82
+ border-right:0.625rem solid theme(digitv2.lightTheme.generic-inputborder);
83
+ border-top:0.625rem solid transparent;
84
+ border-bottom:0.625rem solid transparent;
85
+ }
86
+
87
+ .tooltip-bottom:before{
88
+ content: "";
89
+ position: absolute;
90
+ top:-0.625rem;
91
+ left:0rem;
92
+ border-left:0.625rem solid theme(digitv2.lightTheme.generic-inputborder);
93
+ border-right:0.625rem solid transparent;
94
+ border-top:0.625rem solid transparent;
95
+ border-bottom:0.625rem solid transparent;
96
+ }
@@ -34,6 +34,9 @@
34
34
  @import url("./components/actionbarV2.scss");
35
35
  @import url("./components/headerdropdownV2.scss");
36
36
  @import url("./components/topbarV2.scss");
37
+ @import url("./components/sidebarV2.scss");
38
+ @import url("./components/mobilesidebarV2.scss");
39
+ @import url("./components/tooltipwrapperV2.scss");
37
40
 
38
41
  /* pages */
39
42
  @import url("./pages/employee/index.scss");
package/src/index.scss CHANGED
@@ -74,10 +74,6 @@ h1, h2, h3, h4, h5, h6 {
74
74
  }
75
75
  }
76
76
 
77
- .dark {
78
- @apply text-text-primary;
79
- }
80
-
81
77
  .mrlg {
82
78
  @apply mr-lg;
83
79
  }