@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/tab-container.scss CHANGED
@@ -1,89 +1,139 @@
1
- @use "sass:map";
2
- @use "sass:list";
3
- [data-div-type="element"] {
4
- &[data-element-type="tbsContainer"] {
5
- // width: var(--_sf-con-nw-wh);
6
- // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
7
- // width: calc(1% * var(--_ctm-tbsco-ele-nw-wh-vl, auto));
8
- // width: 100%;
9
- // height: var(--_ctm-con-lt-ht);
10
- // margin: var(--_ctm-tbsco-lt-mn, var(--_ctm-lt-mn, --_tst-lt-mn));
11
-
12
- // width: 100%;
13
- // background: var(--_ctm-tbsco-dn-bd-cr);
14
-
15
- & > div {
16
- &.wrapper {
17
- width: 100%;
18
- height: 100%;
19
- padding: var(--_ctm-mob-tbsco-lt-pg, var(--_ctm-tab-tbsco-lt-pg, var(--_ctm-tbsco-lt-pg)));
20
-
21
- background-color: var(
22
- --_ctm-mob-tbsco-dn-bd-cr,
23
- var(--_ctm-tab-tbsco-dn-bd-cr, var(--_ctm-tbsco-dn-bd-cr))
24
- );
25
- background-image: var(
26
- --_ctm-mob-tbsco-dn-bd-ie,
27
- var(--_ctm-tab-tbsco-dn-bd-ie, var(--_ctm-tbsco-dn-bd-ie))
28
- );
29
- background-attachment: var(
30
- --_ctm-mob-tbsco-dn-bd-at,
31
- var(--_ctm-tab-tbsco-dn-bd-at, var(--_ctm-tbsco-dn-bd-at))
32
- );
33
- background-position: var(
34
- --_ctm-mob-tbsco-dn-bd-pn,
35
- var(--_ctm-tab-tbsco-dn-bd-pn, var(--_ctm-tbsco-dn-bd-pn))
36
- );
37
- background-repeat: var(
38
- --_ctm-mob-tbsco-dn-bd-rt,
39
- var(--_ctm-tab-tbsco-dn-bd-rt, var(--_ctm-tbsco-dn-bd-rt))
40
- );
41
- background-size: var(
42
- --_ctm-mob-tbsco-dn-bd-se,
43
- var(--_ctm-tab-tbsco-dn-bd-se, var(--_ctm-tbsco-dn-bd-se))
44
- );
45
- border-radius: var(
46
- --_ctm-mob-tbsco-dn-br-rs,
47
- var(--_ctm-tab-tbsco-dn-br-rs, var(--_ctm-tbsco-dn-br-rs))
48
- );
49
- border-color: var(
50
- --_ctm-mob-tbsco-dn-br-cr,
51
- var(--_ctm-tab-tbsco-dn-br-cr, var(--_ctm-tbsco-dn-br-cr))
52
- );
53
- border-style: var(
54
- --_ctm-mob-tbsco-dn-br-se,
55
- var(--_ctm-tab-tbsco-dn-br-se, var(--_ctm-tbsco-dn-br-se))
56
- );
57
- border-width: var(
58
- --_ctm-mob-tbsco-dn-br-wh,
59
- var(--_ctm-tab-tbsco-dn-br-wh, var(--_ctm-tbsco-dn-br-wh))
60
- );
61
- box-shadow: var(
62
- --_hover-show-shadow,
63
- var(
64
- --_sf-hr-bx-sw,
65
- var(
66
- --_show-shadow,
67
- var(
68
- --_ctm-mob-dn-dt-se-sw-ae,
69
- var(--_ctm-tab-dn-dt-se-sw-ae, var(--_ctm-dn-dt-se-sw-ae))
70
- )
71
- var(
72
- --_ctm-mob-dn-dt-se-sw-br,
73
- var(--_ctm-tab-dn-dt-se-sw-br, var(--_ctm-dn-dt-se-sw-br))
74
- )
75
- var(
76
- --_ctm-mob-dn-dt-se-sw-sd,
77
- var(--_ctm-tab-dn-dt-se-sw-sd, var(--_ctm-dn-dt-se-sw-sd))
78
- )
79
- var(
80
- --_ctm-mob-dn-dt-se-sw-cr,
81
- var(--_ctm-tab-dn-dt-se-sw-cr, var(--_ctm-dn-dt-se-sw-cr))
82
- )
83
- )
84
- )
85
- );
86
- }
87
- }
88
- }
89
- }
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+ @use "./functions.scss" as *;
4
+ [data-div-type="element"] {
5
+ &[data-element-type="tbsContainer"] {
6
+ // width: var(--_sf-con-nw-wh);
7
+ // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
8
+ // width: calc(1% * var(--_ctm-tbsco-ele-nw-wh-vl, auto));
9
+ // width: 100%;
10
+ // height: var(--_ctm-con-lt-ht);
11
+ // margin: var(--_ctm-tbsco-lt-mn, var(--_ctm-lt-mn, --_tst-lt-mn));
12
+
13
+ // width: 100%;
14
+ // background: var(--_ctm-tbsco-dn-bd-cr);
15
+
16
+ & > div {
17
+ &.wrapper {
18
+ width: 100%;
19
+ height: 100%;
20
+ padding: var(--_ctm-mob-tbsco-lt-pg, var(--_ctm-tab-tbsco-lt-pg, var(--_ctm-tbsco-lt-pg)));
21
+
22
+ &:is([data-background-type="color"] > *).wrapper {
23
+ background-color: #{prepareMediaVariable(--_ctm-tbsco-dn-bd-cr)};
24
+ }
25
+
26
+ &:is([data-background-type="gradient"] > *).wrapper {
27
+ --_sf-tbsco-gradient-angle: calc(
28
+ #{prepareMediaVariable(--_ctm-tbsco-dn-gt-ae, 90)} * 1deg
29
+ );
30
+ --_sf-tbsco-gradient-start-color: #{prepareMediaVariable(
31
+ --_ctm-tbsco-dn-gt-st-cr,
32
+ transparent
33
+ )};
34
+ --_sf-tbsco-gradient-start-position: calc(
35
+ #{prepareMediaVariable(--_ctm-tbsco-dn-gt-st-pn, 0)} * 1%
36
+ );
37
+ --_sf-tbsco-gradient-end-color: #{prepareMediaVariable(
38
+ --_ctm-tbsco-dn-gt-ed-cr,
39
+ transparent
40
+ )};
41
+ --_sf-tbsco-gradient-end-position: calc(
42
+ #{prepareMediaVariable(--_ctm-tbsco-dn-gt-ed-pn, 100)} * 1%
43
+ );
44
+ --_sf-tbsco-gradient-position: #{prepareMediaVariable(--_ctm-tbsco-dn-gt-pn, center)};
45
+ }
46
+
47
+ &:is([data-gradient-type="Linear Gradient"] > *).wrapper {
48
+ background-image: linear-gradient(
49
+ var(--_sf-tbsco-gradient-angle),
50
+ var(--_sf-tbsco-gradient-start-color) var(--_sf-tbsco-gradient-start-position),
51
+ var(--_sf-tbsco-gradient-end-color) var(--_sf-tbsco-gradient-end-position)
52
+ );
53
+ }
54
+
55
+ &:is([data-gradient-type="Radial Gradient"] > *).wrapper {
56
+ background-image: radial-gradient(
57
+ circle at var(--_sf-tbsco-gradient-position),
58
+ var(--_sf-tbsco-gradient-start-color) var(--_sf-tbsco-gradient-start-position),
59
+ var(--_sf-tbsco-gradient-end-color) var(--_sf-tbsco-gradient-end-position)
60
+ );
61
+ }
62
+ &:is([data-background-type="image"] > *).wrapper {
63
+ background-image: prepareMediaVariable(--_ctm-tbsco-dn-bd-ie);
64
+ background-attachment: prepareMediaVariable(--_ctm-tbsco-dn-bd-at);
65
+ background-position: prepareMediaVariable(--_ctm-tbsco-dn-bd-pn);
66
+ background-position-y: prepareMediaVariable(--_ctm-tbsco-dn-bd-pn-y);
67
+ background-repeat: prepareMediaVariable(--_ctm-tbsco-dn-bd-rt);
68
+ background-size: prepareMediaVariable(--_ctm-tbsco-dn-bd-se);
69
+ }
70
+
71
+ // background-color: var(
72
+ // --_ctm-mob-tbsco-dn-bd-cr,
73
+ // var(--_ctm-tab-tbsco-dn-bd-cr, var(--_ctm-tbsco-dn-bd-cr))
74
+ // );
75
+ // background-image: var(
76
+ // --_ctm-mob-tbsco-dn-bd-ie,
77
+ // var(--_ctm-tab-tbsco-dn-bd-ie, var(--_ctm-tbsco-dn-bd-ie))
78
+ // );
79
+ // background-attachment: var(
80
+ // --_ctm-mob-tbsco-dn-bd-at,
81
+ // var(--_ctm-tab-tbsco-dn-bd-at, var(--_ctm-tbsco-dn-bd-at))
82
+ // );
83
+ // background-position: var(
84
+ // --_ctm-mob-tbsco-dn-bd-pn,
85
+ // var(--_ctm-tab-tbsco-dn-bd-pn, var(--_ctm-tbsco-dn-bd-pn))
86
+ // );
87
+ // background-repeat: var(
88
+ // --_ctm-mob-tbsco-dn-bd-rt,
89
+ // var(--_ctm-tab-tbsco-dn-bd-rt, var(--_ctm-tbsco-dn-bd-rt))
90
+ // );
91
+ // background-size: var(
92
+ // --_ctm-mob-tbsco-dn-bd-se,
93
+ // var(--_ctm-tab-tbsco-dn-bd-se, var(--_ctm-tbsco-dn-bd-se))
94
+ // );
95
+ border-radius: var(
96
+ --_ctm-mob-tbsco-dn-br-rs,
97
+ var(--_ctm-tab-tbsco-dn-br-rs, var(--_ctm-tbsco-dn-br-rs))
98
+ );
99
+ border-color: var(
100
+ --_ctm-mob-tbsco-dn-br-cr,
101
+ var(--_ctm-tab-tbsco-dn-br-cr, var(--_ctm-tbsco-dn-br-cr))
102
+ );
103
+ border-style: var(
104
+ --_ctm-mob-tbsco-dn-br-se,
105
+ var(--_ctm-tab-tbsco-dn-br-se, var(--_ctm-tbsco-dn-br-se))
106
+ );
107
+ border-width: var(
108
+ --_ctm-mob-tbsco-dn-br-wh,
109
+ var(--_ctm-tab-tbsco-dn-br-wh, var(--_ctm-tbsco-dn-br-wh))
110
+ );
111
+ box-shadow: var(
112
+ --_hover-show-shadow,
113
+ var(
114
+ --_sf-hr-bx-sw,
115
+ var(
116
+ --_show-shadow,
117
+ var(
118
+ --_ctm-mob-dn-dt-se-sw-ae,
119
+ var(--_ctm-tab-dn-dt-se-sw-ae, var(--_ctm-dn-dt-se-sw-ae))
120
+ )
121
+ var(
122
+ --_ctm-mob-dn-dt-se-sw-br,
123
+ var(--_ctm-tab-dn-dt-se-sw-br, var(--_ctm-dn-dt-se-sw-br))
124
+ )
125
+ var(
126
+ --_ctm-mob-dn-dt-se-sw-sd,
127
+ var(--_ctm-tab-dn-dt-se-sw-sd, var(--_ctm-dn-dt-se-sw-sd))
128
+ )
129
+ var(
130
+ --_ctm-mob-dn-dt-se-sw-cr,
131
+ var(--_ctm-tab-dn-dt-se-sw-cr, var(--_ctm-dn-dt-se-sw-cr))
132
+ )
133
+ )
134
+ )
135
+ );
136
+ }
137
+ }
138
+ }
139
+ }
package/dist/types/builder/tools/element-edit/marchandiserSets.d.ts CHANGED
@@ -41,6 +41,14 @@ export declare const getDefaultData: () => {
41
41
  saturation: import("../../interfaces/global").CMSIBSizeInterface;
42
42
  highlights: import("../../interfaces/global").CMSIBSizeInterface;
43
43
  shadows: import("../../interfaces/global").CMSIBSizeInterface;
44
+ gradientType: import("../../interfaces/global").CMSIBSizeInterface;
45
+ gradientStartColor: CMSIBCommonInterface;
46
+ gradientEndColor: CMSIBCommonInterface;
47
+ gradientFlip: CMSIBCommonInterface;
48
+ gradientAngle: CMSIBCommonInterface;
49
+ gradientPosition: CMSIBCommonInterface;
50
+ gradientStartPosition: CMSIBCommonInterface;
51
+ gradientEndPosition: CMSIBCommonInterface;
44
52
  theme: CMSIBCommonInterface;
45
53
  font: CMSIBCommonInterface;
46
54
  fontSize: import("../../interfaces/global").CMSIBSizeInterface;
package/dist/types/global/types.d.ts CHANGED
@@ -50,3 +50,4 @@ export type SpotlightLineDisplayType = "solid" | "dots";
50
50
  export type SpotlightLineType = "bend" | "auto" | "straight";
51
51
  export type HorizontalOrientation = "left" | "right";
52
52
  export type VerticalOrientation = "top" | "bottom";
53
+ export type GradientPosition = string;