@sc-360-v2/storefront-cms-library 0.3.36 → 0.3.38

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.
@@ -2,42 +2,252 @@
2
2
  position: relative;
3
3
  display: inline-block;
4
4
 
5
+ &[data-show-shadow="false"] {
6
+ --_show-shadow: none;
7
+ }
8
+ &[data-icon-position="left"] {
9
+ .add_order_button {
10
+ flex-direction: row;
11
+ }
12
+ }
13
+ &[data-icon-position="right"] {
14
+ .add_order_button {
15
+ flex-direction: row-reverse;
16
+ }
17
+ }
18
+ &[data-icon-position="center"] {
19
+ .add_order_button {
20
+ flex-direction: row;
21
+ }
22
+ }
23
+ &[data-element-style="Icon"] {
24
+ &[data-icon-position="left"] {
25
+ .add_order_button {
26
+ justify-content: start;
27
+ }
28
+ }
29
+ &[data-icon-position="right"] {
30
+ .add_order_button {
31
+ justify-content: end;
32
+ }
33
+ }
34
+ &[data-icon-position="center"] {
35
+ .add_order_button {
36
+ justify-content: center;
37
+ }
38
+ }
39
+ }
5
40
  .add_order_button {
6
41
  background: transparent;
7
42
  border: none;
8
- font-size: 14px;
9
- color: var(--_primary-400); // Blue
10
- font-weight: 500;
11
- cursor: pointer;
12
- padding: 6px 12px;
43
+ width: var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh)));
44
+ height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
45
+ gap: var(--_ctm-mob-lt-gp, var(--_ctm-tab-lt-gp, var(--_ctm-lt-gp)));
13
46
  display: flex;
14
47
  align-items: center;
15
- gap: 6px;
16
- max-width: var();
17
- // height: var(--_ctm-lt-ht);
18
- // width: var(--_ctm-lt-wh);
19
- padding: 12px 16px;
20
- border-radius: 6px;
21
- &:hover {
22
- background-color: var(--_primary-25);
23
- }
48
+ flex-direction: var(--_sf-jc);
49
+ justify-content: var(--_ctm-lt-tt-an, center);
50
+ font-size: var(
51
+ --_ctm-mob-dn-dt-se-ft-se,
52
+ var(--_ctm-tab-dn-dt-se-ft-se, var(--_ctm-dn-dt-se-ft-se))
53
+ );
54
+ color: var(--_ctm-mob-dn-dt-se-cr, var(--_ctm-tab-dn-dt-se-cr, var(--_ctm-dn-dt-se-cr)));
55
+ background-color: var(
56
+ --_ctm-mob-dn-dt-se-bd-cr,
57
+ var(--_ctm-tab-dn-dt-se-bd-cr, var(--_ctm-dn-dt-se-bd-cr))
58
+ );
59
+ font-family: var(
60
+ --_sf-hr-ff,
61
+ var(--_ctm-mob-dn-dt-se-ft-fy, var(--_ctm-tab-dn-dt-se-ft-fy, var(--_ctm-dn-dt-se-ft-fy)))
62
+ );
63
+
64
+ font-weight: var(
65
+ --_ctm-mob-dn-dt-se-ft-wt,
66
+ var(--_ctm-tab-dn-dt-se-ft-wt, var(--_ctm-dn-dt-se-ft-wt))
67
+ );
68
+ font-style: var(
69
+ --_ctm-mob-dn-dt-se-ft-se-ic,
70
+ var(--_ctm-tab-dn-dt-se-ft-se-ic, var(--_ctm-dn-dt-se-ft-se-ic))
71
+ );
72
+ text-align: var(
73
+ --_ctm-mob-dn-dt-se-tt-an,
74
+ var(--_ctm-tab-dn-dt-se-tt-an, var(--_ctm-dn-dt-se-tt-an))
75
+ );
76
+ letter-spacing: var(
77
+ --_ctm-mob-dn-dt-se-lr-sg,
78
+ var(--_ctm-tab-dn-dt-se-lr-sg, var(--_ctm-dn-dt-se-lr-sg))
79
+ );
80
+ line-height: var(
81
+ --_ctm-mob-dn-dt-se-le-ht,
82
+ var(--_ctm-tab-dn-dt-se-le-ht, var(--_ctm-dn-dt-se-le-ht))
83
+ );
84
+ text-decoration: var(
85
+ --_ctm-mob-dn-dt-se-ue,
86
+ var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue))
87
+ );
88
+ border-color: var(
89
+ --_ctm-mob-dn-dt-se-br-cr,
90
+ var(--_ctm-tab-dn-dt-se-br-cr, var(--_ctm-dn-dt-se-br-cr))
91
+ );
92
+ border-style: var(
93
+ --_ctm-mob-dn-dt-se-br-se,
94
+ var(--_ctm-tab-dn-dt-se-br-se, var(--_ctm-dn-dt-se-br-se))
95
+ );
96
+ border-width: var(
97
+ --_ctm-mob-dn-dt-se-br-wh,
98
+ var(--_ctm-tab-dn-dt-se-br-wh, var(--_ctm-dn-dt-se-br-wh))
99
+ );
100
+ border-radius: var(
101
+ --_ctm-mob-dn-dt-se-br-rs,
102
+ var(--_ctm-tab-dn-dt-se-br-rs, var(--_ctm-dn-dt-se-br-rs))
103
+ );
104
+ box-shadow: var(
105
+ --_show-text-content-shadow,
106
+ var(
107
+ --_ctm-mob-dn-dt-se-sw-ae,
108
+ var(--_ctm-tab-dn-dt-se-sw-ae, var(--_ctm-dn-dt-se-sw-ae, none))
109
+ )
110
+ var(
111
+ --_ctm-mob-dn-dt-se-sw-br,
112
+ var(--_ctm-tab-dn-dt-se-sw-br, var(--_ctm-dn-dt-se-sw-br, none))
113
+ )
114
+ var(
115
+ --_ctm-mob-dn-dt-se-sw-sd,
116
+ var(--_ctm-tab-dn-dt-se-sw-sd, var(--_ctm-dn-dt-se-sw-sd, none))
117
+ )
118
+ var(
119
+ --_ctm-mob-dn-dt-se-sw-cr,
120
+ var(--_ctm-tab-dn-dt-se-sw-cr, var(--_ctm-dn-dt-se-sw-cr, none))
121
+ )
122
+ );
123
+
124
+ cursor: pointer;
125
+ // padding: 6px 12px;
126
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
24
127
 
25
- svg path {
26
- stroke: var(--_primary-400);
128
+ svg {
129
+ width: var(
130
+ --_ctm-mob-dn-dt-se-in-se,
131
+ var(--_ctm-tab-dn-dt-se-in-se, var(--_ctm-dn-dt-se-in-se))
132
+ );
133
+ height: var(
134
+ --_ctm-mob-dn-dt-se-in-se,
135
+ var(--_ctm-tab-dn-dt-se-in-se, var(--_ctm-dn-dt-se-in-se))
136
+ );
137
+ path {
138
+ stroke: var(
139
+ --_ctm-mob-dn-dt-se-in-c1,
140
+ var(--_ctm-tab-dn-dt-se-in-c1, var(--_ctm-dn-dt-se-in-c1))
141
+ );
142
+ }
27
143
  }
28
- .icon {
29
- // font-size: 18px;
30
- // display: flex;
31
- // align-items: center;
144
+
145
+ &:hover {
146
+ background-color: var(
147
+ --_ctm-mob-dn-hr-se-bd-cr,
148
+ var(--_ctm-tab-dn-hr-se-bd-cr, var(--_ctm-dn-hr-se-bd-cr))
149
+ );
150
+ font-size: var(
151
+ --_ctm-mob-dn-hr-se-ft-se,
152
+ var(--_ctm-tab-dn-hr-se-ft-se, var(--_ctm-dn-hr-se-ft-se))
153
+ );
154
+ color: var(--_ctm-mob-dn-hr-se-cr, var(--_ctm-tab-dn-hr-se-cr, var(--_ctm-dn-hr-se-cr)));
155
+ font-family: var(
156
+ --_sf-hr-ff,
157
+ var(--_ctm-mob-dn-hr-se-ft-fy, var(--_ctm-tab-dn-hr-se-ft-fy, var(--_ctm-dn-hr-se-ft-fy)))
158
+ );
159
+ font-weight: var(
160
+ --_ctm-mob-dn-hr-se-ft-wt,
161
+ var(--_ctm-tab-dn-hr-se-ft-wt, var(--_ctm-dn-hr-se-ft-wt))
162
+ );
163
+ font-style: var(
164
+ --_ctm-mob-dn-hr-se-ft-se-ic,
165
+ var(--_ctm-tab-dn-hr-se-ft-se-ic, var(--_ctm-dn-hr-se-ft-se-ic))
166
+ );
167
+ text-align: var(
168
+ --_ctm-mob-dn-hr-se-tt-an,
169
+ var(--_ctm-tab-dn-hr-se-tt-an, var(--_ctm-dn-hr-se-tt-an))
170
+ );
171
+ letter-spacing: var(
172
+ --_ctm-mob-dn-hr-se-lr-sg,
173
+ var(--_ctm-tab-dn-hr-se-lr-sg, var(--_ctm-dn-hr-se-lr-sg))
174
+ );
175
+ line-height: var(
176
+ --_ctm-mob-dn-hr-se-le-ht,
177
+ var(--_ctm-tab-dn-hr-se-le-ht, var(--_ctm-dn-hr-se-le-ht))
178
+ );
179
+ text-decoration: var(
180
+ --_ctm-mob-dn-hr-se-ue,
181
+ var(--_ctm-tab-dn-hr-se-ue, var(--_ctm-dn-hr-se-ue))
182
+ );
183
+ border-color: var(
184
+ --_ctm-mob-dn-hr-se-br-cr,
185
+ var(--_ctm-tab-dn-hr-se-br-cr, var(--_ctm-dn-hr-se-br-cr))
186
+ );
187
+ border-style: var(
188
+ --_ctm-mob-dn-hr-se-br-se,
189
+ var(--_ctm-tab-dn-hr-se-br-se, var(--_ctm-dn-hr-se-br-se))
190
+ );
191
+ border-width: var(
192
+ --_ctm-mob-dn-hr-se-br-wh,
193
+ var(--_ctm-tab-dn-hr-se-br-wh, var(--_ctm-dn-hr-se-br-wh))
194
+ );
195
+ border-radius: var(
196
+ --_ctm-mob-dn-hr-se-br-rs,
197
+ var(--_ctm-tab-dn-hr-se-br-rs, var(--_ctm-dn-hr-se-br-rs))
198
+ );
199
+ box-shadow: var(
200
+ --_show-text-content-shadow,
201
+ var(
202
+ --_ctm-mob-dn-hr-se-sw-ae,
203
+ var(--_ctm-tab-dn-hr-se-sw-ae, var(--_ctm-dn-hr-se-sw-ae, none))
204
+ )
205
+ var(
206
+ --_ctm-mob-dn-hr-se-sw-br,
207
+ var(--_ctm-tab-dn-hr-se-sw-br, var(--_ctm-dn-hr-se-sw-br, none))
208
+ )
209
+ var(
210
+ --_ctm-mob-dn-hr-se-sw-sd,
211
+ var(--_ctm-tab-dn-hr-se-sw-sd, var(--_ctm-dn-hr-se-sw-sd, none))
212
+ )
213
+ var(
214
+ --_ctm-mob-dn-hr-se-sw-cr,
215
+ var(--_ctm-tab-dn-hr-se-sw-cr, var(--_ctm-dn-hr-se-sw-cr, none))
216
+ )
217
+ );
218
+
32
219
  svg {
33
- height: var(--_ctm-dn-dt-se-in-se);
34
- width: var(--_ctm-dn-dt-se-in-se);
220
+ // background-color: red;
221
+ width: var(
222
+ --_ctm-mob-dn-hr-se-in-se,
223
+ var(--_ctm-tab-dn-hr-se-in-se, var(--_ctm-dn-hr-se-in-se))
224
+ );
225
+ height: var(
226
+ --_ctm-mob-dn-hr-se-in-se,
227
+ var(--_ctm-tab-dn-hr-se-in-se, var(--_ctm-dn-hr-se-in-se))
228
+ );
35
229
  path {
36
- fill: var(--_ctm-dn-dt-se-in-c1);
37
- stroke: var(--_ctm-dn-dt-se-in-c1);
230
+ stroke: var(
231
+ --_ctm-mob-dn-hr-se-in-c1,
232
+ var(--_ctm-tab-dn-hr-se-in-c1, var(--_ctm-dn-hr-se-in-c1))
233
+ );
38
234
  }
39
235
  }
40
236
  }
237
+
238
+ // .icon {
239
+ // // font-size: 18px;
240
+ // // display: flex;
241
+ // // align-items: center;
242
+ // svg {
243
+ // height: var(--_ctm-dn-dt-se-in-se);
244
+ // width: var(--_ctm-dn-dt-se-in-se);
245
+ // path {
246
+ // fill: var(--_ctm-dn-dt-se-in-c1);
247
+ // stroke: var(--_ctm-dn-dt-se-in-c1);
248
+ // }
249
+ // }
250
+ // }
41
251
  }
42
252
 
43
253
  .add_order_menu {