@sasindi/samplecollection 1.0.0 → 1.0.2

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.
@@ -1,163 +1,297 @@
1
1
  @use '@carbon/layout';
2
2
  @use '@carbon/type';
3
3
 
4
- .container {
5
- padding: layout.$spacing-06;
6
- max-width: 1200px;
7
- margin: 0 auto;
4
+ /* Replicating the team's visual styles */
5
+
6
+ body {
7
+ max-width: unset !important;
8
+ padding: 0px 5px;
9
+ background-color: #f8f9fa;
10
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
8
11
  }
9
12
 
10
- .tile {
11
- padding: layout.$spacing-06;
12
- margin-bottom: layout.$spacing-05;
13
- background: var(--cds-layer-01, #ffffff);
14
- border-radius: 8px;
15
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
16
- border: 1px solid var(--cds-border-subtle-01, #e0e0e0);
13
+ .container {
14
+ padding: 15px;
15
+ max-width: 100%;
17
16
  }
18
17
 
19
- .headerRow {
18
+ .card {
19
+ position: relative;
20
20
  display: flex;
21
- justify-content: space-between;
22
- align-items: center;
23
- margin-bottom: layout.$spacing-06;
24
- border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0);
25
- padding-bottom: layout.$spacing-04;
21
+ flex-direction: column;
22
+ min-width: 0;
23
+ word-wrap: break-word;
24
+ background-color: #fff;
25
+ background-clip: border-box;
26
+ border: 1px solid rgba(0,0,0,.125);
27
+ border-radius: .25rem;
28
+ box-shadow: 0 4px 6px rgba(0,0,0,.05);
29
+ }
30
+
31
+ .cardBody {
32
+ flex: 1 1 auto;
33
+ padding: 1.25rem;
26
34
  }
27
35
 
28
36
  .heading {
29
- @include type.type-style('heading-04');
37
+ font-size: 20px;
30
38
  color: #009384;
31
- margin: 0;
32
- font-weight: 600;
39
+ font-weight: 500;
40
+ margin-bottom: 1.5rem;
33
41
  }
34
42
 
35
- .locationBadge {
43
+ /* Custom form grid alignment */
44
+ .row {
45
+ display: flex;
46
+ flex-wrap: wrap;
47
+ margin-right: -15px;
48
+ margin-left: -15px;
49
+ }
50
+
51
+ .col12 {
52
+ flex: 0 0 100%;
53
+ max-width: 100%;
54
+ padding-right: 15px;
55
+ padding-left: 15px;
56
+ }
57
+
58
+ .col10 {
59
+ flex: 0 0 83.333333%;
60
+ max-width: 83.333333%;
61
+ padding-right: 15px;
62
+ padding-left: 15px;
63
+ }
64
+
65
+ .col2 {
66
+ flex: 0 0 16.666667%;
67
+ max-width: 16.666667%;
68
+ padding-right: 15px;
69
+ padding-left: 15px;
70
+ }
71
+
72
+ .formGroupRow {
36
73
  display: flex;
37
74
  align-items: center;
38
- gap: layout.$spacing-03;
39
- font-weight: 600;
40
- color: var(--cds-text-secondary, #525252);
41
- background: var(--cds-layer-02, #f4f4f4);
42
- padding: layout.$spacing-02 layout.$spacing-04;
43
- border-radius: 16px;
44
- font-size: 14px;
75
+ margin-bottom: 0.5rem;
76
+ width: 100%;
45
77
  }
46
78
 
47
- .filterRow {
79
+ .formGroupCol {
80
+ flex: 0 0 33.3333%;
81
+ max-width: 33.3333%;
48
82
  display: flex;
49
- gap: layout.$spacing-05;
50
- align-items: flex-end;
51
- margin-bottom: layout.$spacing-05;
52
- flex-wrap: wrap;
83
+ align-items: center;
84
+ padding: 0 10px;
85
+ margin-bottom: 0.5rem;
86
+ }
87
+
88
+ .labelCompact {
89
+ font-size: 14px;
90
+ margin-bottom: 0 !important;
91
+ font-weight: normal;
92
+ width: 110px;
93
+ flex-shrink: 0;
94
+ }
95
+
96
+ .formControl {
97
+ display: block;
98
+ width: 100%;
99
+ height: 25px !important;
100
+ padding: 2px 8px !important;
101
+ font-size: 14px !important;
102
+ line-height: 1.5;
103
+ color: #495057;
104
+ background-color: #fff;
105
+ background-clip: padding-box;
106
+ border: 1px solid #ced4da;
107
+ border-radius: .25rem;
108
+ transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
109
+ outline: none;
110
+ box-sizing: border-box;
111
+
112
+ &:focus {
113
+ border-color: #80bdff;
114
+ box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
115
+ }
116
+
117
+ &[readonly] {
118
+ background-color: #e9ecef;
119
+ opacity: 1;
120
+ }
121
+ }
122
+
123
+ .textareaControl {
124
+ height: auto !important;
125
+ font-size: 12px !important;
53
126
  }
54
127
 
55
- .tableContainer {
56
- margin-top: layout.$spacing-05;
57
- margin-bottom: layout.$spacing-05;
128
+ /* Custom Table Layout */
129
+ .tableResponsive {
130
+ display: block;
131
+ width: 100%;
132
+ overflow-x: auto;
133
+ -webkit-overflow-scrolling: touch;
58
134
  }
59
135
 
136
+ .table {
137
+ width: 100%;
138
+ margin-bottom: 1rem;
139
+ color: #212529;
140
+ border-collapse: collapse;
141
+ font-size: 14px;
142
+ }
143
+
144
+ .tableBordered {
145
+ border: 1px solid #dee2e6;
146
+
147
+ th, td {
148
+ border: 1px solid #dee2e6;
149
+ }
150
+ }
151
+
152
+ .table th {
153
+ background: #6f77e1 !important;
154
+ color: white;
155
+ text-align: left;
156
+ font-weight: bold;
157
+ }
158
+
159
+ .table td, .table th {
160
+ padding: 2px 10px !important;
161
+ vertical-align: middle;
162
+ }
163
+
164
+ .tableStriped tbody tr:nth-of-type(odd) {
165
+ background-color: rgba(0,0,0,.05);
166
+ }
167
+
168
+ .tableHover tbody tr:hover {
169
+ cursor: pointer;
170
+ background-color: #c1bfbf !important;
171
+ color: #000;
172
+ }
173
+
174
+ /* Specimen Status Colors */
60
175
  .rowInadequate {
61
176
  background-color: #fff3cd !important;
62
- transition: background-color 0.2s ease;
63
177
  &:hover {
64
- background-color: #ffeeb5 !important;
178
+ background-color: #ffe8a1 !important;
65
179
  }
66
180
  }
67
181
 
68
182
  .rowError {
69
183
  background-color: #f8d7da !important;
70
- transition: background-color 0.2s ease;
71
184
  &:hover {
72
- background-color: #f5c2c7 !important;
185
+ background-color: #f5b3b8 !important;
73
186
  }
74
187
  }
75
188
 
76
- /* Patient Card Info for Room view */
77
- .patientCard {
78
- display: grid;
79
- grid-template-columns: 1fr 120px;
80
- gap: layout.$spacing-05;
81
- align-items: center;
82
- background: var(--cds-layer-01, #ffffff);
83
- padding: layout.$spacing-05;
84
- border-radius: 8px;
85
- border: 1px solid var(--cds-border-subtle-01, #e0e0e0);
86
- margin-bottom: layout.$spacing-05;
87
-
88
- @media (max-width: 768px) {
89
- grid-template-columns: 1fr;
189
+ /* Buttons */
190
+ .btn {
191
+ display: inline-block;
192
+ font-weight: 400;
193
+ color: #212529;
194
+ text-align: center;
195
+ vertical-align: middle;
196
+ cursor: pointer;
197
+ user-select: none;
198
+ background-color: transparent;
199
+ border: 1px solid transparent;
200
+ padding: .375rem .75rem;
201
+ font-size: 14px !important;
202
+ line-height: 1.5;
203
+ border-radius: .25rem;
204
+ transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
205
+ text-decoration: none;
206
+ height: auto;
207
+ box-sizing: border-box;
208
+
209
+ &:disabled {
210
+ opacity: 0.65;
211
+ cursor: not-allowed;
90
212
  }
91
213
  }
92
214
 
93
- .patientGrid {
94
- display: grid;
95
- grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
96
- gap: layout.$spacing-05;
215
+ .btnPrimary {
216
+ color: #fff;
217
+ background-color: #007bff;
218
+ border-color: #007bff;
219
+ &:hover:not(:disabled) {
220
+ background-color: #0069d9;
221
+ border-color: #0062cc;
222
+ }
97
223
  }
98
224
 
99
- .patientField {
100
- display: flex;
101
- flex-direction: column;
102
- gap: layout.$spacing-02;
225
+ .btnSuccess {
226
+ color: #fff;
227
+ background-color: #28a745;
228
+ border-color: #28a745;
229
+ &:hover:not(:disabled) {
230
+ background-color: #218838;
231
+ border-color: #1e7e34;
232
+ }
103
233
  }
104
234
 
105
- .fieldLabel {
106
- font-size: 12px;
107
- color: var(--cds-text-helper, #6f6f6f);
108
- text-transform: uppercase;
109
- font-weight: 600;
235
+ .btnDanger {
236
+ color: #fff;
237
+ background-color: #dc3545;
238
+ border-color: #dc3545;
239
+ &:hover:not(:disabled) {
240
+ background-color: #c82333;
241
+ border-color: #bd2130;
242
+ }
110
243
  }
111
244
 
112
- .fieldValue {
113
- font-size: 16px;
114
- color: var(--cds-text-primary, #161616);
115
- font-weight: 500;
245
+ /* Patient Image upload border style */
246
+ .uploadImg {
247
+ border-radius: 16px;
248
+ display: inline-block;
249
+ width: 60%;
250
+ height: 120px;
251
+ object-fit: cover;
252
+ object-position: 50% 50%;
253
+ border: 3px solid #20e5bf;
254
+ margin-right: 15px;
255
+ vertical-align: middle;
116
256
  }
117
257
 
118
258
  .avatarContainer {
119
259
  display: flex;
120
- justify-content: center;
260
+ justify-content: flex-end;
121
261
  align-items: center;
262
+ padding-right: 15px;
122
263
  }
123
264
 
124
- .avatarImg {
125
- width: 100px;
126
- height: 100px;
127
- border-radius: 50%;
128
- object-fit: cover;
129
- border: 3px solid #009384;
265
+ /* Simple flex row for form inputs */
266
+ .dFlex {
267
+ display: flex;
130
268
  }
131
269
 
132
- .roomFormSection {
133
- margin-top: layout.$spacing-06;
134
- border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
135
- padding-top: layout.$spacing-06;
270
+ .justifyContentEnd {
271
+ justify-content: flex-end;
136
272
  }
137
273
 
138
- .formGrid {
139
- display: grid;
140
- grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
141
- gap: layout.$spacing-06;
142
- margin-bottom: layout.$spacing-06;
274
+ .alignItemsCenter {
275
+ align-items: center;
143
276
  }
144
277
 
145
- .actionsContainer {
146
- display: flex;
147
- justify-content: flex-end;
148
- gap: layout.$spacing-04;
149
- margin-top: layout.$spacing-06;
278
+ .mb3 {
279
+ margin-bottom: 1rem;
150
280
  }
151
281
 
152
- .paginationContainer {
153
- display: flex;
154
- justify-content: flex-end;
155
- align-items: center;
156
- gap: layout.$spacing-05;
157
- margin-top: layout.$spacing-04;
282
+ .mr2 {
283
+ margin-right: 0.5rem;
158
284
  }
159
285
 
160
- .checkboxCell {
161
- width: 48px;
162
- text-align: center;
286
+ .mx2 {
287
+ margin-left: 0.5rem;
288
+ margin-right: 0.5rem;
289
+ }
290
+
291
+ .wAuto {
292
+ width: auto;
293
+ }
294
+
295
+ .minW160 {
296
+ min-width: 160px;
163
297
  }