@sc-360-v2/storefront-cms-library 0.5.49 → 0.5.50

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,217 +0,0 @@
1
- @use "sass:map";
2
- @use "sass:list";
3
-
4
- [data-div-type="element"] {
5
- &[data-element-type="productHighlights"] {
6
- // width: var(--_lt-wh);
7
- // height: var(--_lt-ht);
8
- // margin: var(--_lt-mn);
9
- // padding: var(--_lt-pg);
10
- // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
11
- // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
12
- width: var(
13
- --_sf-el-wh-st-mx,
14
- calc(
15
- 1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
16
- )
17
- );
18
- margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
19
- // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
20
- // height: ;
21
- // aspect-ratio: 1 / var(--_sf-aspect-ratio);
22
- // --_aspect-ratio: calc(
23
- // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
24
- // );
25
-
26
- & > .wrapper {
27
- width: 100%;
28
- // height: 100%;
29
- }
30
- &[data-show-shadow="false"] {
31
- --_show-shadow: none;
32
- }
33
- &[data-overflow-items="Scroll"] {
34
- .horizontal {
35
- width: 100%;
36
- overflow-x: auto;
37
- .item {
38
- width: 100%;
39
- flex-shrink: 0;
40
- }
41
- }
42
- .vertical {
43
- overflow-y: auto;
44
- max-height: 30%;
45
- }
46
- }
47
- .text-element {
48
- color: #333;
49
-
50
- font-size: 12px;
51
- font-style: normal;
52
- font-weight: 400;
53
- line-height: 18px;
54
- margin-bottom: 6px;
55
- }
56
- .highlights__container {
57
- background-color: var(
58
- --_ctm-mob-dn-wt-se-bd-cr,
59
- var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr))
60
- );
61
-
62
- border-color: var(
63
- --_ctm-mob-dn-wt-se-br-cr,
64
- var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr))
65
- );
66
-
67
- border-style: var(
68
- --_ctm-mob-dn-wt-se-br-se,
69
- var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se))
70
- );
71
-
72
- border-width: var(
73
- --_ctm-mob-dn-wt-se-br-wh,
74
- var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh))
75
- );
76
-
77
- border-radius: var(
78
- --_ctm-mob-dn-wt-se-br-rs,
79
- var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs))
80
- );
81
-
82
- box-shadow: var(
83
- --_show-shadow,
84
- var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae)))
85
- var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br)))
86
- var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd)))
87
- var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr)))
88
- );
89
-
90
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
91
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
92
- .stacK {
93
- display: flex;
94
- flex-direction: column;
95
- .static {
96
- font-size: 14px;
97
- color: var(--_gray-700);
98
- }
99
- .horizontal {
100
- display: flex;
101
- gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, 10px)));
102
-
103
- .item {
104
- padding: var(--_ctm-mob-lt-im-pg, var(--_ctm-tab-lt-im-pg, var(--_ctm-lt-im-pg)));
105
-
106
- // border: 1px solid #000;
107
- max-width: 65px;
108
- img {
109
- width: 100%;
110
- height: 100%;
111
- object-fit: cover;
112
- }
113
- }
114
- &[data-overflow-items="Wrap"] {
115
- flex-wrap: wrap;
116
- .item {
117
- img {
118
- object-fit: contain;
119
- }
120
- }
121
- }
122
- &[data-overflow-items="Scroll"] {
123
- width: 100%;
124
- overflow-x: auto;
125
- .item {
126
- width: 100%;
127
- }
128
- }
129
- &[divider-between-items="true"] {
130
- .item {
131
- &:not(:last-child) {
132
- border-right: 1px solid var(--_gray-400);
133
- }
134
- }
135
- }
136
-
137
- &[items-content-alignement="right"] {
138
- justify-content: flex-end;
139
- }
140
- &[items-content-alignement="left"] {
141
- justify-content: flex-start;
142
- }
143
- &[items-content-alignement="center"] {
144
- justify-content: center;
145
- }
146
- }
147
- .vertical {
148
- display: flex;
149
- flex-direction: column;
150
- gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
151
- .item {
152
- padding: var(--_ctm-mob-lt-im-pg, var(--_ctm-tab-lt-im-pg, var(--_ctm-lt-im-pg)));
153
-
154
- // border: 1px solid #000;
155
- max-width: 65px;
156
- img {
157
- width: 100%;
158
- height: 100%;
159
- object-fit: contain;
160
- }
161
- }
162
- &[data-overflow-items="Scroll"] {
163
- overflow-y: auto;
164
- }
165
- &[divider-between-items="true"] {
166
- .item {
167
- &:not(:last-child) {
168
- border-bottom: 1px solid var(--_gray-400);
169
- }
170
- }
171
- }
172
- &[items-content-alignement="right"] {
173
- align-items: flex-end;
174
- }
175
- &[items-content-alignement="left"] {
176
- align-items: flex-start;
177
- }
178
- &[items-content-alignement="center"] {
179
- align-items: center;
180
- }
181
- }
182
- .grid {
183
- display: grid;
184
- grid-template-columns: repeat(var(--_ctm-lt-is-pr-rw), minmax(auto, 1fr));
185
- grid-template-columns: repeat(
186
- var(--_ctm-mob-lt-is-pr-rw, var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))),
187
- minmax(auto, 1fr)
188
- );
189
-
190
- &[data-overflow-items="Scroll"] {
191
- height: 200px;
192
- overflow-y: auto;
193
- }
194
- .item {
195
- height: 65px;
196
- width: 100%;
197
- border: 1px solid #000;
198
- display: flex;
199
- justify-content: center;
200
- align-items: center;
201
- padding: var(--_ctm-mob-lt-im-pg, var(--_ctm-tab-lt-im-pg, var(--_ctm-lt-im-pg)));
202
-
203
- border-right: 1px solid #666;
204
- &:nth-child(6n) {
205
- border-right: none; /* Remove the border for the last column */
206
- }
207
- img {
208
- max-width: 100%;
209
- max-height: 100%;
210
- object-fit: contain;
211
- }
212
- }
213
- }
214
- }
215
- }
216
- }
217
- }