@sc-360-v2/storefront-cms-library 0.5.24 → 0.5.26

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 (25) hide show
  1. package/dist/brand.scss +136 -93
  2. package/dist/breadcrumbs.scss +827 -802
  3. package/dist/buy-for-tab-container.scss +141 -90
  4. package/dist/category-groups-product-grid.scss +186 -186
  5. package/dist/category.scss +67 -24
  6. package/dist/container.scss +74 -24
  7. package/dist/grid.scss +169 -119
  8. package/dist/layouter-item.scss +74 -25
  9. package/dist/layouter-pro-item.scss +55 -6
  10. package/dist/layouter-pro.scss +134 -88
  11. package/dist/layouter.scss +67 -24
  12. package/dist/light-box-v2.scss +154 -105
  13. package/dist/line.scss +5 -1
  14. package/dist/marchandiserSets.scss +107 -60
  15. package/dist/mega-menu-container.scss +73 -24
  16. package/dist/mega-menu.scss +25 -3
  17. package/dist/product-image.scss +1 -1
  18. package/dist/product.scss +140 -97
  19. package/dist/productDetails.scss +113 -70
  20. package/dist/repeater-item.scss +69 -24
  21. package/dist/repeater.scss +73 -24
  22. package/dist/section.scss +53 -7
  23. package/dist/stack.scss +171 -129
  24. package/dist/tab-container.scss +139 -89
  25. package/package.json +1 -1
package/dist/category.scss CHANGED
@@ -1,5 +1,6 @@
1
1
  @use "sass:map";
2
2
  @use "sass:list";
3
+ @use "./functions.scss" as *;
3
4
 
4
5
  $resizerId: "[data-cms-tool='cms-element-resizer']";
5
6
  $resizeActive: '[data-cms-element-resizer="true"]';
@@ -21,30 +22,72 @@ $resizeActive: '[data-cms-element-resizer="true"]';
21
22
 
22
23
  margin: var(--_ctm-mob-cat-lt-mn, var(--_ctm-tab-cat-lt-mn, var(--_ctm-cat-lt-mn)));
23
24
 
24
- background-color: var(
25
- --_ctm-mob-cat-dn-bd-cr,
26
- var(--_ctm-tab-cat-dn-bd-cr, var(--_ctm-cat-dn-bd-cr))
27
- );
28
- background-image: var(
29
- --_ctm-mob-cat-dn-bd-ie,
30
- var(--_ctm-tab-cat-dn-bd-ie, var(--_ctm-cat-dn-bd-ie))
31
- );
32
- background-attachment: var(
33
- --_ctm-mob-cat-dn-bd-at,
34
- var(--_ctm-tab-cat-dn-bd-at, var(--_ctm-cat-dn-bd-at))
35
- );
36
- background-position: var(
37
- --_ctm-mob-cat-dn-bd-pn,
38
- var(--_ctm-tab-cat-dn-bd-pn, var(--_ctm-cat-dn-bd-pn))
39
- );
40
- background-repeat: var(
41
- --_ctm-mob-cat-dn-bd-rt,
42
- var(--_ctm-tab-cat-dn-bd-rt, var(--_ctm-cat-dn-bd-rt))
43
- );
44
- background-size: var(
45
- --_ctm-mob-cat-dn-bd-se,
46
- var(--_ctm-tab-cat-dn-bd-se, var(--_ctm-cat-dn-bd-se))
47
- );
25
+ &[data-background-type="color"] {
26
+ background-color: prepareMediaVariable(--_ctm-cat-dn-bd-cr);
27
+ }
28
+
29
+ &[data-background-type="gradient"] {
30
+ --_sf-cat-gradient-angle: calc(#{prepareMediaVariable(--_ctm-cat-dn-gt-ae, 90)} * 1deg);
31
+ --_sf-cat-gradient-start-color: #{prepareMediaVariable(--_ctm-cat-dn-gt-st-cr, transparent)};
32
+ --_sf-cat-gradient-start-position: calc(
33
+ #{prepareMediaVariable(--_ctm-cat-dn-gt-st-pn, 0)} * 1%
34
+ );
35
+ --_sf-cat-gradient-end-color: #{prepareMediaVariable(--_ctm-cat-dn-gt-ed-cr, transparent)};
36
+ --_sf-cat-gradient-end-position: calc(
37
+ #{prepareMediaVariable(--_ctm-cat-dn-gt-ed-pn, 100)} * 1%
38
+ );
39
+ --_sf-cat-gradient-position: #{prepareMediaVariable(--_ctm-cat-dn-gt-pn, center)};
40
+
41
+ &[data-gradient-type="Linear Gradient"] {
42
+ background-image: linear-gradient(
43
+ var(--_sf-cat-gradient-angle),
44
+ var(--_sf-cat-gradient-start-color) var(--_sf-cat-gradient-start-position),
45
+ var(--_sf-cat-gradient-end-color) var(--_sf-cat-gradient-end-position)
46
+ );
47
+ }
48
+
49
+ &[data-gradient-type="Radial Gradient"] {
50
+ background-image: radial-gradient(
51
+ circle at var(--_sf-cat-gradient-position),
52
+ var(--_sf-cat-gradient-start-color) var(--_sf-cat-gradient-start-position),
53
+ var(--_sf-cat-gradient-end-color) var(--_sf-cat-gradient-end-position)
54
+ );
55
+ }
56
+ }
57
+
58
+ &[data-background-type="image"] {
59
+ background-image: prepareMediaVariable(--_ctm-cat-dn-bd-ie);
60
+ background-attachment: prepareMediaVariable(--_ctm-cat-dn-bd-at);
61
+ background-position: prepareMediaVariable(--_ctm-cat-dn-bd-pn);
62
+ background-position-y: prepareMediaVariable(--_ctm-cat-dn-bd-pn-y);
63
+ background-repeat: prepareMediaVariable(--_ctm-cat-dn-bd-rt);
64
+ background-size: prepareMediaVariable(--_ctm-cat-dn-bd-se);
65
+ }
66
+
67
+ // background-color: var(
68
+ // --_ctm-mob-cat-dn-bd-cr,
69
+ // var(--_ctm-tab-cat-dn-bd-cr, var(--_ctm-cat-dn-bd-cr))
70
+ // );
71
+ // background-image: var(
72
+ // --_ctm-mob-cat-dn-bd-ie,
73
+ // var(--_ctm-tab-cat-dn-bd-ie, var(--_ctm-cat-dn-bd-ie))
74
+ // );
75
+ // background-attachment: var(
76
+ // --_ctm-mob-cat-dn-bd-at,
77
+ // var(--_ctm-tab-cat-dn-bd-at, var(--_ctm-cat-dn-bd-at))
78
+ // );
79
+ // background-position: var(
80
+ // --_ctm-mob-cat-dn-bd-pn,
81
+ // var(--_ctm-tab-cat-dn-bd-pn, var(--_ctm-cat-dn-bd-pn))
82
+ // );
83
+ // background-repeat: var(
84
+ // --_ctm-mob-cat-dn-bd-rt,
85
+ // var(--_ctm-tab-cat-dn-bd-rt, var(--_ctm-cat-dn-bd-rt))
86
+ // );
87
+ // background-size: var(
88
+ // --_ctm-mob-cat-dn-bd-se,
89
+ // var(--_ctm-tab-cat-dn-bd-se, var(--_ctm-cat-dn-bd-se))
90
+ // );
48
91
  padding: var(--_ctm-cat-lt-pg, var(--_tst-lt-pg));
49
92
 
50
93
  // height: 100%;
package/dist/container.scss CHANGED
@@ -17,6 +17,56 @@ $activeElementSelector: "[data-has-clicked='true']";
17
17
  // width: 100%;
18
18
  // height: var(--_ctm-con-lt-ht);
19
19
 
20
+ &[data-background-type="color"] {
21
+ & > .wrapper {
22
+ background-color: prepareMediaVariable(--_ctm-con-dn-bd-cr);
23
+ }
24
+ }
25
+
26
+ &[data-background-type="gradient"] {
27
+ --_sf-con-gradient-angle: calc(#{prepareMediaVariable(--_ctm-con-dn-gt-ae, 90)} * 1deg);
28
+ --_sf-con-gradient-start-color: #{prepareMediaVariable(--_ctm-con-dn-gt-st-cr, transparent)};
29
+ --_sf-con-gradient-start-position: calc(
30
+ #{prepareMediaVariable(--_ctm-con-dn-gt-st-pn, 0)} * 1%
31
+ );
32
+ --_sf-con-gradient-end-color: #{prepareMediaVariable(--_ctm-con-dn-gt-ed-cr, transparent)};
33
+ --_sf-con-gradient-end-position: calc(
34
+ #{prepareMediaVariable(--_ctm-con-dn-gt-ed-pn, 100)} * 1%
35
+ );
36
+ --_sf-con-gradient-position: #{prepareMediaVariable(--_ctm-con-dn-gt-pn, center)};
37
+
38
+ &[data-gradient-type="Linear Gradient"] {
39
+ & > .wrapper {
40
+ background-image: linear-gradient(
41
+ var(--_sf-con-gradient-angle),
42
+ var(--_sf-con-gradient-start-color) var(--_sf-con-gradient-start-position),
43
+ var(--_sf-con-gradient-end-color) var(--_sf-con-gradient-end-position)
44
+ );
45
+ }
46
+ }
47
+
48
+ &[data-gradient-type="Radial Gradient"] {
49
+ & > .wrapper {
50
+ background-image: radial-gradient(
51
+ circle at var(--_sf-con-gradient-position),
52
+ var(--_sf-con-gradient-start-color) var(--_sf-con-gradient-start-position),
53
+ var(--_sf-con-gradient-end-color) var(--_sf-con-gradient-end-position)
54
+ );
55
+ }
56
+ }
57
+ }
58
+
59
+ &[data-background-type="image"] {
60
+ & > .wrapper {
61
+ background-image: prepareMediaVariable(--_ctm-con-dn-bd-ie);
62
+ background-attachment: prepareMediaVariable(--_ctm-con-dn-bd-at);
63
+ background-position: prepareMediaVariable(--_ctm-con-dn-bd-pn);
64
+ background-position-y: prepareMediaVariable(--_ctm-con-dn-bd-pn-y);
65
+ background-repeat: prepareMediaVariable(--_ctm-con-dn-bd-rt);
66
+ background-size: prepareMediaVariable(--_ctm-con-dn-bd-se);
67
+ }
68
+ }
69
+
20
70
  width: calc(
21
71
  1% *
22
72
  var(
@@ -65,30 +115,30 @@ $activeElementSelector: "[data-has-clicked='true']";
65
115
  min-height: prepareMediaVariable(--_ctm-con-lt-mn-ht);
66
116
  padding: var(--_ctm-mob-con-lt-pg, var(--_ctm-tab-con-lt-pg, var(--_ctm-con-lt-pg)));
67
117
 
68
- background-color: var(
69
- --_ctm-mob-con-dn-bd-cr,
70
- var(--_ctm-tab-con-dn-bd-cr, var(--_ctm-con-dn-bd-cr))
71
- );
72
- background-image: var(
73
- --_ctm-mob-con-dn-bd-ie,
74
- var(--_ctm-tab-con-dn-bd-ie, var(--_ctm-con-dn-bd-ie))
75
- );
76
- background-attachment: var(
77
- --_ctm-mob-con-dn-bd-at,
78
- var(--_ctm-tab-con-dn-bd-at, var(--_ctm-con-dn-bd-at))
79
- );
80
- background-position: var(
81
- --_ctm-mob-con-dn-bd-pn,
82
- var(--_ctm-tab-con-dn-bd-pn, var(--_ctm-con-dn-bd-pn))
83
- );
84
- background-repeat: var(
85
- --_ctm-mob-con-dn-bd-rt,
86
- var(--_ctm-tab-con-dn-bd-rt, var(--_ctm-con-dn-bd-rt))
87
- );
88
- background-size: var(
89
- --_ctm-mob-con-dn-bd-se,
90
- var(--_ctm-tab-con-dn-bd-se, var(--_ctm-con-dn-bd-se))
91
- );
118
+ // background-color: var(
119
+ // --_ctm-mob-con-dn-bd-cr,
120
+ // var(--_ctm-tab-con-dn-bd-cr, var(--_ctm-con-dn-bd-cr))
121
+ // );
122
+ // background-image: var(
123
+ // --_ctm-mob-con-dn-bd-ie,
124
+ // var(--_ctm-tab-con-dn-bd-ie, var(--_ctm-con-dn-bd-ie))
125
+ // );
126
+ // background-attachment: var(
127
+ // --_ctm-mob-con-dn-bd-at,
128
+ // var(--_ctm-tab-con-dn-bd-at, var(--_ctm-con-dn-bd-at))
129
+ // );
130
+ // background-position: var(
131
+ // --_ctm-mob-con-dn-bd-pn,
132
+ // var(--_ctm-tab-con-dn-bd-pn, var(--_ctm-con-dn-bd-pn))
133
+ // );
134
+ // background-repeat: var(
135
+ // --_ctm-mob-con-dn-bd-rt,
136
+ // var(--_ctm-tab-con-dn-bd-rt, var(--_ctm-con-dn-bd-rt))
137
+ // );
138
+ // background-size: var(
139
+ // --_ctm-mob-con-dn-bd-se,
140
+ // var(--_ctm-tab-con-dn-bd-se, var(--_ctm-con-dn-bd-se))
141
+ // );
92
142
  border-radius: var(
93
143
  --_ctm-mob-con-dn-br-rs,
94
144
  var(--_ctm-tab-con-dn-br-rs, var(--_ctm-con-dn-br-rs))
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
+ }
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))