@sc-360-v2/storefront-cms-library 0.3.42 → 0.3.44

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.
@@ -1,6 +1,12 @@
1
1
  @use "sass:map";
2
2
  @use "sass:list";
3
3
  @use "./functions.scss" as *;
4
+ $flex: "flx";
5
+ $grid: "grd";
6
+ $flexRow: "rw";
7
+ $flexRowReverse: "rw-rv";
8
+ $flexColumn: "cln";
9
+ $flexColumnReverse: "cln-rv";
4
10
  [data-div-type="element"] {
5
11
  &[data-element-type="layouter-pro-item"] {
6
12
  // width: var(--_sf-con-nw-wh);
@@ -28,16 +34,46 @@
28
34
  background-repeat: prepareMediaVariable(--_ctm-layout-dn-bd-rt);
29
35
  background-size: prepareMediaVariable(--_ctm-layout-dn-bd-se);
30
36
  border-radius: prepareMediaVariable(--_ctm-layout-dn-br-rs);
37
+
38
+ display: var(--_d-flex) !important;
39
+ // flex-direction: column;
40
+ // gap: prepareMediaVariable(--_ctm-layout-lt-im-gp);
41
+ // align-items: prepareMediaVariable(--_ctm-layout-lt-jy-ct);
42
+ column-gap: prepareMediaVariable(--_ctm-layout-lt-cn-gp);
43
+ row-gap: prepareMediaVariable(--_ctm-layout-lt-rw-gp);
44
+
45
+ &:is(.#{$flex} > *) {
46
+ display: var(--_d-flex) !important;
47
+ flex-wrap: prepareMediaVariable(--_ctm-layout-lt-fx-wp);
48
+ overflow: prepareMediaVariable(--_ctm-layout-lt-fx-ow);
49
+
50
+ &.#{$flexRow} {
51
+ flex-direction: row;
52
+ align-items: prepareMediaVariable(--_ctm-layout-lt-an-is);
53
+ justify-content: prepareMediaVariable(--_ctm-layout-lt-jy-ct);
54
+ }
55
+ &.#{$flexRowReverse} {
56
+ flex-direction: row-reverse;
57
+ align-items: prepareMediaVariable(--_ctm-layout-lt-an-is);
58
+ justify-content: prepareMediaVariable(--_ctm-layout-lt-jy-ct);
59
+ }
60
+ &.#{$flexColumn} {
61
+ flex-direction: column;
62
+ justify-content: prepareMediaVariable(--_ctm-layout-lt-an-is);
63
+ align-items: prepareMediaVariable(--_ctm-layout-lt-jy-ct);
64
+ }
65
+ &.#{$flexColumnReverse} {
66
+ flex-direction: column-reverse;
67
+ justify-content: prepareMediaVariable(--_ctm-layout-lt-an-is);
68
+ align-items: prepareMediaVariable(--_ctm-layout-lt-jy-ct);
69
+ }
70
+ }
71
+
31
72
  &[data-show-border="true"] {
32
73
  border-color: prepareMediaVariable(--_ctm-layout-dn-br-cr);
33
74
  border-style: prepareMediaVariable(--_ctm-layout-dn-br-se);
34
75
  border-width: prepareMediaVariable(--_ctm-layout-dn-br-wh);
35
76
  }
36
-
37
- display: var(--_d-flex) !important;
38
- flex-direction: column;
39
- gap: prepareMediaVariable(--_ctm-layout-lt-im-gp);
40
- align-items: prepareMediaVariable(--_ctm-layout-lt-jy-ct);
41
77
  }
42
78
  }
43
79
  }
@@ -12,9 +12,9 @@ $flexColumnReverse: "cln-rv";
12
12
  &[data-element-type="layouter-pro"] {
13
13
  // width: var(--_sf-con-nw-wh);
14
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)});
15
+ width: calc(1% * #{prepareMediaVariable(--_ctm-layou-ele-nw-wh-vl)});
16
16
  max-width: 100% !important;
17
- width: min(#{prepareMediaVariable(--_ctm-layou-lt-wh)}, 100%);
17
+ // width: min(#{prepareMediaVariable(--_ctm-layou-lt-wh)}, 100%);
18
18
  // width: 100%;
19
19
  // height: var(--_ctm-con-lt-ht);
20
20
  margin: prepareMediaVariable(--_ctm-layou-lt-mn);