@egovernments/digit-ui-components-css 0.0.2-beta.44 → 0.0.2-beta.45

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.
@@ -1,426 +0,0 @@
1
- .topbar {
2
- position: fixed;
3
- top: 0;
4
- width: 100%;
5
- padding: 0.625rem 1.5rem;
6
- background: white;
7
- box-shadow: rgba(0, 0, 0, 0.24) 0 0.063rem 0.25rem;
8
- z-index: 9999999;
9
- @apply flex items-center;
10
-
11
- img {
12
- display: inline;
13
-
14
- &.city {
15
- margin-right: 0.5rem;
16
- height: 3rem;
17
- width: 3rem;
18
- }
19
-
20
- &.state {
21
- height: 1.25rem;
22
- max-height: 1.25rem;
23
- width: auto;
24
- }
25
- }
26
-
27
- .ulb {
28
- font-weight: bold;
29
- display: inline-block;
30
- }
31
-
32
- .right {
33
- float: right;
34
- margin-top: 0.75rem;
35
- position: relative;
36
-
37
- svg {
38
- display: inline;
39
- }
40
-
41
- .user-img-txt {
42
- background: theme(colors.primary.main);
43
- padding: 0.625rem 0.938rem;
44
- border-radius: 50%;
45
- color: white;
46
- font-weight: 700;
47
- }
48
- }
49
-
50
- .left {
51
- float: left;
52
- }
53
-
54
- .w-80 {
55
- width: 70%;
56
- }
57
-
58
- .width-20 {
59
- width: 30%;
60
- }
61
-
62
- .margin-top-6 {
63
- margin-top: 0.375rem;
64
- }
65
-
66
- .margin-right-30 {
67
- margin-right: 1.875rem;
68
- }
69
-
70
- .margin-top-10 {
71
- margin-top: 0.625rem;
72
- }
73
-
74
- .icon {
75
- display: block;
76
- color: rgb(117, 117, 117);
77
- fill: rgb(117, 117, 117);
78
- height: 1.313rem;
79
- width: 1.313rem;
80
- }
81
-
82
- .column-gap-15 {
83
- column-gap: 0.938rem;
84
- }
85
-
86
- .column-gap-5 {
87
- column-gap: 0.313rem;
88
- }
89
-
90
- .select-wrap,
91
- .employee-select-wrap {
92
- margin-bottom: 0rem;
93
-
94
- .profile-dropdown--item {
95
- span {
96
- white-space: pre;
97
- }
98
- }
99
- }
100
-
101
- .digit-employee-select-wrap {
102
- margin-bottom: 0rem;
103
- }
104
-
105
- .digit-topbar-container {
106
- display: flex;
107
- align-items: center;
108
- justify-content: space-between;
109
- width: 100%;
110
- }
111
-
112
- @media screen and (min-width: 40.063rem) {
113
- .digit-hamburger-class {
114
- display: none !important;
115
- }
116
- }
117
-
118
- @media screen and (max-width: 40rem) {
119
-
120
- .ulb {
121
- font-size: 0.875rem;
122
- display: inline-block;
123
- }
124
-
125
- .flex-right {
126
- display: none;
127
- }
128
-
129
- .digit-employee-select-wrap {
130
- right: 0;
131
- }
132
- }
133
- }
134
-
135
- .cp {
136
- cursor: pointer;
137
-
138
- .hamburger {
139
- display: none;
140
- }
141
-
142
- @media (max-width: 48.75rem) {
143
- .hamburger {
144
- display: none;
145
- }
146
- }
147
- }
148
-
149
- .citizen {
150
- .right {
151
- margin-top: 0.313rem;
152
- margin-bottom: 0.313rem;
153
- }
154
-
155
- .topbar-select-wrap {
156
- margin-bottom: 0;
157
- }
158
-
159
- .flex-between {
160
- @apply flex items-center justify-between;
161
- }
162
- }
163
-
164
- .profile-dropdown--item {
165
- display: flex;
166
- flex-direction: row;
167
- padding: 0.625rem;
168
- column-gap: 0.625rem;
169
- color: theme(colors.text.secondary);
170
-
171
- &:hover {
172
- background: theme(colors.grey.mid);
173
- }
174
- }
175
-
176
- .flex-right {
177
- @apply flex items-center justify-end;
178
- min-width: 5.313rem;
179
- }
180
-
181
- video::-webkit-media-controls-panel {
182
- top: 55%;
183
- position: absolute;
184
- width: 100%;
185
- }
186
-
187
- .topbarOptionsClassName {
188
- right: -3rem !important
189
- }
190
-
191
- .digit-topbar {
192
- @apply w-full max-w-full fixed items-center;
193
- top: 0;
194
- left: 0;
195
- z-index: 9999999;
196
- display: flex;
197
- background-color: theme(digitv2.lightTheme.paper-primary);
198
- height: 4.5rem;
199
- padding: theme(digitv2.spacers.spacer4) theme(digitv2.spacers.spacer10) theme(digitv2.spacers.spacer4) theme(digitv2.spacers.spacer10);
200
-
201
- .margin-top-10 {
202
- margin-top: 0.625rem;
203
- }
204
-
205
- .digit-dropdown-select-wrap ,
206
- .digit-dropdown-employee-select-wrap {
207
- margin-bottom: 0rem;
208
-
209
- .digit-dropdown-item {
210
- span {
211
- white-space: pre;
212
- }
213
- }
214
- }
215
-
216
- .digit-employee-select-wrap {
217
- margin-bottom: 0rem;
218
- }
219
-
220
-
221
- .digit-dropdown-item {
222
- display: flex;
223
- flex-direction: row;
224
- padding: theme(digitv2.spacers.spacer3);
225
- column-gap: 0.625rem;
226
- color: theme(colors.text.secondary);
227
-
228
- &:hover {
229
- background: theme(colors.grey.mid);
230
- }
231
- }
232
-
233
- @media (min-width: 48rem) {
234
- justify-content: space-between;
235
- }
236
-
237
- @media (min-width: 30.063rem) and (max-width: 47.938rem) {
238
- padding: theme(digitv2.spacers.spacer4) theme(digitv2.spacers.spacer6) theme(digitv2.spacers.spacer4) theme(digitv2.spacers.spacer6);
239
- gap: theme(digitv2.spacers.spacer4);
240
- }
241
-
242
- @media (max-width: 30rem) {
243
- height: 3.5rem;
244
- padding: theme(digitv2.spacers.spacer4);
245
- gap: theme(digitv2.spacers.spacer4);
246
- }
247
-
248
- &.light {
249
- box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.125rem theme(digitv2.spacers.spacer0) #00000029;
250
- }
251
-
252
- .digit-logo-ulb-wrapper {
253
- display: flex !important;
254
- gap: theme(digitv2.spacers.spacer4);
255
- align-items: center !important;
256
- max-width: calc(50%-(theme(digitv2.spacers.spacer6)));
257
-
258
- @media (min-width: 48rem) {
259
- height: theme(digitv2.spacers.spacer8);
260
- }
261
-
262
- @media (min-width: 30.063rem) and (max-width: 47.938rem) {
263
- height: theme(digitv2.spacers.spacer8);
264
- }
265
-
266
- @media (max-width: 30rem) {}
267
-
268
- .digit-topbar-logo {
269
- flex-shrink: 0;
270
- height: theme(digitv2.spacers.spacer8);
271
- width: 1.291rem;
272
-
273
- &.clickable {
274
- cursor: pointer;
275
- }
276
- }
277
-
278
- .digit-topbar-ulb {
279
- @extend .typography.heading-s;
280
- font-family: theme(digitv2.fontFamily.sans);
281
- font-style: theme(digitv2.fontStyle.normal);
282
- font-weight: theme(digitv2.fontWeight.bold);
283
- line-height: theme(digitv2.lineHeight.lineheight1);
284
-
285
- @media (max-aspect-ratio: 9/16) {
286
- /* Media query for mobile */
287
- font-size: theme(digitv2.fontSize.heading-s.mobile);
288
- }
289
-
290
- @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
291
- /* Media query for tablets */
292
- font-size: theme(digitv2.fontSize.heading-s.tablet);
293
- }
294
-
295
- @media (min-aspect-ratio: 3/4) {
296
- /* Media query for desktop */
297
- font-size: theme(digitv2.fontSize.heading-s.desktop);
298
- }
299
- @apply whitespace-no-wrap overflow-hidden;
300
- color: theme(digitv2.lightTheme.text-primary);
301
- text-overflow: ellipsis;
302
- }
303
- }
304
-
305
- &.dark {
306
- background-color: theme(digitv2.lightTheme.primary-2);
307
-
308
- .digit-logo-ulb-wrapper {
309
- .digit-topbar-ulb {
310
- color: theme(digitv2.lightTheme.paper-primary);
311
- }
312
- }
313
-
314
- .digit-header-action-fields {
315
- .individual-action-field {
316
- color: theme(digitv2.lightTheme.paper-primary);
317
-
318
- .digit-dropdown-employee-select-wrap,
319
- .digit-dropdown-select-wrap{
320
- background:none;
321
- }
322
- }
323
- }
324
- }
325
-
326
- .digit-header-action-fields {
327
- @apply items-center overflow-hidden;
328
- display: flex !important;
329
- height: theme(digitv2.spacers.spacer8);
330
- max-width: 50%;
331
-
332
-
333
- @media (min-width: 48rem) {
334
- gap: theme(digitv2.spacers.spacer8);
335
- }
336
-
337
- @media (min-width: 30.063rem) and (max-width: 47.938rem) {
338
- gap: theme(digitv2.spacers.spacer4);
339
- }
340
-
341
- .digit-header-img {
342
- &.clickable {
343
- cursor: pointer;
344
- }
345
- }
346
- }
347
-
348
- .digit-topbar-hamburger {
349
- width: theme(digitv2.spacers.spacer6);
350
- height: theme(digitv2.spacers.spacer6);
351
-
352
- @media (min-width: 30.063rem) and (max-width: 47.938rem) {
353
- width: theme(digitv2.spacers.spacer8);
354
- height: theme(digitv2.spacers.spacer8);
355
-
356
- svg {
357
- width: theme(digitv2.spacers.spacer8);
358
- height: theme(digitv2.spacers.spacer8);
359
- }
360
- }
361
-
362
- &.clickable {
363
- cursor: pointer;
364
- }
365
-
366
- }
367
-
368
- .digit-header-img-ulb-wrapper-mobileview {
369
- display: flex;
370
- align-items: center;
371
- height: theme(digitv2.spacers.spacer6);
372
- max-width: calc(100%-(theme(digitv2.spacers.spacer6)));
373
-
374
- .digit-header-img {
375
- margin-right: theme(digitv2.spacers.spacer2);
376
- margin-bottom: 0.156rem;
377
-
378
- &.clickable {
379
- cursor: pointer;
380
- }
381
- }
382
-
383
- .topbar-divider {
384
- height: theme(digitv2.spacers.spacer6);
385
- width: 0.063rem;
386
- border: 0.063rem solid theme(digitv2.lightTheme.text-primary);
387
- margin-right: 0.625rem;
388
-
389
- &.dark {
390
- border: 0.063rem solid theme(digitv2.lightTheme.paper-primary);
391
- }
392
-
393
- }
394
-
395
- .digit-topbar-ulb-mobileview {
396
- @apply overflow-hidden whitespace-no-wrap;
397
- @extend .typography.body-s;
398
- font-family: theme(digitv2.fontFamily.sans);
399
- font-style: theme(digitv2.fontStyle.normal);
400
- font-weight: theme(digitv2.fontWeight.regular);
401
- line-height: theme(digitv2.lineHeight.lineheight2);
402
-
403
- @media (max-aspect-ratio: 9/16) {
404
- /* Media query for mobile */
405
- font-size: theme(digitv2.fontSize.body-s.mobile);
406
- }
407
-
408
- @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
409
- /* Media query for tablets */
410
- font-size: theme(digitv2.fontSize.body-s.tablet);
411
- }
412
-
413
- @media (min-aspect-ratio: 3/4) {
414
- /* Media query for desktop */
415
- font-size: theme(digitv2.fontSize.body-s.desktop);
416
- }
417
- text-overflow: ellipsis;
418
- color: theme(digitv2.lightTheme.text-primary);
419
-
420
- &.dark {
421
- color: theme(digitv2.lightTheme.paper-primary);
422
- }
423
- }
424
-
425
- }
426
- }
@@ -1,83 +0,0 @@
1
- .digit-viewcard-field-pair{
2
- @apply w-full flex-col;
3
- display: flex;
4
- height: fit-content;
5
- background-color: transparent;
6
- gap: theme(digitv2.spacers.spacer1);
7
-
8
- .digit-viewcard-label{
9
- @extend .typography.heading-s;
10
- font-family: theme(digitv2.fontFamily.sans);
11
- font-style: theme(digitv2.fontStyle.normal);
12
- font-weight: theme(digitv2.fontWeight.bold);
13
- line-height: theme(digitv2.lineHeight.lineheight1);
14
-
15
- @media (max-aspect-ratio: 9/16) {
16
- /* Media query for mobile */
17
- font-size: theme(digitv2.fontSize.heading-s.mobile);
18
- }
19
-
20
- @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
21
- /* Media query for tablets */
22
- font-size: theme(digitv2.fontSize.heading-s.tablet);
23
- }
24
-
25
- @media (min-aspect-ratio: 3/4) {
26
- /* Media query for desktop */
27
- font-size: theme(digitv2.fontSize.heading-s.desktop);
28
- }
29
- @apply whitespace-pre-wrap break-words w-full;
30
- word-break: break-word;
31
- color: theme(digitv2.lightTheme.text-primary);
32
- }
33
-
34
- .digit-viewcard-value{
35
- @extend .typography.body-s;
36
- font-family: theme(digitv2.fontFamily.sans);
37
- font-style: theme(digitv2.fontStyle.normal);
38
- font-weight: theme(digitv2.fontWeight.regular);
39
- line-height: theme(digitv2.lineHeight.lineheight2);
40
-
41
- @media (max-aspect-ratio: 9/16) {
42
- /* Media query for mobile */
43
- font-size: theme(digitv2.fontSize.body-s.mobile);
44
- }
45
-
46
- @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
47
- /* Media query for tablets */
48
- font-size: theme(digitv2.fontSize.body-s.tablet);
49
- }
50
-
51
- @media (min-aspect-ratio: 3/4) {
52
- /* Media query for desktop */
53
- font-size: theme(digitv2.fontSize.body-s.desktop);
54
- }
55
- @apply whitespace-pre-wrap break-words w-full;
56
- color: theme(digitv2.lightTheme.text-primary);
57
- }
58
-
59
- &.inline{
60
- flex-direction: row;
61
-
62
- @media (min-width: 48rem) {
63
- gap: theme(digitv2.spacers.spacer6);
64
- }
65
-
66
- @media (min-width: 30.063rem) and (max-width: 47.938rem) {
67
- gap: theme(digitv2.spacers.spacer5);
68
- }
69
-
70
- @media (max-width: 30rem) {
71
- gap: theme(digitv2.spacers.spacer4);
72
- }
73
-
74
- .digit-viewcard-label{
75
- width: 20%;
76
- }
77
-
78
- .digit-viewcard-value{
79
- width: 80%;
80
- }
81
-
82
- }
83
- }