@djb25/digit-ui-css 1.0.27 → 1.0.28

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@djb25/digit-ui-css",
3
- "version": "1.0.27",
3
+ "version": "1.0.28",
4
4
  "license": "MIT",
5
5
  "main": "dist/index.css",
6
6
  "author": "satyam",
@@ -76,6 +76,19 @@
76
76
  }
77
77
  }
78
78
 
79
+ .formcomposer-grid-container-form {
80
+ display: flex;
81
+ flex-direction: column;
82
+ gap: 24px;
83
+ }
84
+
85
+ .no-grid {
86
+ display: flex !important;
87
+ flex-direction: column !important;
88
+ gap: 16px !important;
89
+ grid-template-columns: unset !important;
90
+ }
91
+
79
92
  @media (max-width: 768px) {
80
93
  .formcomposer-section-grid {
81
94
  grid-template-columns: 1fr;
@@ -33,7 +33,7 @@
33
33
  .circle {
34
34
  width: 24px;
35
35
  height: 24px;
36
- background-color: #B1B4B6;
36
+ background-color: #b1b4b6;
37
37
  border-radius: 50%;
38
38
  text-align: center;
39
39
  }
@@ -42,38 +42,38 @@
42
42
  background-color: theme(colors.primary.main);
43
43
  border-color: theme(colors.primary.main);
44
44
  }
45
- }
45
+ }
46
46
 
47
- .TLComments{
47
+ .TLComments {
48
48
  max-width: 360px;
49
49
  @apply mb-sm p-sm bg-grey-light;
50
- h3{
50
+ h3 {
51
51
  @apply font-bold text-caption-m;
52
52
  }
53
- p{
53
+ p {
54
54
  @apply text-body-l;
55
55
  }
56
56
  }
57
57
 
58
- @screen dt{
59
- .TLComments{
58
+ @screen dt {
59
+ .TLComments {
60
60
  width: 360px;
61
- h3{
61
+ h3 {
62
62
  @apply text-caption-m-dt;
63
63
  }
64
- p{
64
+ p {
65
65
  @apply text-body-l-dt;
66
66
  }
67
67
  }
68
68
  }
69
69
 
70
-
71
70
  .stepper-container {
72
71
  width: 240px;
73
72
  background: #fff;
74
73
  padding: 24px 0;
75
74
  border-radius: 8px;
76
- box-shadow: 0 3px 10px rgba(0,0,0,0.08);
75
+ box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
76
+ overflow-y: scroll;
77
77
  }
78
78
 
79
79
  .stepper-item {
@@ -135,11 +135,7 @@
135
135
  background: #667eea;
136
136
  }
137
137
 
138
-
139
-
140
-
141
138
  @media (max-width: 768px) {
142
-
143
139
  .stepper-container {
144
140
  width: 100%;
145
141
  display: flex;
@@ -201,4 +197,4 @@
201
197
 
202
198
  .stepper-circle.active {
203
199
  transform: scale(1.05);
204
- }
200
+ }
@@ -133,8 +133,8 @@ body {
133
133
  display: flex;
134
134
  flex-direction: column;
135
135
  padding: 20px;
136
- padding-bottom: 0px;
137
136
  width: 100%;
137
+ gap: 12px;
138
138
 
139
139
  .header {
140
140
  font-size: 18px;
@@ -231,14 +231,9 @@ body {
231
231
  }
232
232
  }
233
233
 
234
- .form-container {
235
- gap: 12px
236
- }
237
-
238
234
  .app-container {
239
235
  width: 100%;
240
236
 
241
-
242
237
  form {
243
238
  .card {
244
239
  max-width: 960px;
@@ -289,7 +284,6 @@ body {
289
284
  margin-top: 90px;
290
285
  }
291
286
 
292
-
293
287
  .module-carousel-section {
294
288
  display: flex;
295
289
  flex-direction: column;
@@ -311,7 +305,7 @@ body {
311
305
  top: 4px;
312
306
  height: 16px;
313
307
  width: 4px;
314
- background: #3B82F6;
308
+ background: #3b82f6;
315
309
  border-radius: 4px;
316
310
  }
317
311
 
@@ -366,7 +360,7 @@ body {
366
360
  display: none;
367
361
  }
368
362
 
369
- .carousel-track>div {
363
+ .carousel-track > div {
370
364
  scroll-snap-align: start;
371
365
  box-sizing: border-box;
372
366
  width: 100%;
@@ -374,8 +368,6 @@ body {
374
368
  margin: 0 !important;
375
369
  }
376
370
 
377
-
378
-
379
371
  .carousel-track .new-employee-card {
380
372
  width: 100%;
381
373
  height: 100%;
@@ -562,4 +554,4 @@ body {
562
554
  svg {
563
555
  fill: #ffffff !important;
564
556
  }
565
- }
557
+ }
@@ -36,7 +36,7 @@
36
36
  }
37
37
 
38
38
  .card-label-error {
39
- @apply block text-body-s text-error mb-md;
39
+ @apply block text-body-s text-error;
40
40
  }
41
41
 
42
42
  .card-label-desc {
@@ -111,7 +111,7 @@
111
111
  }
112
112
 
113
113
  .card-label-error {
114
- @apply block text-body-s text-error mb-md;
114
+ @apply block text-body-s text-error;
115
115
  }
116
116
 
117
117
  .card-label-desc {
@@ -131,6 +131,15 @@
131
131
  }
132
132
  }
133
133
 
134
+ .vehicle-details-card {
135
+ width: 100%;
136
+ height: fit-content;
137
+ }
138
+
139
+ .no-shadow {
140
+ box-shadow: none !important;
141
+ }
142
+
134
143
  .header-wrap {
135
144
  @apply flex mb-md;
136
145
 
@@ -147,6 +156,11 @@
147
156
  }
148
157
  }
149
158
 
159
+ .header-content {
160
+ word-break: break-word;
161
+ overflow-wrap: break-word;
162
+ }
163
+
150
164
  .card-emp {
151
165
  @extend .card;
152
166
  padding-right: 0;
@@ -186,7 +200,6 @@
186
200
  }
187
201
 
188
202
  @screen dt {
189
-
190
203
  .submit-bar,
191
204
  .submit-bar-disabled {
192
205
  width: 240px;
@@ -348,7 +361,7 @@
348
361
  }
349
362
 
350
363
  /* Remove any default margins that might interfere */
351
- .label-field-pair>* {
364
+ .label-field-pair > * {
352
365
  margin: 0;
353
366
  width: 100%;
354
367
  }
@@ -380,8 +393,6 @@
380
393
  margin-right: auto;
381
394
  }
382
395
 
383
- .header-content {}
384
-
385
396
  .header-end {
386
397
  margin-left: auto;
387
398
  }
@@ -430,7 +441,7 @@
430
441
  }
431
442
 
432
443
  .card-label-error {
433
- @apply block text-body-s text-error mb-md;
444
+ @apply block text-body-s text-error;
434
445
  }
435
446
 
436
447
  .employeeCard-override {
@@ -491,7 +502,7 @@
491
502
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
492
503
  }
493
504
 
494
- .new-employee-card>* {
505
+ .new-employee-card > * {
495
506
  position: relative;
496
507
  z-index: 1;
497
508
  }
@@ -915,7 +926,7 @@
915
926
  cursor: pointer;
916
927
  font-weight: 600;
917
928
  color: #1a365d;
918
- box-shadow: 0 2px 4px rgba(0,0,0,0.02);
929
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
919
930
  }
920
931
  .hamburger-icon {
921
932
  width: 22px;
@@ -950,7 +961,7 @@
950
961
  position: fixed;
951
962
  top: 0;
952
963
  left: -100%;
953
- width: 80%;
964
+ width: 80%;
954
965
  max-width: 320px;
955
966
  height: 100vh;
956
967
  background-color: #ffffff;
@@ -1344,7 +1355,6 @@
1344
1355
  color: #ffffff;
1345
1356
  }
1346
1357
 
1347
-
1348
1358
  .collapsed .brand-name,
1349
1359
  .collapsed .nav-text {
1350
1360
  opacity: 0;
@@ -1395,6 +1405,6 @@
1395
1405
  border-right: 1px solid #e5e7eb;
1396
1406
  border-radius: 8px;
1397
1407
  padding: 20px;
1398
- transition: none;
1408
+ transition: none;
1399
1409
  }
1400
- }
1410
+ }
@@ -920,7 +920,8 @@
920
920
  font-size: 14px;
921
921
  color: #4b5563;
922
922
  font-weight: 500;
923
- margin-top: 8px;
923
+ word-break: break-word;
924
+ white-space: normal;
924
925
  }
925
926
 
926
927
  .step-label.active-text {
@@ -941,7 +942,6 @@
941
942
  border-radius: 6px;
942
943
  }
943
944
 
944
-
945
945
  .additional-grid {
946
946
  display: grid;
947
947
  grid-template-columns: 180px 1fr 180px 1fr;
@@ -965,4 +965,4 @@
965
965
  .additional-grid {
966
966
  grid-template-columns: 160px 1fr;
967
967
  }
968
- }
968
+ }
@@ -31,7 +31,7 @@
31
31
 
32
32
  .card-textarea,
33
33
  .employee-card-textarea {
34
- @apply block outline-none mt-md mb-lg border w-full border-input-border border-solid bg-white h-24 text-form-field text-text-primary p-sm rounded-md;
34
+ @apply block outline-none border w-full border-input-border border-solid bg-white h-24 text-form-field text-text-primary p-sm rounded-md;
35
35
  }
36
36
 
37
37
  .inputWrapper {
@@ -75,12 +75,9 @@
75
75
 
76
76
  .card-textarea,
77
77
  .employee-card-textarea {
78
- @apply block outline-none mt-md mb-lg border w-full border-input-border border-solid bg-white h-24 text-form-field text-text-primary p-sm;
78
+ @apply block outline-none border w-full border-input-border border-solid bg-white h-24 text-form-field text-text-primary p-sm;
79
79
  @extend .light-input-border;
80
80
  }
81
- .employee-card-textarea {
82
- @apply w-full;
83
- }
84
81
 
85
82
  .citizen-card-input {
86
83
  @apply pl-sm outline-none block border w-full h-10 border-input-border border-solid bg-white leading-10 text-form-field text-text-primary;
@@ -131,7 +131,7 @@
131
131
 
132
132
  .card-label-error {
133
133
  @extend .alert-error;
134
- @apply block text-body-s text-error mb-md;
134
+ @apply block text-body-s text-error;
135
135
  }
136
136
 
137
137
  .card-label-desc {
package/src/index.scss CHANGED
@@ -729,7 +729,6 @@ input[type="number"] {
729
729
  width: 100%;
730
730
  flex: 1;
731
731
  min-width: 0;
732
- margin-bottom: 68px;
733
732
  }
734
733
 
735
734
  .employee-app-wrapper {
@@ -97,6 +97,7 @@
97
97
  .employee-main-application-details {
98
98
  width: 100%;
99
99
  overflow-y: scroll;
100
+ margin-bottom: 62px;
100
101
  }
101
102
 
102
103
  .employee-form-content {
@@ -108,6 +109,10 @@
108
109
  gap: 16px;
109
110
  }
110
111
 
112
+ .employee-form-content-with-action-bar {
113
+ margin-bottom: 62px;
114
+ }
115
+
111
116
  .citizen {
112
117
  .main {
113
118
  padding-top: 82px;