@ngx-stoui/core 16.0.0 → 16.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.
package/ngx-datatable.css CHANGED
@@ -1,61 +1,105 @@
1
- .sto-compact .imo-overview .ngx-datatable.sto-datatable .datatable-body .progress-linear, .sto-compact .imo-overview .ngx-datatable.sto-datatable.inside-card .datatable-body .progress-linear, .sto-compact .sto-drawer--compact .ngx-datatable.sto-datatable .datatable-body .progress-linear, .sto-compact .sto-drawer--compact .ngx-datatable.sto-datatable.inside-card .datatable-body .progress-linear {
1
+ .sto-compact .imo-overview .sto-datatable .datatable-body .progress-linear,
2
+ .sto-compact .imo-overview .sto-datatable.inside-card .datatable-body .progress-linear,
3
+ .sto-compact .sto-drawer--compact .sto-datatable .datatable-body .progress-linear,
4
+ .sto-compact .sto-drawer--compact .sto-datatable.inside-card .datatable-body .progress-linear {
2
5
  height: 3px;
3
6
  margin: -3px 0 0 0;
4
7
  }
5
- .sto-compact .imo-overview .ngx-datatable.sto-datatable .datatable-body .progress-linear .container, .sto-compact .imo-overview .ngx-datatable.sto-datatable.inside-card .datatable-body .progress-linear .container, .sto-compact .sto-drawer--compact .ngx-datatable.sto-datatable .datatable-body .progress-linear .container, .sto-compact .sto-drawer--compact .ngx-datatable.sto-datatable.inside-card .datatable-body .progress-linear .container {
8
+ .sto-compact .imo-overview .sto-datatable .datatable-body .progress-linear .container,
9
+ .sto-compact .imo-overview .sto-datatable.inside-card .datatable-body .progress-linear .container,
10
+ .sto-compact .sto-drawer--compact .sto-datatable .datatable-body .progress-linear .container,
11
+ .sto-compact .sto-drawer--compact .sto-datatable.inside-card .datatable-body .progress-linear .container {
6
12
  height: 3px;
7
13
  }
8
- .sto-compact .imo-overview .ngx-datatable.sto-datatable .datatable-body .progress-linear .container .bar, .sto-compact .imo-overview .ngx-datatable.sto-datatable.inside-card .datatable-body .progress-linear .container .bar, .sto-compact .sto-drawer--compact .ngx-datatable.sto-datatable .datatable-body .progress-linear .container .bar, .sto-compact .sto-drawer--compact .ngx-datatable.sto-datatable.inside-card .datatable-body .progress-linear .container .bar {
14
+ .sto-compact .imo-overview .sto-datatable .datatable-body .progress-linear .container .bar,
15
+ .sto-compact .imo-overview .sto-datatable.inside-card .datatable-body .progress-linear .container .bar,
16
+ .sto-compact .sto-drawer--compact .sto-datatable .datatable-body .progress-linear .container .bar,
17
+ .sto-compact .sto-drawer--compact .sto-datatable.inside-card .datatable-body .progress-linear .container .bar {
9
18
  height: 3px;
10
19
  }
11
- .sto-compact .imo-overview .ngx-datatable.sto-datatable .datatable-body .datatable-body-row .datatable-body-cell, .sto-compact .imo-overview .ngx-datatable.sto-datatable.inside-card .datatable-body .datatable-body-row .datatable-body-cell, .sto-compact .sto-drawer--compact .ngx-datatable.sto-datatable .datatable-body .datatable-body-row .datatable-body-cell, .sto-compact .sto-drawer--compact .ngx-datatable.sto-datatable.inside-card .datatable-body .datatable-body-row .datatable-body-cell {
20
+ .sto-compact .imo-overview .sto-datatable .datatable-body .datatable-body-row .datatable-body-cell,
21
+ .sto-compact .imo-overview .sto-datatable.inside-card .datatable-body .datatable-body-row .datatable-body-cell,
22
+ .sto-compact .sto-drawer--compact .sto-datatable .datatable-body .datatable-body-row .datatable-body-cell,
23
+ .sto-compact .sto-drawer--compact .sto-datatable.inside-card .datatable-body .datatable-body-row .datatable-body-cell {
12
24
  padding: 2px 8px;
13
25
  }
14
- .sto-compact .imo-overview .ngx-datatable.sto-datatable .datatable-body .datatable-body-row .datatable-body-cell.date-cell, .sto-compact .imo-overview .ngx-datatable.sto-datatable.inside-card .datatable-body .datatable-body-row .datatable-body-cell.date-cell, .sto-compact .sto-drawer--compact .ngx-datatable.sto-datatable .datatable-body .datatable-body-row .datatable-body-cell.date-cell, .sto-compact .sto-drawer--compact .ngx-datatable.sto-datatable.inside-card .datatable-body .datatable-body-row .datatable-body-cell.date-cell {
26
+ .sto-compact .imo-overview .sto-datatable .datatable-body .datatable-body-row .datatable-body-cell.date-cell,
27
+ .sto-compact .imo-overview .sto-datatable.inside-card .datatable-body .datatable-body-row .datatable-body-cell.date-cell,
28
+ .sto-compact .sto-drawer--compact .sto-datatable .datatable-body .datatable-body-row .datatable-body-cell.date-cell,
29
+ .sto-compact .sto-drawer--compact .sto-datatable.inside-card .datatable-body .datatable-body-row .datatable-body-cell.date-cell {
15
30
  padding: 0px;
16
31
  }
17
- .sto-compact .imo-overview .ngx-datatable.sto-datatable .datatable-body .datatable-body-row .datatable-body-cell.date-cell small, .sto-compact .imo-overview .ngx-datatable.sto-datatable.inside-card .datatable-body .datatable-body-row .datatable-body-cell.date-cell small, .sto-compact .sto-drawer--compact .ngx-datatable.sto-datatable .datatable-body .datatable-body-row .datatable-body-cell.date-cell small, .sto-compact .sto-drawer--compact .ngx-datatable.sto-datatable.inside-card .datatable-body .datatable-body-row .datatable-body-cell.date-cell small {
32
+ .sto-compact .imo-overview .sto-datatable .datatable-body .datatable-body-row .datatable-body-cell.date-cell small,
33
+ .sto-compact .imo-overview .sto-datatable.inside-card .datatable-body .datatable-body-row .datatable-body-cell.date-cell small,
34
+ .sto-compact .sto-drawer--compact .sto-datatable .datatable-body .datatable-body-row .datatable-body-cell.date-cell small,
35
+ .sto-compact .sto-drawer--compact .sto-datatable.inside-card .datatable-body .datatable-body-row .datatable-body-cell.date-cell small {
18
36
  display: none;
19
37
  }
20
- .sto-compact .imo-overview .ngx-datatable.sto-datatable .datatable-body .datatable-body-row .datatable-body-cell .datatable-body-cell-label .mat-icon-button, .sto-compact .imo-overview .ngx-datatable.sto-datatable.inside-card .datatable-body .datatable-body-row .datatable-body-cell .datatable-body-cell-label .mat-icon-button, .sto-compact .sto-drawer--compact .ngx-datatable.sto-datatable .datatable-body .datatable-body-row .datatable-body-cell .datatable-body-cell-label .mat-icon-button, .sto-compact .sto-drawer--compact .ngx-datatable.sto-datatable.inside-card .datatable-body .datatable-body-row .datatable-body-cell .datatable-body-cell-label .mat-icon-button {
38
+ .sto-compact .imo-overview .sto-datatable .datatable-body .datatable-body-row .datatable-body-cell .datatable-body-cell-label .mat-icon-button,
39
+ .sto-compact .imo-overview .sto-datatable.inside-card .datatable-body .datatable-body-row .datatable-body-cell .datatable-body-cell-label .mat-icon-button,
40
+ .sto-compact .sto-drawer--compact .sto-datatable .datatable-body .datatable-body-row .datatable-body-cell .datatable-body-cell-label .mat-icon-button,
41
+ .sto-compact .sto-drawer--compact .sto-datatable.inside-card .datatable-body .datatable-body-row .datatable-body-cell .datatable-body-cell-label .mat-icon-button {
21
42
  margin-left: 0;
22
43
  height: 24px;
23
44
  width: 24px;
24
45
  line-height: 24px;
25
46
  }
26
- .sto-compact .imo-overview .ngx-datatable.sto-datatable .datatable-header .datatable-header-cell, .sto-compact .imo-overview .ngx-datatable.sto-datatable.inside-card .datatable-header .datatable-header-cell, .sto-compact .sto-drawer--compact .ngx-datatable.sto-datatable .datatable-header .datatable-header-cell, .sto-compact .sto-drawer--compact .ngx-datatable.sto-datatable.inside-card .datatable-header .datatable-header-cell {
47
+ .sto-compact .imo-overview .sto-datatable .datatable-header .datatable-header-cell,
48
+ .sto-compact .imo-overview .sto-datatable.inside-card .datatable-header .datatable-header-cell,
49
+ .sto-compact .sto-drawer--compact .sto-datatable .datatable-header .datatable-header-cell,
50
+ .sto-compact .sto-drawer--compact .sto-datatable.inside-card .datatable-header .datatable-header-cell {
27
51
  padding: 4px 8px;
28
52
  }
29
- .sto-compact .imo-overview .ngx-datatable.sto-datatable .datatable-header .datatable-header-cell .column-group-header-icon, .sto-compact .imo-overview .ngx-datatable.sto-datatable.inside-card .datatable-header .datatable-header-cell .column-group-header-icon, .sto-compact .sto-drawer--compact .ngx-datatable.sto-datatable .datatable-header .datatable-header-cell .column-group-header-icon, .sto-compact .sto-drawer--compact .ngx-datatable.sto-datatable.inside-card .datatable-header .datatable-header-cell .column-group-header-icon {
53
+ .sto-compact .imo-overview .sto-datatable .datatable-header .datatable-header-cell .column-group-header-icon,
54
+ .sto-compact .imo-overview .sto-datatable.inside-card .datatable-header .datatable-header-cell .column-group-header-icon,
55
+ .sto-compact .sto-drawer--compact .sto-datatable .datatable-header .datatable-header-cell .column-group-header-icon,
56
+ .sto-compact .sto-drawer--compact .sto-datatable.inside-card .datatable-header .datatable-header-cell .column-group-header-icon {
30
57
  max-width: 8px;
31
58
  margin-right: 8px;
32
59
  flex-grow: 1;
33
60
  }
34
- .sto-compact .imo-overview .ngx-datatable.sto-datatable .datatable-header .datatable-header-cell .column-group-header-icon .mat-icon, .sto-compact .imo-overview .ngx-datatable.sto-datatable.inside-card .datatable-header .datatable-header-cell .column-group-header-icon .mat-icon, .sto-compact .sto-drawer--compact .ngx-datatable.sto-datatable .datatable-header .datatable-header-cell .column-group-header-icon .mat-icon, .sto-compact .sto-drawer--compact .ngx-datatable.sto-datatable.inside-card .datatable-header .datatable-header-cell .column-group-header-icon .mat-icon {
61
+ .sto-compact .imo-overview .sto-datatable .datatable-header .datatable-header-cell .column-group-header-icon .mat-icon,
62
+ .sto-compact .imo-overview .sto-datatable.inside-card .datatable-header .datatable-header-cell .column-group-header-icon .mat-icon,
63
+ .sto-compact .sto-drawer--compact .sto-datatable .datatable-header .datatable-header-cell .column-group-header-icon .mat-icon,
64
+ .sto-compact .sto-drawer--compact .sto-datatable.inside-card .datatable-header .datatable-header-cell .column-group-header-icon .mat-icon {
35
65
  height: 12px;
36
66
  line-height: 12px;
37
67
  }
38
- .sto-compact .imo-overview .ngx-datatable.sto-datatable .datatable-header .datatable-header-cell.sto-datatable__header-column--withunit .sto-datatable__header-column__unit, .sto-compact .imo-overview .ngx-datatable.sto-datatable.inside-card .datatable-header .datatable-header-cell.sto-datatable__header-column--withunit .sto-datatable__header-column__unit, .sto-compact .sto-drawer--compact .ngx-datatable.sto-datatable .datatable-header .datatable-header-cell.sto-datatable__header-column--withunit .sto-datatable__header-column__unit, .sto-compact .sto-drawer--compact .ngx-datatable.sto-datatable.inside-card .datatable-header .datatable-header-cell.sto-datatable__header-column--withunit .sto-datatable__header-column__unit {
68
+ .sto-compact .imo-overview .sto-datatable .datatable-header .datatable-header-cell.sto-datatable__header-column--withunit .sto-datatable__header-column__unit,
69
+ .sto-compact .imo-overview .sto-datatable.inside-card .datatable-header .datatable-header-cell.sto-datatable__header-column--withunit .sto-datatable__header-column__unit,
70
+ .sto-compact .sto-drawer--compact .sto-datatable .datatable-header .datatable-header-cell.sto-datatable__header-column--withunit .sto-datatable__header-column__unit,
71
+ .sto-compact .sto-drawer--compact .sto-datatable.inside-card .datatable-header .datatable-header-cell.sto-datatable__header-column--withunit .sto-datatable__header-column__unit {
39
72
  margin-right: -3px;
40
73
  font-size: 10px;
41
74
  position: static;
42
75
  }
43
- .sto-compact .imo-overview .ngx-datatable.sto-datatable .datatable-header .datatable-header-cell.sto-datatable__header-column--withunit .sto-datatable__header-column__unit::before, .sto-compact .imo-overview .ngx-datatable.sto-datatable.inside-card .datatable-header .datatable-header-cell.sto-datatable__header-column--withunit .sto-datatable__header-column__unit::before, .sto-compact .sto-drawer--compact .ngx-datatable.sto-datatable .datatable-header .datatable-header-cell.sto-datatable__header-column--withunit .sto-datatable__header-column__unit::before, .sto-compact .sto-drawer--compact .ngx-datatable.sto-datatable.inside-card .datatable-header .datatable-header-cell.sto-datatable__header-column--withunit .sto-datatable__header-column__unit::before {
76
+ .sto-compact .imo-overview .sto-datatable .datatable-header .datatable-header-cell.sto-datatable__header-column--withunit .sto-datatable__header-column__unit::before,
77
+ .sto-compact .imo-overview .sto-datatable.inside-card .datatable-header .datatable-header-cell.sto-datatable__header-column--withunit .sto-datatable__header-column__unit::before,
78
+ .sto-compact .sto-drawer--compact .sto-datatable .datatable-header .datatable-header-cell.sto-datatable__header-column--withunit .sto-datatable__header-column__unit::before,
79
+ .sto-compact .sto-drawer--compact .sto-datatable.inside-card .datatable-header .datatable-header-cell.sto-datatable__header-column--withunit .sto-datatable__header-column__unit::before {
44
80
  content: "(";
45
81
  }
46
- .sto-compact .imo-overview .ngx-datatable.sto-datatable .datatable-header .datatable-header-cell.sto-datatable__header-column--withunit .sto-datatable__header-column__unit::after, .sto-compact .imo-overview .ngx-datatable.sto-datatable.inside-card .datatable-header .datatable-header-cell.sto-datatable__header-column--withunit .sto-datatable__header-column__unit::after, .sto-compact .sto-drawer--compact .ngx-datatable.sto-datatable .datatable-header .datatable-header-cell.sto-datatable__header-column--withunit .sto-datatable__header-column__unit::after, .sto-compact .sto-drawer--compact .ngx-datatable.sto-datatable.inside-card .datatable-header .datatable-header-cell.sto-datatable__header-column--withunit .sto-datatable__header-column__unit::after {
82
+ .sto-compact .imo-overview .sto-datatable .datatable-header .datatable-header-cell.sto-datatable__header-column--withunit .sto-datatable__header-column__unit::after,
83
+ .sto-compact .imo-overview .sto-datatable.inside-card .datatable-header .datatable-header-cell.sto-datatable__header-column--withunit .sto-datatable__header-column__unit::after,
84
+ .sto-compact .sto-drawer--compact .sto-datatable .datatable-header .datatable-header-cell.sto-datatable__header-column--withunit .sto-datatable__header-column__unit::after,
85
+ .sto-compact .sto-drawer--compact .sto-datatable.inside-card .datatable-header .datatable-header-cell.sto-datatable__header-column--withunit .sto-datatable__header-column__unit::after {
47
86
  content: ")";
48
87
  }
49
- .sto-compact .imo-overview .ngx-datatable.sto-datatable .mat-icon, .sto-compact .imo-overview .ngx-datatable.sto-datatable.inside-card .mat-icon, .sto-compact .sto-drawer--compact .ngx-datatable.sto-datatable .mat-icon, .sto-compact .sto-drawer--compact .ngx-datatable.sto-datatable.inside-card .mat-icon {
88
+ .sto-compact .imo-overview .sto-datatable .mat-icon,
89
+ .sto-compact .imo-overview .sto-datatable.inside-card .mat-icon,
90
+ .sto-compact .sto-drawer--compact .sto-datatable .mat-icon,
91
+ .sto-compact .sto-drawer--compact .sto-datatable.inside-card .mat-icon {
50
92
  height: 16px;
51
93
  width: 16px;
52
94
  font-size: 16px;
53
95
  line-height: 16px;
54
96
  }
55
- .sto-compact .imo-overview sto-datatable-fixed-row-wrapper, .sto-compact .sto-drawer--compact sto-datatable-fixed-row-wrapper {
97
+ .sto-compact .imo-overview sto-datatable-fixed-row-wrapper,
98
+ .sto-compact .sto-drawer--compact sto-datatable-fixed-row-wrapper {
56
99
  margin-top: 8px;
57
100
  }
58
- .sto-compact .imo-overview .date-status-cell .month-label, .sto-compact .sto-drawer--compact .date-status-cell .month-label {
101
+ .sto-compact .imo-overview .date-status-cell .month-label,
102
+ .sto-compact .sto-drawer--compact .date-status-cell .month-label {
59
103
  line-height: 20px;
60
104
  position: absolute;
61
105
  left: 2px;
@@ -70,17 +114,17 @@
70
114
  line-height: 13px;
71
115
  }
72
116
 
73
- .sto-compact .imo-overview .ngx-datatable.sto-datatable .datatable-body .datatable-body-row .datatable-body-cell.sto-datatable__column--editable .datatable-body-cell-label .mat-form-field-prefix {
117
+ .sto-compact .imo-overview .sto-datatable .datatable-body .datatable-body-row .datatable-body-cell.sto-datatable__column--editable .datatable-body-cell-label .mat-form-field-prefix {
74
118
  height: 19px;
75
119
  width: 19px;
76
120
  }
77
- .sto-compact .imo-overview .ngx-datatable.sto-datatable .datatable-body .datatable-body-row .datatable-body-cell.sto-datatable__column--editable .datatable-body-cell-label .mat-form-field-prefix button.mat-icon-button {
121
+ .sto-compact .imo-overview .sto-datatable .datatable-body .datatable-body-row .datatable-body-cell.sto-datatable__column--editable .datatable-body-cell-label .mat-form-field-prefix button.mat-icon-button {
78
122
  font-size: 18px;
79
123
  height: 18px;
80
124
  width: 18px;
81
125
  line-height: 18px;
82
126
  }
83
- .sto-compact .imo-overview .ngx-datatable.sto-datatable .datatable-body .datatable-body-row .datatable-body-cell.sto-datatable__column--editable .datatable-body-cell-label .mat-form-field-prefix .mat-icon {
127
+ .sto-compact .imo-overview .sto-datatable .datatable-body .datatable-body-row .datatable-body-cell.sto-datatable__column--editable .datatable-body-cell-label .mat-form-field-prefix .mat-icon {
84
128
  font-size: 16px;
85
129
  height: 16px;
86
130
  width: 16px;
@@ -150,11 +194,11 @@
150
194
  height: 100%;
151
195
  }
152
196
 
153
- .ngx-datatable.sto-datatable {
197
+ .sto-datatable {
154
198
  border-radius: 2px;
155
199
  margin-bottom: 4px;
156
200
  }
157
- .ngx-datatable.sto-datatable .datatable-header .datatable-header-cell {
201
+ .sto-datatable .datatable-header .datatable-header-cell {
158
202
  padding: 16px 8px 4px 8px;
159
203
  line-height: 13px;
160
204
  font-weight: 400;
@@ -164,10 +208,10 @@
164
208
  -ms-user-select: none; /* IE10+/Edge */
165
209
  user-select: none; /* Standard */
166
210
  }
167
- .ngx-datatable.sto-datatable .datatable-header .datatable-header-cell .datatable-header-cell-wrapper {
211
+ .sto-datatable .datatable-header .datatable-header-cell .datatable-header-cell-wrapper {
168
212
  position: relative;
169
213
  }
170
- .ngx-datatable.sto-datatable .datatable-header .datatable-header-cell .draggable::after {
214
+ .sto-datatable .datatable-header .datatable-header-cell .draggable::after {
171
215
  content: " ";
172
216
  position: absolute;
173
217
  top: 50%;
@@ -182,37 +226,37 @@
182
226
  z-index: 9999;
183
227
  pointer-events: none;
184
228
  }
185
- .ngx-datatable.sto-datatable .datatable-header .datatable-header-cell.dragging .resize-handle {
229
+ .sto-datatable .datatable-header .datatable-header-cell.dragging .resize-handle {
186
230
  border-right: none;
187
231
  }
188
- .ngx-datatable.sto-datatable .datatable-header .datatable-header-cell .mat-mdc-checkbox {
232
+ .sto-datatable .datatable-header .datatable-header-cell .mat-mdc-checkbox {
189
233
  --mdc-checkbox-state-layer-size: 18px;
190
234
  margin-left: 11px;
191
235
  }
192
- .ngx-datatable.sto-datatable .datatable-header .resize-handle {
236
+ .sto-datatable .datatable-header .resize-handle {
193
237
  border-right: solid 1px #eee;
194
238
  }
195
- .ngx-datatable.sto-datatable .datatable-body .datatable-body-cell-label {
239
+ .sto-datatable .datatable-body .datatable-body-cell-label {
196
240
  line-height: 20px;
197
241
  }
198
- .ngx-datatable.sto-datatable .datatable-body .datatable-body-row .datatable-body-cell {
242
+ .sto-datatable .datatable-body .datatable-body-row .datatable-body-cell {
199
243
  --mdc-checkbox-state-layer-size: 35px;
200
244
  padding: 8px;
201
245
  vertical-align: top;
202
246
  border-top: 0;
203
247
  transition: width 0.3s ease, box-shadow 250ms linear;
204
248
  }
205
- .ngx-datatable.sto-datatable .datatable-body .datatable-body-row .datatable-body-cell:has(.mat-mdc-form-field), .ngx-datatable.sto-datatable .datatable-body .datatable-body-row .datatable-body-cell:has(.mat-mdc-checkbox) {
249
+ .sto-datatable .datatable-body .datatable-body-row .datatable-body-cell:has(.mat-mdc-form-field), .sto-datatable .datatable-body .datatable-body-row .datatable-body-cell:has(.mat-mdc-checkbox) {
206
250
  padding: 0;
207
251
  }
208
- .ngx-datatable.sto-datatable .datatable-body .datatable-body-row .datatable-body-cell .mat-mdc-form-field {
252
+ .sto-datatable .datatable-body .datatable-body-row .datatable-body-cell .mat-mdc-form-field {
209
253
  margin: 0 4px;
210
254
  min-height: 0;
211
255
  }
212
- .ngx-datatable.sto-datatable .datatable-body .datatable-body-row .datatable-body-cell .mat-mdc-form-field-subscript-wrapper {
256
+ .sto-datatable .datatable-body .datatable-body-row .datatable-body-cell .mat-mdc-form-field-subscript-wrapper {
213
257
  display: none;
214
258
  }
215
- .ngx-datatable.sto-datatable .datatable-body .progress-linear {
259
+ .sto-datatable .datatable-body .progress-linear {
216
260
  display: block;
217
261
  position: sticky;
218
262
  width: 100%;
@@ -222,7 +266,7 @@
222
266
  top: 0;
223
267
  left: 0;
224
268
  }
225
- .ngx-datatable.sto-datatable .datatable-body .progress-linear .container {
269
+ .sto-datatable .datatable-body .progress-linear .container {
226
270
  display: block;
227
271
  position: relative;
228
272
  overflow: hidden;
@@ -231,7 +275,7 @@
231
275
  -webkit-transform: translate(0, 0) scale(1, 1);
232
276
  transform: translate(0, 0) scale(1, 1);
233
277
  }
234
- .ngx-datatable.sto-datatable .datatable-body .progress-linear .container .bar {
278
+ .sto-datatable .datatable-body .progress-linear .container .bar {
235
279
  transition: all 0.2s linear;
236
280
  -webkit-animation: query 0.8s infinite cubic-bezier(0.39, 0.575, 0.565, 1);
237
281
  animation: query 0.8s infinite cubic-bezier(0.39, 0.575, 0.565, 1);
@@ -244,25 +288,25 @@
244
288
  width: 100%;
245
289
  height: 5px;
246
290
  }
247
- .ngx-datatable.sto-datatable .empty-row {
291
+ .sto-datatable .empty-row {
248
292
  height: 50px;
249
293
  text-align: left;
250
294
  padding: 8px;
251
295
  vertical-align: top;
252
296
  border-top: 0;
253
297
  }
254
- .ngx-datatable.sto-datatable .loading-row {
298
+ .sto-datatable .loading-row {
255
299
  text-align: left;
256
300
  padding: 8px;
257
301
  vertical-align: top;
258
302
  border-top: 0;
259
303
  }
260
- .ngx-datatable.sto-datatable .datatable-footer .page-count {
304
+ .sto-datatable .datatable-footer .page-count {
261
305
  line-height: 50px;
262
306
  height: 50px;
263
307
  padding: 0 1.2rem;
264
308
  }
265
- .ngx-datatable.sto-datatable.single-selection .datatable-body-row {
309
+ .sto-datatable.single-selection .datatable-body-row {
266
310
  cursor: pointer;
267
311
  }
268
312
 
@@ -272,15 +316,16 @@
272
316
  overflow: hidden;
273
317
  text-overflow: ellipsis;
274
318
  }
275
- .datatable-body-cell-label .mat-select,
276
- .datatable-body-cell-label .mat-input {
277
- padding: 0;
278
- }
279
- .datatable-body-cell-label .mat-mdc-form-field-infix {
280
- margin-top: -10px;
319
+
320
+ .datatable-body-cell .sto-form__field .mat-mdc-form-field-infix {
281
321
  padding: 0 9px 0 0;
322
+ border-top: 0;
323
+ }
324
+ .datatable-body-cell .sto-form__field .mat-select,
325
+ .datatable-body-cell .sto-form__field .mat-input {
326
+ padding: 0;
282
327
  }
283
- .datatable-body-cell-label .mat-icon-button {
328
+ .datatable-body-cell .sto-form__field .mat-icon-button {
284
329
  margin-left: -8px;
285
330
  margin-top: -18px;
286
331
  height: 36px;
@@ -306,7 +351,7 @@
306
351
  margin-top: -5px;
307
352
  }
308
353
 
309
- .ngx-datatable.sto-datatable .datatable-header .datatable-header-cell .sort-btn {
354
+ .sto-datatable .datatable-header .datatable-header-cell .sort-btn {
310
355
  line-height: 0;
311
356
  vertical-align: bottom;
312
357
  }
@@ -315,37 +360,37 @@ span.sortable {
315
360
  cursor: pointer;
316
361
  }
317
362
 
318
- .sto-datatable.ngx-datatable .datatable-body {
363
+ .sto-datatable .datatable-body {
319
364
  -moz-transition: height 225ms cubic-bezier(0.4, 0, 0.2, 1);
320
365
  -webkit-transition: height 225ms cubic-bezier(0.4, 0, 0.2, 1);
321
366
  -o-transition: height 225ms cubic-bezier(0.4, 0, 0.2, 1);
322
367
  transition: height 225ms cubic-bezier(0.4, 0, 0.2, 1);
323
368
  }
324
369
 
325
- .ngx-datatable.sto-datatable .datatable-header .datatable-header-column-group .datatable-header-cell.sto-datatable__header-group {
370
+ .sto-datatable .datatable-header .datatable-header-column-group .datatable-header-cell.sto-datatable__header-group {
326
371
  border-bottom: 0;
327
372
  }
328
- .ngx-datatable.sto-datatable .datatable-header .datatable-header-column-group .datatable-header-cell.sto-datatable__header-group--empty {
373
+ .sto-datatable .datatable-header .datatable-header-column-group .datatable-header-cell.sto-datatable__header-group--empty {
329
374
  color: transparent;
330
375
  }
331
- .ngx-datatable.sto-datatable .datatable-header .datatable-header-column-group .datatable-header-cell.sto-datatable__header-group--center {
376
+ .sto-datatable .datatable-header .datatable-header-column-group .datatable-header-cell.sto-datatable__header-group--center {
332
377
  text-align: center;
333
378
  }
334
- .ngx-datatable.sto-datatable .datatable-header .datatable-header-column-group .datatable-header-cell.sto-datatable__header-group__border--hide-left {
379
+ .sto-datatable .datatable-header .datatable-header-column-group .datatable-header-cell.sto-datatable__header-group__border--hide-left {
335
380
  border-left: 0;
336
381
  }
337
- .ngx-datatable.sto-datatable .datatable-header .datatable-header-column-group .datatable-header-cell.sto-datatable__header-group__border--hide-right {
382
+ .sto-datatable .datatable-header .datatable-header-column-group .datatable-header-cell.sto-datatable__header-group__border--hide-right {
338
383
  border-right: 0;
339
384
  }
340
385
 
341
- .ngx-datatable.sto-datatable .datatable-header .datatable-header-cell.sto-datatable__header--dense {
386
+ .sto-datatable .datatable-header .datatable-header-cell.sto-datatable__header--dense {
342
387
  padding-top: 8px;
343
388
  }
344
- .ngx-datatable.sto-datatable .datatable-header .datatable-header-cell.sto-datatable__header--empty {
389
+ .sto-datatable .datatable-header .datatable-header-cell.sto-datatable__header--empty {
345
390
  color: transparent;
346
391
  }
347
392
 
348
- .ngx-datatable.sto-datatable .datatable-header-cell .mat-icon.mat-icon-sort {
393
+ .sto-datatable .datatable-header-cell .mat-icon.mat-icon-sort {
349
394
  line-height: 13px;
350
395
  height: 13px;
351
396
  }
package/ngx-stoui.css CHANGED
@@ -198,70 +198,82 @@ body .sto-mdl-table__footer__row {
198
198
  border-top: 1px solid var(--divider);
199
199
  background: var(--bg-app);
200
200
  }
201
- body .ngx-datatable.sto-datatable {
201
+ body .sto-datatable {
202
202
  background-color: transparent;
203
203
  color: var(--text);
204
204
  }
205
- body .ngx-datatable.sto-datatable .datatable-body mat-icon,
206
- body .ngx-datatable.sto-datatable .datatable-header mat-icon {
205
+ body .sto-datatable .datatable-body mat-icon,
206
+ body .sto-datatable .datatable-header mat-icon {
207
207
  color: var(--text-secondary);
208
208
  }
209
- body .ngx-datatable.sto-datatable .datatable-header {
209
+ body .sto-datatable .mat-mdc-checkbox {
210
+ --mdc-checkbox-state-layer-size: 35px;
211
+ display: inline-flex;
212
+ }
213
+ body .sto-datatable .datatable-header {
210
214
  border-bottom: 1px solid var(--divider);
211
215
  }
212
- body .ngx-datatable.sto-datatable .datatable-header .datatable-header-cell {
216
+ body .sto-datatable .datatable-header .datatable-header-cell {
213
217
  color: var(--text);
214
218
  }
215
- body .ngx-datatable.sto-datatable .datatable-body .progress-linear .container {
219
+ body .sto-datatable .datatable-body .progress-linear .container {
216
220
  background-color: var(--accent-highlight);
217
221
  }
218
- body .ngx-datatable.sto-datatable .datatable-body .progress-linear .container .bar {
222
+ body .sto-datatable .datatable-body .progress-linear .container .bar {
219
223
  background-color: var(--primary-resting);
220
224
  }
221
- body .ngx-datatable.sto-datatable .datatable-body .datatable-body-row {
225
+ body .sto-datatable .datatable-body .datatable-body-row {
222
226
  color: var(--text);
223
227
  border-bottom: 1px solid var(--divider);
224
228
  }
225
- body .ngx-datatable.sto-datatable .datatable-body .datatable-body-row:not(.active):hover {
229
+ body .sto-datatable .datatable-body .datatable-body-row:not(.active):hover {
226
230
  background-color: var(--bg-hover);
227
231
  }
228
- body .ngx-datatable.sto-datatable .datatable-body .datatable-body-row:not(.active):hover .datatable-row-left,
229
- body .ngx-datatable.sto-datatable .datatable-body .datatable-body-row:not(.active):hover .datatable-row-right,
230
- body .ngx-datatable.sto-datatable .datatable-body .datatable-body-row:not(.active):hover .datatable-row-center {
232
+ body .sto-datatable .datatable-body .datatable-body-row:not(.active):hover .datatable-row-left,
233
+ body .sto-datatable .datatable-body .datatable-body-row:not(.active):hover .datatable-row-right,
234
+ body .sto-datatable .datatable-body .datatable-body-row:not(.active):hover .datatable-row-center {
231
235
  background-color: var(--bg-hover);
232
236
  }
233
- body .ngx-datatable.sto-datatable .datatable-header .datatable-header-column-group .datatable-header-cell {
237
+ body .sto-datatable .datatable-body .datatable-body-row .sto-form__field .mat-mdc-form-field-infix {
238
+ padding: 0 9px 0 0;
239
+ border-top: 0;
240
+ }
241
+ body .sto-datatable .datatable-body .datatable-body-row .mat-mdc-icon-button {
242
+ --mdc-icon-button-state-layer-size: 28px;
243
+ padding: 0;
244
+ }
245
+ body .sto-datatable .datatable-header .datatable-header-column-group .datatable-header-cell {
234
246
  border-left: 1px solid var(--divider);
235
247
  }
236
- body .ngx-datatable.sto-datatable .datatable-body .datatable-body-row:focus:not(.active) .datatable-row-group.datatable-row-left, body .ngx-datatable.sto-datatable .datatable-body .datatable-body-row:focus:not(.active) .datatable-row-group.datatable-row-right, body .ngx-datatable.sto-datatable .datatable-body .datatable-body-row:focus:not(.active) .datatable-row-group.datatable-row-center {
248
+ body .sto-datatable .datatable-body .datatable-body-row:focus:not(.active) .datatable-row-group.datatable-row-left, body .sto-datatable .datatable-body .datatable-body-row:focus:not(.active) .datatable-row-group.datatable-row-right, body .sto-datatable .datatable-body .datatable-body-row:focus:not(.active) .datatable-row-group.datatable-row-center {
237
249
  background-color: var(--bg-light) !important;
238
250
  }
239
- body .ngx-datatable.sto-datatable .datatable-body .datatable-body-row.active {
251
+ body .sto-datatable .datatable-body .datatable-body-row.active {
240
252
  background-color: var(--bg-light);
241
253
  }
242
- body .ngx-datatable.sto-datatable .datatable-body .datatable-body-row:not(.active):not(:hover) .datatable-row-left,
243
- body .ngx-datatable.sto-datatable .datatable-body .datatable-body-row:not(.active):not(:hover) .datatable-row-right,
244
- body .ngx-datatable.sto-datatable .datatable-body .datatable-body-row:not(.active):not(:hover) .datatable-row-center {
254
+ body .sto-datatable .datatable-body .datatable-body-row:not(.active):not(:hover) .datatable-row-left,
255
+ body .sto-datatable .datatable-body .datatable-body-row:not(.active):not(:hover) .datatable-row-right,
256
+ body .sto-datatable .datatable-body .datatable-body-row:not(.active):not(:hover) .datatable-row-center {
245
257
  background-color: transparent;
246
258
  }
247
- body .ngx-datatable.sto-datatable .datatable-footer {
259
+ body .sto-datatable .datatable-footer {
248
260
  overflow: hidden;
249
261
  }
250
- body .ngx-datatable.sto-datatable .datatable-footer .datatable-pager a {
262
+ body .sto-datatable .datatable-footer .datatable-pager a {
251
263
  color: var(--primary-resting);
252
264
  padding: 0 2px;
253
265
  text-decoration: none;
254
266
  }
255
- body .ngx-datatable.sto-datatable .datatable-footer .datatable-pager a:hover {
267
+ body .sto-datatable .datatable-footer .datatable-pager a:hover {
256
268
  background: var(--bg-hover);
257
269
  }
258
- body .ngx-datatable.sto-datatable .datatable-footer .datatable-pager .pager li.pages {
270
+ body .sto-datatable .datatable-footer .datatable-pager .pager li.pages {
259
271
  margin: 0 2px;
260
272
  }
261
- body .ngx-datatable.sto-datatable .datatable-footer .datatable-pager .pager li.pages.active {
273
+ body .sto-datatable .datatable-footer .datatable-pager .pager li.pages.active {
262
274
  background: var(--bg-light);
263
275
  }
264
- body .ngx-datatable.sto-datatable .datatable-footer .datatable-pager .pager li.pages.disabled a {
276
+ body .sto-datatable .datatable-footer .datatable-pager .pager li.pages.disabled a {
265
277
  color: var(--divider);
266
278
  }
267
279
 
@@ -271,21 +283,21 @@ body .ngx-datatable.sto-datatable .datatable-footer .datatable-pager .pager li.p
271
283
  font-weight: 400;
272
284
  font-feature-settings: "tnum", "lnum";
273
285
  }
274
- .mat-typography:not(.sto-sm-typography):not(.sto-l-typography) .ngx-datatable.sto-datatable {
286
+ .mat-typography:not(.sto-sm-typography):not(.sto-l-typography) .sto-datatable {
275
287
  font-feature-settings: "tnum", "lnum";
276
288
  }
277
- .mat-typography:not(.sto-sm-typography):not(.sto-l-typography) .ngx-datatable.sto-datatable .datatable-body,
278
- .mat-typography:not(.sto-sm-typography):not(.sto-l-typography) .ngx-datatable.sto-datatable .datatable-header {
289
+ .mat-typography:not(.sto-sm-typography):not(.sto-l-typography) .sto-datatable .datatable-body,
290
+ .mat-typography:not(.sto-sm-typography):not(.sto-l-typography) .sto-datatable .datatable-header {
279
291
  font-family: Equinor, Roboto;
280
292
  font-size: 13px;
281
293
  font-weight: 400;
282
294
  }
283
- .mat-typography:not(.sto-sm-typography):not(.sto-l-typography) .ngx-datatable.sto-datatable .datatable-footer {
295
+ .mat-typography:not(.sto-sm-typography):not(.sto-l-typography) .sto-datatable .datatable-footer {
284
296
  font-family: Equinor, Roboto;
285
297
  font-size: 13px;
286
298
  font-weight: 400;
287
299
  }
288
- .mat-typography:not(.sto-sm-typography):not(.sto-l-typography) .ngx-datatable.sto-datatable .datatable-footer .pager li a[role=button] {
300
+ .mat-typography:not(.sto-sm-typography):not(.sto-l-typography) .sto-datatable .datatable-footer .pager li a[role=button] {
289
301
  line-height: 13px;
290
302
  }
291
303
 
@@ -295,21 +307,21 @@ body .ngx-datatable.sto-datatable .datatable-footer .datatable-pager .pager li.p
295
307
  font-weight: 400;
296
308
  font-feature-settings: "tnum", "lnum";
297
309
  }
298
- .mat-typography.sto-sm-typography .ngx-datatable.sto-datatable {
310
+ .mat-typography.sto-sm-typography .sto-datatable {
299
311
  font-feature-settings: "tnum", "lnum";
300
312
  }
301
- .mat-typography.sto-sm-typography .ngx-datatable.sto-datatable .datatable-body,
302
- .mat-typography.sto-sm-typography .ngx-datatable.sto-datatable .datatable-header {
313
+ .mat-typography.sto-sm-typography .sto-datatable .datatable-body,
314
+ .mat-typography.sto-sm-typography .sto-datatable .datatable-header {
303
315
  font-family: Equinor, Roboto;
304
316
  font-size: 10px;
305
317
  font-weight: 400;
306
318
  }
307
- .mat-typography.sto-sm-typography .ngx-datatable.sto-datatable .datatable-footer {
319
+ .mat-typography.sto-sm-typography .sto-datatable .datatable-footer {
308
320
  font-family: Equinor, Roboto;
309
321
  font-size: 10px;
310
322
  font-weight: 400;
311
323
  }
312
- .mat-typography.sto-sm-typography .ngx-datatable.sto-datatable .datatable-footer .pager li a[role=button] {
324
+ .mat-typography.sto-sm-typography .sto-datatable .datatable-footer .pager li a[role=button] {
313
325
  line-height: 10px;
314
326
  }
315
327
 
@@ -319,21 +331,21 @@ body .ngx-datatable.sto-datatable .datatable-footer .datatable-pager .pager li.p
319
331
  font-weight: 400;
320
332
  font-feature-settings: "tnum", "lnum";
321
333
  }
322
- .mat-typography.sto-l-typography .ngx-datatable.sto-datatable {
334
+ .mat-typography.sto-l-typography .sto-datatable {
323
335
  font-feature-settings: "tnum", "lnum";
324
336
  }
325
- .mat-typography.sto-l-typography .ngx-datatable.sto-datatable .datatable-body,
326
- .mat-typography.sto-l-typography .ngx-datatable.sto-datatable .datatable-header {
337
+ .mat-typography.sto-l-typography .sto-datatable .datatable-body,
338
+ .mat-typography.sto-l-typography .sto-datatable .datatable-header {
327
339
  font-family: Equinor, Roboto;
328
340
  font-size: 16px;
329
341
  font-weight: 400;
330
342
  }
331
- .mat-typography.sto-l-typography .ngx-datatable.sto-datatable .datatable-footer {
343
+ .mat-typography.sto-l-typography .sto-datatable .datatable-footer {
332
344
  font-family: Equinor, Roboto;
333
345
  font-size: 16px;
334
346
  font-weight: 400;
335
347
  }
336
- .mat-typography.sto-l-typography .ngx-datatable.sto-datatable .datatable-footer .pager li a[role=button] {
348
+ .mat-typography.sto-l-typography .sto-datatable .datatable-footer .pager li a[role=button] {
337
349
  line-height: 16px;
338
350
  }
339
351
 
@@ -4651,8 +4663,6 @@ Use with StoGridDirective
4651
4663
  }
4652
4664
  .sto-f-grid__col {
4653
4665
  min-height: 24px;
4654
- margin-left: 8px;
4655
- margin-right: 8px;
4656
4666
  overflow: hidden;
4657
4667
  }
4658
4668
  .sto-f-grid__col--spacer {
@@ -4661,7 +4671,8 @@ Use with StoGridDirective
4661
4671
  .sto-f-grid--1 .sto-f-grid__col--spacer {
4662
4672
  display: none;
4663
4673
  }
4664
- .sto-f-grid--1 .sto-f-grid__col, .sto-f-grid--1 .sto-f-grid__col--2 {
4674
+ .sto-f-grid--1 .sto-f-grid__col,
4675
+ .sto-f-grid--1 .sto-f-grid__col--2 {
4665
4676
  flex: 1 1 calc(100% - 16px);
4666
4677
  }
4667
4678
  .sto-f-grid--2 .sto-f-grid__col {
@@ -4770,11 +4781,15 @@ input::-webkit-inner-spin-button {
4770
4781
  }
4771
4782
 
4772
4783
  .mat-mdc-button {
4784
+ --mdc-text-button-container-height: 46px;
4773
4785
  --mdc-protected-button-label-text-color: var(--primary-hover-alt);
4774
4786
  }
4775
4787
  .mat-mdc-button.mat-unthemed {
4776
4788
  --mdc-text-button-label-text-color: var(--text);
4777
4789
  }
4790
+ .mat-mdc-button.mat-mdc-button-base {
4791
+ height: var(--mdc-text-button-container-height);
4792
+ }
4778
4793
 
4779
4794
  .mat-mdc-progress-bar {
4780
4795
  --mdc-linear-progress-active-indicator-color: var(--primary-highlight);
@@ -4811,11 +4826,12 @@ input::-webkit-inner-spin-button {
4811
4826
  .mat-mdc-checkbox,
4812
4827
  .mat-mdc-checkbox.mat-primary {
4813
4828
  --mdc-theme-text-primary-on-background: var(--text);
4814
- --mdc-checkbox-selected-checkmark-color: var(--text);
4829
+ --mdc-checkbox-selected-checkmark-color: var(--accent-hover-contrast);
4815
4830
  --mdc-checkbox-unselected-icon-color: var(--text);
4816
4831
  --mdc-checkbox-unselected-focus-icon-color: var(--text-disabled);
4817
4832
  --mdc-theme-text-primary-on-background: var(--text);
4818
4833
  --mdc-checkbox-unselected-hover-icon-color: var(--text-disabled);
4834
+ --mdc-checkbox-selected-hover-icon-color: var(--primary-hover);
4819
4835
  }
4820
4836
 
4821
4837
  .mat-mdc-select {
@@ -4844,6 +4860,10 @@ input::-webkit-inner-spin-button {
4844
4860
  );
4845
4861
  }
4846
4862
 
4863
+ .ngx-datatable .mat-mdc-checkbox .mdc-checkbox {
4864
+ box-sizing: content-box;
4865
+ }
4866
+
4847
4867
  table {
4848
4868
  border-collapse: collapse;
4849
4869
  border-spacing: 0;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ngx-stoui/core",
3
- "version": "16.0.0",
3
+ "version": "16.0.2",
4
4
  "author": {
5
5
  "name": "Ronnie Laugen",
6
6
  "email": "rhenri@equinor.com"
@@ -1,12 +1,13 @@
1
1
  $row-height: 24px;
2
2
  $icon-height: 16px;
3
3
 
4
+ .sto-compact .imo-overview,
5
+ .sto-compact .sto-drawer--compact {
6
+ //only in .imo-overview for now
4
7
 
5
- .sto-compact .imo-overview, .sto-compact .sto-drawer--compact { //only in .imo-overview for now
6
-
7
- .ngx-datatable.sto-datatable, .ngx-datatable.sto-datatable.inside-card {
8
+ .sto-datatable,
9
+ .sto-datatable.inside-card {
8
10
  .datatable-body {
9
-
10
11
  .progress-linear {
11
12
  height: 3px;
12
13
  margin: -3px 0 0 0;
@@ -40,7 +41,6 @@ $icon-height: 16px;
40
41
  line-height: $row-height;
41
42
  }
42
43
  }
43
-
44
44
  }
45
45
  }
46
46
  }
@@ -60,7 +60,6 @@ $icon-height: 16px;
60
60
  line-height: 12px;
61
61
  }
62
62
  }
63
-
64
63
  }
65
64
 
66
65
  &.sto-datatable__header-column {
@@ -71,18 +70,16 @@ $icon-height: 16px;
71
70
  position: static;
72
71
 
73
72
  &::before {
74
- content: "("
73
+ content: '(';
75
74
  }
76
75
 
77
76
  &::after {
78
- content: ")"
77
+ content: ')';
79
78
  }
80
79
  }
81
-
82
80
  }
83
81
  }
84
82
  }
85
-
86
83
  }
87
84
 
88
85
  .mat-icon {
@@ -90,16 +87,13 @@ $icon-height: 16px;
90
87
  width: $icon-height;
91
88
  font-size: $icon-height;
92
89
  line-height: $icon-height;
93
-
94
90
  }
95
91
  }
96
92
 
97
-
98
93
  sto-datatable-fixed-row-wrapper {
99
94
  margin-top: 8px;
100
95
  }
101
96
 
102
-
103
97
  .date-status-cell {
104
98
  .month-label {
105
99
  line-height: 20px;
@@ -107,11 +101,13 @@ $icon-height: 16px;
107
101
  left: 2px;
108
102
  }
109
103
  }
110
-
111
104
  }
112
105
 
113
-
114
- .sto-compact .sto-datatable .datatable-body .datatable-body-cell-label .date-status-cell {
106
+ .sto-compact
107
+ .sto-datatable
108
+ .datatable-body
109
+ .datatable-body-cell-label
110
+ .date-status-cell {
115
111
  line-height: 24px;
116
112
  }
117
113
 
@@ -122,7 +118,13 @@ $icon-height: 16px;
122
118
  }
123
119
  }
124
120
 
125
- .sto-compact .imo-overview .ngx-datatable.sto-datatable .datatable-body .datatable-body-row .datatable-body-cell.sto-datatable__column--editable .datatable-body-cell-label {
121
+ .sto-compact
122
+ .imo-overview
123
+ .sto-datatable
124
+ .datatable-body
125
+ .datatable-body-row
126
+ .datatable-body-cell.sto-datatable__column--editable
127
+ .datatable-body-cell-label {
126
128
  .mat-form-field-prefix {
127
129
  height: 19px;
128
130
  width: 19px;
@@ -1,7 +1,7 @@
1
1
  @import 'ngx-datatable-compact';
2
2
  @import 'ngx-datatable-form';
3
3
 
4
- .ngx-datatable.sto-datatable {
4
+ .sto-datatable {
5
5
  border-radius: 2px;
6
6
  margin-bottom: 4px;
7
7
 
@@ -156,7 +156,12 @@
156
156
  overflow: hidden;
157
157
  text-overflow: ellipsis;
158
158
  }
159
-
159
+ }
160
+ .datatable-body-cell .sto-form__field {
161
+ .mat-mdc-form-field-infix {
162
+ padding: 0 9px 0 0;
163
+ border-top: 0;
164
+ }
160
165
  .mat-select,
161
166
  .mat-input {
162
167
  padding: 0;
@@ -170,15 +175,6 @@
170
175
  // font-size: $font-size;
171
176
  }
172
177
 
173
- .mat-mdc-form-field-infix {
174
- margin-top: -10px;
175
- padding: 0 9px 0 0;
176
- }
177
-
178
- .mat-input-underline {
179
- //display: none;
180
- }
181
-
182
178
  .mat-icon-button {
183
179
  margin-left: -8px;
184
180
  margin-top: -18px;
@@ -215,10 +211,7 @@
215
211
  }
216
212
  }
217
213
 
218
- .ngx-datatable.sto-datatable
219
- .datatable-header
220
- .datatable-header-cell
221
- .sort-btn {
214
+ .sto-datatable .datatable-header .datatable-header-cell .sort-btn {
222
215
  line-height: 0;
223
216
  vertical-align: bottom;
224
217
  }
@@ -227,7 +220,7 @@ span.sortable {
227
220
  cursor: pointer;
228
221
  }
229
222
 
230
- .sto-datatable.ngx-datatable {
223
+ .sto-datatable {
231
224
  .datatable-body {
232
225
  -moz-transition: height 225ms cubic-bezier(0.4, 0, 0.2, 1);
233
226
  -webkit-transition: height 225ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -236,7 +229,7 @@ span.sortable {
236
229
  }
237
230
  }
238
231
 
239
- .ngx-datatable.sto-datatable
232
+ .sto-datatable
240
233
  .datatable-header
241
234
  .datatable-header-column-group
242
235
  .datatable-header-cell {
@@ -261,7 +254,7 @@ span.sortable {
261
254
  }
262
255
  }
263
256
 
264
- .ngx-datatable.sto-datatable .datatable-header .datatable-header-cell {
257
+ .sto-datatable .datatable-header .datatable-header-cell {
265
258
  &.sto-datatable__header--dense {
266
259
  padding-top: 8px;
267
260
  }
@@ -277,7 +270,7 @@ span.sortable {
277
270
  .sto-datatable__border--left {
278
271
  }
279
272
 
280
- .ngx-datatable.sto-datatable {
273
+ .sto-datatable {
281
274
  .datatable-header-cell {
282
275
  .mat-icon.mat-icon-sort {
283
276
  line-height: 13px; // TODO TYpography
@@ -11,8 +11,6 @@ Use with StoGridDirective
11
11
 
12
12
  &__col {
13
13
  min-height: 24px;
14
- margin-left: 8px;
15
- margin-right: 8px;
16
14
  overflow: hidden;
17
15
 
18
16
  &--spacer {
@@ -25,7 +23,8 @@ Use with StoGridDirective
25
23
  display: none;
26
24
  }
27
25
 
28
- .sto-f-grid__col, .sto-f-grid__col--2 {
26
+ .sto-f-grid__col,
27
+ .sto-f-grid__col--2 {
29
28
  flex: 1 1 calc(100% - 16px);
30
29
  }
31
30
  }
@@ -40,7 +39,6 @@ Use with StoGridDirective
40
39
 
41
40
  &.sto-f-grid__col--spacer {
42
41
  display: none;
43
-
44
42
  }
45
43
  }
46
44
  }
@@ -76,7 +76,7 @@
76
76
  }
77
77
  }
78
78
 
79
- .ngx-datatable.sto-datatable {
79
+ .sto-datatable {
80
80
  background-color: $background-color;
81
81
  color: $color;
82
82
 
@@ -87,37 +87,50 @@
87
87
  }
88
88
  }
89
89
 
90
+ .mat-mdc-checkbox {
91
+ --mdc-checkbox-state-layer-size: 35px;
92
+ display: inline-flex;
93
+ }
90
94
  .datatable-header {
91
95
  border-bottom: 1px solid $border-color;
96
+ .datatable-header-cell {
97
+ color: $color;
98
+ }
92
99
  }
93
100
 
94
- .datatable-header .datatable-header-cell {
95
- color: $color;
96
- }
97
-
98
- .datatable-body .progress-linear {
99
- .container {
100
- background-color: $accent;
101
+ .datatable-body {
102
+ .progress-linear {
103
+ .container {
104
+ background-color: $accent;
101
105
 
102
- .bar {
103
- background-color: $primary;
106
+ .bar {
107
+ background-color: $primary;
108
+ }
104
109
  }
105
110
  }
106
- }
107
-
108
- .datatable-body .datatable-body-row {
109
- color: $color;
110
- border-bottom: 1px solid $border-color;
111
- }
111
+ .datatable-body-row {
112
+ color: $color;
113
+ border-bottom: 1px solid $border-color;
114
+ &:not(.active):hover {
115
+ .datatable-row-left,
116
+ .datatable-row-right,
117
+ .datatable-row-center {
118
+ background-color: $hover-color;
119
+ }
112
120
 
113
- .datatable-body .datatable-body-row:not(.active):hover {
114
- .datatable-row-left,
115
- .datatable-row-right,
116
- .datatable-row-center {
117
- background-color: $hover-color;
121
+ background-color: $hover-color;
122
+ }
123
+ .sto-form__field {
124
+ .mat-mdc-form-field-infix {
125
+ padding: 0 9px 0 0;
126
+ border-top: 0;
127
+ }
128
+ }
129
+ .mat-mdc-icon-button {
130
+ --mdc-icon-button-state-layer-size: 28px;
131
+ padding: 0;
132
+ }
118
133
  }
119
-
120
- background-color: $hover-color;
121
134
  }
122
135
 
123
136
  .datatable-header .datatable-header-column-group .datatable-header-cell {
@@ -192,7 +205,7 @@ body {
192
205
  font-feature-settings: 'tnum', 'lnum';
193
206
  }
194
207
 
195
- .ngx-datatable.sto-datatable {
208
+ .sto-datatable {
196
209
  .datatable-body,
197
210
  .datatable-header {
198
211
  font: {