@colijnit/sharedcomponents 262.1.26 → 262.1.27
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/fesm2022/colijnit-sharedcomponents.mjs +165 -175
- package/fesm2022/colijnit-sharedcomponents.mjs.map +1 -1
- package/index.d.ts +1 -1
- package/lib/components/stock/style/_layout.scss +22 -20
- package/lib/components/stock/style/_material-definition.scss +8 -4
- package/lib/components/tab-bar/style/_layout.scss +22 -15
- package/lib/components/tab-bar/style/_material-definition.scss +4 -2
- package/lib/style/_variables.scss +1 -0
- package/package.json +1 -1
package/index.d.ts
CHANGED
|
@@ -1027,7 +1027,7 @@ declare class StockLocationPopupComponent implements OnInit {
|
|
|
1027
1027
|
amountInStockChanged(data: any): void;
|
|
1028
1028
|
handleOkClick(): Promise<void>;
|
|
1029
1029
|
togglePopup(): void;
|
|
1030
|
-
locationForNumber(number: string):
|
|
1030
|
+
locationForNumber(number: string): "" | StockLocation;
|
|
1031
1031
|
locationChanged(event: StockLocation): void;
|
|
1032
1032
|
handleStockChange(): void;
|
|
1033
1033
|
handleSelectedStockState(event: StockStatus): void;
|
|
@@ -32,8 +32,8 @@
|
|
|
32
32
|
display: flex;
|
|
33
33
|
gap: 5px;
|
|
34
34
|
position: absolute;
|
|
35
|
-
top: -
|
|
36
|
-
left:
|
|
35
|
+
top: -55px;
|
|
36
|
+
left: 225px;
|
|
37
37
|
}
|
|
38
38
|
}
|
|
39
39
|
|
|
@@ -120,7 +120,13 @@
|
|
|
120
120
|
height: $sc-stock-info-container-height;
|
|
121
121
|
position: relative;
|
|
122
122
|
}
|
|
123
|
-
|
|
123
|
+
co-stock-tabs {
|
|
124
|
+
padding: $sc-stock-tabs-padding;
|
|
125
|
+
background: $sc-stock-tabs-background;
|
|
126
|
+
display: flex;
|
|
127
|
+
flex-direction: column;
|
|
128
|
+
gap: $sc-stock-tabs-gap;
|
|
129
|
+
}
|
|
124
130
|
.stock-info {
|
|
125
131
|
margin: $sc-stock-info-margin;
|
|
126
132
|
padding: $sc-stock-info-padding;
|
|
@@ -134,6 +140,7 @@
|
|
|
134
140
|
|
|
135
141
|
.stock-info-row {
|
|
136
142
|
display: inline-flex;
|
|
143
|
+
min-width: $sc-stock-info-row-width;
|
|
137
144
|
}
|
|
138
145
|
|
|
139
146
|
.stock-info-row-image {
|
|
@@ -161,22 +168,12 @@
|
|
|
161
168
|
.stock-status {
|
|
162
169
|
display: grid;
|
|
163
170
|
position: relative;
|
|
171
|
+
gap: 5px;
|
|
164
172
|
}
|
|
165
173
|
|
|
166
|
-
.stock-info > div
|
|
167
|
-
padding: 0
|
|
174
|
+
.stock-info > div {
|
|
175
|
+
padding: 0 20px;
|
|
168
176
|
border-left: $sc-stock-border-left;
|
|
169
|
-
|
|
170
|
-
&:before {
|
|
171
|
-
content: '';
|
|
172
|
-
height: 30px;
|
|
173
|
-
width: 1px;
|
|
174
|
-
background: #DCE4EA;
|
|
175
|
-
position: absolute;
|
|
176
|
-
left: 0;
|
|
177
|
-
top: 50%;
|
|
178
|
-
transform: translateY(-50%);
|
|
179
|
-
}
|
|
180
177
|
}
|
|
181
178
|
|
|
182
179
|
.stock-line {
|
|
@@ -247,6 +244,9 @@
|
|
|
247
244
|
min-width: 190px;
|
|
248
245
|
|
|
249
246
|
.co-list-of-values {
|
|
247
|
+
&:before {
|
|
248
|
+
box-shadow: none;
|
|
249
|
+
}
|
|
250
250
|
.co-input-text {
|
|
251
251
|
height: 100%;
|
|
252
252
|
}
|
|
@@ -575,8 +575,10 @@
|
|
|
575
575
|
}
|
|
576
576
|
|
|
577
577
|
.stock-label {
|
|
578
|
-
font-size: $sc-font-size-
|
|
578
|
+
font-size: $sc-font-size-xs;
|
|
579
579
|
align-self: center;
|
|
580
|
+
color: #8083a3;
|
|
581
|
+
text-transform: uppercase;
|
|
580
582
|
}
|
|
581
583
|
|
|
582
584
|
.stock-span {
|
|
@@ -626,6 +628,7 @@
|
|
|
626
628
|
.simple-grid-column-header-wrapper {
|
|
627
629
|
.simple-grid-column-header-label {
|
|
628
630
|
font-size: 10px;
|
|
631
|
+
padding: 15px;
|
|
629
632
|
}
|
|
630
633
|
}
|
|
631
634
|
|
|
@@ -656,7 +659,6 @@
|
|
|
656
659
|
font-size: 10px;
|
|
657
660
|
|
|
658
661
|
&:nth-child(odd) {
|
|
659
|
-
background: #f8f8fa;
|
|
660
662
|
|
|
661
663
|
&:hover {
|
|
662
664
|
background: #d2e3f9;
|
|
@@ -679,9 +681,9 @@
|
|
|
679
681
|
}
|
|
680
682
|
|
|
681
683
|
.simple-grid-column-cell-field {
|
|
682
|
-
border-width: 1px;
|
|
684
|
+
border-width: 1px 0 0;
|
|
683
685
|
border-radius: 0;
|
|
684
|
-
padding: 5px
|
|
686
|
+
padding: 5px 15px;
|
|
685
687
|
border-color: #DCE4EA;
|
|
686
688
|
gap: 5px;
|
|
687
689
|
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
$sc-stock-info-margin:
|
|
2
|
-
$sc-stock-info-padding: 15px 10px !default;
|
|
3
|
-
$sc-stock-info-border-width:
|
|
1
|
+
$sc-stock-info-margin: 0 !default;
|
|
2
|
+
$sc-stock-info-padding: 0 1px 15px 10px !default;
|
|
3
|
+
$sc-stock-info-border-width: 0 !default;
|
|
4
4
|
$sc-stock-info-border-color: #F4F4F9 !default;
|
|
5
5
|
$sc-stock-gap: 10px !default;
|
|
6
|
+
$sc-stock-info-row-width: 260px !default;
|
|
6
7
|
$sc-stock-border-left: none !default;
|
|
7
8
|
$sc-stock-line-margin: 10px 0 20px 0 !default;
|
|
8
9
|
$sc-stock-line-font-weight: bold !default;
|
|
@@ -17,7 +18,7 @@ $sc-stock-grid-margin: 0 0 0 0 !default;
|
|
|
17
18
|
$sc-stock-simple-grid-column-header-wrapper-border-bottom: 1px solid black !default;
|
|
18
19
|
$sc-stock-info-container-max-width: 100% !default;
|
|
19
20
|
$sc-stock-info-container-width: 100% !default;
|
|
20
|
-
$sc-stock-info-container-padding:
|
|
21
|
+
$sc-stock-info-container-padding: 0 0 0 0 !default;
|
|
21
22
|
$sc-stock-info-container-height: 100% !default;
|
|
22
23
|
$sc-stock-image-height: 50px !default;
|
|
23
24
|
$sc-stock-grid-height: 300px !default;
|
|
@@ -26,3 +27,6 @@ $sc-stock-info-width: 100% !default;
|
|
|
26
27
|
$sc-stock-info-gap: 30px !default;
|
|
27
28
|
$sc-stock-image-width: 20px !default;
|
|
28
29
|
$sc-stock-transfer-column-width: 100% !default;
|
|
30
|
+
$sc-stock-tabs-padding: 15px 30px !default;
|
|
31
|
+
$sc-stock-tabs-background: #F8F8Fa !default;
|
|
32
|
+
$sc-stock-tabs-gap: 20px !default;
|
|
@@ -6,9 +6,6 @@
|
|
|
6
6
|
font-size: $sc-font-size;
|
|
7
7
|
gap: $sc-tab-bar-gap;
|
|
8
8
|
padding: $sc-tab-bar-padding;
|
|
9
|
-
position: absolute;
|
|
10
|
-
top: 10px;
|
|
11
|
-
left: 0;
|
|
12
9
|
.co-button {
|
|
13
10
|
margin: $sc-tab-bar-button-margin;
|
|
14
11
|
padding: $sc-tab-bar-button-padding;
|
|
@@ -19,19 +16,21 @@
|
|
|
19
16
|
user-select: none;
|
|
20
17
|
font-size: $sc-font-size;
|
|
21
18
|
font-family: $sc-font-family;
|
|
22
|
-
|
|
19
|
+
height: auto;
|
|
23
20
|
span {
|
|
24
21
|
font-size: $sc-font-size;
|
|
25
22
|
text-align: center;
|
|
26
|
-
font-weight:
|
|
23
|
+
font-weight: 500;
|
|
27
24
|
color: $sc-color-font;
|
|
25
|
+
text-transform: uppercase;
|
|
28
26
|
}
|
|
29
27
|
&:hover {
|
|
30
28
|
filter: brightness(100%);
|
|
31
29
|
}
|
|
32
30
|
&.active {
|
|
31
|
+
background-color: #212437;
|
|
33
32
|
span {
|
|
34
|
-
color: #
|
|
33
|
+
color: #FFFFFF;
|
|
35
34
|
}
|
|
36
35
|
}
|
|
37
36
|
}
|
|
@@ -40,15 +39,19 @@
|
|
|
40
39
|
.tab-bar {
|
|
41
40
|
display: flex;
|
|
42
41
|
justify-content: center;
|
|
43
|
-
align-items:
|
|
42
|
+
align-items: flex-start;
|
|
44
43
|
flex-direction: column;
|
|
45
44
|
gap: 10px;
|
|
46
45
|
}
|
|
47
46
|
|
|
48
47
|
.tab-bar-wrapper {
|
|
49
|
-
display:
|
|
50
|
-
|
|
51
|
-
|
|
48
|
+
display: flex;
|
|
49
|
+
gap: 5px;
|
|
50
|
+
justify-content: space-between;
|
|
51
|
+
margin: $sc-tab-bar-wrapper-margin;
|
|
52
|
+
padding: $sc-tab-bar-wrapper-padding;
|
|
53
|
+
width: 100%;
|
|
54
|
+
border-bottom: 2px solid #FFF;
|
|
52
55
|
}
|
|
53
56
|
|
|
54
57
|
.secondary-tab-bar {
|
|
@@ -60,7 +63,7 @@
|
|
|
60
63
|
padding: $sc-tab-bar-padding;
|
|
61
64
|
.co-button {
|
|
62
65
|
margin: $sc-tab-bar-button-margin;
|
|
63
|
-
padding:
|
|
66
|
+
padding: 0;
|
|
64
67
|
border-radius: $sc-tab-bar-border-radius;
|
|
65
68
|
border: none;
|
|
66
69
|
background-color: transparent;
|
|
@@ -68,17 +71,21 @@
|
|
|
68
71
|
user-select: none;
|
|
69
72
|
font-size: $sc-font-size;
|
|
70
73
|
font-family: $sc-font-family;
|
|
71
|
-
|
|
74
|
+
height: auto;
|
|
72
75
|
span {
|
|
73
76
|
font-size: $sc-font-size;
|
|
74
77
|
text-align: center;
|
|
75
|
-
|
|
78
|
+
text-transform: uppercase;
|
|
79
|
+
font-weight: 500;
|
|
76
80
|
color: $sc-color-font;
|
|
81
|
+
padding: $sc-tab-bar-button-padding;
|
|
77
82
|
}
|
|
78
83
|
|
|
79
84
|
&.active {
|
|
80
|
-
background-color:
|
|
81
|
-
|
|
85
|
+
background-color: #212437;
|
|
86
|
+
span {
|
|
87
|
+
color: #FFF;
|
|
88
|
+
}
|
|
82
89
|
}
|
|
83
90
|
}
|
|
84
91
|
}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
|
-
$sc-tab-bar-border-radius:
|
|
1
|
+
$sc-tab-bar-border-radius: 10px !default;
|
|
2
2
|
$sc-tab-bar-background-color: transparent !default;
|
|
3
3
|
$sc-tab-bar-gap: 25px !default;
|
|
4
4
|
$sc-tab-bar-padding: 0 !default;
|
|
5
|
-
$sc-tab-bar-button-padding: 5px
|
|
5
|
+
$sc-tab-bar-button-padding: 5px 10px !default;
|
|
6
6
|
$sc-tab-bar-button-margin: 0 !default;
|
|
7
|
+
$sc-tab-bar-wrapper-margin: 5px 0 15px 0 !default;
|
|
8
|
+
$sc-tab-bar-wrapper-padding: 0 0 15px 0 !default;
|
|
@@ -5,6 +5,7 @@ $sc-font-family-digital: 'digital-7regular' !default;
|
|
|
5
5
|
//$sc-font-size: 10px !default;
|
|
6
6
|
$sc-font-size: 12px !default;
|
|
7
7
|
$sc-font-size-small: 10px !default;
|
|
8
|
+
$sc-font-size-xs: 8px !default;
|
|
8
9
|
|
|
9
10
|
$sc-color-font: #171721 !default;
|
|
10
11
|
$sc-color-border: #DCE4EA !default;
|