@sc-360-v2/storefront-cms-library 0.1.95 → 0.1.97

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/dist/globals.scss CHANGED
@@ -1,94 +1,94 @@
1
- :root {
2
- --max-width: 1100px;
3
- --border-radius: 12px;
4
- --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono",
5
- "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono",
6
- "Courier New", monospace;
7
-
8
- --foreground-rgb: 0, 0, 0;
9
- --background-start-rgb: 214, 219, 220;
10
- --background-end-rgb: 255, 255, 255;
11
-
12
- --primary-glow: conic-gradient(
13
- from 180deg at 50% 50%,
14
- #16abff33 0deg,
15
- #0885ff33 55deg,
16
- #54d6ff33 120deg,
17
- #0071ff33 160deg,
18
- transparent 360deg
19
- );
20
- --secondary-glow: radial-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
21
-
22
- --tile-start-rgb: 239, 245, 249;
23
- --tile-end-rgb: 228, 232, 233;
24
- --tile-border: conic-gradient(
25
- #00000080,
26
- #00000040,
27
- #00000030,
28
- #00000020,
29
- #00000010,
30
- #00000010,
31
- #00000080
32
- );
33
-
34
- --callout-rgb: 238, 240, 241;
35
- --callout-border-rgb: 172, 175, 176;
36
- --card-rgb: 180, 185, 188;
37
- --card-border-rgb: 131, 134, 135;
38
- }
39
-
40
- @media (prefers-color-scheme: dark) {
41
- :root {
42
- --foreground-rgb: 255, 255, 255;
43
- --background-start-rgb: 0, 0, 0;
44
- --background-end-rgb: 0, 0, 0;
45
-
46
- --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
47
- --secondary-glow: linear-gradient(
48
- to bottom right,
49
- rgba(1, 65, 255, 0),
50
- rgba(1, 65, 255, 0),
51
- rgba(1, 65, 255, 0.3)
52
- );
53
-
54
- --tile-start-rgb: 2, 13, 46;
55
- --tile-end-rgb: 2, 5, 19;
56
- --tile-border: conic-gradient(
57
- #ffffff80,
58
- #ffffff40,
59
- #ffffff30,
60
- #ffffff20,
61
- #ffffff10,
62
- #ffffff10,
63
- #ffffff80
64
- );
65
-
66
- --callout-rgb: 20, 20, 20;
67
- --callout-border-rgb: 108, 108, 108;
68
- --card-rgb: 100, 100, 100;
69
- --card-border-rgb: 200, 200, 200;
70
- }
71
- }
72
-
73
- * {
74
- box-sizing: border-box;
75
- padding: 0;
76
- margin: 0;
77
- }
78
-
79
- html,
80
- body {
81
- max-width: 100vw;
82
- overflow-x: hidden;
83
- }
84
-
85
- a {
86
- color: inherit;
87
- text-decoration: none;
88
- }
89
-
90
- @media (prefers-color-scheme: dark) {
91
- html {
92
- color-scheme: dark;
93
- }
94
- }
1
+ :root {
2
+ --max-width: 1100px;
3
+ --border-radius: 12px;
4
+ --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono",
5
+ "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono",
6
+ "Courier New", monospace;
7
+
8
+ --foreground-rgb: 0, 0, 0;
9
+ --background-start-rgb: 214, 219, 220;
10
+ --background-end-rgb: 255, 255, 255;
11
+
12
+ --primary-glow: conic-gradient(
13
+ from 180deg at 50% 50%,
14
+ #16abff33 0deg,
15
+ #0885ff33 55deg,
16
+ #54d6ff33 120deg,
17
+ #0071ff33 160deg,
18
+ transparent 360deg
19
+ );
20
+ --secondary-glow: radial-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
21
+
22
+ --tile-start-rgb: 239, 245, 249;
23
+ --tile-end-rgb: 228, 232, 233;
24
+ --tile-border: conic-gradient(
25
+ #00000080,
26
+ #00000040,
27
+ #00000030,
28
+ #00000020,
29
+ #00000010,
30
+ #00000010,
31
+ #00000080
32
+ );
33
+
34
+ --callout-rgb: 238, 240, 241;
35
+ --callout-border-rgb: 172, 175, 176;
36
+ --card-rgb: 180, 185, 188;
37
+ --card-border-rgb: 131, 134, 135;
38
+ }
39
+
40
+ @media (prefers-color-scheme: dark) {
41
+ :root {
42
+ --foreground-rgb: 255, 255, 255;
43
+ --background-start-rgb: 0, 0, 0;
44
+ --background-end-rgb: 0, 0, 0;
45
+
46
+ --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
47
+ --secondary-glow: linear-gradient(
48
+ to bottom right,
49
+ rgba(1, 65, 255, 0),
50
+ rgba(1, 65, 255, 0),
51
+ rgba(1, 65, 255, 0.3)
52
+ );
53
+
54
+ --tile-start-rgb: 2, 13, 46;
55
+ --tile-end-rgb: 2, 5, 19;
56
+ --tile-border: conic-gradient(
57
+ #ffffff80,
58
+ #ffffff40,
59
+ #ffffff30,
60
+ #ffffff20,
61
+ #ffffff10,
62
+ #ffffff10,
63
+ #ffffff80
64
+ );
65
+
66
+ --callout-rgb: 20, 20, 20;
67
+ --callout-border-rgb: 108, 108, 108;
68
+ --card-rgb: 100, 100, 100;
69
+ --card-border-rgb: 200, 200, 200;
70
+ }
71
+ }
72
+
73
+ * {
74
+ box-sizing: border-box;
75
+ padding: 0;
76
+ margin: 0;
77
+ }
78
+
79
+ html,
80
+ body {
81
+ max-width: 100vw;
82
+ overflow-x: hidden;
83
+ }
84
+
85
+ a {
86
+ color: inherit;
87
+ text-decoration: none;
88
+ }
89
+
90
+ @media (prefers-color-scheme: dark) {
91
+ html {
92
+ color-scheme: dark;
93
+ }
94
+ }
package/dist/grid.scss CHANGED
@@ -1,3 +1,5 @@
1
+ $activeElementSelector: "[data-has-clicked='true']";
2
+ $elementSelector: "[data-div-type='element']";
1
3
  [data-div-type="grid"] {
2
4
  position: var(--_p-relative);
3
5
  box-shadow: var(
@@ -13,13 +15,29 @@
13
15
  &[data-show-border="false"] {
14
16
  --_hide-grid-border: none;
15
17
  }
18
+
19
+ &:is(#{$activeElementSelector}) {
20
+ &:has(#{$activeElementSelector}#{$elementSelector}) {
21
+ & > div {
22
+ &[data-type="wrapper-layer"] {
23
+ --_sf-gri-wl-vt: visible;
24
+ --_sf-gri-wl-op: 1;
25
+ --_sf-gri-wl-dp: block;
26
+ --_sf-gri-wl-bw: 1px;
27
+ z-index: 2;
28
+ }
29
+ }
30
+ }
31
+ }
16
32
  & > div {
17
33
  &[data-type="wrapper-layer"] {
18
- display: var(--_d-none) !important;
34
+ display: var(--_sf-gri-wl-dp, var(--_d-none)) !important;
19
35
  pointer-events: none;
20
- visibility: hidden !important;
36
+ visibility: var(--_sf-gri-wl-vt, hidden) !important;
37
+ opacity: var(--_sf-gri-wl-op, 0) !important;
21
38
  position: var(--_p-absolute) !important;
22
39
  inset: 0 0 0 0;
40
+ border: var(--_sf-gri-wl-bw) solid var(--_accent-color-2-500);
23
41
  }
24
42
  &[data-div-type="cms-grid-wrapper"] {
25
43
  padding: var(--_ctm-gri-lt-pg);
@@ -13,7 +13,7 @@
13
13
  margin: var(--_ctm-lt-mn, --_tst-lt-mn);
14
14
  // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
15
15
  // height: ;
16
- aspect-ratio: 1 / var(--_sf-aspect-ratio);
16
+ // aspect-ratio: 1 / var(--_sf-aspect-ratio);
17
17
  --_aspect-ratio: calc(
18
18
  1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
19
19
  );
@@ -24,7 +24,12 @@
24
24
  &[data-show-shadow="false"] {
25
25
  --_show-shadow: none;
26
26
  }
27
-
27
+ .text-element {
28
+ background: #6d96e4;
29
+ padding: 10px;
30
+ font-weight: 600;
31
+ color: rgba(75, 69, 70, 1);
32
+ }
28
33
  .container {
29
34
  display: flex;
30
35
  flex-direction: column;
@@ -36,6 +36,12 @@
36
36
  max-height: 30%;
37
37
  }
38
38
  }
39
+ .text-element {
40
+ background: #6d96e4;
41
+ padding: 10px;
42
+ font-weight: 600;
43
+ color: rgba(75, 69, 70, 1);
44
+ }
39
45
  .store__container {
40
46
  display: flex;
41
47
  flex-direction: column;
@@ -11,7 +11,12 @@
11
11
  // // width: 100%;
12
12
  // // height: 100%;
13
13
  // }
14
-
14
+ .text-element {
15
+ background: #6d96e4;
16
+ padding: 10px;
17
+ font-weight: 600;
18
+ color: rgba(75, 69, 70, 1);
19
+ }
15
20
  .action__buttons__container {
16
21
  padding: var(--_ctm-lt-pg);
17
22
  .action__buttons__wrapper {
@@ -65,6 +70,7 @@
65
70
  );
66
71
  .btn__container {
67
72
  gap: var(--_ctm-dn-ad-to-ct-dt-se-in-ad-tt-sg);
73
+ justify-content: var(--_ctm-dn-ad-to-ct-dt-se-at);
68
74
  &[data-actions-icon-position="left"],
69
75
  &[data-actions-icon-position="center"] {
70
76
  flex-direction: row;
@@ -113,6 +119,7 @@
113
119
  );
114
120
  .btn__container {
115
121
  gap: var(--_ctm-dn-ad-to-ct-hr-se-in-ad-tt-sg);
122
+ justify-content: var(--_ctm-dn-ad-to-ct-hr-se-at);
116
123
  &[data-actions-icon-position-hover="left"],
117
124
  &[data-actions-icon-position-hover="center"] {
118
125
  flex-direction: row;
@@ -165,6 +172,7 @@
165
172
  );
166
173
  .btn__container {
167
174
  gap: var(--_ctm-dn-by-nw-dt-se-in-ad-tt-sg);
175
+ justify-content: var(--_ctm-dn-by-nw-dt-se-at);
168
176
  &[data-actions-icon-position="left"],
169
177
  &[data-actions-icon-position="center"] {
170
178
  flex-direction: row;
@@ -213,6 +221,8 @@
213
221
  );
214
222
  .btn__container {
215
223
  gap: var(--_ctm-dn-by-nw-hr-se-in-ad-tt-sg);
224
+ justify-content: var(--_ctm-dn-by-nw-hr-se-at);
225
+
216
226
  &[data-actions-icon-position-hover="left"],
217
227
  &[data-actions-icon-position-hover="center"] {
218
228
  flex-direction: row;
@@ -265,6 +275,7 @@
265
275
  );
266
276
  .btn__container {
267
277
  gap: var(--_ctm-dn-wt-dt-se-in-ad-tt-sg);
278
+ justify-content: var(--_ctm-dn-wt-dt-se-at);
268
279
  &[data-actions-icon-position="left"],
269
280
  &[data-actions-icon-position="center"] {
270
281
  flex-direction: row;
@@ -313,6 +324,8 @@
313
324
  );
314
325
  .btn__container {
315
326
  gap: var(--_ctm-dn-wt-hr-se-in-ad-tt-sg);
327
+ justify-content: var(--_ctm-dn-wt-hr-se-at);
328
+
316
329
  &[data-actions-icon-position-hover="left"],
317
330
  &[data-actions-icon-position-hover="center"] {
318
331
  flex-direction: row;
@@ -365,6 +378,7 @@
365
378
  );
366
379
  .btn__container {
367
380
  gap: var(--_ctm-dn-ce-dt-se-in-ad-tt-sg);
381
+ justify-content: var(--_ctm-dn-ce-dt-se-at);
368
382
  &[data-actions-icon-position="left"],
369
383
  &[data-actions-icon-position="center"] {
370
384
  flex-direction: row;
@@ -413,6 +427,7 @@
413
427
  );
414
428
  .btn__container {
415
429
  gap: var(--_ctm-dn-ce-hr-se-in-ad-tt-sg);
430
+ justify-content: var(--_ctm-dn-hr-dt-se-at);
416
431
  &[data-actions-icon-position-hover="left"],
417
432
  &[data-actions-icon-position-hover="center"] {
418
433
  flex-direction: row;
@@ -465,6 +480,7 @@
465
480
  );
466
481
  .btn__container {
467
482
  gap: var(--_ctm-dn-ad-to-qe-dt-se-in-ad-tt-sg);
483
+ justify-content: var(--_ctm-dn-ad-to-qe-dt-se-at);
468
484
  &[data-actions-icon-position="left"],
469
485
  &[data-actions-icon-position="center"] {
470
486
  flex-direction: row;
@@ -513,6 +529,7 @@
513
529
  );
514
530
  .btn__container {
515
531
  gap: var(--_ctm-dn-ad-to-qe-hr-se-in-ad-tt-sg);
532
+ justify-content: var(--_ctm-dn-ad-to-qe-hr-se-at);
516
533
  &[data-actions-icon-position-hover="left"],
517
534
  &[data-actions-icon-position-hover="center"] {
518
535
  flex-direction: row;
@@ -565,6 +582,7 @@
565
582
  );
566
583
  .btn__container {
567
584
  gap: var(--_ctm-dn-ad-to-or-te-dt-se-in-ad-tt-sg);
585
+ justify-content: var(--_ctm-dn-ad-to-or-te-dt-se-at);
568
586
  &[data-actions-icon-position="left"],
569
587
  &[data-actions-icon-position="center"] {
570
588
  flex-direction: row;
@@ -613,6 +631,7 @@
613
631
  );
614
632
  .btn__container {
615
633
  gap: var(--_ctm-dn-ad-to-or-te-hr-se-in-ad-tt-sg);
634
+ justify-content: var(--_ctm-dn-ad-to-or-te-hr-se-at);
616
635
  &[data-actions-icon-position-hover="left"],
617
636
  &[data-actions-icon-position-hover="center"] {
618
637
  flex-direction: row;
@@ -665,6 +684,7 @@
665
684
  );
666
685
  .btn__container {
667
686
  gap: var(--_ctm-dn-ny-me-dt-se-in-ad-tt-sg);
687
+ justify-content: var(--_ctm-dn-ny-me-dt-se-at);
668
688
  &[data-actions-icon-position="left"],
669
689
  &[data-actions-icon-position="center"] {
670
690
  flex-direction: row;
@@ -713,6 +733,7 @@
713
733
  );
714
734
  .btn__container {
715
735
  gap: var(--_ctm-dn-ny-me-hr-se-in-ad-tt-sg);
736
+ justify-content: var(--_ctm-dn-ny-me-hr-se-at);
716
737
  &[data-actions-icon-position-hover="left"],
717
738
  &[data-actions-icon-position-hover="center"] {
718
739
  flex-direction: row;
@@ -765,6 +786,7 @@
765
786
  );
766
787
  .btn__container {
767
788
  gap: var(--_ctm-dn-dd-dt-se-in-ad-tt-sg);
789
+ justify-content: var(--_ctm-dn-dd-dt-se-at);
768
790
  &[data-actions-icon-position="left"],
769
791
  &[data-actions-icon-position="center"] {
770
792
  flex-direction: row;
@@ -813,6 +835,7 @@
813
835
  );
814
836
  .btn__container {
815
837
  gap: var(--_ctm-dn-dd-hr-se-in-ad-tt-sg);
838
+ justify-content: var(--_ctm-dn-dd-hr-se-at);
816
839
  &[data-actions-icon-position-hover="left"],
817
840
  &[data-actions-icon-position-hover="center"] {
818
841
  flex-direction: row;
@@ -853,7 +876,7 @@
853
876
  cursor: pointer;
854
877
  display: flex;
855
878
  align-items: center;
856
- justify-content: center;
879
+ justify-content: var(--_ctm-dn-me-dt-se-at);
857
880
  gap: var(--_ctm-dn-me-dt-se-in-ad-tt-sg);
858
881
  background-color: var(--_sf-at-hr-bd-cr, var(--_ctm-dn-me-dt-se-bd-cr));
859
882
  border-color: var(--_sf-at-hr-br-cr, var(--_ctm-dn-me-dt-se-br-cr));
@@ -894,6 +917,7 @@
894
917
  }
895
918
  }
896
919
  &:hover {
920
+ justify-content: var(--_ctm-dn-me-hr-se-at);
897
921
  background-color: var(--_sf-at-hr-bd-cr, var(--_ctm-dn-me-hr-se-bd-cr));
898
922
  border-color: var(--_sf-at-hr-br-cr, var(--_ctm-dn-me-hr-se-br-cr));
899
923
  border-style: var(--_sf-at-hr-br-se, var(--_ctm-dn-me-hr-se-br-se));
@@ -29,7 +29,13 @@
29
29
  &[data-show-border="false"] {
30
30
  --_show-border: none;
31
31
  }
32
-
32
+ .text-element {
33
+ background: #6d96e4;
34
+ padding: 10px;
35
+ font-weight: 600;
36
+ color: rgba(75, 69, 70, 1);
37
+ cursor: pointer;
38
+ }
33
39
  .text-element {
34
40
  background-color: var(--_ctm-dn-bd-cr, var(--_tst-dn-bd-cr));
35
41
  padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
@@ -93,7 +99,12 @@
93
99
  &[data-show-border="false"] {
94
100
  --_show-border: none;
95
101
  }
96
-
102
+ .text-element {
103
+ background: #6d96e4;
104
+ padding: 10px;
105
+ font-weight: 600;
106
+ color: rgba(75, 69, 70, 1);
107
+ }
97
108
  .text-element {
98
109
  background-color: var(--_ctm-dn-bd-cr, var(--_tst-dn-bd-cr));
99
110
  padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
@@ -157,7 +168,12 @@
157
168
  &[data-show-border="false"] {
158
169
  --_show-border: none;
159
170
  }
160
-
171
+ .text-element {
172
+ background: #6d96e4;
173
+ padding: 10px;
174
+ font-weight: 600;
175
+ color: rgba(75, 69, 70, 1);
176
+ }
161
177
  .text-element {
162
178
  background-color: var(--_ctm-dn-bd-cr, var(--_tst-dn-bd-cr));
163
179
  padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
@@ -221,7 +237,12 @@
221
237
  &[data-show-border="false"] {
222
238
  --_show-border: none;
223
239
  }
224
-
240
+ .text-element {
241
+ background: #6d96e4;
242
+ padding: 10px;
243
+ font-weight: 600;
244
+ color: rgba(75, 69, 70, 1);
245
+ }
225
246
  .text-element {
226
247
  background-color: var(--_ctm-dn-bd-cr, var(--_tst-dn-bd-cr));
227
248
  padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
@@ -285,7 +306,12 @@
285
306
  &[data-show-border="false"] {
286
307
  --_show-border: none;
287
308
  }
288
-
309
+ .text-element {
310
+ background: #6d96e4;
311
+ padding: 10px;
312
+ font-weight: 600;
313
+ color: rgba(75, 69, 70, 1);
314
+ }
289
315
  .text-element {
290
316
  background-color: var(--_ctm-dn-bd-cr, var(--_tst-dn-bd-cr));
291
317
  padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
@@ -349,7 +375,12 @@
349
375
  &[data-show-border="false"] {
350
376
  --_show-border: none;
351
377
  }
352
-
378
+ .text-element {
379
+ background: #6d96e4;
380
+ padding: 10px;
381
+ font-weight: 600;
382
+ color: rgba(75, 69, 70, 1);
383
+ }
353
384
  .text-element {
354
385
  background-color: var(--_ctm-dn-bd-cr, var(--_tst-dn-bd-cr));
355
386
  padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
@@ -38,6 +38,12 @@
38
38
  max-height: 30%;
39
39
  }
40
40
  }
41
+ .text-element {
42
+ background: #6d96e4;
43
+ padding: 10px;
44
+ font-weight: 600;
45
+ color: rgba(75, 69, 70, 1);
46
+ }
41
47
  .highlights__container {
42
48
  padding: var(--_ctm-lt-pg);
43
49
  .stacK {
@@ -29,7 +29,12 @@
29
29
  &[data-show-shadow="false"] {
30
30
  --_show-shadow: none;
31
31
  }
32
-
32
+ .text-element {
33
+ background: #6d96e4;
34
+ padding: 10px;
35
+ font-weight: 600;
36
+ color: rgba(75, 69, 70, 1);
37
+ }
33
38
  .gallery-slider-element {
34
39
  --text-high-contrast-rgb-value: 49, 49, 49;
35
40
  --detail-medium-contrast: rgb(234, 234, 234);
@@ -34,11 +34,18 @@
34
34
  max-height: 30%;
35
35
  }
36
36
  }
37
+ .text-element {
38
+ background: #6d96e4;
39
+ padding: 10px;
40
+ font-weight: 600;
41
+ color: rgba(75, 69, 70, 1);
42
+ }
37
43
  .store__container {
38
44
  display: flex;
39
45
  flex-direction: column;
40
- align-items: center;
46
+ // align-items: center;
41
47
  padding: var(--_ctm-lt-pg);
48
+ gap: 10px;
42
49
  .stack {
43
50
  .static {
44
51
  color: var(--_ctm-dn-iy-tt-se-cr-dc);
@@ -448,6 +455,7 @@
448
455
  thead {
449
456
  height: var(--_ctm-lt-hr-ht);
450
457
  tr {
458
+ text-align: var(--_ctm-lt-ct-at);
451
459
  th {
452
460
  padding: var(--_ctm-lt-hr-cl-pg);
453
461
  text-align: var(--_ctm-lt-ct-at);
@@ -462,6 +470,7 @@
462
470
  letter-spacing: var(--_ctm-dn-hr-tt-lr-sg);
463
471
  line-height: var(--_ctm-dn-hr-tt-le-ht);
464
472
  text-decoration: var(--_ctm-dn-hr-tt-ue);
473
+ text-align: var(--_ctm-lt-ct-at);
465
474
  }
466
475
  }
467
476
  }
@@ -473,6 +482,7 @@
473
482
  text-align: var(--_ctm-lt-ct-at);
474
483
  th,
475
484
  td {
485
+ text-align: var(--_ctm-lt-ct-at);
476
486
  border: 0;
477
487
  padding: inherit;
478
488
  color: var(--_ctm-dn-te-rw-cr);
@@ -490,7 +500,7 @@
490
500
  }
491
501
  .pagination_container {
492
502
  display: flex;
493
- justify-content: center;
503
+ justify-content: var(--_ctm-lt-pn-at);
494
504
  align-items: center;
495
505
  gap: 10px;
496
506
  button {
@@ -526,7 +536,6 @@
526
536
  justify-content: center;
527
537
  align-items: center;
528
538
  gap: 10px;
529
- margin-top: 10px;
530
539
  button {
531
540
  padding: 10px;
532
541
  cursor: pointer;