@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/layouter-item.scss CHANGED
@@ -1,5 +1,7 @@
1
1
  @use "sass:map";
2
2
  @use "sass:list";
3
+ @use "./functions.scss" as *;
4
+
3
5
  [data-div-type="element"] {
4
6
  &[data-element-type="layouter-item"] {
5
7
  // width: var(--_sf-con-nw-wh);
@@ -10,7 +12,7 @@
10
12
  // margin: var(--_ctm-rep-lt-mn, var(--_ctm-lt-mn, --_tst-lt-mn));
11
13
 
12
14
  // width: 100%;
13
- // background: var(--_ctm-repe-dn-bd-cr);
15
+ // background: var(--_ctm-layo-dn-bd-cr);
14
16
 
15
17
  & > div {
16
18
  &.wrapper {
@@ -18,30 +20,77 @@
18
20
  height: 100%;
19
21
  padding: var(--_ctm-mob-layo-lt-pg, var(--_ctm-tab-layo-lt-pg, var(--_ctm-layo-lt-pg)));
20
22
 
21
- background-color: var(
22
- --_ctm-mob-layo-dn-bd-cr,
23
- var(--_ctm-tab-layo-dn-bd-cr, var(--_ctm-layo-dn-bd-cr))
24
- );
25
- background-image: var(
26
- --_ctm-mob-layo-dn-bd-ie,
27
- var(--_ctm-tab-layo-dn-bd-ie, var(--_ctm-layo-dn-bd-ie))
28
- );
29
- background-attachment: var(
30
- --_ctm-mob-layo-dn-bd-at,
31
- var(--_ctm-tab-layo-dn-bd-at, var(--_ctm-layo-dn-bd-at))
32
- );
33
- background-position: var(
34
- --_ctm-mob-layo-dn-bd-pn,
35
- var(--_ctm-tab-layo-dn-bd-pn, var(--_ctm-layo-dn-bd-pn))
36
- );
37
- background-repeat: var(
38
- --_ctm-mob-layo-dn-bd-rt,
39
- var(--_ctm-tab-layo-dn-bd-rt, var(--_ctm-layo-dn-bd-rt))
40
- );
41
- background-size: var(
42
- --_ctm-mob-layo-dn-bd-se,
43
- var(--_ctm-tab-layo-dn-bd-se, var(--_ctm-layo-dn-bd-se))
44
- );
23
+ &:is([data-background-type="color"] > *).wrapper {
24
+ background-color: #{prepareMediaVariable(--_ctm-layo-dn-bd-cr)};
25
+ }
26
+
27
+ &:is([data-background-type="gradient"] > *).wrapper {
28
+ --_sf-layo-gradient-angle: calc(#{prepareMediaVariable(--_ctm-layo-dn-gt-ae, 90)} * 1deg);
29
+ --_sf-layo-gradient-start-color: #{prepareMediaVariable(
30
+ --_ctm-layo-dn-gt-st-cr,
31
+ transparent
32
+ )};
33
+ --_sf-layo-gradient-start-position: calc(
34
+ #{prepareMediaVariable(--_ctm-layo-dn-gt-st-pn, 0)} * 1%
35
+ );
36
+ --_sf-layo-gradient-end-color: #{prepareMediaVariable(
37
+ --_ctm-layo-dn-gt-ed-cr,
38
+ transparent
39
+ )};
40
+ --_sf-layo-gradient-end-position: calc(
41
+ #{prepareMediaVariable(--_ctm-layo-dn-gt-ed-pn, 100)} * 1%
42
+ );
43
+ --_sf-layo-gradient-position: #{prepareMediaVariable(--_ctm-layo-dn-gt-pn, center)};
44
+ }
45
+
46
+ &:is([data-gradient-type="Linear Gradient"] > *).wrapper {
47
+ background-image: linear-gradient(
48
+ var(--_sf-layo-gradient-angle),
49
+ var(--_sf-layo-gradient-start-color) var(--_sf-layo-gradient-start-position),
50
+ var(--_sf-layo-gradient-end-color) var(--_sf-layo-gradient-end-position)
51
+ );
52
+ }
53
+
54
+ &:is([data-gradient-type="Radial Gradient"] > *).wrapper {
55
+ background-image: radial-gradient(
56
+ circle at var(--_sf-layo-gradient-position),
57
+ var(--_sf-layo-gradient-start-color) var(--_sf-layo-gradient-start-position),
58
+ var(--_sf-layo-gradient-end-color) var(--_sf-layo-gradient-end-position)
59
+ );
60
+ }
61
+ &:is([data-background-type="image"] > *).wrapper {
62
+ background-image: prepareMediaVariable(--_ctm-layo-dn-bd-ie);
63
+ background-attachment: prepareMediaVariable(--_ctm-layo-dn-bd-at);
64
+ background-position: prepareMediaVariable(--_ctm-layo-dn-bd-pn);
65
+ background-position-y: prepareMediaVariable(--_ctm-layo-dn-bd-pn-y);
66
+ background-repeat: prepareMediaVariable(--_ctm-layo-dn-bd-rt);
67
+ background-size: prepareMediaVariable(--_ctm-layo-dn-bd-se);
68
+ }
69
+
70
+ // background-color: var(
71
+ // --_ctm-mob-layo-dn-bd-cr,
72
+ // var(--_ctm-tab-layo-dn-bd-cr, var(--_ctm-layo-dn-bd-cr))
73
+ // );
74
+ // background-image: var(
75
+ // --_ctm-mob-layo-dn-bd-ie,
76
+ // var(--_ctm-tab-layo-dn-bd-ie, var(--_ctm-layo-dn-bd-ie))
77
+ // );
78
+ // background-attachment: var(
79
+ // --_ctm-mob-layo-dn-bd-at,
80
+ // var(--_ctm-tab-layo-dn-bd-at, var(--_ctm-layo-dn-bd-at))
81
+ // );
82
+ // background-position: var(
83
+ // --_ctm-mob-layo-dn-bd-pn,
84
+ // var(--_ctm-tab-layo-dn-bd-pn, var(--_ctm-layo-dn-bd-pn))
85
+ // );
86
+ // background-repeat: var(
87
+ // --_ctm-mob-layo-dn-bd-rt,
88
+ // var(--_ctm-tab-layo-dn-bd-rt, var(--_ctm-layo-dn-bd-rt))
89
+ // );
90
+ // background-size: var(
91
+ // --_ctm-mob-layo-dn-bd-se,
92
+ // var(--_ctm-tab-layo-dn-bd-se, var(--_ctm-layo-dn-bd-se))
93
+ // );
45
94
  border-radius: var(
46
95
  --_ctm-mob-layo-dn-br-rs,
47
96
  var(--_ctm-tab-layo-dn-br-rs, var(--_ctm-layo-dn-br-rs))
package/dist/layouter-pro-item.scss CHANGED
@@ -27,12 +27,61 @@ $flexColumnReverse: "cln-rv";
27
27
  min-height: prepareMediaVariable(--_ctm-layout-lt-mn-ht);
28
28
  padding: prepareMediaVariable(--_ctm-layout-lt-pg);
29
29
 
30
- background-color: prepareMediaVariable(--_ctm-layout-dn-bd-cr);
31
- background-image: prepareMediaVariable(--_ctm-layout-dn-bd-ie);
32
- background-attachment: prepareMediaVariable(--_ctm-layout-dn-bd-at);
33
- background-position: prepareMediaVariable(--_ctm-layout-dn-bd-pn);
34
- background-repeat: prepareMediaVariable(--_ctm-layout-dn-bd-rt);
35
- background-size: prepareMediaVariable(--_ctm-layout-dn-bd-se);
30
+ &:is([data-background-type="color"] > *).wrapper {
31
+ background-color: #{prepareMediaVariable(--_ctm-layout-dn-bd-cr)};
32
+ }
33
+
34
+ &:is([data-background-type="gradient"] > *).wrapper {
35
+ --_sf-layout-gradient-angle: calc(
36
+ #{prepareMediaVariable(--_ctm-layout-dn-gt-ae, 90)} * 1deg
37
+ );
38
+ --_sf-layout-gradient-start-color: #{prepareMediaVariable(
39
+ --_ctm-layout-dn-gt-st-cr,
40
+ transparent
41
+ )};
42
+ --_sf-layout-gradient-start-position: calc(
43
+ #{prepareMediaVariable(--_ctm-layout-dn-gt-st-pn, 0)} * 1%
44
+ );
45
+ --_sf-layout-gradient-end-color: #{prepareMediaVariable(
46
+ --_ctm-layout-dn-gt-ed-cr,
47
+ transparent
48
+ )};
49
+ --_sf-layout-gradient-end-position: calc(
50
+ #{prepareMediaVariable(--_ctm-layout-dn-gt-ed-pn, 100)} * 1%
51
+ );
52
+ --_sf-layout-gradient-position: #{prepareMediaVariable(--_ctm-layout-dn-gt-pn, center)};
53
+ }
54
+
55
+ &:is([data-gradient-type="Linear Gradient"] > *).wrapper {
56
+ background-image: linear-gradient(
57
+ var(--_sf-layout-gradient-angle),
58
+ var(--_sf-layout-gradient-start-color) var(--_sf-layout-gradient-start-position),
59
+ var(--_sf-layout-gradient-end-color) var(--_sf-layout-gradient-end-position)
60
+ );
61
+ }
62
+
63
+ &:is([data-gradient-type="Radial Gradient"] > *).wrapper {
64
+ background-image: radial-gradient(
65
+ circle at var(--_sf-layout-gradient-position),
66
+ var(--_sf-layout-gradient-start-color) var(--_sf-layout-gradient-start-position),
67
+ var(--_sf-layout-gradient-end-color) var(--_sf-layout-gradient-end-position)
68
+ );
69
+ }
70
+ &:is([data-background-type="image"] > *).wrapper {
71
+ background-image: prepareMediaVariable(--_ctm-layout-dn-bd-ie);
72
+ background-attachment: prepareMediaVariable(--_ctm-layout-dn-bd-at);
73
+ background-position: prepareMediaVariable(--_ctm-layout-dn-bd-pn);
74
+ background-position-y: prepareMediaVariable(--_ctm-layout-dn-bd-pn-y);
75
+ background-repeat: prepareMediaVariable(--_ctm-layout-dn-bd-rt);
76
+ background-size: prepareMediaVariable(--_ctm-layout-dn-bd-se);
77
+ }
78
+
79
+ // background-color: prepareMediaVariable(--_ctm-layout-dn-bd-cr);
80
+ // background-image: prepareMediaVariable(--_ctm-layout-dn-bd-ie);
81
+ // background-attachment: prepareMediaVariable(--_ctm-layout-dn-bd-at);
82
+ // background-position: prepareMediaVariable(--_ctm-layout-dn-bd-pn);
83
+ // background-repeat: prepareMediaVariable(--_ctm-layout-dn-bd-rt);
84
+ // background-size: prepareMediaVariable(--_ctm-layout-dn-bd-se);
36
85
  border-radius: prepareMediaVariable(--_ctm-layout-dn-br-rs);
37
86
 
38
87
  // flex-direction: column;
package/dist/layouter-pro.scss CHANGED
@@ -1,88 +1,134 @@
1
- @use "sass:map";
2
- @use "sass:list";
3
- @use "./functions.scss" as *;
4
- $childItemSelector: '[data-element-type="layouter-pro-item"]';
5
- $flex: "flx";
6
- $grid: "grd";
7
- $flexRow: "rw";
8
- $flexRowReverse: "rw-rv";
9
- $flexColumn: "cln";
10
- $flexColumnReverse: "cln-rv";
11
- [data-div-type="element"] {
12
- &[data-element-type="layouter-pro"] {
13
- // width: var(--_sf-con-nw-wh);
14
- // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
15
- width: calc(1% * #{prepareMediaVariable(--_ctm-layou-ele-nw-wh-vl)});
16
- max-width: 100% !important;
17
- // width: min(#{prepareMediaVariable(--_ctm-layou-lt-wh)}, 100%);
18
- // width: 100%;
19
- // height: var(--_ctm-con-lt-ht);
20
- margin: prepareMediaVariable(--_ctm-layou-lt-mn);
21
- background-color: prepareMediaVariable(--_ctm-layou-dn-bd-cr);
22
- background-image: prepareMediaVariable(--_ctm-layou-dn-bd-ie);
23
- background-attachment: prepareMediaVariable(--_ctm-layou-dn-bd-at);
24
- background-position: prepareMediaVariable(--_ctm-layou-dn-bd-pn);
25
- background-repeat: prepareMediaVariable(--_ctm-layou-dn-bd-rt);
26
- background-size: prepareMediaVariable(--_ctm-layou-dn-bd-se);
27
- border-radius: prepareMediaVariable(--_ctm-layou-dn-br-rs);
28
- padding: prepareMediaVariable(--_ctm-layou-lt-pg);
29
-
30
- &[data-show-border="true"] {
31
- border-color: prepareMediaVariable(--_ctm-layou-dn-br-cr);
32
- border-style: prepareMediaVariable(--_ctm-layou-dn-br-se);
33
- border-width: prepareMediaVariable(--_ctm-layou-dn-br-wh);
34
- }
35
-
36
- &[data-show-boxshadow="true"] {
37
- box-shadow: var(
38
- --_hide-grid-shadow,
39
- prepareMediaVariable(--_ctm-layou-dn-sw-ae) prepareMediaVariable(--_ctm-layou-dn-sw-br)
40
- prepareMediaVariable(--_ctm-layou-dn-sw-sd) prepareMediaVariable(--_ctm-layou-dn-sw-cr)
41
- );
42
- }
43
-
44
- & > div {
45
- &.wrapper {
46
- width: 100%;
47
- min-height: prepareMediaVariable(--_ctm-layou-lt-mn-ht);
48
- column-gap: prepareMediaVariable(--_ctm-layou-lt-cn-gp);
49
- row-gap: prepareMediaVariable(--_ctm-layou-lt-rw-gp);
50
-
51
- &:is(.#{$flex} > *) {
52
- display: var(--_d-flex) !important;
53
- flex-wrap: prepareMediaVariable(--_ctm-layou-lt-fx-wp);
54
- overflow: prepareMediaVariable(--_ctm-layou-lt-fx-ow);
55
-
56
- &.#{$flexRow} {
57
- flex-direction: row;
58
- align-items: prepareMediaVariable(--_ctm-layou-lt-an-is);
59
- justify-content: prepareMediaVariable(--_ctm-layou-lt-jy-ct);
60
- }
61
- &.#{$flexRowReverse} {
62
- flex-direction: row-reverse;
63
- align-items: prepareMediaVariable(--_ctm-layou-lt-an-is);
64
- justify-content: prepareMediaVariable(--_ctm-layou-lt-jy-ct);
65
- }
66
- &.#{$flexColumn} {
67
- flex-direction: column;
68
- justify-content: prepareMediaVariable(--_ctm-layou-lt-an-is);
69
- align-items: prepareMediaVariable(--_ctm-layou-lt-jy-ct);
70
- }
71
- &.#{$flexColumnReverse} {
72
- flex-direction: column-reverse;
73
- justify-content: prepareMediaVariable(--_ctm-layou-lt-an-is);
74
- align-items: prepareMediaVariable(--_ctm-layou-lt-jy-ct);
75
- }
76
- }
77
-
78
- // & > div {
79
- // &#{$childItemSelector} {
80
- // // width: 100%;
81
- // }
82
- // }
83
- // grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
84
- // grid-auto-rows: minmax(100px, 1fr);
85
- }
86
- }
87
- }
88
- }
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+ @use "./functions.scss" as *;
4
+ $childItemSelector: '[data-element-type="layouter-pro-item"]';
5
+ $flex: "flx";
6
+ $grid: "grd";
7
+ $flexRow: "rw";
8
+ $flexRowReverse: "rw-rv";
9
+ $flexColumn: "cln";
10
+ $flexColumnReverse: "cln-rv";
11
+ [data-div-type="element"] {
12
+ &[data-element-type="layouter-pro"] {
13
+ // width: var(--_sf-con-nw-wh);
14
+ // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
15
+ width: calc(1% * #{prepareMediaVariable(--_ctm-layou-ele-nw-wh-vl)});
16
+ max-width: 100% !important;
17
+ // width: min(#{prepareMediaVariable(--_ctm-layou-lt-wh)}, 100%);
18
+ // width: 100%;
19
+ // height: var(--_ctm-con-lt-ht);
20
+ margin: prepareMediaVariable(--_ctm-layou-lt-mn);
21
+
22
+ &[data-background-type="color"] {
23
+ background-color: prepareMediaVariable(--_ctm-layou-dn-bd-cr);
24
+ }
25
+
26
+ &[data-background-type="gradient"] {
27
+ --_sf-layou-gradient-angle: calc(#{prepareMediaVariable(--_ctm-layou-dn-gt-ae, 90)} * 1deg);
28
+ --_sf-layou-gradient-start-color: #{prepareMediaVariable(
29
+ --_ctm-layou-dn-gt-st-cr,
30
+ transparent
31
+ )};
32
+ --_sf-layou-gradient-start-position: calc(
33
+ #{prepareMediaVariable(--_ctm-layou-dn-gt-st-pn, 0)} * 1%
34
+ );
35
+ --_sf-layou-gradient-end-color: #{prepareMediaVariable(--_ctm-layou-dn-gt-ed-cr, transparent)};
36
+ --_sf-layou-gradient-end-position: calc(
37
+ #{prepareMediaVariable(--_ctm-layou-dn-gt-ed-pn, 100)} * 1%
38
+ );
39
+ --_sf-layou-gradient-position: #{prepareMediaVariable(--_ctm-layou-dn-gt-pn, center)};
40
+
41
+ &[data-gradient-type="Linear Gradient"] {
42
+ background-image: linear-gradient(
43
+ var(--_sf-layou-gradient-angle),
44
+ var(--_sf-layou-gradient-start-color) var(--_sf-layou-gradient-start-position),
45
+ var(--_sf-layou-gradient-end-color) var(--_sf-layou-gradient-end-position)
46
+ );
47
+ }
48
+
49
+ &[data-gradient-type="Radial Gradient"] {
50
+ background-image: radial-gradient(
51
+ circle at var(--_sf-layou-gradient-position),
52
+ var(--_sf-layou-gradient-start-color) var(--_sf-layou-gradient-start-position),
53
+ var(--_sf-layou-gradient-end-color) var(--_sf-layou-gradient-end-position)
54
+ );
55
+ }
56
+ }
57
+
58
+ &[data-background-type="image"] {
59
+ background-image: prepareMediaVariable(--_ctm-layou-dn-bd-ie);
60
+ background-attachment: prepareMediaVariable(--_ctm-layou-dn-bd-at);
61
+ background-position: prepareMediaVariable(--_ctm-layou-dn-bd-pn);
62
+ background-position-y: prepareMediaVariable(--_ctm-layou-dn-bd-pn-y);
63
+ background-repeat: prepareMediaVariable(--_ctm-layou-dn-bd-rt);
64
+ background-size: prepareMediaVariable(--_ctm-layou-dn-bd-se);
65
+ }
66
+
67
+ // background-color: prepareMediaVariable(--_ctm-layou-dn-bd-cr);
68
+ // background-image: prepareMediaVariable(--_ctm-layou-dn-bd-ie);
69
+ // background-attachment: prepareMediaVariable(--_ctm-layou-dn-bd-at);
70
+ // background-position: prepareMediaVariable(--_ctm-layou-dn-bd-pn);
71
+ // background-repeat: prepareMediaVariable(--_ctm-layou-dn-bd-rt);
72
+ // background-size: prepareMediaVariable(--_ctm-layou-dn-bd-se);
73
+ border-radius: prepareMediaVariable(--_ctm-layou-dn-br-rs);
74
+ padding: prepareMediaVariable(--_ctm-layou-lt-pg);
75
+
76
+ &[data-show-border="true"] {
77
+ border-color: prepareMediaVariable(--_ctm-layou-dn-br-cr);
78
+ border-style: prepareMediaVariable(--_ctm-layou-dn-br-se);
79
+ border-width: prepareMediaVariable(--_ctm-layou-dn-br-wh);
80
+ }
81
+
82
+ &[data-show-boxshadow="true"] {
83
+ box-shadow: var(
84
+ --_hide-grid-shadow,
85
+ prepareMediaVariable(--_ctm-layou-dn-sw-ae) prepareMediaVariable(--_ctm-layou-dn-sw-br)
86
+ prepareMediaVariable(--_ctm-layou-dn-sw-sd) prepareMediaVariable(--_ctm-layou-dn-sw-cr)
87
+ );
88
+ }
89
+
90
+ & > div {
91
+ &.wrapper {
92
+ width: 100%;
93
+ min-height: prepareMediaVariable(--_ctm-layou-lt-mn-ht);
94
+ column-gap: prepareMediaVariable(--_ctm-layou-lt-cn-gp);
95
+ row-gap: prepareMediaVariable(--_ctm-layou-lt-rw-gp);
96
+
97
+ &:is(.#{$flex} > *) {
98
+ display: var(--_d-flex) !important;
99
+ flex-wrap: prepareMediaVariable(--_ctm-layou-lt-fx-wp);
100
+ overflow: prepareMediaVariable(--_ctm-layou-lt-fx-ow);
101
+
102
+ &.#{$flexRow} {
103
+ flex-direction: row;
104
+ align-items: prepareMediaVariable(--_ctm-layou-lt-an-is);
105
+ justify-content: prepareMediaVariable(--_ctm-layou-lt-jy-ct);
106
+ }
107
+ &.#{$flexRowReverse} {
108
+ flex-direction: row-reverse;
109
+ align-items: prepareMediaVariable(--_ctm-layou-lt-an-is);
110
+ justify-content: prepareMediaVariable(--_ctm-layou-lt-jy-ct);
111
+ }
112
+ &.#{$flexColumn} {
113
+ flex-direction: column;
114
+ justify-content: prepareMediaVariable(--_ctm-layou-lt-an-is);
115
+ align-items: prepareMediaVariable(--_ctm-layou-lt-jy-ct);
116
+ }
117
+ &.#{$flexColumnReverse} {
118
+ flex-direction: column-reverse;
119
+ justify-content: prepareMediaVariable(--_ctm-layou-lt-an-is);
120
+ align-items: prepareMediaVariable(--_ctm-layou-lt-jy-ct);
121
+ }
122
+ }
123
+
124
+ // & > div {
125
+ // &#{$childItemSelector} {
126
+ // // width: 100%;
127
+ // }
128
+ // }
129
+ // grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
130
+ // grid-auto-rows: minmax(100px, 1fr);
131
+ }
132
+ }
133
+ }
134
+ }
package/dist/layouter.scss CHANGED
@@ -21,30 +21,73 @@ $sliderControlDragging: "[flex-slider-control-moving='true']";
21
21
  --_ctm-mob-lay-lt-mn,
22
22
  var(--_ctm-tab-lay-lt-mn, var(--_ctm-lay-lt-mn, var(--_ctm-lt-mn, var(--_tst-lt-mn))))
23
23
  );
24
- background-color: var(
25
- --_ctm-mob-lay-dn-bd-cr,
26
- var(--_ctm-tab-lay-dn-bd-cr, var(--_ctm-lay-dn-bd-cr))
27
- );
28
- background-image: var(
29
- --_ctm-mob-lay-dn-bd-ie,
30
- var(--_ctm-tab-lay-dn-bd-ie, var(--_ctm-lay-dn-bd-ie))
31
- );
32
- background-attachment: var(
33
- --_ctm-mob-lay-dn-bd-at,
34
- var(--_ctm-tab-lay-dn-bd-at, var(--_ctm-lay-dn-bd-at))
35
- );
36
- background-position: var(
37
- --_ctm-mob-lay-dn-bd-pn,
38
- var(--_ctm-tab-lay-dn-bd-pn, var(--_ctm-lay-dn-bd-pn))
39
- );
40
- background-repeat: var(
41
- --_ctm-mob-lay-dn-bd-rt,
42
- var(--_ctm-tab-lay-dn-bd-rt, var(--_ctm-lay-dn-bd-rt))
43
- );
44
- background-size: var(
45
- --_ctm-mob-lay-dn-bd-se,
46
- var(--_ctm-tab-lay-dn-bd-se, var(--_ctm-lay-dn-bd-se))
47
- );
24
+
25
+ &[data-background-type="color"] {
26
+ background-color: prepareMediaVariable(--_ctm-lay-dn-bd-cr);
27
+ }
28
+
29
+ &[data-background-type="gradient"] {
30
+ --_sf-lay-gradient-angle: calc(#{prepareMediaVariable(--_ctm-lay-dn-gt-ae, 90)} * 1deg);
31
+ --_sf-lay-gradient-start-color: #{prepareMediaVariable(--_ctm-lay-dn-gt-st-cr, transparent)};
32
+ --_sf-lay-gradient-start-position: calc(
33
+ #{prepareMediaVariable(--_ctm-lay-dn-gt-st-pn, 0)} * 1%
34
+ );
35
+ --_sf-lay-gradient-end-color: #{prepareMediaVariable(--_ctm-lay-dn-gt-ed-cr, transparent)};
36
+ --_sf-lay-gradient-end-position: calc(
37
+ #{prepareMediaVariable(--_ctm-lay-dn-gt-ed-pn, 100)} * 1%
38
+ );
39
+ --_sf-lay-gradient-position: #{prepareMediaVariable(--_ctm-lay-dn-gt-pn, center)};
40
+
41
+ &[data-gradient-type="Linear Gradient"] {
42
+ background-image: linear-gradient(
43
+ var(--_sf-lay-gradient-angle),
44
+ var(--_sf-lay-gradient-start-color) var(--_sf-lay-gradient-start-position),
45
+ var(--_sf-lay-gradient-end-color) var(--_sf-lay-gradient-end-position)
46
+ );
47
+ }
48
+
49
+ &[data-gradient-type="Radial Gradient"] {
50
+ background-image: radial-gradient(
51
+ circle at var(--_sf-lay-gradient-position),
52
+ var(--_sf-lay-gradient-start-color) var(--_sf-lay-gradient-start-position),
53
+ var(--_sf-lay-gradient-end-color) var(--_sf-lay-gradient-end-position)
54
+ );
55
+ }
56
+ }
57
+
58
+ &[data-background-type="image"] {
59
+ background-image: prepareMediaVariable(--_ctm-lay-dn-bd-ie);
60
+ background-attachment: prepareMediaVariable(--_ctm-lay-dn-bd-at);
61
+ background-position: prepareMediaVariable(--_ctm-lay-dn-bd-pn);
62
+ background-position-y: prepareMediaVariable(--_ctm-lay-dn-bd-pn-y);
63
+ background-repeat: prepareMediaVariable(--_ctm-lay-dn-bd-rt);
64
+ background-size: prepareMediaVariable(--_ctm-lay-dn-bd-se);
65
+ }
66
+
67
+ // background-color: var(
68
+ // --_ctm-mob-lay-dn-bd-cr,
69
+ // var(--_ctm-tab-lay-dn-bd-cr, var(--_ctm-lay-dn-bd-cr))
70
+ // );
71
+ // background-image: var(
72
+ // --_ctm-mob-lay-dn-bd-ie,
73
+ // var(--_ctm-tab-lay-dn-bd-ie, var(--_ctm-lay-dn-bd-ie))
74
+ // );
75
+ // background-attachment: var(
76
+ // --_ctm-mob-lay-dn-bd-at,
77
+ // var(--_ctm-tab-lay-dn-bd-at, var(--_ctm-lay-dn-bd-at))
78
+ // );
79
+ // background-position: var(
80
+ // --_ctm-mob-lay-dn-bd-pn,
81
+ // var(--_ctm-tab-lay-dn-bd-pn, var(--_ctm-lay-dn-bd-pn))
82
+ // );
83
+ // background-repeat: var(
84
+ // --_ctm-mob-lay-dn-bd-rt,
85
+ // var(--_ctm-tab-lay-dn-bd-rt, var(--_ctm-lay-dn-bd-rt))
86
+ // );
87
+ // background-size: var(
88
+ // --_ctm-mob-lay-dn-bd-se,
89
+ // var(--_ctm-tab-lay-dn-bd-se, var(--_ctm-lay-dn-bd-se))
90
+ // );
48
91
  border-radius: var(
49
92
  --_ctm-mob-lay-dn-br-rs,
50
93
  var(--_ctm-tab-lay-dn-br-rs, var(--_ctm-lay-dn-br-rs))