@kigi/components 1.45.0-beta.5 → 1.45.0-beta.7

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.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/src/components/mbg-store-goal/mbg-store-goal.html +23 -25
  3. package/src/components/mbg-store-goal/mbg-store-goal.scss +47 -74
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kigi/components",
3
- "version": "1.45.0-beta.5",
3
+ "version": "1.45.0-beta.7",
4
4
  "description": "@kigi/components",
5
5
  "main": "src/components/index.ts",
6
6
  "scripts": {
package/src/components/mbg-store-goal/mbg-store-goal.html CHANGED
@@ -118,34 +118,32 @@
118
118
  </div>
119
119
  </div>
120
120
  </div>
121
-
122
-
123
121
  <div class="swiper-pagination"></div>
124
- <div class="loading-indicator">
125
- <svg id="loading-circle"
126
- width="30"
127
- height="30"
128
- viewBox="0 0 100 100">
122
+ </div>
123
+ <div class="loading-indicator">
124
+ <svg id="loading-circle"
125
+ width="30"
126
+ height="30"
127
+ viewBox="0 0 100 100">
129
128
 
130
- <circle cx="50"
131
- cy="50"
132
- r="40"
133
- stroke="#E9E9E9"
134
- stroke-width="8"
135
- fill="none" />
129
+ <circle cx="50"
130
+ cy="50"
131
+ r="40"
132
+ stroke="#E9E9E9"
133
+ stroke-width="8"
134
+ fill="none" />
136
135
 
137
- <circle id="progress"
138
- cx="50"
139
- cy="50"
140
- r="40"
141
- stroke="#0ebcbd"
142
- stroke-width="8"
143
- stroke-dasharray="251.2"
144
- stroke-dashoffset="251.2"
145
- fill="none"
146
- transform="rotate(-90 50 50)" />
147
- </svg>
148
- </div>
136
+ <circle id="progress"
137
+ cx="50"
138
+ cy="50"
139
+ r="40"
140
+ stroke="#0ebcbd"
141
+ stroke-width="8"
142
+ stroke-dasharray="251.2"
143
+ stroke-dashoffset="251.2"
144
+ fill="none"
145
+ transform="rotate(-90 50 50)" />
146
+ </svg>
149
147
  </div>
150
148
  </div>
151
149
  </div>
package/src/components/mbg-store-goal/mbg-store-goal.scss CHANGED
@@ -1,16 +1,16 @@
1
1
  .store-goal-wrapper {
2
- width: 100%;
2
+ width: 100%;
3
3
  max-width: 100%;
4
4
  overflow: hidden;
5
5
  padding: 0px 16px;
6
6
 
7
7
  .loading-indicator {
8
- position: absolute;
9
- top: 26%;
10
- left: 98%;
8
+ display: flex;
9
+ align-items: center;
10
+ justify-content: center;
11
+ padding: 0px 0px 100px 40px;
11
12
  transform: translate(-50%, -50%);
12
- width: 40px;
13
- height: 40px;
13
+
14
14
  }
15
15
 
16
16
  #loading-circle {
@@ -20,7 +20,7 @@
20
20
  .swiper {
21
21
  width: 100%;
22
22
  height: 100%;
23
- overflow: hidden;
23
+ overflow: hidden;
24
24
  }
25
25
 
26
26
  .swiper-wrapper {
@@ -29,10 +29,10 @@
29
29
  }
30
30
 
31
31
  .swiper-slide {
32
- width: 100%;
32
+ width: 100%;
33
33
  flex-shrink: 0;
34
34
  display: flex;
35
- justify-content: center;
35
+ justify-content: center;
36
36
  align-items: center;
37
37
  box-sizing: border-box;
38
38
  }
@@ -42,26 +42,26 @@
42
42
  justify-content: center;
43
43
  align-items: center;
44
44
  }
45
-
45
+
46
46
  .swiper-pagination {
47
47
  position: absolute;
48
- top: 100px;
48
+ top: 100px;
49
49
  left: 50%;
50
50
  transform: translateX(-50%);
51
51
  display: flex;
52
52
  gap: 5px;
53
53
  }
54
-
54
+
55
55
  .swiper-pagination-bullet {
56
56
  width: 10px;
57
57
  height: 10px;
58
- background-color: #606A90;
58
+ background-color: #606A90;
59
59
  border-radius: 50%;
60
60
  opacity: 0.5;
61
61
  }
62
62
 
63
63
  .swiper-pagination-bullet-active {
64
- background-color: #0EBCBD;
64
+ background-color: #0EBCBD;
65
65
  opacity: 1;
66
66
  }
67
67
 
@@ -72,7 +72,7 @@
72
72
  margin-top: -17px;
73
73
  color: var(--titleColor);
74
74
  }
75
-
75
+
76
76
 
77
77
  .line-goal {
78
78
  width: 100%;
@@ -83,7 +83,7 @@
83
83
  }
84
84
 
85
85
  .dashboard-wrapper {
86
- overflow: hidden;
86
+ overflow: hidden;
87
87
  display: flex;
88
88
  justify-content: center;
89
89
  align-items: center;
@@ -93,21 +93,18 @@
93
93
 
94
94
 
95
95
  .dashboard-estimated {
96
- position: relative;
97
- left: 52px;
98
- top: 10px;
99
- height: 115px;
96
+ display: flex;
97
+ flex-direction: column;
98
+ padding: 5px 5px 0px 55px;
100
99
  font-size: 14px;
101
100
  color: #5f5b5b;
102
101
 
103
102
  }
104
103
 
105
104
  .dashboard-estimated-store {
106
-
107
- position: relative;
108
- top: 18px;
109
- left: 38px;
110
- height: 115px;
105
+ display: flex;
106
+ flex-direction: column;
107
+ padding: 5px 5px 0px 55px;
111
108
  font-size: 14px;
112
109
  color: #5f5b5b;
113
110
  }
@@ -166,8 +163,8 @@
166
163
  }
167
164
 
168
165
  }
169
- .lock-permition{
170
166
 
167
+ .lock-permition {
171
168
  .tooltip-inner {
172
169
  background: #0EBCBD !important;
173
170
  color: #000000 !important;
@@ -186,15 +183,15 @@
186
183
  }
187
184
 
188
185
  .description-container-dash {
189
- flex-grow: 1;
190
- color: var(--titleColor);
191
- display: flex;
192
- justify-content: space-between;
193
- width: 100%;
194
- font-weight: 600;
195
- font-size: 14px;
196
- align-items: center;
197
- padding: 8px 0 5px 0;
186
+ flex-grow: 1;
187
+ color: var(--titleColor);
188
+ display: flex;
189
+ justify-content: space-between;
190
+ width: 100%;
191
+ font-weight: 600;
192
+ font-size: 14px;
193
+ align-items: center;
194
+ padding: 8px 0 5px 0;
198
195
 
199
196
 
200
197
  .mbg-h-c-tone-s-icon-dash {
@@ -219,7 +216,7 @@
219
216
  }
220
217
 
221
218
  .description-dash {
222
- color: #aaabaa;
219
+ color: #aaabaa;
223
220
  font-size: 17px;
224
221
  font-weight: 500;
225
222
  fill: #aaabaa;
@@ -245,8 +242,8 @@
245
242
  }
246
243
 
247
244
  .fake-chart {
248
- width: 100%;
249
- height: 100%;
245
+ width: 100%;
246
+ height: 100%;
250
247
  position: relative;
251
248
  border-radius: 10px;
252
249
  padding: 0px;
@@ -271,47 +268,23 @@
271
268
  cursor: pointer;
272
269
  }
273
270
 
274
-
275
- @media screen and (max-width: 1536px) {
276
- .loading-indicator {
277
- display: none;
278
- }
279
-
280
- .store-goal-wrapper .dashboard-wrapper .dashboard-estimated {
281
- left: 30px
282
- }
283
- }
284
-
285
271
  @media screen and (max-width: 1440px) {
286
- .loading-indicator {
287
- display: none;
288
- }
289
-
290
- .store-goal-wrapper .dashboard-wrapper .dashboard-estimated {
291
- left: 30px
292
- }
293
- }
294
-
295
- @media screen and (max-width: 1368px) {
296
- .loading-indicator {
272
+ .store-goal-wrapper .dashboard-wrapper .dashboard-estimated {
297
273
  display: flex;
298
- }
299
-
300
- .store-goal-wrapper .dashboard-wrapper .dashboard-estimated {
301
- left: 30px
274
+ flex-direction: column;
275
+ padding: 0px 5px 0px 30px;
276
+ color: #5f5b5b;
277
+ // font-size: 12px;
302
278
  }
303
279
  }
304
280
 
305
- @media screen and (max-width: 1024px) {
306
- .loading-indicator {
307
- display: none;
308
- }
309
281
 
310
- .store-goal-wrapper .dashboard-wrapper .dashboard-estimated {
311
- left: 30px
312
- }
313
-
314
- .swiper-pagination {
315
- gap: 0px;
282
+ @media screen and (max-width: 1024px) {
283
+ .store-goal-wrapper .dashboard-wrapper .dashboard-estimated {
284
+ display: flex;
285
+ flex-direction: column;
286
+ padding: 0px 5px 0px 33px;
287
+ color: #5f5b5b;
288
+ // font-size: 12px;
316
289
  }
317
290
  }