@djb25/digit-ui-css 1.0.32 → 1.0.34

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.32",
3
+ "version": "1.0.34",
4
4
  "license": "MIT",
5
5
  "main": "dist/index.css",
6
6
  "author": "satyam",
@@ -1,5 +1,5 @@
1
1
  .search-form-wrapper {
2
- @apply flex flex-wrap gap-5 justify-between bg-white;
2
+ @apply w-full flex flex-wrap gap-5 justify-between bg-white;
3
3
 
4
4
  padding: 20px;
5
5
  border-radius: 11px;
@@ -1,106 +1,180 @@
1
1
  .vertical-timeline-container {
2
- display: flex;
3
- flex-direction: column;
4
- padding: 16px;
5
- /* Reduced padding slightly to fit better if needed, or keep 24 */
6
- height: 100%;
2
+ display: flex;
3
+ flex-direction: column;
4
+ padding: 16px;
5
+ background-color: #fff;
6
+ border-radius: 12px;
7
7
  }
8
8
 
9
9
  .vertical-timeline-step {
10
- display: flex;
11
- position: relative;
12
- padding-bottom: 20px;
10
+ display: flex;
11
+ position: relative;
12
+ @media (min-width: 768px) {
13
13
  min-height: 80px;
14
+ padding-bottom: 20px;
15
+ }
14
16
  }
15
17
 
16
18
  .vertical-timeline-step:last-child {
17
- padding-bottom: 0;
18
- min-height: auto;
19
+ padding-bottom: 0;
20
+ min-height: auto;
19
21
  }
20
22
 
21
23
  .vertical-timeline-connector {
22
- position: absolute;
23
- top: 36px;
24
- left: 17px;
25
- width: 3px;
26
- height: calc(100% - 10px);
27
- /* Adjust based on padding/spacing */
28
- background-color: #e0e0e0;
29
- z-index: 0;
24
+ position: absolute;
25
+ top: 36px;
26
+ left: 17px;
27
+ width: 3px;
28
+ height: calc(100% - 10px);
29
+ /* Adjust based on padding/spacing */
30
+ background-color: #e0e0e0;
31
+ z-index: 0;
30
32
  }
31
33
 
32
34
  .vertical-timeline-step:last-child .vertical-timeline-connector {
33
- display: none;
35
+ display: none;
34
36
  }
35
37
 
36
38
  .vertical-timeline-connector.completed {
37
- background-color: #667eea;
39
+ background-color: #667eea;
38
40
  }
39
41
 
40
42
  .vertical-timeline-pill {
41
- width: 38px;
42
- /* Larger pill */
43
- height: 38px;
44
- border-radius: 50%;
45
- background-color: #fff;
46
- border: 3px solid #D1D5DB;
47
- /* Thicker border */
48
- display: flex;
49
- align-items: center;
50
- justify-content: center;
51
- font-weight: bold;
52
- font-size: 16px;
53
- /* Larger text */
54
- color: #6B7280;
55
- z-index: 1;
56
- margin-right: 16px;
57
- flex-shrink: 0;
58
- transition: all 0.3s ease;
43
+ width: 38px;
44
+ /* Larger pill */
45
+ height: 38px;
46
+ border-radius: 50%;
47
+ background-color: #fff;
48
+ border: 3px solid #d1d5db;
49
+ /* Thicker border */
50
+ display: flex;
51
+ align-items: center;
52
+ justify-content: center;
53
+ font-weight: bold;
54
+ font-size: 16px;
55
+ /* Larger text */
56
+ color: #6b7280;
57
+ z-index: 1;
58
+ margin-right: 16px;
59
+ flex-shrink: 0;
60
+ transition: all 0.3s ease;
59
61
  }
60
62
 
61
63
  .vertical-timeline-step.active .vertical-timeline-pill {
62
- background-color: #667eea;
63
- border-color: #667eea;
64
- color: #fff;
65
- box-shadow: 0 0 0 5px rgba(244, 119, 56, 0.2);
66
- /* Enhanced glow */
67
- transform: scale(1.1);
68
- /* Slight pulse effect */
64
+ background-color: #667eea;
65
+ border-color: #667eea;
66
+ color: #fff;
67
+ box-shadow: 0 0 0 5px rgba(244, 119, 56, 0.2);
68
+ /* Enhanced glow */
69
+ transform: scale(1.1);
70
+ /* Slight pulse effect */
69
71
  }
70
72
 
71
73
  .vertical-timeline-step.completed .vertical-timeline-pill {
72
- background-color: #667eea;
73
- border-color: #667eea;
74
- color: #fff;
74
+ background-color: #667eea;
75
+ border-color: #667eea;
76
+ color: #fff;
75
77
  }
76
78
 
77
79
  .vertical-timeline-content {
78
- display: flex;
79
- flex-direction: column;
80
+ display: flex;
81
+ flex-direction: column;
82
+ @media (min-width: 768px) {
80
83
  min-height: 38px;
81
84
  margin-top: 10px;
85
+ }
82
86
  }
83
87
 
84
88
  .vertical-timeline-label {
85
- font-size: 16px;
86
- color: #4B5563;
87
- font-weight: 500;
88
- line-height: normal;
89
- /* Reset line height */
89
+ font-size: 16px;
90
+ color: #4b5563;
91
+ font-weight: 500;
92
+ line-height: normal;
93
+ /* Reset line height */
94
+ @media (min-width: 768px) {
95
+ text-wrap: nowrap;
96
+ }
90
97
  }
91
98
 
92
99
  .vertical-timeline-step.active .vertical-timeline-label {
93
- color: #667eea;
94
- font-weight: 700;
100
+ color: #121416;
101
+ font-weight: 700;
95
102
  }
96
103
 
97
104
  .vertical-timeline-step.completed .vertical-timeline-label {
98
- color: #111827;
105
+ color: #111827;
99
106
  }
100
107
 
101
- /* Responsive: Hide on small screens or move to top */
102
108
  @media (max-width: 768px) {
103
- .vertical-timeline-container {
104
- display: none;
109
+ .vertical-timeline-container {
110
+ flex-direction: row;
111
+ gap: 12px;
112
+ padding: 12px;
113
+ height: fit-content;
114
+ }
115
+
116
+ .vertical-timeline-wrapper {
117
+ display: flex;
118
+ border-radius: 99999px;
119
+ padding: 0.25rem;
120
+ background-color: #667eea36;
121
+ overflow-x: scroll;
122
+ max-width: 100%;
123
+ }
124
+
125
+ .activeTimeline {
126
+ background-color: #fff;
127
+ border-radius: 99999px;
128
+ height: 2rem;
129
+ display: flex;
130
+ align-items: center;
131
+ justify-content: center;
132
+ padding-inline: 1rem;
133
+ }
134
+
135
+ .vertical-timeline-step {
136
+ flex-direction: column;
137
+ align-items: center;
138
+ justify-content: center;
139
+ cursor: pointer;
140
+ height: 2rem;
141
+ padding-inline: 24px;
142
+ @media (min-width: 768px) {
143
+ min-width: 120px;
105
144
  }
106
- }
145
+ }
146
+
147
+ /* 🔥 pill becomes tab */
148
+ .vertical-timeline-pill {
149
+ display: none;
150
+ }
151
+
152
+ /* label below */
153
+ .vertical-timeline-content {
154
+ align-items: center;
155
+ }
156
+
157
+ .vertical-timeline-label {
158
+ font-size: 12px;
159
+ text-align: center;
160
+ white-space: nowrap;
161
+ }
162
+
163
+ .vertical-timeline-connector {
164
+ display: none;
165
+ }
166
+
167
+ /* active tab */
168
+ .vertical-timeline-step.active .vertical-timeline-pill {
169
+ background-color: #667eea;
170
+ color: #fff;
171
+ transform: none;
172
+ box-shadow: none;
173
+ }
174
+
175
+ /* completed tab */
176
+ .vertical-timeline-step.completed .vertical-timeline-pill {
177
+ background-color: #667eea;
178
+ color: #fff;
179
+ }
180
+ }
@@ -26,12 +26,22 @@
26
26
  box-sizing: border-box;
27
27
  }
28
28
 
29
+ .hidden-content {
30
+ display: none !important;
31
+ }
32
+
33
+ @media (max-width: 768px) {
34
+ .hidden-card {
35
+ display: none !important;
36
+ }
37
+ }
38
+
29
39
  .timeline-container2 {
30
40
  display: flex;
31
41
  flex-direction: column;
32
42
  position: relative;
33
43
  padding: 10px 0;
34
- font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
44
+ font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
35
45
  }
36
46
 
37
47
  .timeline-item2 {
@@ -111,7 +121,7 @@
111
121
 
112
122
  /* Tiny triangle pointer pointing to the circle */
113
123
  .timeline-content2::before {
114
- content: '';
124
+ content: "";
115
125
  position: absolute;
116
126
  left: -5px;
117
127
  top: calc(var(--tl-circle-size) / 2 - 5px);
@@ -185,6 +195,18 @@
185
195
  border-left: 2px solid #d1d5db;
186
196
  }
187
197
 
198
+ .timeline-header-wrapper {
199
+ transition: transform 0.3s ease;
200
+ transform-origin: center;
201
+ margin-bottom: 16px;
202
+ display: flex;
203
+ justify-content: space-between;
204
+ }
205
+
206
+ .timeline-arrow.collapsed {
207
+ transform: rotate(180deg);
208
+ }
209
+
188
210
  /* Footer section: Assignee */
189
211
  .timeline-footer2 {
190
212
  margin-top: 8px;
@@ -213,4 +235,4 @@
213
235
  /* Optional: Make the whole clock pulse gently if it's the current item */
214
236
  .timeline-item2.current2 .timeline-circle2 svg {
215
237
  filter: drop-shadow(0 0 2px rgba(59, 130, 246, 0.5));
216
- }
238
+ }
@@ -40,6 +40,13 @@
40
40
  padding-right: 24px;
41
41
  text-align: right;
42
42
  }
43
+
44
+ @media (max-width: 768px) {
45
+ .action-bar-wrap {
46
+ margin-bottom: 30px;
47
+ }
48
+ }
49
+
43
50
  @screen dt {
44
51
  .action-bar-wrap {
45
52
  box-shadow: rgba(0, 0, 0, 0.16) 0 -2px 8px;
@@ -98,22 +98,30 @@ body {
98
98
  height: 100%;
99
99
  }
100
100
 
101
- @screen dt {
102
- .employee-app-homepage-container {
103
- @apply w-full;
104
- display: flex;
105
- flex-direction: column;
106
- gap: 12px;
107
- padding-top: 12px;
108
- padding-inline: 58px;
101
+ .employee-app-homepage-container {
102
+ width: 100%;
103
+ display: flex;
104
+ flex-direction: column;
105
+ gap: 16px;
106
+ padding: 16px;
107
+
108
+ @media (min-width: 768px) {
109
+ padding: 24px;
109
110
  }
110
111
 
112
+ @media (min-width: 1280px) {
113
+ padding-inline: 64px;
114
+ }
115
+ }
116
+
117
+ @screen dt {
111
118
  .employee-app-container {
112
119
  @apply w-full;
113
120
  display: flex;
114
121
  flex-direction: column;
115
122
  gap: 12px;
116
123
  padding-top: 12px;
124
+ padding-bottom: 12px;
117
125
  }
118
126
 
119
127
  .wt-inbox {
@@ -199,6 +199,14 @@
199
199
  }
200
200
  }
201
201
 
202
+ @media (max-width: 768px) {
203
+ .submit-bar {
204
+ padding-inline: 24px;
205
+ border-radius: 10px;
206
+ box-shadow: none;
207
+ background: linear-gradient(278deg, rgba(110, 191, 221, 0.925) -24.44%, rgba(97, 119, 236, 0.9) 93.53%);
208
+ }
209
+ }
202
210
  @screen dt {
203
211
 
204
212
  .submit-bar,
@@ -917,7 +925,7 @@
917
925
  display: flex;
918
926
  flex-direction: column;
919
927
  width: 100%;
920
- padding-bottom: 40px;
928
+ overflow-y: scroll;
921
929
  }
922
930
 
923
931
  .mobile-sidebar-toggle {
@@ -970,6 +978,7 @@
970
978
  top: 0;
971
979
  left: -100%;
972
980
  width: 80%;
981
+ min-width: 250px;
973
982
  max-width: 320px;
974
983
  height: 100vh;
975
984
  background-color: #ffffff;
@@ -1216,6 +1225,7 @@
1216
1225
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.04);
1217
1226
  position: relative;
1218
1227
  z-index: 101;
1228
+ padding: 20px;
1219
1229
  }
1220
1230
 
1221
1231
  /* Width Control */
@@ -1225,6 +1235,7 @@
1225
1235
 
1226
1236
  .premium-sidebar.collapsed {
1227
1237
  width: var(--sidebar-collapsed);
1238
+ padding:5px;
1228
1239
  }
1229
1240
 
1230
1241
  /* --- Header & Brand --- */
@@ -1414,10 +1425,52 @@
1414
1425
  display: none;
1415
1426
  }
1416
1427
 
1417
- @media (max-width: 780px) {
1428
+ .module-sidebar-wrapper {
1429
+ height: 100%;
1430
+ }
1431
+
1432
+ @media (max-width: 768px) {
1433
+
1434
+ /* Wrapper becomes a sticky top bar, not a flex column member */
1435
+ .module-sidebar-wrapper {
1436
+ position: fixed;
1437
+ top: 0;
1438
+ left: 0;
1439
+ height: 100vh;
1440
+ z-index: 100;
1441
+ pointer-events: none;
1442
+ /* Let clicks pass through when hidden */
1443
+ }
1444
+
1445
+ /* Hide desktop sidebar — zero dimensions so flex row is unaffected */
1446
+ .premium-sidebar {
1447
+ display: none !important;
1448
+ width: 0 !important;
1449
+ min-width: 0 !important;
1450
+ height: 0 !important;
1451
+ overflow: hidden !important;
1452
+ border: none !important;
1453
+ padding: 0 !important;
1454
+ margin: 0 !important;
1455
+ position: absolute;
1456
+ top: 0;
1457
+ left: 0;
1458
+ height: 100vh;
1459
+ width: 280px !important;
1460
+ /* Force fixed width on mobile drawer */
1461
+ transform: translateX(-100%);
1462
+ box-shadow: 10px 0 30px rgba(0, 0, 0, 0.15);
1463
+ }
1464
+
1465
+ /* Hide old toggle + backdrop */
1466
+ .module-sidebar-toggle,
1467
+ .module-sidebar-backdrop,
1468
+ .collapse-toggle {
1469
+ display: none !important;
1470
+ }
1418
1471
 
1419
- /* Toggle Button */
1420
- .module-sidebar-toggle {
1472
+ /* Show the horizontal scrollable tab bar */
1473
+ .mobile-tab-bar {
1421
1474
  display: flex;
1422
1475
  position: fixed;
1423
1476
  top: 68px;
@@ -1459,38 +1512,15 @@
1459
1512
  pointer-events: none;
1460
1513
  transition: opacity 0.4s ease;
1461
1514
  }
1462
-
1463
- .module-sidebar-backdrop.visible {
1515
+ module-sidebar-wrapper .module-sidebar-backdrop.visible {
1464
1516
  opacity: 1;
1465
1517
  pointer-events: auto;
1466
1518
  }
1467
1519
 
1468
- /* Sidebar Wrapper & Mobile Off-canvas Drawer */
1469
- .module-sidebar-wrapper {
1470
- position: fixed;
1471
- top: 0;
1472
- left: 0;
1473
- height: 100vh;
1474
- z-index: 100;
1475
- pointer-events: none;
1476
- /* Let clicks pass through when hidden */
1477
- }
1478
-
1479
1520
  .module-sidebar-wrapper.mobile-open {
1480
1521
  pointer-events: auto;
1481
1522
  }
1482
1523
 
1483
- .premium-sidebar {
1484
- position: absolute;
1485
- top: 0;
1486
- left: 0;
1487
- height: 100vh;
1488
- width: 280px !important;
1489
- /* Force fixed width on mobile drawer */
1490
- transform: translateX(-100%);
1491
- box-shadow: 10px 0 30px rgba(0, 0, 0, 0.15);
1492
- }
1493
-
1494
1524
  .premium-sidebar.mobile-open {
1495
1525
  transform: translateX(0);
1496
1526
  }
@@ -1514,9 +1544,27 @@
1514
1544
  width: auto !important;
1515
1545
  margin-left: 16px !important;
1516
1546
  }
1547
+
1548
+ /* expanded page container stacks vertically */
1549
+ .expanded-page-container {
1550
+ flex-direction: column !important;
1551
+ gap: 0 !important;
1552
+ width: 100% !important;
1553
+ }
1554
+
1555
+ /* expanded sidebar NOT hidden on mobile to allow hamburger menu */
1556
+
1557
+ /* expanded content full width */
1558
+ .expanded-content {
1559
+ width: 100% !important;
1560
+ padding: 16px !important;
1561
+ border-radius: 0 !important;
1562
+ box-shadow: none !important;
1563
+ }
1517
1564
  }
1518
1565
 
1519
1566
  @media (min-width: 768px) {
1567
+
1520
1568
  .mobile-sidebar-toggle,
1521
1569
  .mobile-close-btn,
1522
1570
  .sidebar-backdrop {
@@ -1525,7 +1573,7 @@
1525
1573
 
1526
1574
  .expanded-page-container {
1527
1575
  flex-direction: row;
1528
- gap: 24px;
1576
+ gap: 16px;
1529
1577
  }
1530
1578
 
1531
1579
  .expanded-sidebar {
@@ -1541,4 +1589,4 @@
1541
1589
  padding: 20px;
1542
1590
  transition: none;
1543
1591
  }
1544
- }
1592
+ }
@@ -26,6 +26,11 @@
26
26
  }
27
27
  }
28
28
 
29
+ .formcomposer-section-button {
30
+ .clear-search {
31
+ min-width: 200px;
32
+ }
33
+ }
29
34
  @screen dt {
30
35
  .InboxComposerWrapper {
31
36
  grid-template-columns: calc(25% - 32px) 75%;
@@ -76,6 +76,7 @@
76
76
  position: relative;
77
77
  min-height: 1px;
78
78
  overflow: auto;
79
+ padding-top: 60px !important;
79
80
 
80
81
  .menu-item {
81
82
  border: 10px;
@@ -1,5 +1,6 @@
1
1
  .popup-wrap {
2
2
  background: rgba(0, 0, 0, 0.7);
3
+ padding: 100px;
3
4
  @apply flex fixed w-full h-full overflow-auto top-0 left-0 min-h-screen;
4
5
  z-index: 10000;
5
6
  }
@@ -12,6 +13,6 @@
12
13
  }
13
14
  }
14
15
 
15
- .popup-close-icon{
16
+ .popup-close-icon {
16
17
  @apply flex justify-end;
17
- }
18
+ }
package/src/index.scss CHANGED
@@ -216,6 +216,11 @@ h6 {
216
216
  margin-left: auto;
217
217
  }
218
218
 
219
+ .overflow-y-scroll {
220
+ overflow-y: scroll;
221
+ height: 100%;
222
+ }
223
+
219
224
  .application-details-link-button {
220
225
  @apply flex justify-between items-center;
221
226
 
@@ -731,12 +736,11 @@ input[type="number"] {
731
736
  width: 100%;
732
737
  flex: 1;
733
738
  min-width: 0;
734
-
735
739
  }
736
740
 
737
741
  .employee-app-wrapper {
738
742
  min-height: calc(100vh - 8em);
739
- height: calc(100vh - 105px);
743
+ height: calc(100vh - 110px);
740
744
  }
741
745
 
742
746
  .ws-custom-wrapper {
@@ -2,18 +2,18 @@
2
2
  display: flex;
3
3
  width: 100%;
4
4
  height: 100%;
5
- gap: 24px;
5
+ gap: 16px;
6
6
  overflow-y: auto;
7
7
  }
8
8
 
9
9
  .mobile-view {
10
- flex-direction: column !important;
11
- gap: 0 !important;
10
+ flex-direction: column !important;
11
+ gap: 0 !important;
12
12
  }
13
13
 
14
14
  @media (max-width: 768px) {
15
15
  .employee-form {
16
16
  flex-direction: column;
17
- gap: 24px;
17
+ gap: 16px;
18
18
  }
19
- }
19
+ }
@@ -108,7 +108,7 @@
108
108
  padding: 10px;
109
109
 
110
110
  .heading {
111
- justify-content: unset;
111
+ justify-content: space-between;
112
112
  @apply flex;
113
113
 
114
114
  .clearAll {