@sc-360-v2/storefront-cms-library 0.3.2 → 0.3.3
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/breadcrumbs.scss +6 -0
- package/dist/builder.js +1 -1
- package/dist/icon-library.scss +13 -21
- package/dist/layouter-pro-item.scss +37 -0
- package/dist/layouter-pro.scss +43 -0
- package/dist/menu-v2.scss +6 -1
- package/dist/product-options.scss +205 -223
- package/dist/stack.scss +2 -2
- package/dist/types/builder/tools/element-edit/filters.d.ts +1 -39
- package/dist/types/builder/tools/element-edit/productOptions.d.ts +2 -1
- package/dist/types/builder/tools/element-edit/variantPicker.d.ts +2 -0
- package/dist/uom-selector.scss +2 -0
- package/dist/variant-picker.scss +464 -879
- package/dist/widget.scss +2 -0
- package/package.json +1 -1
package/dist/icon-library.scss
CHANGED
|
@@ -49,30 +49,22 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
49
49
|
background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
|
|
50
50
|
border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
|
|
51
51
|
|
|
52
|
-
.custom-icon {
|
|
53
|
-
object-fit: contain;
|
|
54
|
-
max-width: 100%;
|
|
55
|
-
max-height: 100%;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
52
|
.icon {
|
|
59
|
-
|
|
53
|
+
display: inline-flex;
|
|
54
|
+
justify-content: center;
|
|
55
|
+
align-items: center;
|
|
56
|
+
|
|
57
|
+
width: var(--_ctm-mob-dn-in-se, var(--_ctm-tab-dn-in-se, var(--_ctm-dn-in-se)));
|
|
58
|
+
height: var(--_ctm-mob-dn-in-se, var(--_ctm-tab-dn-in-se, var(--_ctm-dn-in-se)));
|
|
59
|
+
|
|
60
60
|
svg {
|
|
61
|
-
width:
|
|
62
|
-
height:
|
|
61
|
+
width: 100%;
|
|
62
|
+
height: 100%;
|
|
63
63
|
path {
|
|
64
|
-
stroke: var(
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
path,
|
|
69
|
-
rect,
|
|
70
|
-
circle,
|
|
71
|
-
line,
|
|
72
|
-
polyline,
|
|
73
|
-
polygon {
|
|
74
|
-
// stroke: var(--_ctm-dn-in-c1) !important;
|
|
75
|
-
fill: transparent !important;
|
|
64
|
+
stroke: var(
|
|
65
|
+
--_ctm-mob-dn-in-c1,
|
|
66
|
+
var(--_ctm-tab-dn-in-c1, var(--_ctm-dn-in-c1))
|
|
67
|
+
) !important;
|
|
76
68
|
}
|
|
77
69
|
}
|
|
78
70
|
}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
@use "sass:map";
|
|
2
|
+
@use "sass:list";
|
|
3
|
+
@use "./functions.scss" as *;
|
|
4
|
+
[data-div-type="element"] {
|
|
5
|
+
&[data-element-type="layouter-pro-item"] {
|
|
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-rep-ele-nw-wh-vl, auto));
|
|
9
|
+
// width: 100%;
|
|
10
|
+
// height: var(--_ctm-con-lt-ht);
|
|
11
|
+
// margin: var(--_ctm-rep-lt-mn, var(--_ctm-lt-mn, --_tst-lt-mn));
|
|
12
|
+
|
|
13
|
+
// width: 100%;
|
|
14
|
+
// background: var(--_ctm-repe-dn-bd-cr);
|
|
15
|
+
|
|
16
|
+
& > div {
|
|
17
|
+
&.wrapper {
|
|
18
|
+
width: 100%;
|
|
19
|
+
height: 100%;
|
|
20
|
+
padding: prepareMediaVariable(--_ctm-layout-lt-pg);
|
|
21
|
+
|
|
22
|
+
background-color: prepareMediaVariable(--_ctm-layout-dn-bd-cr);
|
|
23
|
+
background-image: prepareMediaVariable(--_ctm-layout-dn-bd-ie);
|
|
24
|
+
background-attachment: prepareMediaVariable(--_ctm-layout-dn-bd-at);
|
|
25
|
+
background-position: prepareMediaVariable(--_ctm-layout-dn-bd-pn);
|
|
26
|
+
background-repeat: prepareMediaVariable(--_ctm-layout-dn-bd-rt);
|
|
27
|
+
background-size: prepareMediaVariable(--_ctm-layout-dn-bd-se);
|
|
28
|
+
border-radius: prepareMediaVariable(--_ctm-layout-dn-br-rs);
|
|
29
|
+
&[data-show-border="true"] {
|
|
30
|
+
border-color: prepareMediaVariable(--_ctm-layout-dn-br-cr);
|
|
31
|
+
border-style: prepareMediaVariable(--_ctm-layout-dn-br-se);
|
|
32
|
+
border-width: prepareMediaVariable(--_ctm-layout-dn-br-wh);
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
@use "sass:map";
|
|
2
|
+
@use "sass:list";
|
|
3
|
+
@use "./functions.scss" as *;
|
|
4
|
+
$childItemSelector: '[data-element-type="layouter-pro-item"]';
|
|
5
|
+
[data-div-type="element"] {
|
|
6
|
+
&[data-element-type="layouter-pro"] {
|
|
7
|
+
// width: var(--_sf-con-nw-wh);
|
|
8
|
+
// width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
|
|
9
|
+
width: calc(1% * #{prepareMediaVariable(--_ctm-layou-ele-nw-wh-vl)});
|
|
10
|
+
// width: 100%;
|
|
11
|
+
// height: var(--_ctm-con-lt-ht);
|
|
12
|
+
margin: prepareMediaVariable(--_ctm-layou-lt-mn);
|
|
13
|
+
background-color: prepareMediaVariable(--_ctm-layou-dn-bd-cr);
|
|
14
|
+
background-image: prepareMediaVariable(--_ctm-layou-dn-bd-ie);
|
|
15
|
+
background-attachment: prepareMediaVariable(--_ctm-layou-dn-bd-at);
|
|
16
|
+
background-position: prepareMediaVariable(--_ctm-layou-dn-bd-pn);
|
|
17
|
+
background-repeat: prepareMediaVariable(--_ctm-layou-dn-bd-rt);
|
|
18
|
+
background-size: prepareMediaVariable(--_ctm-layou-dn-bd-se);
|
|
19
|
+
border-radius: prepareMediaVariable(--_ctm-layou-dn-br-rs);
|
|
20
|
+
padding: prepareMediaVariable(--_ctm-layou-lt-pg);
|
|
21
|
+
|
|
22
|
+
&[data-show-border="true"] {
|
|
23
|
+
border-color: prepareMediaVariable(--_ctm-layou-dn-br-cr);
|
|
24
|
+
border-style: prepareMediaVariable(--_ctm-layou-dn-br-se);
|
|
25
|
+
border-width: prepareMediaVariable(--_ctm-layou-dn-br-wh);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
& > div {
|
|
29
|
+
&.wrapper {
|
|
30
|
+
width: 100%;
|
|
31
|
+
gap: prepareMediaVariable(--_ctm-layou-lt-im-gp);
|
|
32
|
+
|
|
33
|
+
& > div {
|
|
34
|
+
&#{$childItemSelector} {
|
|
35
|
+
width: 100%;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
// grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
|
|
39
|
+
// grid-auto-rows: minmax(100px, 1fr);
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
}
|
package/dist/menu-v2.scss
CHANGED
|
@@ -13,6 +13,10 @@ $vtl: "[data-element-type='menu-v2'] > .vtl";
|
|
|
13
13
|
$hamburger: ".flex__menu__hamburger";
|
|
14
14
|
$hamburgerActive: "[data-hamburger-active='true']";
|
|
15
15
|
|
|
16
|
+
$defaultValues: (
|
|
17
|
+
--_min-submenu-height: getListOfResponsive(650px, 400px, 550px),
|
|
18
|
+
);
|
|
19
|
+
|
|
16
20
|
@mixin hamburgerCSS() {
|
|
17
21
|
position: relative;
|
|
18
22
|
display: var(--_d-flex);
|
|
@@ -50,7 +54,7 @@ $hamburgerActive: "[data-hamburger-active='true']";
|
|
|
50
54
|
|
|
51
55
|
@keyframes animThree {
|
|
52
56
|
100% {
|
|
53
|
-
max-height: 650px;
|
|
57
|
+
max-height: var(--_min-submenu-height, 650px);
|
|
54
58
|
opacity: 1;
|
|
55
59
|
visibility: visible;
|
|
56
60
|
overflow-y: auto;
|
|
@@ -66,6 +70,7 @@ $hamburgerActive: "[data-hamburger-active='true']";
|
|
|
66
70
|
|
|
67
71
|
[data-div-type="element"] {
|
|
68
72
|
&[data-element-type="menu-v2"] {
|
|
73
|
+
@include prepareMediaQueries($defaultValues);
|
|
69
74
|
width: calc(1% * #{prepareMediaVariable(--_ctm-ele-nw-wh-vl)});
|
|
70
75
|
// var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, auto)))
|
|
71
76
|
margin: prepareMediaVariable(--_ctm-lt-mn);
|