@djb25/digit-ui-css 1.0.43 → 1.0.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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@djb25/digit-ui-css",
3
- "version": "1.0.43",
3
+ "version": "1.0.45",
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 w-full flex flex-wrap gap-5 justify-between bg-white;
2
+ @apply w-full flex-wrap gap-5 justify-between bg-white;
3
3
 
4
4
  padding: 20px;
5
5
  border-radius: 11px;
@@ -6,7 +6,8 @@
6
6
  border-radius: 12px;
7
7
  overflow-y: scroll;
8
8
  height: fit-content;
9
- @media (min-width: 768px) {
9
+
10
+ @media (min-width: 769px) {
10
11
  max-width: 25%;
11
12
  min-width: 250px;
12
13
  min-height: 500px;
@@ -17,7 +18,8 @@
17
18
  display: flex;
18
19
  position: relative;
19
20
  gap: 16px;
20
- @media (min-width: 768px) {
21
+
22
+ @media (min-width: 769px) {
21
23
  min-height: 80px;
22
24
  padding-bottom: 20px;
23
25
  }
@@ -86,7 +88,8 @@
86
88
  .vertical-timeline-content {
87
89
  display: flex;
88
90
  flex-direction: column;
89
- @media (min-width: 768px) {
91
+
92
+ @media (min-width: 769px) {
90
93
  min-height: 38px;
91
94
  margin-top: 10px;
92
95
  }
@@ -115,6 +118,9 @@
115
118
  gap: 12px;
116
119
  padding: 12px;
117
120
  height: fit-content;
121
+ max-width: 100%;
122
+ min-width: auto;
123
+ min-height: auto;
118
124
  }
119
125
 
120
126
  .vertical-timeline-wrapper {
@@ -143,9 +149,8 @@
143
149
  cursor: pointer;
144
150
  height: 2rem;
145
151
  padding-inline: 24px;
146
- @media (min-width: 768px) {
147
- min-width: 120px;
148
- }
152
+ flex-shrink: 0;
153
+ min-width: 120px;
149
154
  }
150
155
 
151
156
  /* 🔥 pill becomes tab */
@@ -181,4 +186,4 @@
181
186
  background-color: #1f5fa8;
182
187
  color: #fff;
183
188
  }
184
- }
189
+ }
@@ -110,7 +110,7 @@ body {
110
110
  }
111
111
 
112
112
  @media (min-width: 1280px) {
113
- padding-inline: 64px;
113
+ padding-inline: 50px;
114
114
  }
115
115
  }
116
116
 
@@ -140,13 +140,12 @@ body {
140
140
  .form-container {
141
141
  display: flex;
142
142
  flex-direction: column;
143
- padding: 26px;
143
+ padding: 20px;
144
144
  width: 100%;
145
145
  gap: 12px;
146
146
 
147
147
  @media (min-width: 768px) {
148
- padding-right: 75px;
149
- padding-top: 33px;
148
+ padding-right: 55px;
150
149
  }
151
150
 
152
151
  .header {
@@ -275,10 +275,10 @@
275
275
  @apply mb-md mx-md !important;
276
276
  */
277
277
 
278
- &.filter {
278
+ /* &.filter {
279
279
  margin-left: auto;
280
280
  margin-right: auto;
281
- }
281
+ } */
282
282
 
283
283
  .card-header {
284
284
  @apply text-heading-xl-dt;
@@ -1336,7 +1336,6 @@
1336
1336
  display: flex;
1337
1337
  flex-direction: column;
1338
1338
  gap: 8px;
1339
- padding: 0 16px;
1340
1339
  }
1341
1340
 
1342
1341
  .nav-link {
@@ -1416,7 +1415,7 @@
1416
1415
  }
1417
1416
 
1418
1417
  .collapsed .sidebar-header {
1419
- padding: 24px 0;
1418
+ padding: 15px 0;
1420
1419
  flex-direction: column;
1421
1420
  gap: 24px;
1422
1421
  justify-content: center;
@@ -8,7 +8,7 @@
8
8
 
9
9
  .header-top-section {
10
10
  width: 100%;
11
- background: linear-gradient(98deg, rgba(110, 192, 221, 0.71) -24.44%, rgba(97, 119, 236, 0.9) 93.53%);
11
+ background: linear-gradient(135deg,#1a67a3,#5282e6 40%,#5495fe);
12
12
  padding: 30px 50px;
13
13
  border-radius: 11px;
14
14
  margin-inline: 42px;
@@ -41,7 +41,7 @@
41
41
 
42
42
  .header-bottom-section {
43
43
  width: 100%;
44
- background: linear-gradient(278deg, rgba(110, 192, 221, 0.71) -24.44%, rgba(97, 119, 236, 0.9) 93.53%);
44
+ background: linear-gradient(135deg,#1a67a3,#5282e6 40%,#5495fe);
45
45
  padding: 5px 20px;
46
46
  border-radius: 11px;
47
47
  position: relative;
@@ -29,3 +29,51 @@
29
29
  left: calc(50% - 240px);
30
30
  }
31
31
  }
32
+
33
+ /* Toast base */
34
+ .toast-success {
35
+ display: flex;
36
+ align-items: center;
37
+ gap: 10px;
38
+
39
+ padding: 12px 16px;
40
+ border-radius: 8px;
41
+
42
+ color: #fff;
43
+ background-color: #22c55e;
44
+
45
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
46
+
47
+ z-index: 9999;
48
+
49
+ /* 👇 animation trigger */
50
+ animation: slideInRight 0.4s ease forwards;
51
+ }
52
+
53
+ /* Slide-in from right */
54
+ @keyframes slideInRight {
55
+ from {
56
+ transform: translateX(120%);
57
+ opacity: 0;
58
+ }
59
+ to {
60
+ transform: translateX(0);
61
+ opacity: 1;
62
+ }
63
+ }
64
+
65
+ /* Slide-out */
66
+ .toast-exit {
67
+ animation: slideOutRight 0.3s ease forwards;
68
+ }
69
+
70
+ @keyframes slideOutRight {
71
+ from {
72
+ transform: translateX(0);
73
+ opacity: 1;
74
+ }
75
+ to {
76
+ transform: translateX(120%);
77
+ opacity: 0;
78
+ }
79
+ }
@@ -42,7 +42,6 @@
42
42
 
43
43
  &.spect-icon {
44
44
  width: auto;
45
- padding-right: 20px;
46
45
  max-height: 50px;
47
46
  }
48
47
 
package/src/index.scss CHANGED
@@ -913,6 +913,10 @@ input[type="number"] {
913
913
  height: 100%;
914
914
  }
915
915
 
916
+ .flex-box-col {
917
+ flex-direction: column;
918
+ }
919
+
916
920
  .flex-box-content-between {
917
921
  display: flex;
918
922
  justify-content: space-between;