@egovernments/digit-ui-components-css 0.2.0-beta.8 → 0.2.0-rc.16

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 +4 -14635
  2. package/package.json +33 -36
  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 +33 -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 +69 -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 +117 -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 +121 -37
  56. package/src/digitv2/components/tooltipwrapperV2.scss +97 -94
  57. package/src/digitv2/components/treeSelectV2.scss +58 -55
  58. package/src/digitv2/index.scss +136 -134
  59. package/src/digitv2/pages/employee/boundaryFilter.scss +63 -0
  60. package/src/digitv2/pages/employee/inboxsearchcomposer.scss +107 -37
  61. package/src/digitv2/pages/employee/index.scss +4 -3
  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 +21 -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 -231
  70. package/dist/index.min.css +0 -6
package/src/digitv2/components/textblockV2.scss CHANGED
@@ -1,85 +1,88 @@
1
+ @import './theme-variables.css';
2
+ @import '../typography.scss';
3
+
1
4
  .digit-text-block-wrap {
2
5
 
3
6
  @apply flex flex-col;
4
7
 
5
8
  @media (min-width: 48rem) {
6
- gap: theme(digitv2.spacers.spacer6);
9
+ gap: theme("digitv2.spacers.spacer6");
7
10
  }
8
11
 
9
12
  @media (min-width: 30.063rem) and (max-width: 47.938rem) {
10
- gap: theme(digitv2.spacers.spacer5);
13
+ gap: theme("digitv2.spacers.spacer5");
11
14
  }
12
15
 
13
16
  @media (max-width: 30rem) {
14
- gap: theme(digitv2.spacers.spacer4);
17
+ gap: theme("digitv2.spacers.spacer4");
15
18
  }
16
19
 
17
20
 
18
21
  .digit-text-block-header-content {
19
22
  .digit-text-block-caption {
20
- @extend .typography.caption-s;
21
- padding-bottom: theme(digitv2.spacers.spacer1);
22
- color: theme(digitv2.lightTheme.text-secondary);
23
+ @include typography-caption-s;
24
+ padding-bottom: theme("digitv2.spacers.spacer1");
25
+ color: theme("digitv2.lightTheme.text-secondary");
23
26
  }
24
27
 
25
28
  .digit-text-block-header {
26
- @extend .typography.heading-xl;
27
- padding-bottom: theme(digitv2.spacers.spacer2);
28
- color: theme(digitv2.lightTheme.text-primary);
29
+ @include typography-heading-xl;
30
+ padding-bottom: theme("digitv2.spacers.spacer2");
31
+ color: theme("digitv2.lightTheme.text-primary");
29
32
  line-height: normal;
30
33
 
31
34
  @media (max-width: 30rem) {
32
- padding-bottom: theme(digitv2.spacers.spacer1);
35
+ padding-bottom: theme("digitv2.spacers.spacer1");
33
36
  }
34
37
  }
35
38
 
36
39
  .digit-text-block-subheader {
37
- @extend .typography.heading-m;
38
- font-family: theme(digitv2.fontFamily.sans);
39
- font-style: theme(digitv2.fontStyle.normal);
40
- font-weight: theme(digitv2.fontWeight.bold);
41
- line-height: theme(digitv2.lineHeight.lineheight1);
40
+ @include typography-heading-m;
41
+ font-family: theme("digitv2.fontFamily.sans");
42
+ font-style: theme("digitv2.fontStyle.normal");
43
+ font-weight: theme("digitv2.fontWeight.bold");
44
+ line-height: theme("digitv2.lineHeight.lineheight1");
42
45
 
43
46
  @media (max-aspect-ratio: 9/16) {
44
47
  /* Media query for mobile */
45
- font-size: theme(digitv2.fontSize.heading-m.mobile);
48
+ font-size: theme("digitv2.fontSize.heading-m.mobile");
46
49
  }
47
50
 
48
51
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
49
52
  /* Media query for tablets */
50
- font-size: theme(digitv2.fontSize.heading-m.tablet);
53
+ font-size: theme("digitv2.fontSize.heading-m.tablet");
51
54
  }
52
55
 
53
56
  @media (min-aspect-ratio: 3/4) {
54
57
  /* Media query for desktop */
55
- font-size: theme(digitv2.fontSize.heading-m.desktop);
58
+ font-size: theme("digitv2.fontSize.heading-m.desktop");
56
59
  }
57
- color: theme(digitv2.lightTheme.text-secondary);
60
+ color: theme("digitv2.lightTheme.text-secondary");
58
61
  line-height: normal;
59
62
  }
60
63
  }
61
64
 
62
65
  .digit-text-block-body {
63
- @extend .typography.body-s;
64
- font-family: theme(digitv2.fontFamily.sans);
65
- font-style: theme(digitv2.fontStyle.normal);
66
- font-weight: theme(digitv2.fontWeight.regular);
67
- line-height: theme(digitv2.lineHeight.lineheight2);
66
+ @include typography-body-s;
67
+ font-family: theme("digitv2.fontFamily.sans");
68
+ font-style: theme("digitv2.fontStyle.normal");
69
+ font-weight: theme("digitv2.fontWeight.regular");
70
+ line-height: theme("digitv2.lineHeight.lineheight2");
68
71
 
69
72
  @media (max-aspect-ratio: 9/16) {
70
73
  /* Media query for mobile */
71
- font-size: theme(digitv2.fontSize.body-s.mobile);
74
+ font-size: theme("digitv2.fontSize.body-s.mobile");
72
75
  }
73
76
 
74
77
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
75
78
  /* Media query for tablets */
76
- font-size: theme(digitv2.fontSize.body-s.tablet);
79
+ font-size: theme("digitv2.fontSize.body-s.tablet");
77
80
  }
78
81
 
79
82
  @media (min-aspect-ratio: 3/4) {
80
83
  /* Media query for desktop */
81
- font-size: theme(digitv2.fontSize.body-s.desktop);
84
+ font-size: theme("digitv2.fontSize.body-s.desktop");
82
85
  }
83
- color: theme(digitv2.lightTheme.generic-inputborder);
86
+ color: theme("digitv2.lightTheme.generic-inputborder");
84
87
  }
85
88
  }
package/src/digitv2/components/timelineV2.scss CHANGED
@@ -1,6 +1,9 @@
1
+ @import './theme-variables.css';
2
+ @import '../typography.scss';
3
+
1
4
  .digit-timeline-item {
2
5
  @apply flex items-start relative ;
3
- gap: theme(digitv2.spacers.spacer4);
6
+ gap: theme("digitv2.spacers.spacer4");
4
7
  }
5
8
 
6
9
  .timeline-circle {
@@ -17,12 +20,12 @@
17
20
  @apply absolute bottom-0 border-solid border-border;
18
21
  border-left-width: 0.125rem;
19
22
  margin-left: 0.938rem;
20
- top: theme(digitv2.spacers.spacer8);
23
+ top: theme("digitv2.spacers.spacer8");
21
24
 
22
25
  &.completed,
23
26
  &.inprogress,
24
27
  &.nextActiveStep{
25
- border-color: theme(digitv2.lightTheme.primary-1);
28
+ border-color: theme("digitv2.lightTheme.primary-1");
26
29
  }
27
30
 
28
31
  &.nextActiveStep{
@@ -32,7 +35,7 @@
32
35
  @media (max-aspect-ratio: 9/16) {
33
36
  /* Media query for mobile */
34
37
  margin-left: 0.688rem;
35
- top: theme(digitv2.spacers.spacer6);
38
+ top: theme("digitv2.spacers.spacer6");
36
39
  border-left-width: 0.063rem;
37
40
  }
38
41
  }
@@ -40,43 +43,43 @@
40
43
  .timeline-content,
41
44
  .timeline-info {
42
45
  @apply flex flex-col w-full;
43
- gap: theme(digitv2.spacers.spacer2);
46
+ gap: theme("digitv2.spacers.spacer2");
44
47
  }
45
48
 
46
49
  .timeline-info{
47
50
  @media (max-aspect-ratio: 9/16) {
48
51
  /* Media query for mobile */
49
- gap: theme(digitv2.spacers.spacer1);
52
+ gap: theme("digitv2.spacers.spacer1");
50
53
  }
51
54
  }
52
55
 
53
56
  .timeline-divider {
54
- border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
57
+ border: 0.063rem solid theme("digitv2.lightTheme.generic-divider");
55
58
  }
56
59
 
57
60
  .timeline-label {
58
- @extend .typography.heading-s;
59
- font-family: theme(digitv2.fontFamily.sans);
60
- font-style: theme(digitv2.fontStyle.normal);
61
- font-weight: theme(digitv2.fontWeight.bold);
62
- line-height: theme(digitv2.lineHeight.lineheight1);
61
+ @include typography-heading-s;
62
+ font-family: theme("digitv2.fontFamily.sans");
63
+ font-style: theme("digitv2.fontStyle.normal");
64
+ font-weight: theme("digitv2.fontWeight.bold");
65
+ line-height: theme("digitv2.lineHeight.lineheight1");
63
66
 
64
67
  @media (max-aspect-ratio: 9/16) {
65
68
  /* Media query for mobile */
66
- font-size: theme(digitv2.fontSize.heading-s.mobile);
69
+ font-size: theme("digitv2.fontSize.heading-s.mobile");
67
70
  }
68
71
 
69
72
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
70
73
  /* Media query for tablets */
71
- font-size: theme(digitv2.fontSize.heading-s.tablet);
74
+ font-size: theme("digitv2.fontSize.heading-s.tablet");
72
75
  }
73
76
 
74
77
  @media (min-aspect-ratio: 3/4) {
75
78
  /* Media query for desktop */
76
- font-size: theme(digitv2.fontSize.heading-s.desktop);
79
+ font-size: theme("digitv2.fontSize.heading-s.desktop");
77
80
  }
78
81
  @apply whitespace-normal h-auto text-left;
79
- color: theme(digitv2.lightTheme.text-primary);
82
+ color: theme("digitv2.lightTheme.text-primary");
80
83
  word-break: break-word;
81
84
  padding-top: 0.414rem;
82
85
 
@@ -86,89 +89,89 @@
86
89
  }
87
90
 
88
91
  &.upcoming{
89
- color:theme(digitv2.lightTheme.text-secondary);
92
+ color:theme("digitv2.lightTheme.text-secondary");
90
93
  }
91
94
  }
92
95
 
93
96
  .timeline-date {
94
- @extend .typography.body-s;
95
- font-family: theme(digitv2.fontFamily.sans);
96
- font-style: theme(digitv2.fontStyle.normal);
97
- font-weight: theme(digitv2.fontWeight.regular);
98
- line-height: theme(digitv2.lineHeight.lineheight2);
97
+ @include typography-body-s;
98
+ font-family: theme("digitv2.fontFamily.sans");
99
+ font-style: theme("digitv2.fontStyle.normal");
100
+ font-weight: theme("digitv2.fontWeight.regular");
101
+ line-height: theme("digitv2.lineHeight.lineheight2");
99
102
 
100
103
  @media (max-aspect-ratio: 9/16) {
101
104
  /* Media query for mobile */
102
- font-size: theme(digitv2.fontSize.body-s.mobile);
105
+ font-size: theme("digitv2.fontSize.body-s.mobile");
103
106
  }
104
107
 
105
108
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
106
109
  /* Media query for tablets */
107
- font-size: theme(digitv2.fontSize.body-s.tablet);
110
+ font-size: theme("digitv2.fontSize.body-s.tablet");
108
111
  }
109
112
 
110
113
  @media (min-aspect-ratio: 3/4) {
111
114
  /* Media query for desktop */
112
- font-size: theme(digitv2.fontSize.body-s.desktop);
115
+ font-size: theme("digitv2.fontSize.body-s.desktop");
113
116
  }
114
117
  @apply text-left;
115
- color: theme(digitv2.lightTheme.text-secondary);
118
+ color: theme("digitv2.lightTheme.text-secondary");
116
119
  }
117
120
 
118
121
  .timeline-toggle-details {
119
122
  @apply flex items-center cursor-pointer;
120
- gap: theme(digitv2.spacers.spacer1);
123
+ gap: theme("digitv2.spacers.spacer1");
121
124
  width: fit-content;
122
125
  }
123
126
 
124
127
  .timeline-additional-elements-inline {
125
128
  @apply flex flex-wrap items-start;
126
- gap: theme(digitv2.spacers.spacer4);
127
- @extend .typography.body-s;
128
- font-family: theme(digitv2.fontFamily.sans);
129
- font-style: theme(digitv2.fontStyle.normal);
130
- font-weight: theme(digitv2.fontWeight.regular);
131
- line-height: theme(digitv2.lineHeight.lineheight2);
129
+ gap: theme("digitv2.spacers.spacer4");
130
+ @include typography-body-s;
131
+ font-family: theme("digitv2.fontFamily.sans");
132
+ font-style: theme("digitv2.fontStyle.normal");
133
+ font-weight: theme("digitv2.fontWeight.regular");
134
+ line-height: theme("digitv2.lineHeight.lineheight2");
132
135
 
133
136
  @media (max-aspect-ratio: 9/16) {
134
137
  /* Media query for mobile */
135
- font-size: theme(digitv2.fontSize.body-s.mobile);
138
+ font-size: theme("digitv2.fontSize.body-s.mobile");
136
139
  }
137
140
 
138
141
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
139
142
  /* Media query for tablets */
140
- font-size: theme(digitv2.fontSize.body-s.tablet);
143
+ font-size: theme("digitv2.fontSize.body-s.tablet");
141
144
  }
142
145
 
143
146
  @media (min-aspect-ratio: 3/4) {
144
147
  /* Media query for desktop */
145
- font-size: theme(digitv2.fontSize.body-s.desktop);
148
+ font-size: theme("digitv2.fontSize.body-s.desktop");
146
149
  }
147
150
  }
148
151
 
149
152
  .timeline-additional-elements-column {
150
153
  @apply flex flex-col items-start;
151
- @extend .typography.body-s;
152
- font-family: theme(digitv2.fontFamily.sans);
153
- font-style: theme(digitv2.fontStyle.normal);
154
- font-weight: theme(digitv2.fontWeight.regular);
155
- line-height: theme(digitv2.lineHeight.lineheight2);
154
+ @include typography-body-s;
155
+ font-family: theme("digitv2.fontFamily.sans");
156
+ font-style: theme("digitv2.fontStyle.normal");
157
+ font-weight: theme("digitv2.fontWeight.regular");
158
+ line-height: theme("digitv2.lineHeight.lineheight2");
156
159
 
157
160
  @media (max-aspect-ratio: 9/16) {
158
161
  /* Media query for mobile */
159
- font-size: theme(digitv2.fontSize.body-s.mobile);
162
+ font-size: theme("digitv2.fontSize.body-s.mobile");
160
163
  }
161
164
 
162
165
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
163
166
  /* Media query for tablets */
164
- font-size: theme(digitv2.fontSize.body-s.tablet);
167
+ font-size: theme("digitv2.fontSize.body-s.tablet");
165
168
  }
166
169
 
167
170
  @media (min-aspect-ratio: 3/4) {
168
171
  /* Media query for desktop */
169
- font-size: theme(digitv2.fontSize.body-s.desktop);
172
+ font-size: theme("digitv2.fontSize.body-s.desktop");
170
173
  }
171
- gap: theme(digitv2.spacers.spacer4);
174
+ gap: theme("digitv2.spacers.spacer4");
172
175
 
173
176
  .timeline-individual-element {
174
177
  @apply w-full max-w-full;
@@ -187,12 +190,12 @@ img {
187
190
  /* Circle Variants */
188
191
  .timeline-circle,
189
192
  .timeline-circle.upcoming {
190
- background-color: theme(digitv2.lightTheme.text-disabled);
193
+ background-color: theme("digitv2.lightTheme.text-disabled");
191
194
  }
192
195
 
193
196
  .timeline-circle.inprogress {
194
197
  background-color: transparent;
195
- border: 0.125rem solid theme(digitv2.lightTheme.primary-1);
198
+ border: 0.125rem solid theme("digitv2.lightTheme.primary-1");
196
199
  }
197
200
 
198
201
  .timeline-circle.inprogress:not(.error)::after {
@@ -202,7 +205,7 @@ img {
202
205
  left: 50%;
203
206
  transform: translate(-50%, -50%);
204
207
  border-radius: 50%;
205
- background-color: theme(digitv2.lightTheme.primary-1);
208
+ background-color: theme("digitv2.lightTheme.primary-1");
206
209
 
207
210
  @media (max-aspect-ratio: 9/16) {
208
211
  /* Media query for mobile */
@@ -226,7 +229,7 @@ img {
226
229
  }
227
230
 
228
231
  .timeline-circle.completed {
229
- background-color: theme(digitv2.lightTheme.primary-1);
232
+ background-color: theme("digitv2.lightTheme.primary-1");
230
233
  }
231
234
 
232
235
  .digit-timeline-molecule{
@@ -236,52 +239,52 @@ img {
236
239
 
237
240
  @media (min-aspect-ratio: 3/4) {
238
241
  /* Media query for desktop */
239
- margin-bottom: theme(digitv2.spacers.spacer6);
242
+ margin-bottom: theme("digitv2.spacers.spacer6");
240
243
  }
241
244
 
242
245
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
243
246
  /* Media query for tablets */
244
- margin-bottom: theme(digitv2.spacers.spacer5);
247
+ margin-bottom: theme("digitv2.spacers.spacer5");
245
248
  }
246
249
  @media (max-aspect-ratio: 9/16) {
247
250
  /* Media query for mobile */
248
- margin-bottom: theme(digitv2.spacers.spacer4);
251
+ margin-bottom: theme("digitv2.spacers.spacer4");
249
252
  }
250
253
  }
251
254
  }
252
255
 
253
256
  .view-more-past-container {
254
- margin-top: theme(digitv2.spacers.spacer4);
257
+ margin-top: theme("digitv2.spacers.spacer4");
255
258
  }
256
259
 
257
260
  .view-more-future-container {
258
- margin-bottom: theme(digitv2.spacers.spacer4);
261
+ margin-bottom: theme("digitv2.spacers.spacer4");
259
262
  }
260
263
 
261
264
  .digit-timeline-item {
262
265
  &.error{
263
266
 
264
267
  .timeline-circle{
265
- background-color: theme(digitv2.lightTheme.alert-error);
268
+ background-color: theme("digitv2.lightTheme.alert-error");
266
269
  }
267
270
 
268
271
  .timeline-content{
269
- background-color: theme(digitv2.lightTheme.alert-errorbg);
270
- border-radius: theme(digitv2.spacers.spacer1);
271
- padding: theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer3);
272
+ background-color: theme("digitv2.lightTheme.alert-errorbg");
273
+ border-radius: theme("digitv2.spacers.spacer1");
274
+ padding: theme("digitv2.spacers.spacer2") theme("digitv2.spacers.spacer3");
272
275
 
273
276
 
274
277
  .timeline-info{
275
278
  .timeline-label{
276
- color: theme(digitv2.lightTheme.alert-error);
279
+ color: theme("digitv2.lightTheme.alert-error");
277
280
  padding-top: 0rem;
278
281
  }
279
282
  .timeline-date{
280
- color: theme(digitv2.lightTheme.alert-error);
283
+ color: theme("digitv2.lightTheme.alert-error");
281
284
  }
282
285
 
283
286
  .timeline-divider {
284
- border: 0.063rem solid theme(digitv2.lightTheme.alert-error);
287
+ border: 0.063rem solid theme("digitv2.lightTheme.alert-error");
285
288
  }
286
289
  }
287
290
  }
package/src/digitv2/components/toastV2.scss CHANGED
@@ -1,10 +1,13 @@
1
+ @import './theme-variables.css';
2
+ @import '../typography.scss';
3
+
1
4
  /*.digit-toast-success {
2
5
  @apply fixed flex z-20 w-full max-w-full left-0 items-center;
3
- bottom: -(theme(digitv2.spacers.spacer12));
4
- gap: theme(digitv2.spacers.spacer2);
5
- height: theme(digitv2.spacers.spacer12);
6
- padding: theme(digitv2.spacers.spacer3) theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer3) theme(digitv2.spacers.spacer3) !important;
7
- background-color: theme(digitv2.lightTheme.alert-success);
6
+ bottom: -(theme("digitv2.spacers.spacer12"));
7
+ gap: theme("digitv2.spacers.spacer2");
8
+ height: theme("digitv2.spacers.spacer12");
9
+ padding: theme("digitv2.spacers.spacer3") theme("digitv2.spacers.spacer2") theme("digitv2.spacers.spacer3") theme("digitv2.spacers.spacer3") !important;
10
+ background-color: theme("digitv2.lightTheme.alert-success");
8
11
  transition: bottom 0.5s ease;
9
12
 
10
13
  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
@@ -26,7 +29,7 @@
26
29
  }
27
30
 
28
31
  &.digit-error {
29
- background-color: theme(digitv2.lightTheme.alert-error);
32
+ background-color: theme("digitv2.lightTheme.alert-error");
30
33
  }
31
34
 
32
35
  &.digit-warning {
@@ -38,16 +41,16 @@
38
41
  }
39
42
 
40
43
  .toast-label {
41
- @extend .typography.caption-s;
42
- @apply text-left overflow-hidden whitespace-no-wrap flex-grow flex items-center h-6;
43
- letter-spacing: theme(digitv2.spacers.spacer0);
44
- color: theme(digitv2.lightTheme.paper-primary);
45
- margin: theme(digitv2.spacers.spacer0);
44
+ @include typography-caption-s;
45
+ @apply text-left overflow-hidden whitespace-nowrap flex-grow flex items-center h-6;
46
+ letter-spacing: theme("digitv2.spacers.spacer0");
47
+ color: theme("digitv2.lightTheme.paper-primary");
48
+ margin: theme("digitv2.spacers.spacer0");
46
49
  text-overflow: ellipsis;
47
50
  }
48
51
 
49
52
  &.digit-info {
50
- background-color: theme(digitv2.lightTheme.alert-info);
53
+ background-color: theme("digitv2.lightTheme.alert-info");
51
54
  }
52
55
 
53
56
  .digit-warning-button-container {
@@ -69,7 +72,7 @@
69
72
 
70
73
  @keyframes slideInFromBottom {
71
74
  from {
72
- bottom: -(theme(digitv2.spacers.spacer12));
75
+ bottom: -(theme("digitv2.spacers.spacer12"));
73
76
  }
74
77
  to {
75
78
  bottom: 4rem;
@@ -83,11 +86,11 @@
83
86
  .digit-toast-success {
84
87
  max-width: 100%;
85
88
  width: auto;
86
- gap: theme(digitv2.spacers.spacer2);
87
- height: theme(digitv2.spacers.spacer12);
88
- padding: theme(digitv2.spacers.spacer3) theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer3) theme(digitv2.spacers.spacer3) !important;
89
+ gap: theme("digitv2.spacers.spacer2");
90
+ height: theme("digitv2.spacers.spacer12");
91
+ padding: theme("digitv2.spacers.spacer3") theme("digitv2.spacers.spacer2") theme("digitv2.spacers.spacer3") theme("digitv2.spacers.spacer3") !important;
89
92
  @apply fixed flex z-20 items-center;
90
- background-color: theme(digitv2.lightTheme.alert-success);
93
+ background-color: theme("digitv2.lightTheme.alert-success");
91
94
  transition: bottom 0.5s ease;
92
95
  left: 0;
93
96
 
@@ -104,15 +107,15 @@
104
107
  }
105
108
 
106
109
  &.digit-info {
107
- background-color: theme(digitv2.lightTheme.alert-info);
110
+ background-color: theme("digitv2.lightTheme.alert-info");
108
111
  }
109
112
 
110
113
  &.digit-error {
111
- background-color: theme(digitv2.lightTheme.alert-error);
114
+ background-color: theme("digitv2.lightTheme.alert-error");
112
115
  }
113
116
 
114
117
  &.digit-warning {
115
- background-color: theme(digitv2.lightTheme.alert-warning);
118
+ background-color: theme("digitv2.lightTheme.alert-warning");
116
119
 
117
120
  &.digit-warning-buttons {
118
121
  @apply block;
@@ -136,11 +139,11 @@
136
139
  }
137
140
 
138
141
  .toast-label {
139
- @extend .typography.caption-s;
140
- @apply text-left overflow-hidden whitespace-no-wrap flex-grow flex items-center h-6;
141
- letter-spacing: theme(digitv2.spacers.spacer0);
142
- color: theme(digitv2.lightTheme.paper-primary);
143
- margin: theme(digitv2.spacers.spacer0);
142
+ @include typography-caption-s;
143
+ @apply text-left overflow-hidden whitespace-nowrap flex-grow flex items-center h-6;
144
+ letter-spacing: theme("digitv2.spacers.spacer0");
145
+ color: theme("digitv2.lightTheme.paper-primary");
146
+ margin: theme("digitv2.spacers.spacer0");
144
147
  text-overflow: ellipsis;
145
148
  }
146
149
  }