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

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.
@@ -19,6 +19,7 @@ $stackElement: "[data-element-type='stack']";
19
19
  $repeaterElement: "[data-element-type='repeater']";
20
20
  $repeaterItemElement: "[data-element-type='repeater-item']";
21
21
  $productElement: "[data-element-type='product']";
22
+ $categoryElement: "[data-element-type='category']";
22
23
  $productDetailsElement: "[data-element-type='productDetails']";
23
24
  $resizerElement: "[data-cms-tool='cms-element-resizer']";
24
25
  $gallerySlider: "[data-element-type='gallerySlider']";
@@ -140,6 +141,7 @@ $gallerySlider: "[data-element-type='gallerySlider']";
140
141
  #{$stackElement},
141
142
  #{$productDetailsElement},
142
143
  #{$productElement},
144
+ #{$categoryElement},
143
145
  #{$gallerySlider}
144
146
  )
145
147
  // &#{$repeaterElement},
@@ -374,7 +376,9 @@ $gallerySlider: "[data-element-type='gallerySlider']";
374
376
  #{$stackElement},
375
377
  #{$repeaterElement},
376
378
  #{$productDetailsElement},
377
- #{$productElement}
379
+ #{$productElement},
380
+ #{$categoryElement},
381
+
378
382
  ) {
379
383
  &:has(#{$activeElementSelector}) {
380
384
  --_sf-ct-pi-nw: none;
@@ -387,6 +391,7 @@ $gallerySlider: "[data-element-type='gallerySlider']";
387
391
  &[data-div-type="cms-stack-wrapper"],
388
392
  &[data-div-type="cms-repeater-wrapper"],
389
393
  &[data-div-type="cms-product-details-wrapper"],
394
+ &[data-div-type="cms-category-wrapper"],
390
395
  &[data-div-type="cms-product-wrapper"] {
391
396
  height: 100%;
392
397
  pointer-events: var(--_sf-ct-pi-nw);
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
+ }