@tattvafoundation/upyog-css 1.0.24 → 1.0.26

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": "@tattvafoundation/upyog-css",
3
- "version": "1.0.24",
3
+ "version": "1.0.26",
4
4
  "license": "MIT",
5
5
  "main": "dist/index.css",
6
6
  "engines": {
@@ -11,6 +11,9 @@
11
11
  --text-color: black;
12
12
 
13
13
 
14
+ }
15
+ * {
16
+ font-size: var(--base-font-size);
14
17
  }
15
18
  body, html {
16
19
  font-size: var(--base-font-size);
@@ -162,7 +165,7 @@ body {
162
165
  }
163
166
 
164
167
  .ChildOptionName a {
165
- font-size: 14px;
168
+ font-size: 16px;
166
169
  color: #b08904;
167
170
  }
168
171
 
@@ -1,36 +1,261 @@
1
- .ebe-add-employee-wrp{
2
- display: flex;
1
+ .ebe-add-employee-wrp {
2
+ display: flex;
3
+ flex-direction: column;
4
+ min-width: 600px;
5
+ }
6
+
7
+ .ebe-add-employee {
8
+ display: flex;
9
+ gap: 10px;
10
+ width: 100%;
11
+ }
12
+
13
+ .ebe-search-bar {
14
+ width: "50%"
15
+ }
16
+
17
+ @media (max-width: 768px) {
18
+
19
+ .ebe-add-employee {
20
+ display: block
21
+ }
22
+
23
+ .ebe-add-employee-wrp {
24
+ min-width: auto;
25
+ }
26
+
27
+ .ebe-search-bar {
28
+ width: "100%"
29
+ }
30
+
31
+ }
32
+
33
+ @media (max-width: 1024px) {
34
+ .ebe-custom-scroll {
35
+ display: block;
36
+ }
37
+ }
38
+
39
+
40
+ .ebe-row-card-header{
41
+ background: #fff;
42
+ margin-top: 20px;
43
+ padding: 18px;
44
+ border-radius: 12px;
45
+ }
46
+
47
+ /* Base style for the modal */
48
+ .ebe-modal .popup-module {
49
+ width: 70%; /* Default width, you can modify the percentage based on your requirements */
50
+ height: auto;
51
+ display: flex;
52
+ flex-direction: column;
53
+ }
54
+
55
+ .ebe-modal .modal-header {
56
+ display: flex;
57
+ justify-content: space-between;
58
+ align-items: center;
59
+ padding-bottom: 10px;
60
+ border-bottom: 1px solid #ddd;
61
+ }
62
+
63
+ .ebe-modal .modal-header h1 {
64
+ margin: 0;
65
+ }
66
+
67
+ .ebe-modal .modal-body {
68
+ flex-grow: 1;
69
+ overflow-y: auto; /* Enables scrolling if content overflows */
70
+ padding: 20px 0;
71
+ display: grid; /* Use grid layout */
72
+ gap: 16px; /* Add space between items */
73
+ }
74
+
75
+ .ebe-modal .modal-footer {
76
+ display: flex;
77
+ justify-content: flex-end;
78
+ gap: 16px;
79
+ padding-top: 10px;
80
+ }
81
+
82
+ .ebe-modal .modal-footer button {
83
+ padding: 10px 20px;
84
+ font-size: 14px;
85
+ background-color: #007BFF;
86
+ color: white;
87
+ border: none;
88
+ border-radius: 4px;
89
+ cursor: pointer;
90
+ }
91
+
92
+ .ebe-modal .modal-footer button:disabled {
93
+ background-color: #ccc;
94
+ cursor: not-allowed;
95
+ }
96
+
97
+ /* Adjust grid layout based on columns */
98
+ .ebe-modal .modal-body.two-columns {
99
+ grid-template-columns: 1fr 1fr; /* 2 equal columns */
100
+ }
101
+
102
+ .ebe-modal .modal-body.four-columns {
103
+ grid-template-columns: 1fr 1fr 1fr 1fr; /* 4 equal columns */
104
+ }
105
+
106
+ .ebe-modal .modal-body .form-item {
107
+ padding: 8px;
108
+ border: 1px solid #ddd;
109
+ border-radius: 4px;
110
+ }
111
+
112
+ /* Media query for tablet and mobile devices */
113
+ @media screen and (max-width: 768px) {
114
+ .ebe-modal {
115
+ width: 100%; /* Full width on smaller screens */
116
+ padding: 10px;
117
+ }
118
+
119
+ .ebe-modal .modal-header h1 {
120
+ font-size: 18px;
121
+ }
122
+
123
+ .ebe-modal .modal-footer {
3
124
  flex-direction: column;
4
- min-width: 600px;
125
+ gap: 8px;
5
126
  }
6
-
7
- .ebe-add-employee{
8
- display: flex;
9
- gap: 10px;
10
- width: 100%;
127
+
128
+ /* Adjust grid layout for mobile and tablets */
129
+ .ebe-modal .modal-body.two-columns {
130
+ grid-template-columns: 1fr; /* Stack items vertically on smaller screens */
11
131
  }
12
132
 
13
- .ebe-search-bar{
14
- width:"50%"
133
+ .ebe-modal .modal-body.four-columns {
134
+ grid-template-columns: 1fr; /* Stack items vertically on smaller screens */
15
135
  }
136
+ }
16
137
 
17
- @media (max-width: 768px) {
138
+ @media screen and (max-width: 480px) {
139
+ .ebe-modal {
140
+ padding: 5px;
141
+ }
18
142
 
19
- .ebe-add-employee{
20
- display: block
21
- }
22
- .ebe-add-employee-wrp{
23
- min-width: auto;
24
- }
143
+ .ebe-modal .modal-header h1 {
144
+ font-size: 16px;
145
+ }
25
146
 
26
- .ebe-search-bar{
27
- width:"100%"
28
- }
29
-
147
+ .ebe-modal .modal-footer {
148
+ gap: 4px;
30
149
  }
31
150
 
32
- @media (max-width: 1024px) {
33
- .ebe-custom-scroll {
34
- display: block;
151
+ /* Adjust grid layout for mobile screens */
152
+ .ebe-modal .modal-body.two-columns {
153
+ grid-template-columns: 1fr; /* Stack items vertically on smaller screens */
154
+ }
155
+
156
+ .ebe-modal .modal-body.four-columns {
157
+ grid-template-columns: 1fr; /* Stack items vertically on smaller screens */
158
+ }
159
+ }
160
+
161
+ /* Optional: Specific style for table or column-based content */
162
+ .ebe-modal .modal-body table {
163
+ width: 100%;
164
+ border-collapse: collapse;
165
+ }
166
+
167
+ .ebe-modal .modal-body table th,
168
+ .ebe-modal .modal-body table td {
169
+ padding: 8px;
170
+ text-align: left;
171
+ border: 1px solid #ddd;
172
+ }
173
+
174
+ .ebe-modal .modal-body table th {
175
+ background-color: #f4f4f4;
176
+ }
177
+
178
+ .ebe-extension .employeeCard .label-field-pair h2{
179
+ width: 0;
180
+ }
181
+
182
+
183
+ .ebe-label{
184
+ display: block;
185
+ font-weight: bold;
186
+ white-space: normal; /* Allows text to break into multiple lines */
187
+ word-wrap: break-word; /* Ensures long words wrap */
188
+ overflow-wrap: break-word;
189
+ max-width: 100%; /* Ensures it doesn’t extend beyond the container */
190
+ line-height: 1.2; /* Improves readability */
191
+ }
192
+
193
+
194
+ .ebe-modal-overlay {
195
+ position: fixed;
196
+ top: 0;
197
+ left: 0;
198
+ width: 100%;
199
+ height: 100%;
200
+ background: rgba(0, 0, 0, 0.5);
201
+ display: flex;
202
+ justify-content: center;
203
+ align-items: center;
204
+ z-index: 1000;
205
+ }
206
+
207
+ .ebe-modal-content {
208
+ background: white;
209
+ width: 70%;
210
+ border-radius: 8px;
211
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
212
+ overflow: hidden;
213
+ }
214
+
215
+ .ebe-modal-header {
216
+ display: flex;
217
+ justify-content: space-between;
218
+ align-items: center;
219
+ padding: 16px;
220
+ border-bottom: 1px solid #ddd;
221
+ }
222
+
223
+ .ebe-modal-title {
224
+ font-size: 18px;
225
+ font-weight: bold;
226
+ }
227
+
228
+ .ebe-modal-close {
229
+ background: transparent;
230
+ border: none;
231
+ cursor: pointer;
232
+ }
233
+
234
+ .ebe-modal-body {
235
+ max-height: 60vh;
236
+ overflow-y: auto;
237
+ }
238
+
239
+ .ebe-modal-action-bar {
240
+ display: flex;
241
+ justify-content: space-between;
242
+ padding: 16px;
243
+ border-top: 1px solid #ddd;
244
+ }
245
+
246
+ .ebe-modal-action-container {
247
+ width: 100%;
248
+ text-align: center;
249
+ }
250
+
251
+ .ebe-modal-submit {
252
+ width: 100%;
253
+ }
254
+
255
+ /* Mobile adjustments */
256
+ @media (max-width: 480px) {
257
+ .ebe-modal-content {
258
+ width: 95%;
259
+ max-width: 100%;
35
260
  }
36
- }
261
+ }
@@ -5,9 +5,11 @@
5
5
  th {
6
6
  padding: 20px 18px;
7
7
  @apply font-bold align-middle text-left;
8
+
8
9
  &:first-child {
9
10
  min-width: 100px;
10
11
  }
12
+
11
13
  &:nth-child(2) {
12
14
  min-width: 150px;
13
15
  }
@@ -18,6 +20,7 @@
18
20
  border: none;
19
21
  padding: 0;
20
22
  margin: 0;
23
+
21
24
  td {
22
25
  @apply border-t border-border text-left align-middle;
23
26
  padding: "20px 18px";
@@ -49,6 +52,7 @@
49
52
 
50
53
  .customTable {
51
54
  width: 100%;
55
+
52
56
  th {
53
57
  font-weight: bold;
54
58
  }
@@ -56,20 +60,23 @@
56
60
  th,
57
61
  td {
58
62
  text-align: left;
59
- border-bottom: 1px solid #b1b4b6;
60
- padding: 15px 10px;
63
+
64
+ padding: 15px !important;
65
+ border-bottom: 1px solid #fdf0c4 !important;
61
66
  }
62
67
 
63
68
  tr:nth-child(odd) {
64
- background-color: #eeeeee;
69
+ background-color: #fffcf6;
65
70
  }
71
+
66
72
  tr:nth-child(even) {
67
73
  background-color: #fff;
68
74
  }
69
75
 
70
76
  thead {
71
77
  tr:first-child {
72
- background-color: unset;
78
+ background: #f5eace;
79
+ color: #b08904;
73
80
  }
74
81
  }
75
82
  }
@@ -78,22 +85,24 @@
78
85
  thead {
79
86
  th:first-child {
80
87
  position: sticky;
81
- background: #fff;
88
+ background: #f5eace;
82
89
  left: 0;
83
- border-right: 1px solid #b1b4b6;
90
+ border-right: 1px solid #e0cb84;
84
91
  border-top-left-radius: 4px;
85
92
  }
86
93
  }
94
+
87
95
  tbody {
88
96
  td:first-child {
89
97
  position: sticky;
90
- background: #fff;
91
- color:#a82227;
98
+ color: #a82227;
92
99
  left: 0;
93
- border-right: 1px solid #b1b4b6;
100
+ border-right: 1px solid #fdf0c4;
101
+ border-bottom: 1px solid #fdf0c4;
94
102
  }
95
103
  }
96
104
  }
105
+
97
106
  .table-fixed-column-common-pay {
98
107
  thead {
99
108
  th:first-child {
@@ -102,6 +111,7 @@
102
111
  left: 0;
103
112
  border-top-left-radius: 4px;
104
113
  }
114
+
105
115
  th:last-child {
106
116
  position: sticky;
107
117
  background: rgb(238, 238, 238);
@@ -109,12 +119,14 @@
109
119
  border-top-left-radius: 4px;
110
120
  }
111
121
  }
122
+
112
123
  tbody {
113
124
  td:first-child {
114
125
  position: sticky;
115
126
  background: rgb(238, 238, 238);
116
127
  left: 0;
117
128
  }
129
+
118
130
  td:last-child {
119
131
  position: sticky;
120
132
  background: rgb(238, 238, 238);
@@ -131,6 +143,7 @@
131
143
  background-color: white;
132
144
  }
133
145
  }
146
+
134
147
  tbody {
135
148
  td:nth-child(2) {
136
149
  position: sticky;
@@ -139,22 +152,26 @@
139
152
  }
140
153
  }
141
154
  }
155
+
142
156
  .table-border-style {
143
157
  border: 1px solid #b1b4b6;
144
158
  border-radius: 4px;
145
159
  border-spacing: 0;
146
160
  border-collapse: separate;
147
161
  }
162
+
148
163
  .dss-table-wrapper {
149
164
  width: 100%;
150
165
  display: block;
151
166
  overflow-x: auto;
167
+
152
168
  table {
153
169
  th {
154
170
  .tooltip {
155
171
  min-width: 80px;
156
172
  }
157
173
  }
174
+
158
175
  tr {
159
176
  td {
160
177
  span {
@@ -168,12 +185,12 @@
168
185
 
169
186
  .reports-table {
170
187
  margin-top: 2rem;
188
+
171
189
  thead {
172
- th {
190
+ th {
173
191
  &:first-child {
174
192
  min-width: unset;
175
193
  }
176
194
  }
177
195
  }
178
- }
179
-
196
+ }