@sc-360-v2/storefront-cms-library 0.5.25 → 0.5.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.
Files changed (32) hide show
  1. package/dist/brand.scss +136 -93
  2. package/dist/breadcrumbs.scss +827 -827
  3. package/dist/builder.js +1 -1
  4. package/dist/buy-for-tab-container.scss +141 -90
  5. package/dist/category.scss +67 -24
  6. package/dist/container.scss +74 -24
  7. package/dist/grid.scss +169 -119
  8. package/dist/icons-builder.js +1 -1
  9. package/dist/icons.js +1 -1
  10. package/dist/index.js +1 -1
  11. package/dist/layouter-item.scss +74 -25
  12. package/dist/layouter-pro-item.scss +55 -6
  13. package/dist/layouter-pro.scss +134 -88
  14. package/dist/layouter.scss +67 -24
  15. package/dist/light-box-v2.scss +154 -105
  16. package/dist/line.scss +261 -166
  17. package/dist/marchandiserSets.scss +107 -60
  18. package/dist/mega-menu-container.scss +73 -24
  19. package/dist/mega-menu.scss +25 -3
  20. package/dist/product-image.scss +1 -1
  21. package/dist/product.scss +140 -97
  22. package/dist/productDetails.scss +113 -70
  23. package/dist/repeater-item.scss +69 -24
  24. package/dist/repeater.scss +73 -24
  25. package/dist/section.scss +53 -7
  26. package/dist/stack.scss +171 -129
  27. package/dist/tab-container.scss +139 -89
  28. package/dist/types/builder/tools/element-edit/marchandiserSets.d.ts +8 -0
  29. package/dist/types/global/types.d.ts +1 -0
  30. package/dist/uploadMedia.js +1 -1
  31. package/dist/user-elements.scss +15 -0
  32. package/package.json +1 -1
package/dist/grid.scss CHANGED
@@ -1,119 +1,169 @@
1
- $activeElementSelector: "[data-has-clicked='true']";
2
- $elementSelector: "[data-div-type='element']";
3
-
4
- @use "./functions.scss" as *;
5
-
6
- $flex: "flx";
7
- $grid: "grd";
8
- $flexRow: "rw";
9
- $flexRowReverse: "rw-rv";
10
- $flexColumn: "cln";
11
- $flexColumnReverse: "cln-rv";
12
- [data-div-type="grid"] {
13
- position: var(--_p-relative);
14
- display: var(--_d-grid);
15
- // padding: var(--_ctm-mob-gri-lt-pg), var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg));
16
- // height: 100% !important;
17
- box-shadow: var(
18
- --_hide-grid-shadow,
19
- prepareMediaVariable(--_ctm-gri-dn-sw-ae) prepareMediaVariable(--_ctm-gri-dn-sw-br)
20
- prepareMediaVariable(--_ctm-gri-dn-sw-sd) prepareMediaVariable(--_ctm-gri-dn-sw-cr)
21
- );
22
- // padding: var(--_ctm-mob-gri-lt-pg, var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg)));
23
-
24
- // padding: var(--_ctm-mob-gri-lt-pg, var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg)));
25
- // background: var(--_ctm-mob-gri-dn-bd-cr, var(--_ctm-tab-gri-dn-bd-cr, var(--_ctm-gri-dn-bd-cr)));
26
- // background-color: prepareMediaVariable(--_ctm-gri-dn-bd-cr);
27
- // background-image: prepareMediaVariable(--_ctm-gri-dn-bd-ie);
28
- // background-attachment: prepareMediaVariable(--_ctm-gri-dn-bd-at);
29
- // background-position: prepareMediaVariable(--_ctm-gri-dn-bd-pn);
30
- // background-repeat: prepareMediaVariable(--_ctm-gri-dn-bd-rt);
31
- // background-size: prepareMediaVariable(--_ctm-gri-dn-bd-se);
32
-
33
- &[data-show-shadow="false"] {
34
- --_hide-grid-shadow: none;
35
- }
36
- &[data-show-border="false"] {
37
- --_hide-grid-border: none;
38
- }
39
-
40
- &:is(#{$activeElementSelector}) {
41
- &:has(#{$activeElementSelector}#{$elementSelector}) {
42
- & > div {
43
- &[data-type="wrapper-layer"] {
44
- --_sf-gri-wl-vt: visible;
45
- --_sf-gri-wl-op: 1;
46
- --_sf-gri-wl-dp: block;
47
- --_sf-gri-wl-bw: 1px;
48
- z-index: 2;
49
- }
50
- }
51
- }
52
- }
53
-
54
- & > div {
55
- &[data-type="wrapper-layer"] {
56
- display: var(--_sf-gri-wl-dp, var(--_d-none)) !important;
57
- pointer-events: none;
58
- visibility: var(--_sf-gri-wl-vt, hidden) !important;
59
- opacity: var(--_sf-gri-wl-op, 0) !important;
60
- position: var(--_p-absolute) !important;
61
- inset: 0 0 0 0;
62
- --_sf-pr-wr-ly-br-cl: 25%;
63
- border: var(--_sf-gri-wl-bw) solid
64
- color-mix(
65
- in srgb,
66
- var(--_accent-color-2-500) var(--_sf-pr-wr-ly-br-cl),
67
- transparent calc(100% - var(--_sf-pr-wr-ly-br-cl))
68
- );
69
- }
70
- &[data-div-type="cms-grid-wrapper"] {
71
- // padding: var(--_ctm-mob-gri-lt-pg, var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg)));
72
- padding: #{prepareMediaVariable(--_ctm-gri-lt-pg)};
73
- background-color: prepareMediaVariable(--_ctm-gri-dn-bd-cr);
74
- background-image: prepareMediaVariable(--_ctm-gri-dn-bd-ie);
75
- background-attachment: prepareMediaVariable(--_ctm-gri-dn-bd-at);
76
- background-position: prepareMediaVariable(--_ctm-gri-dn-bd-pn);
77
- background-repeat: prepareMediaVariable(--_ctm-gri-dn-bd-rt);
78
- background-size: prepareMediaVariable(--_ctm-gri-dn-bd-se);
79
- width: 100%;
80
- grid-area: 1/1/2/2 !important;
81
- height: 100%;
82
- // padding: var(--_ctm-mob-gri-lt-pg), var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg));
83
- display: var(--_d-grid);
84
- border-color: var(--_hide-grid-border, prepareMediaVariable(--_ctm-gri-dn-br-cr));
85
- border-style: var(--_hide-grid-border, prepareMediaVariable(--_ctm-gri-dn-br-se));
86
- border-width: var(--_hide-grid-border, prepareMediaVariable(--_ctm-gri-dn-br-wh));
87
- border-radius: var(--_hide-grid-border, prepareMediaVariable(--_ctm-gri-dn-br-rs));
88
-
89
- &:is(.#{$flex} > *) {
90
- display: var(--_d-flex) !important;
91
- column-gap: prepareMediaVariable(--_ctm-gri-lt-cn-gp);
92
- row-gap: prepareMediaVariable(--_ctm-gri-lt-rw-gp);
93
- flex-wrap: prepareMediaVariable(--_ctm-gri-lt-fx-wp);
94
- overflow: prepareMediaVariable(--_ctm-gri-lt-fx-ow);
95
-
96
- &.#{$flexRow} {
97
- flex-direction: row;
98
- align-items: prepareMediaVariable(--_ctm-gri-lt-an-is);
99
- justify-content: prepareMediaVariable(--_ctm-gri-lt-jy-ct);
100
- }
101
- &.#{$flexRowReverse} {
102
- flex-direction: row-reverse;
103
- align-items: prepareMediaVariable(--_ctm-gri-lt-an-is);
104
- justify-content: prepareMediaVariable(--_ctm-gri-lt-jy-ct);
105
- }
106
- &.#{$flexColumn} {
107
- flex-direction: column;
108
- justify-content: prepareMediaVariable(--_ctm-gri-lt-an-is);
109
- align-items: prepareMediaVariable(--_ctm-gri-lt-jy-ct);
110
- }
111
- &.#{$flexColumnReverse} {
112
- flex-direction: column-reverse;
113
- justify-content: prepareMediaVariable(--_ctm-gri-lt-an-is);
114
- align-items: prepareMediaVariable(--_ctm-gri-lt-jy-ct);
115
- }
116
- }
117
- }
118
- }
119
- }
1
+ $activeElementSelector: "[data-has-clicked='true']";
2
+ $elementSelector: "[data-div-type='element']";
3
+
4
+ @use "./functions.scss" as *;
5
+
6
+ $flex: "flx";
7
+ $grid: "grd";
8
+ $flexRow: "rw";
9
+ $flexRowReverse: "rw-rv";
10
+ $flexColumn: "cln";
11
+ $flexColumnReverse: "cln-rv";
12
+ [data-div-type="grid"] {
13
+ position: var(--_p-relative);
14
+ display: var(--_d-grid);
15
+ // padding: var(--_ctm-mob-gri-lt-pg), var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg));
16
+ // height: 100% !important;
17
+ box-shadow: var(
18
+ --_hide-grid-shadow,
19
+ prepareMediaVariable(--_ctm-gri-dn-sw-ae) prepareMediaVariable(--_ctm-gri-dn-sw-br)
20
+ prepareMediaVariable(--_ctm-gri-dn-sw-sd) prepareMediaVariable(--_ctm-gri-dn-sw-cr)
21
+ );
22
+ // padding: var(--_ctm-mob-gri-lt-pg, var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg)));
23
+
24
+ // padding: var(--_ctm-mob-gri-lt-pg, var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg)));
25
+ // background: var(--_ctm-mob-gri-dn-bd-cr, var(--_ctm-tab-gri-dn-bd-cr, var(--_ctm-gri-dn-bd-cr)));
26
+ // background-color: prepareMediaVariable(--_ctm-gri-dn-bd-cr);
27
+ // background-image: prepareMediaVariable(--_ctm-gri-dn-bd-ie);
28
+ // background-attachment: prepareMediaVariable(--_ctm-gri-dn-bd-at);
29
+ // background-position: prepareMediaVariable(--_ctm-gri-dn-bd-pn);
30
+ // background-repeat: prepareMediaVariable(--_ctm-gri-dn-bd-rt);
31
+ // background-size: prepareMediaVariable(--_ctm-gri-dn-bd-se);
32
+
33
+ &[data-background-type="color"] {
34
+ & > .wrapper {
35
+ background-color: prepareMediaVariable(--_ctm-gri-dn-bd-cr);
36
+ }
37
+ }
38
+
39
+ &[data-background-type="gradient"] {
40
+ --_sf-gri-gradient-angle: calc(#{prepareMediaVariable(--_ctm-gri-dn-gt-ae, 90)} * 1deg);
41
+ --_sf-gri-gradient-start-color: #{prepareMediaVariable(--_ctm-gri-dn-gt-st-cr, transparent)};
42
+ --_sf-gri-gradient-start-position: calc(
43
+ #{prepareMediaVariable(--_ctm-gri-dn-gt-st-pn, 0)} * 1%
44
+ );
45
+ --_sf-gri-gradient-end-color: #{prepareMediaVariable(--_ctm-gri-dn-gt-ed-cr, transparent)};
46
+ --_sf-gri-gradient-end-position: calc(
47
+ #{prepareMediaVariable(--_ctm-gri-dn-gt-ed-pn, 100)} * 1%
48
+ );
49
+ --_sf-gri-gradient-position: #{prepareMediaVariable(--_ctm-gri-dn-gt-pn, center)};
50
+
51
+ &[data-gradient-type="Linear Gradient"] {
52
+ & > .wrapper {
53
+ background-image: linear-gradient(
54
+ var(--_sf-gri-gradient-angle),
55
+ var(--_sf-gri-gradient-start-color) var(--_sf-gri-gradient-start-position),
56
+ var(--_sf-gri-gradient-end-color) var(--_sf-gri-gradient-end-position)
57
+ );
58
+ }
59
+ }
60
+
61
+ &[data-gradient-type="Radial Gradient"] {
62
+ & > .wrapper {
63
+ background-image: radial-gradient(
64
+ circle at var(--_sf-gri-gradient-position),
65
+ var(--_sf-gri-gradient-start-color) var(--_sf-gri-gradient-start-position),
66
+ var(--_sf-gri-gradient-end-color) var(--_sf-gri-gradient-end-position)
67
+ );
68
+ }
69
+ }
70
+ }
71
+
72
+ &[data-background-type="image"] {
73
+ & > .wrapper {
74
+ background-image: prepareMediaVariable(--_ctm-gri-dn-bd-ie);
75
+ background-attachment: prepareMediaVariable(--_ctm-gri-dn-bd-at);
76
+ background-position: prepareMediaVariable(--_ctm-gri-dn-bd-pn);
77
+ background-position-y: prepareMediaVariable(--_ctm-gri-dn-bd-pn-y);
78
+ background-repeat: prepareMediaVariable(--_ctm-gri-dn-bd-rt);
79
+ background-size: prepareMediaVariable(--_ctm-gri-dn-bd-se);
80
+ }
81
+ }
82
+
83
+ &[data-show-shadow="false"] {
84
+ --_hide-grid-shadow: none;
85
+ }
86
+ &[data-show-border="false"] {
87
+ --_hide-grid-border: none;
88
+ }
89
+
90
+ &:is(#{$activeElementSelector}) {
91
+ &:has(#{$activeElementSelector}#{$elementSelector}) {
92
+ & > div {
93
+ &[data-type="wrapper-layer"] {
94
+ --_sf-gri-wl-vt: visible;
95
+ --_sf-gri-wl-op: 1;
96
+ --_sf-gri-wl-dp: block;
97
+ --_sf-gri-wl-bw: 1px;
98
+ z-index: 2;
99
+ }
100
+ }
101
+ }
102
+ }
103
+
104
+ & > div {
105
+ &[data-type="wrapper-layer"] {
106
+ display: var(--_sf-gri-wl-dp, var(--_d-none)) !important;
107
+ pointer-events: none;
108
+ visibility: var(--_sf-gri-wl-vt, hidden) !important;
109
+ opacity: var(--_sf-gri-wl-op, 0) !important;
110
+ position: var(--_p-absolute) !important;
111
+ inset: 0 0 0 0;
112
+ --_sf-pr-wr-ly-br-cl: 25%;
113
+ border: var(--_sf-gri-wl-bw) solid
114
+ color-mix(
115
+ in srgb,
116
+ var(--_accent-color-2-500) var(--_sf-pr-wr-ly-br-cl),
117
+ transparent calc(100% - var(--_sf-pr-wr-ly-br-cl))
118
+ );
119
+ }
120
+ &[data-div-type="cms-grid-wrapper"] {
121
+ // padding: var(--_ctm-mob-gri-lt-pg, var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg)));
122
+ padding: #{prepareMediaVariable(--_ctm-gri-lt-pg)};
123
+ // background-color: prepareMediaVariable(--_ctm-gri-dn-bd-cr);
124
+ // background-image: prepareMediaVariable(--_ctm-gri-dn-bd-ie);
125
+ // background-attachment: prepareMediaVariable(--_ctm-gri-dn-bd-at);
126
+ // background-position: prepareMediaVariable(--_ctm-gri-dn-bd-pn);
127
+ // background-repeat: prepareMediaVariable(--_ctm-gri-dn-bd-rt);
128
+ // background-size: prepareMediaVariable(--_ctm-gri-dn-bd-se);
129
+ width: 100%;
130
+ grid-area: 1/1/2/2 !important;
131
+ height: 100%;
132
+ // padding: var(--_ctm-mob-gri-lt-pg), var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg));
133
+ display: var(--_d-grid);
134
+ border-color: var(--_hide-grid-border, prepareMediaVariable(--_ctm-gri-dn-br-cr));
135
+ border-style: var(--_hide-grid-border, prepareMediaVariable(--_ctm-gri-dn-br-se));
136
+ border-width: var(--_hide-grid-border, prepareMediaVariable(--_ctm-gri-dn-br-wh));
137
+ border-radius: var(--_hide-grid-border, prepareMediaVariable(--_ctm-gri-dn-br-rs));
138
+
139
+ &:is(.#{$flex} > *) {
140
+ display: var(--_d-flex) !important;
141
+ column-gap: prepareMediaVariable(--_ctm-gri-lt-cn-gp);
142
+ row-gap: prepareMediaVariable(--_ctm-gri-lt-rw-gp);
143
+ flex-wrap: prepareMediaVariable(--_ctm-gri-lt-fx-wp);
144
+ overflow: prepareMediaVariable(--_ctm-gri-lt-fx-ow);
145
+
146
+ &.#{$flexRow} {
147
+ flex-direction: row;
148
+ align-items: prepareMediaVariable(--_ctm-gri-lt-an-is);
149
+ justify-content: prepareMediaVariable(--_ctm-gri-lt-jy-ct);
150
+ }
151
+ &.#{$flexRowReverse} {
152
+ flex-direction: row-reverse;
153
+ align-items: prepareMediaVariable(--_ctm-gri-lt-an-is);
154
+ justify-content: prepareMediaVariable(--_ctm-gri-lt-jy-ct);
155
+ }
156
+ &.#{$flexColumn} {
157
+ flex-direction: column;
158
+ justify-content: prepareMediaVariable(--_ctm-gri-lt-an-is);
159
+ align-items: prepareMediaVariable(--_ctm-gri-lt-jy-ct);
160
+ }
161
+ &.#{$flexColumnReverse} {
162
+ flex-direction: column-reverse;
163
+ justify-content: prepareMediaVariable(--_ctm-gri-lt-an-is);
164
+ align-items: prepareMediaVariable(--_ctm-gri-lt-jy-ct);
165
+ }
166
+ }
167
+ }
168
+ }
169
+ }