@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/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))
package/dist/light-box-v2.scss CHANGED
@@ -1,105 +1,154 @@
1
- @use "sass:map";
2
- @use "sass:list";
3
- @use "./functions.scss" as *;
4
-
5
- $lbMain: "#cms_lt_bx_mn";
6
- $mnwr: ".cms_lt_wr";
7
- $es: '[data-div-type="element"]';
8
- $le: '[data-element-type="lightboxv2"]';
9
- $activeElementSelector: "[data-has-clicked='true']";
10
-
11
- #{$lbMain} {
12
- position: var(--_p-fixed);
13
- inset: 0 0 0 0;
14
- z-index: calc(var(--_higher-zIndex) + var(--_lt-bx-zi, 1));
15
- --_cms-section-add-button-zIndex: var(--_higher-zIndex);
16
- --_cms-sl-df-zIndex: 1;
17
- --_cms-element-active-zIndex: calc(
18
- var(--_cms-section-add-button-zIndex) + var(--_cms-sl-df-zIndex) + 3
19
- );
20
- --_sf-element-vt-pd: max(
21
- 0.5px,
22
- 0.00625 * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
23
- );
24
-
25
- &:has(#{$activeElementSelector}) {
26
- // border: 1px solid var(--_accent-color-2-500);
27
- }
28
-
29
- & > div {
30
- &#{$mnwr} {
31
- position: var(--_p-absolute);
32
- inset: 0 0 0 0;
33
- background: var(--_sf-bg-ol-cr, rgba(0, 0, 0, 0.7));
34
- display: var(--_d-grid);
35
- grid-template-columns: 1fr;
36
- grid-template-rows: 1fr;
37
-
38
- & > div {
39
- &#{$es} {
40
- &#{$le} {
41
- display: var(--_d-grid);
42
- grid-template-rows: 1fr;
43
- grid-template-columns: 1fr;
44
- width: calc(
45
- 1% *
46
- var(
47
- --_ctm-mob-lig-ele-nw-wh-vl,
48
- var(--_ctm-tab-lig-ele-nw-wh-vl, var(--_ctm-lig-ele-nw-wh-vl, 30))
49
- )
50
- );
51
- height: var(
52
- --_ctm-mob-lig-lt-ht,
53
- var(--_ctm-tab-lig-lt-ht, var(--_ctm-lig-lt-ht, 400px))
54
- );
55
- max-width: 100%;
56
- max-height: 9999px;
57
- background-color: var(
58
- --_ctm-mob-lig-dn-bd-cr,
59
- var(--_ctm-tab-lig-dn-bd-cr, var(--_ctm-lig-dn-bd-cr))
60
- );
61
- background-image: var(
62
- --_ctm-mob-lig-dn-bd-ie,
63
- var(--_ctm-tab-lig-dn-bd-ie, var(--_ctm-lig-dn-bd-ie))
64
- );
65
- background-attachment: var(
66
- --_ctm-mob-lig-dn-bd-at,
67
- var(--_ctm-tab-lig-dn-bd-at, var(--_ctm-lig-dn-bd-at))
68
- );
69
- background-position: var(
70
- --_ctm-mob-lig-dn-bd-pn,
71
- var(--_ctm-tab-lig-dn-bd-pn, var(--_ctm-lig-dn-bd-pn))
72
- );
73
- background-repeat: var(
74
- --_ctm-mob-lig-dn-bd-rt,
75
- var(--_ctm-tab-lig-dn-bd-rt, var(--_ctm-lig-dn-bd-rt))
76
- );
77
- background-size: var(
78
- --_ctm-mob-lig-dn-bd-se,
79
- var(--_ctm-tab-lig-dn-bd-se, var(--_ctm-lig-dn-bd-se))
80
- );
81
- border-radius: prepareMediaVariable(--_ctm-lig-dn-br-rs, 0px);
82
- border-width: prepareMediaVariable(--_ctm-lig-dn-br-wh);
83
- border-style: prepareMediaVariable(--_ctm-lig-dn-br-se);
84
- border-color: prepareMediaVariable(--_ctm-lig-dn-br-cr);
85
- position: var(--_p-relative);
86
-
87
- // margin-inline-start: 35%;
88
- // margin-block-start: 2%;
89
-
90
- margin: var(--_ctm-mob-lig-lt-mn, var(--_ctm-tab-lig-lt-mn, var(--_ctm-lig-lt-mn)));
91
-
92
- & > div {
93
- &.wrapper {
94
- overflow-y: auto;
95
- scrollbar-width: none;
96
- width: 100%;
97
- height: 100%;
98
- }
99
- }
100
- }
101
- }
102
- }
103
- }
104
- }
105
- }
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+ @use "./functions.scss" as *;
4
+
5
+ $lbMain: "#cms_lt_bx_mn";
6
+ $mnwr: ".cms_lt_wr";
7
+ $es: '[data-div-type="element"]';
8
+ $le: '[data-element-type="lightboxv2"]';
9
+ $activeElementSelector: "[data-has-clicked='true']";
10
+
11
+ #{$lbMain} {
12
+ position: var(--_p-fixed);
13
+ inset: 0 0 0 0;
14
+ z-index: calc(var(--_higher-zIndex) + var(--_lt-bx-zi, 1));
15
+ --_cms-section-add-button-zIndex: var(--_higher-zIndex);
16
+ --_cms-sl-df-zIndex: 1;
17
+ --_cms-element-active-zIndex: calc(
18
+ var(--_cms-section-add-button-zIndex) + var(--_cms-sl-df-zIndex) + 3
19
+ );
20
+ --_sf-element-vt-pd: max(
21
+ 0.5px,
22
+ 0.00625 * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
23
+ );
24
+
25
+ &:has(#{$activeElementSelector}) {
26
+ // border: 1px solid var(--_accent-color-2-500);
27
+ }
28
+
29
+ & > div {
30
+ &#{$mnwr} {
31
+ position: var(--_p-absolute);
32
+ inset: 0 0 0 0;
33
+ background: var(--_sf-bg-ol-cr, rgba(0, 0, 0, 0.7));
34
+ display: var(--_d-grid);
35
+ grid-template-columns: 1fr;
36
+ grid-template-rows: 1fr;
37
+
38
+ & > div {
39
+ &#{$es} {
40
+ &#{$le} {
41
+ display: var(--_d-grid);
42
+ grid-template-rows: 1fr;
43
+ grid-template-columns: 1fr;
44
+ width: calc(
45
+ 1% *
46
+ var(
47
+ --_ctm-mob-lig-ele-nw-wh-vl,
48
+ var(--_ctm-tab-lig-ele-nw-wh-vl, var(--_ctm-lig-ele-nw-wh-vl, 30))
49
+ )
50
+ );
51
+ height: var(
52
+ --_ctm-mob-lig-lt-ht,
53
+ var(--_ctm-tab-lig-lt-ht, var(--_ctm-lig-lt-ht, 400px))
54
+ );
55
+ max-width: 100%;
56
+ max-height: 9999px;
57
+ &[data-background-type="color"] {
58
+ background-color: prepareMediaVariable(--_ctm-lig-dn-bd-cr);
59
+ }
60
+
61
+ &[data-background-type="gradient"] {
62
+ --_sf-lig-gradient-angle: calc(
63
+ #{prepareMediaVariable(--_ctm-lig-dn-gt-ae, 90)} * 1deg
64
+ );
65
+ --_sf-lig-gradient-start-color: #{prepareMediaVariable(
66
+ --_ctm-lig-dn-gt-st-cr,
67
+ transparent
68
+ )};
69
+ --_sf-lig-gradient-start-position: calc(
70
+ #{prepareMediaVariable(--_ctm-lig-dn-gt-st-pn, 0)} * 1%
71
+ );
72
+ --_sf-lig-gradient-end-color: #{prepareMediaVariable(
73
+ --_ctm-lig-dn-gt-ed-cr,
74
+ transparent
75
+ )};
76
+ --_sf-lig-gradient-end-position: calc(
77
+ #{prepareMediaVariable(--_ctm-lig-dn-gt-ed-pn, 100)} * 1%
78
+ );
79
+ --_sf-lig-gradient-position: #{prepareMediaVariable(--_ctm-lig-dn-gt-pn, center)};
80
+
81
+ &[data-gradient-type="Linear Gradient"] {
82
+ background-image: linear-gradient(
83
+ var(--_sf-lig-gradient-angle),
84
+ var(--_sf-lig-gradient-start-color) var(--_sf-lig-gradient-start-position),
85
+ var(--_sf-lig-gradient-end-color) var(--_sf-lig-gradient-end-position)
86
+ );
87
+ }
88
+
89
+ &[data-gradient-type="Radial Gradient"] {
90
+ background-image: radial-gradient(
91
+ circle at var(--_sf-lig-gradient-position),
92
+ var(--_sf-lig-gradient-start-color) var(--_sf-lig-gradient-start-position),
93
+ var(--_sf-lig-gradient-end-color) var(--_sf-lig-gradient-end-position)
94
+ );
95
+ }
96
+ }
97
+
98
+ &[data-background-type="image"] {
99
+ background-image: prepareMediaVariable(--_ctm-lig-dn-bd-ie);
100
+ background-attachment: prepareMediaVariable(--_ctm-lig-dn-bd-at);
101
+ background-position: prepareMediaVariable(--_ctm-lig-dn-bd-pn);
102
+ background-position-y: prepareMediaVariable(--_ctm-lig-dn-bd-pn-y);
103
+ background-repeat: prepareMediaVariable(--_ctm-lig-dn-bd-rt);
104
+ background-size: prepareMediaVariable(--_ctm-lig-dn-bd-se);
105
+ }
106
+ // background-color: var(
107
+ // --_ctm-mob-lig-dn-bd-cr,
108
+ // var(--_ctm-tab-lig-dn-bd-cr, var(--_ctm-lig-dn-bd-cr))
109
+ // );
110
+ // background-image: var(
111
+ // --_ctm-mob-lig-dn-bd-ie,
112
+ // var(--_ctm-tab-lig-dn-bd-ie, var(--_ctm-lig-dn-bd-ie))
113
+ // );
114
+ // background-attachment: var(
115
+ // --_ctm-mob-lig-dn-bd-at,
116
+ // var(--_ctm-tab-lig-dn-bd-at, var(--_ctm-lig-dn-bd-at))
117
+ // );
118
+ // background-position: var(
119
+ // --_ctm-mob-lig-dn-bd-pn,
120
+ // var(--_ctm-tab-lig-dn-bd-pn, var(--_ctm-lig-dn-bd-pn))
121
+ // );
122
+ // background-repeat: var(
123
+ // --_ctm-mob-lig-dn-bd-rt,
124
+ // var(--_ctm-tab-lig-dn-bd-rt, var(--_ctm-lig-dn-bd-rt))
125
+ // );
126
+ // background-size: var(
127
+ // --_ctm-mob-lig-dn-bd-se,
128
+ // var(--_ctm-tab-lig-dn-bd-se, var(--_ctm-lig-dn-bd-se))
129
+ // );
130
+ border-radius: prepareMediaVariable(--_ctm-lig-dn-br-rs, 0px);
131
+ border-width: prepareMediaVariable(--_ctm-lig-dn-br-wh);
132
+ border-style: prepareMediaVariable(--_ctm-lig-dn-br-se);
133
+ border-color: prepareMediaVariable(--_ctm-lig-dn-br-cr);
134
+ position: var(--_p-relative);
135
+
136
+ // margin-inline-start: 35%;
137
+ // margin-block-start: 2%;
138
+
139
+ margin: var(--_ctm-mob-lig-lt-mn, var(--_ctm-tab-lig-lt-mn, var(--_ctm-lig-lt-mn)));
140
+
141
+ & > div {
142
+ &.wrapper {
143
+ overflow-y: auto;
144
+ scrollbar-width: none;
145
+ width: 100%;
146
+ height: 100%;
147
+ }
148
+ }
149
+ }
150
+ }
151
+ }
152
+ }
153
+ }
154
+ }