@sc-360-v2/storefront-cms-library 0.2.100 → 0.3.0

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,8 +1,6 @@
1
1
  @use "sass:map";
2
2
  @use "sass:list";
3
- @function ctm-var($base) {
4
- @return unquote("var(--_ctm-mob-#{$base}, var(--_ctm-tab-#{$base}, var(--_ctm-#{$base})))");
5
- }
3
+
6
4
  [data-div-type="element"] {
7
5
  &[data-element-type="paymentMethods"] {
8
6
  // width: var(--_lt-wh);
@@ -36,13 +34,6 @@
36
34
  display: flex;
37
35
  flex-direction: column;
38
36
  padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
39
- background-color: ctm-var(dn-pt-md-wt-bd-cr);
40
- border-width: ctm-var(dn-pt-md-wt-br-wh);
41
- border-color: ctm-var(dn-pt-md-wt-br-cr);
42
- border-style: ctm-var(dn-pt-md-wt-br-se);
43
- border-radius: ctm-var(dn-pt-md-wt-br-rs);
44
- box-shadow: ctm-var(dn-pt-md-wt-sw-ae) ctm-var(dn-pt-md-wt-sw-br) ctm-var(dn-pt-md-wt-sw-sd)
45
- ctm-var(dn-pt-md-wt-sw-cr);
46
37
  .title-content {
47
38
  display: flex;
48
39
  flex-direction: column;
@@ -50,28 +41,10 @@
50
41
  font-size: 24px;
51
42
  margin-bottom: 10px;
52
43
  color: #000;
53
- font-family: ctm-var(dn-pt-md-te-ft-fy);
54
- font-size: ctm-var(dn-pt-md-te-ft-se);
55
- color: ctm-var(dn-pt-md-te-cr);
56
- font-weight: ctm-var(dn-pt-md-te-ft-wt);
57
- font-style: ctm-var(dn-pt-md-te-ft-se-ic);
58
- text-decoration: ctm-var(dn-pt-md-te-ue);
59
- text-align: ctm-var(dn-pt-md-te-tt-an);
60
- letter-spacing: ctm-var(dn-pt-md-te-lr-sg);
61
- line-height: ctm-var(dn-pt-md-te-le-ht);
62
44
  }
63
45
  .description {
64
46
  font-size: 16px;
65
47
  color: #000;
66
- font-family: ctm-var(dn-pt-md-dn-ft-fy);
67
- font-size: ctm-var(dn-pt-md-dn-ft-se);
68
- color: ctm-var(dn-pt-md-dn-cr);
69
- font-weight: ctm-var(dn-pt-md-dn-ft-wt);
70
- font-style: ctm-var(dn-pt-md-dn-ft-se-ic);
71
- text-decoration: ctm-var(dn-pt-md-dn-ue);
72
- text-align: ctm-var(dn-pt-md-dn-tt-an);
73
- letter-spacing: ctm-var(dn-pt-md-dn-lr-sg);
74
- line-height: ctm-var(dn-pt-md-dn-le-ht);
75
48
  }
76
49
  }
77
50
  .payment__methods__container {
@@ -83,13 +56,6 @@
83
56
  --_ctm-mob-lt-im-ct-at,
84
57
  var(--_ctm-tab-lt-im-ct-at, var(--_ctm-lt-im-ct-at))
85
58
  );
86
- background-color: ctm-var(dn-pt-md-cr-dn-bd-cr);
87
- border-width: ctm-var(dn-pt-md-cr-dn-br-wh);
88
- border-color: ctm-var(dn-pt-md-cr-dn-br-cr);
89
- border-style: ctm-var(dn-pt-md-cr-dn-br-se);
90
- border-radius: ctm-var(dn-pt-md-cr-dn-br-rs);
91
- box-shadow: ctm-var(dn-pt-md-cr-dn-sw-ae) ctm-var(dn-pt-md-cr-dn-sw-br)
92
- ctm-var(dn-pt-md-cr-dn-sw-sd) ctm-var(dn-pt-md-cr-dn-sw-cr);
93
59
 
94
60
  .horizontal {
95
61
  display: flex;
@@ -105,15 +71,6 @@
105
71
  }
106
72
  .item {
107
73
  padding: var(--_ctm-mob-lt-im-pg, var(--_ctm-tab-lt-im-pg, var(--_ctm-lt-im-pg)));
108
- font-family: ctm-var(dn-pt-md-cr-dn-ft-fy);
109
- font-size: ctm-var(dn-pt-md-cr-dn-ft-se);
110
- color: ctm-var(dn-pt-md-cr-dn-cr);
111
- font-weight: ctm-var(dn-pt-md-cr-dn-ft-wt);
112
- font-style: ctm-var(dn-pt-md-cr-dn-ft-se-ic);
113
- text-decoration: ctm-var(dn-pt-md-cr-dn-ue);
114
- text-align: ctm-var(dn-pt-md-cr-dn-tt-an);
115
- letter-spacing: ctm-var(dn-pt-md-cr-dn-lr-sg);
116
- line-height: ctm-var(dn-pt-md-cr-dn-le-ht);
117
74
  img {
118
75
  width: 50px;
119
76
  height: 30px;
@@ -134,15 +91,6 @@
134
91
  }
135
92
  .item {
136
93
  padding: var(--_ctm-mob-lt-im-pg, var(--_ctm-tab-lt-im-pg, var(--_ctm-lt-im-pg)));
137
- font-family: ctm-var(dn-pt-md-cr-dn-ft-fy);
138
- font-size: ctm-var(dn-pt-md-cr-dn-ft-se);
139
- color: ctm-var(dn-pt-md-cr-dn-cr);
140
- font-weight: ctm-var(dn-pt-md-cr-dn-ft-wt);
141
- font-style: ctm-var(dn-pt-md-cr-dn-ft-se-ic);
142
- text-decoration: ctm-var(dn-pt-md-cr-dn-ue);
143
- text-align: ctm-var(dn-pt-md-cr-dn-tt-an);
144
- letter-spacing: ctm-var(dn-pt-md-cr-dn-lr-sg);
145
- line-height: ctm-var(dn-pt-md-cr-dn-le-ht);
146
94
  img {
147
95
  width: 50px;
148
96
  height: 30px;
@@ -192,15 +140,6 @@
192
140
  var(--_ctm-tab-lt-ct-at, var(--_ctm-lt-ct-at))
193
141
  );
194
142
  border: 0;
195
- font-family: ctm-var(dn-pt-md-cr-dn-ft-fy);
196
- font-size: ctm-var(dn-pt-md-cr-dn-ft-se);
197
- color: ctm-var(dn-pt-md-cr-dn-cr);
198
- font-weight: ctm-var(dn-pt-md-cr-dn-ft-wt);
199
- font-style: ctm-var(dn-pt-md-cr-dn-ft-se-ic);
200
- text-decoration: ctm-var(dn-pt-md-cr-dn-ue);
201
- text-align: ctm-var(dn-pt-md-cr-dn-tt-an);
202
- letter-spacing: ctm-var(dn-pt-md-cr-dn-lr-sg);
203
- line-height: ctm-var(dn-pt-md-cr-dn-le-ht);
204
143
  }
205
144
  }
206
145
  }
@@ -219,15 +158,6 @@
219
158
  --_ctm-mob-lt-ct-at,
220
159
  var(--_ctm-tab-lt-ct-at, var(--_ctm-lt-ct-at))
221
160
  );
222
- font-family: ctm-var(dn-pt-md-cr-dn-ft-fy);
223
- font-size: ctm-var(dn-pt-md-cr-dn-ft-se);
224
- color: ctm-var(dn-pt-md-cr-dn-cr);
225
- font-weight: ctm-var(dn-pt-md-cr-dn-ft-wt);
226
- font-style: ctm-var(dn-pt-md-cr-dn-ft-se-ic);
227
- text-decoration: ctm-var(dn-pt-md-cr-dn-ue);
228
- text-align: ctm-var(dn-pt-md-cr-dn-tt-an);
229
- letter-spacing: ctm-var(dn-pt-md-cr-dn-lr-sg);
230
- line-height: ctm-var(dn-pt-md-cr-dn-le-ht);
231
161
  }
232
162
  }
233
163
  }
@@ -17,7 +17,25 @@
17
17
  &[data-show-border="false"] {
18
18
  --_show-border-im-se: none;
19
19
  }
20
-
20
+ &[data-overflow-items="Wrap"] {
21
+ .horizontal {
22
+ flex-wrap: wrap;
23
+ }
24
+ }
25
+ &[data-overflow-items="Scroll"] {
26
+ .horizontal {
27
+ width: 100%;
28
+ overflow-x: auto;
29
+ .item {
30
+ width: 100%;
31
+ flex-shrink: 0;
32
+ }
33
+ }
34
+ .vertical {
35
+ overflow-y: auto;
36
+ max-height: 30%;
37
+ }
38
+ }
21
39
  .text-element {
22
40
  background: #6d96e4;
23
41
  padding: 10px;
@@ -539,33 +557,12 @@
539
557
  var(--_ctm-tab-dn-iy-tt-se-ue, var(--_ctm-dn-iy-tt-se-ue))
540
558
  );
541
559
  }
542
-
543
- &[data-overflow-items="Wrap"] {
544
- .horizontal {
545
- flex-wrap: wrap;
546
- }
547
- }
548
- &[data-overflow-items="Scroll"] {
549
- .horizontal {
550
- width: 100%;
551
- overflow-x: auto;
552
- .item {
553
- width: 100%;
554
- flex-shrink: 0;
555
- }
556
- }
557
- .vertical {
558
- overflow-y: auto;
559
- max-height: 100px;
560
- }
561
- }
562
560
  .horizontal {
563
561
  display: flex;
564
562
  flex-direction: row;
565
563
  align-items: center;
566
564
  margin-top: 10px;
567
565
  gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
568
-
569
566
  .item {
570
567
  padding: var(
571
568
  --_ctm-mob-dn-im-se-vl-pg,