@sc-360-v2/storefront-cms-library 0.3.56 → 0.3.58

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.
@@ -40,6 +40,7 @@
40
40
  font-size: 14px;
41
41
  color: #475467;
42
42
  text-align: left;
43
+ padding-block-end: 16px;
43
44
  }
44
45
  }
45
46
  .shp-type {
@@ -136,6 +136,24 @@
136
136
  height: auto !important;
137
137
  max-height: 52px;
138
138
  border-radius: 4px;
139
+ .profile_block {
140
+ width: 32px;
141
+ height: 32px;
142
+ border-radius: 50%;
143
+ overflow: hidden;
144
+ background-color: var(--_gray-200);
145
+ display: flex;
146
+ justify-content: center;
147
+ align-items: center;
148
+ color: var(--_gray-600);
149
+ font-size: 12px;
150
+ font-weight: 600;
151
+ img {
152
+ max-width: 100%;
153
+ max-height: 100%;
154
+ object-fit: contain;
155
+ }
156
+ }
139
157
  &:hover {
140
158
  background-color: var(--_primary-25);
141
159
  color: var(--_primary-400);
@@ -143,8 +161,8 @@
143
161
 
144
162
  .item-image {
145
163
  // background-image: url("");
146
- width: 30px;
147
- height: 30px;
164
+ width: 32px;
165
+ height: 32px;
148
166
  background-size: 100%;
149
167
  background-position: center;
150
168
  border-radius: 50%;
@@ -179,6 +197,45 @@
179
197
  width: auto;
180
198
  }
181
199
  }
200
+ // .input-checkbox {
201
+ // display: flex;
202
+ // align-items: center;
203
+ // cursor: pointer;
204
+ // font-size: 16px;
205
+ // user-select: none;
206
+
207
+ // input[type="checkbox"] {
208
+ // display: none;
209
+
210
+ // &:checked + .checkmark::after {
211
+ // content: "";
212
+ // position: absolute;
213
+ // left: 5px;
214
+ // top: 1px;
215
+ // width: 6px;
216
+ // height: 12px;
217
+ // border: solid #2196f3;
218
+ // border-width: 0 2px 2px 0;
219
+ // transform: rotate(45deg);
220
+ // }
221
+ // }
222
+
223
+ // .checkmark {
224
+ // height: 18px;
225
+ // width: 18px;
226
+ // background-color: #eee;
227
+ // border: 2px solid #ccc;
228
+ // border-radius: 4px;
229
+ // margin-right: 10px;
230
+ // position: relative;
231
+ // transition: all 0.2s ease;
232
+ // }
233
+
234
+ // &:hover .checkmark {
235
+ // background-color: #f0f0f0;
236
+ // }
237
+ // }
238
+
182
239
  .dropdown-item {
183
240
  height: 40px;
184
241
  &:not(:last-child) {
@@ -229,17 +286,25 @@
229
286
  }
230
287
  .dropdown_template_panel_search {
231
288
  background: none;
232
- padding: 12px;
289
+ padding: 8px;
233
290
  border-bottom: 1px solid #dddddd;
234
291
  height: max-content !important;
292
+ position: relative;
235
293
  &:hover {
236
294
  background: none !important;
237
295
  }
238
296
  input {
239
297
  width: 100%;
240
- padding: 10px 8px;
298
+ padding-inline: 10px;
241
299
  border-radius: 4px;
242
- border: 1px solid #dddddd;
300
+ border: 1px solid var(--_gray-200);
301
+ height: 40px;
302
+ }
303
+ .close_btn {
304
+ position: absolute;
305
+ right: 20px;
306
+ top: 20px;
307
+ z-index: 10;
243
308
  }
244
309
  }
245
310
  }
@@ -284,4 +349,63 @@
284
349
  text-align: center;
285
350
  font-weight: 600;
286
351
  font-size: 16px;
352
+ width: 100%;
353
+ height: 200px;
354
+ display: flex;
355
+ justify-content: center;
356
+ align-items: center;
357
+ font-weight: 600;
358
+ }
359
+
360
+ // spinner for dropdown
361
+ .spinner_dropdown {
362
+ width: 32px;
363
+ height: 32px;
364
+ border-radius: 50%;
365
+ position: relative;
366
+ animation: rotate 1s linear infinite;
367
+ }
368
+ .spinner_dropdown::before,
369
+ .spinner_dropdown::after {
370
+ content: "";
371
+ box-sizing: border-box;
372
+ position: absolute;
373
+ inset: 0px;
374
+ border-radius: 50%;
375
+ border: 2px solid var(--_primary-300);
376
+ animation: prixClipFix 2s linear infinite;
377
+ }
378
+ .spinner_dropdown::after {
379
+ border-color: var(--_primary-500);
380
+ animation:
381
+ prixClipFix 2s linear infinite,
382
+ rotate 0.5s linear infinite reverse;
383
+ inset: 6px;
384
+ }
385
+
386
+ @keyframes rotate {
387
+ 0% {
388
+ transform: rotate(0deg);
389
+ }
390
+ 100% {
391
+ transform: rotate(360deg);
392
+ }
393
+ }
394
+
395
+ @keyframes prixClipFix {
396
+ 0% {
397
+ clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
398
+ }
399
+ 25% {
400
+ clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
401
+ }
402
+ 50% {
403
+ clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
404
+ }
405
+ 75% {
406
+ clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
407
+ }
408
+ 100% {
409
+ clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
410
+ }
287
411
  }