@eturnity/eturnity_reusable_components 8.40.7 → 8.40.8--EPDM-16195.0

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.
@@ -54,9 +54,8 @@
54
54
 
55
55
  const TableTitle = styled.div`
56
56
  margin-bottom: 16px;
57
- font-weight: bold;
57
+ font-weight: 500;
58
58
  font-size: 14px;
59
- text-transform: uppercase;
60
59
  `
61
60
 
62
61
  const tableScrollProps = {
@@ -66,12 +65,6 @@
66
65
  const TableScroll = styled('div', tableScrollProps)`
67
66
  max-width: 100%;
68
67
  height: auto;
69
- ${(props) =>
70
- props.isPositionAbsolute &&
71
- `
72
- position: absolute;
73
- left: -20px;
74
- `}
75
68
  `
76
69
 
77
70
  const wrapperAttrs = { fullWidth: Boolean, isOverflowHidden: Boolean }
@@ -111,15 +104,24 @@
111
104
 
112
105
  const TableContainer = styled('table', containerAttrs)`
113
106
  width: 100%;
114
- border-collapse: collapse;
115
- border: none;
116
- font-size: 13px;
107
+ border-collapse: separate;
108
+ border-spacing: 0;
109
+ border-right: ${(props) =>
110
+ '1px solid ' + props.theme.semanticColors.grey[200]};
111
+ border-left: ${(props) =>
112
+ '1px solid ' + props.theme.semanticColors.grey[200]};
113
+ border-top: ${(props) =>
114
+ '1px solid ' + props.theme.semanticColors.grey[200]};
115
+ border-radius: 4px;
116
+ font-size: 12px;
117
117
 
118
118
  thead {
119
- font-weight: bold;
119
+ font-weight: 500;
120
+ line-height: 140%;
120
121
 
121
122
  tr {
122
123
  border-bottom: none !important;
124
+ background-color: ${(props) => props.theme.semanticColors.grey[100]};
123
125
  }
124
126
  }
125
127
 
@@ -128,6 +130,8 @@
128
130
  }
129
131
 
130
132
  tbody {
133
+ font-weight: 400;
134
+ line-height: 150%;
131
135
  tr {
132
136
  &:hover,
133
137
  td.hovered-column {
@@ -148,18 +152,25 @@
148
152
  }
149
153
 
150
154
  td {
151
- height: 40px;
155
+ height: 48px;
156
+ }
157
+
158
+ .drag-placeholder {
159
+ min-height: 48px;
160
+ min-width: 20px;
161
+ border-bottom: 1px solid
162
+ ${(props) => props.theme.semanticColors.grey[200]};
152
163
  }
153
164
  }
154
165
  }
155
166
 
156
167
  th {
157
- padding: 11px 15px;
168
+ padding: 8px 16px;
158
169
  background-color: ${(props) => props.theme.semanticColors.grey[100]};
159
170
  border-bottom: 1px solid
160
- ${(props) => props.theme.semanticColors.teal[100]};
171
+ ${(props) => props.theme.semanticColors.grey[200]};
161
172
  cursor: auto;
162
- height: 40px;
173
+ height: 36px;
163
174
  font-weight: 500;
164
175
 
165
176
  .ordering {
@@ -251,6 +262,10 @@
251
262
  visibility: hidden;
252
263
  }
253
264
 
265
+ &.footer {
266
+ background-color: ${(props) => props.theme.colors.grey5};
267
+ }
268
+
254
269
  &.footer,
255
270
  &.total-row {
256
271
  td {
@@ -283,6 +298,8 @@
283
298
  flex-wrap: nowrap;
284
299
  background-color: ${(props) => props.theme.colors.white};
285
300
  vertical-align: middle;
301
+ border-bottom: 1px solid
302
+ ${(props) => props.theme.semanticColors.grey[200]};
286
303
  }
287
304
 
288
305
  .arrow-container {
@@ -301,6 +318,11 @@
301
318
  .arrow-container {
302
319
  border-bottom: none;
303
320
  }
321
+
322
+ .drag-container,
323
+ .icons-container {
324
+ border-bottom: none !important;
325
+ }
304
326
  }
305
327
 
306
328
  &:hover {
@@ -326,12 +348,14 @@
326
348
  display: table-cell;
327
349
  width: 20px;
328
350
  min-width: 20px;
329
- height: 40px;
351
+ height: 48px;
352
+ border-bottom: ${(props) =>
353
+ '1px solid ' + props.theme.semanticColors.grey[200]};
330
354
  }
331
355
 
332
356
  .drag-wrapper {
333
357
  width: 16px;
334
- height: 36px;
358
+ height: 46px;
335
359
  display: grid;
336
360
  align-items: center;
337
361
  justify-items: center;
@@ -377,9 +401,9 @@
377
401
  }
378
402
 
379
403
  input {
380
- font-size: 13px;
404
+ font-size: 12px;
381
405
  padding: 5px 10px;
382
- background: #fff;
406
+ background: ${(props) => props.theme.colors.white};
383
407
  height: unset;
384
408
 
385
409
  &:focus {