@weareconceptstudio/account 0.1.9 → 0.2.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.
Files changed (3) hide show
  1. package/dist/modules/cart/CartTemplate/style.js +14 -6
  2. package/dist/modules/cart/SimpleItems/style.js +267 -265
  3. package/package.json +1 -1
package/dist/modules/cart/CartTemplate/style.js CHANGED
@@ -1,11 +1,8 @@
1
1
  import styled from 'styled-components';
2
2
  const CartTemplateStyle = styled.section `
3
+ --account_backToShopIconSize: var(--sp3x);
3
4
  --account_continueShopTextMT: var(--sp7x);
4
5
 
5
- .continue-shop-text {
6
- margin-top: var(--account_continueShopTextMT);
7
- }
8
-
9
6
  .back-to-shop {
10
7
  margin-bottom: calc(var(--account_continueShopTextMT) + var(--sp2x));
11
8
 
@@ -29,8 +26,8 @@ const CartTemplateStyle = styled.section `
29
26
  }
30
27
 
31
28
  svg {
32
- width: var(--sp2x);
33
- height: var(--sp2x);
29
+ width: var(--account_backToShopIconSize);
30
+ height: var(--account_backToShopIconSize);
34
31
 
35
32
  path {
36
33
  transition: path var(--account_trTime);
@@ -38,31 +35,42 @@ const CartTemplateStyle = styled.section `
38
35
  }
39
36
  }
40
37
 
38
+ .continue-shop-text {
39
+ margin-top: var(--account_continueShopTextMT);
40
+ }
41
+
41
42
  @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
43
+ --account_backToShopIconSize: var(--sp2-5x);
42
44
  --account_continueShopTextMT: var(--sp5x);
43
45
  }
44
46
 
45
47
  @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeM}) {
48
+ --account_backToShopIconSize: var(--sp2-5x);
46
49
  --account_continueShopTextMT: var(--sp4x);
47
50
  }
48
51
 
49
52
  @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeMMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeS}) {
53
+ --account_backToShopIconSize: var(--sp2-5x);
50
54
  --account_continueShopTextMT: var(--sp4x);
51
55
  }
52
56
 
53
57
  @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXS}) {
58
+ --account_backToShopIconSize: var(--sp2x);
54
59
  --account_continueShopTextMT: var(--sp3x);
55
60
  }
56
61
 
57
62
  @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSize}) {
63
+ --account_backToShopIconSize: var(--sp2x);
58
64
  --account_continueShopTextMT: var(--sp3x);
59
65
  }
60
66
 
61
67
  @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeS}) {
68
+ --account_backToShopIconSize: var(--sp2x);
62
69
  --account_continueShopTextMT: var(--sp3x);
63
70
  }
64
71
 
65
72
  @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
73
+ --account_backToShopIconSize: var(--sp2x);
66
74
  --account_continueShopTextMT: var(--sp3x);
67
75
  }
68
76
  `;
package/dist/modules/cart/SimpleItems/style.js CHANGED
@@ -1,47 +1,49 @@
1
1
  import styled from 'styled-components';
2
2
  const CartItemsStyle = styled.section `
3
- --spaceLineMTop: var(--sp3x);
4
- --spaceLineMBot: var(--sp5x);
3
+ --account_spaceLineMTop: var(--sp3x);
4
+ --account_spaceLineMBot: var(--sp5x);
5
5
 
6
6
  //! Col's width
7
- --col1Width: 50%;
8
- /* --col2Width: 8%; */
9
- --col2Width: 10.5%;
10
- /* --col3Width: 21%; */
11
- --col3Width: 19.5%;
12
- --col4Width: calc(100% - var(--col1Width) - var(--col2Width) - var(--col3Width));
7
+ --account_col1Width: 50%;
8
+ /* --account_col2Width: 8%; */
9
+ --account_col2Width: 10.5%;
10
+ /* --account_col3Width: 21%; */
11
+ --account_col3Width: 19.5%;
12
+ --account_col4Width: calc(100% - var(--account_col1Width) - var(--account_col2Width) - var(--account_col3Width));
13
13
 
14
14
  //! Col's distance
15
- --col1Distance: var(--sp5x);
16
- --col2Distance: var(--sp5x);
17
- --col3Distance: var(--sp10x);
18
- --col4Distance: var(--sp5x);
19
-
20
- --orderItemsMarTop: var(--sp16x);
21
- --orderItemsTitleWrapPB: var(--sp3x);
22
- --itemWrapPadTB: var(--sp5x);
23
- --col1RightWrapML: var(--sp4x);
24
- --rightFirstItemWrapMTop: var(--sp3x);
25
- --rightSecondItemWrapMTop: var(--sp1-5x);
26
- --valueMarTop: var(--sp0-5x);
27
- --imageBorderRadius: var(--sp1x);
28
- --imageWidth: 3.75vw;
29
- --imageHeight: 125.5%;
30
-
31
- --editBtnWrapMTop: var(--sp7x);
32
- --favoriteAndRemoveDistance: var(--sp3x);
33
-
34
- --qntPadTB: var(--sp1-5x);
35
- --qntPadLR: var(--sp2x);
36
- --qntMarR: var(--sp6x);
37
-
38
- --checkoutMTop: var(--sp16x);
39
- --titleEditWrapperMBot: var(--sp5x);
40
-
41
- --outOfStockMBot: var(--sp4x);
15
+ --account_col1Distance: var(--sp5x);
16
+ --account_col2Distance: var(--sp5x);
17
+ --account_col3Distance: var(--sp10x);
18
+ --account_col4Distance: var(--sp5x);
19
+
20
+ --account_orderItemsMarTop: var(--sp16x);
21
+ --account_orderItemsTitleWrapPB: var(--sp3x);
22
+ --account_itemWrapPadTB: var(--sp5x);
23
+ --account_col1RightWrapML: var(--sp4x);
24
+ --account_rightFirstItemWrapMTop: var(--sp3x);
25
+ --account_rightSecondItemWrapMTop: var(--sp1-5x);
26
+ --account_valueMarTop: var(--sp0-5x);
27
+ --account_imageBorderRadius: var(--sp1x);
28
+ --account_imageWidth: 3.75vw;
29
+ --account_imageHeight: 125.5%;
30
+
31
+ --account_editBtnWrapMTop: var(--sp7x);
32
+ --account_favoriteAndRemoveDistance: var(--sp3x);
33
+
34
+ --account_qntPadTB: var(--sp1-5x);
35
+ --account_qntPadLR: var(--sp2x);
36
+ --account_qntMarR: var(--sp6x);
37
+
38
+ --account_checkoutMTop: var(--sp16x);
39
+ --account_titleEditWrapperMBot: var(--sp5x);
40
+
41
+ --account_outOfStockMBot: var(--sp4x);
42
+
43
+ --account_cartItemSelectFixedWidth: calc(var(--sp9x) + var(--sp0-5x));
42
44
 
43
45
  .line {
44
- width: calc(100% - var(--col1Distance));
46
+ width: calc(100% - var(--account_col1Distance));
45
47
  height: 2px;
46
48
  background-color: var(--account_primaryColor5);
47
49
  margin: 0 auto;
@@ -50,8 +52,8 @@ const CartItemsStyle = styled.section `
50
52
  .order-items-line {
51
53
  width: 100%;
52
54
  border-bottom: 2px solid var(--account_primaryColor1);
53
- margin-top: var(--spaceLineMTop);
54
- margin-bottom: var(--spaceLineMBot);
55
+ margin-top: var(--account_spaceLineMTop);
56
+ margin-bottom: var(--account_spaceLineMBot);
55
57
  }
56
58
 
57
59
  .order-items-table-wrap {
@@ -59,13 +61,13 @@ const CartItemsStyle = styled.section `
59
61
 
60
62
  .titles-wrap,
61
63
  .items-wrap {
62
- margin-left: calc(-1 * calc(var(--col1Distance) / 2));
63
- margin-right: calc(-1 * calc(var(--col4Distance) / 2));
64
+ margin-left: calc(-1 * calc(var(--account_col1Distance) / 2));
65
+ margin-right: calc(-1 * calc(var(--account_col4Distance) / 2));
64
66
  }
65
67
 
66
68
  .titles-wrap {
67
69
  display: flex;
68
- padding-bottom: var(--orderItemsTitleWrapPB);
70
+ padding-bottom: var(--account_orderItemsTitleWrapPB);
69
71
  }
70
72
 
71
73
  .items-wrap {
@@ -76,53 +78,53 @@ const CartItemsStyle = styled.section `
76
78
  .col-item {
77
79
  .image-wrapper {
78
80
  overflow: hidden;
79
- max-width: var(--imageWidth);
81
+ max-width: var(--account_imageWidth);
80
82
  width: 100%;
81
83
  height: fit-content;
82
- border-radius: var(--imageBorderRadius);
84
+ border-radius: var(--account_imageBorderRadius);
83
85
  isolation: isolate;
84
86
 
85
87
  .image-cont {
86
- padding-top: var(--imageHeight) !important;
88
+ padding-top: var(--account_imageHeight) !important;
87
89
  }
88
90
  }
89
91
  }
90
92
 
91
93
  .item-inner-wrapper {
92
94
  display: flex;
93
- padding: var(--itemWrapPadTB) 0;
95
+ padding: var(--account_itemWrapPadTB) 0;
94
96
  }
95
97
 
96
98
  .out-of-stock-styles {
97
- margin-bottom: var(--outOfStockMBot);
98
- padding-left: calc(var(--col1Distance) / 2);
99
- padding-right: calc(var(--col4Distance) / 2);
99
+ margin-bottom: var(--account_outOfStockMBot);
100
+ padding-left: calc(var(--account_col1Distance) / 2);
101
+ padding-right: calc(var(--account_col4Distance) / 2);
100
102
  }
101
103
  }
102
104
  }
103
105
 
104
106
  .tl-col-1 {
105
- width: var(--col1Width);
106
- padding-left: calc(var(--col1Distance) / 2);
107
- padding-right: calc(var(--col1Distance) / 2);
107
+ width: var(--account_col1Width);
108
+ padding-left: calc(var(--account_col1Distance) / 2);
109
+ padding-right: calc(var(--account_col1Distance) / 2);
108
110
  }
109
111
 
110
112
  .tl-col-2 {
111
- width: var(--col2Width);
112
- /* padding-left: calc(var(--col2Distance) / 2); */
113
- /* padding-right: calc(var(--col2Distance) / 2); */
113
+ width: var(--account_col2Width);
114
+ /* padding-left: calc(var(--account_col2Distance) / 2); */
115
+ /* padding-right: calc(var(--account_col2Distance) / 2); */
114
116
  }
115
117
 
116
118
  .tl-col-3 {
117
- width: var(--col3Width);
118
- padding-left: calc(var(--col3Distance) / 2);
119
- padding-right: calc(var(--col3Distance) / 2);
119
+ width: var(--account_col3Width);
120
+ padding-left: calc(var(--account_col3Distance) / 2);
121
+ padding-right: calc(var(--account_col3Distance) / 2);
120
122
  }
121
123
 
122
124
  .tl-col-4 {
123
- width: var(--col4Width);
124
- padding-left: calc(var(--col4Distance) / 2);
125
- padding-right: calc(var(--col4Distance) / 2);
125
+ width: var(--account_col4Width);
126
+ padding-left: calc(var(--account_col4Distance) / 2);
127
+ padding-right: calc(var(--account_col4Distance) / 2);
126
128
  }
127
129
 
128
130
  .col-item-1 {
@@ -130,7 +132,7 @@ const CartItemsStyle = styled.section `
130
132
 
131
133
  .col-1-right-wrap {
132
134
  flex: 1;
133
- margin-left: var(--col1RightWrapML);
135
+ margin-left: var(--account_col1RightWrapML);
134
136
  overflow-wrap: anywhere;
135
137
 
136
138
  .title-btn {
@@ -151,15 +153,15 @@ const CartItemsStyle = styled.section `
151
153
  }
152
154
 
153
155
  .right-first-item-wrap {
154
- margin-top: var(--rightFirstItemWrapMTop);
156
+ margin-top: var(--account_rightFirstItemWrapMTop);
155
157
  }
156
158
 
157
159
  .right-second-item-wrap {
158
- margin-top: var(--rightSecondItemWrapMTop);
160
+ margin-top: var(--account_rightSecondItemWrapMTop);
159
161
  }
160
162
 
161
163
  .empty {
162
- margin-top: var(--editBtnWrapMTop);
164
+ margin-top: var(--account_editBtnWrapMTop);
163
165
  }
164
166
  }
165
167
  }
@@ -172,7 +174,7 @@ const CartItemsStyle = styled.section `
172
174
  }
173
175
 
174
176
  .value {
175
- margin-top: var(--valueMarTop);
177
+ margin-top: var(--account_valueMarTop);
176
178
  }
177
179
 
178
180
  .col-item-4 {
@@ -186,7 +188,7 @@ const CartItemsStyle = styled.section `
186
188
  justify-content: flex-end;
187
189
 
188
190
  .favorite-btn-wrap {
189
- margin-right: var(--favoriteAndRemoveDistance);
191
+ margin-right: var(--account_favoriteAndRemoveDistance);
190
192
 
191
193
  .wishlist-btn {
192
194
  &.active {
@@ -205,12 +207,12 @@ const CartItemsStyle = styled.section `
205
207
 
206
208
  .tl-col-2 {
207
209
  .select-and-out-of-stock-wrap {
208
- width: fit-content;
210
+ width: var(--account_cartItemSelectFixedWidth);
209
211
 
210
212
  .react-select-container {
211
213
  .react-select__control {
212
- padding: var(--qntPadTB) var(--qntPadLR);
213
- gap: var(--qntPadLR);
214
+ padding: var(--account_qntPadTB) var(--account_qntPadLR);
215
+ gap: var(--account_qntPadLR);
214
216
 
215
217
  .react-select__value-container {
216
218
  padding: 0;
@@ -230,7 +232,7 @@ const CartItemsStyle = styled.section `
230
232
 
231
233
  .react-select__menu {
232
234
  .react-select__option {
233
- padding: var(--qntPadTB) var(--qntPadLR);
235
+ padding: var(--account_qntPadTB) var(--account_qntPadLR);
234
236
  font-weight: 400;
235
237
  }
236
238
  }
@@ -240,302 +242,302 @@ const CartItemsStyle = styled.section `
240
242
  }
241
243
 
242
244
  &.order-individual-mt {
243
- margin-top: var(--orderItemsMarTop);
245
+ margin-top: var(--account_orderItemsMarTop);
244
246
  }
245
247
 
246
248
  &.cart-st-wrap {
247
- --spaceLineMTop: var(--sp2x);
248
- --spaceLineMBot: var(--sp7x);
249
+ --account_spaceLineMTop: var(--sp2x);
250
+ --account_spaceLineMBot: var(--sp7x);
249
251
  }
250
252
 
251
253
  &.checkout-mt {
252
- margin-top: var(--checkoutMTop);
254
+ margin-top: var(--account_checkoutMTop);
253
255
 
254
256
  .title-edit-wrapper {
255
257
  display: flex;
256
258
  justify-content: space-between;
257
259
  align-items: center;
258
- margin-bottom: var(--titleEditWrapperMBot);
260
+ margin-bottom: var(--account_titleEditWrapperMBot);
259
261
  }
260
262
  }
261
263
 
262
264
  @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
263
- --spaceLineMTop: var(--sp2x);
264
- --spaceLineMBot: var(--sp4x);
265
+ --account_spaceLineMTop: var(--sp2x);
266
+ --account_spaceLineMBot: var(--sp4x);
265
267
 
266
268
  //! Col's width
267
- --col1Width: 50%;
268
- /* --col2Width: 8%; */
269
- --col2Width: 12.2%;
270
- /* --col3Width: 21%; */
271
- --col3Width: 19%;
269
+ --account_col1Width: 50%;
270
+ /* --account_col2Width: 8%; */
271
+ --account_col2Width: 12.2%;
272
+ /* --account_col3Width: 21%; */
273
+ --account_col3Width: 19%;
272
274
 
273
275
  //! Col's distance
274
- --col1Distance: var(--sp4x);
275
- --col2Distance: var(--sp4x);
276
- --col3Distance: var(--sp11x);
277
- --col4Distance: var(--sp4x);
276
+ --account_col1Distance: var(--sp4x);
277
+ --account_col2Distance: var(--sp4x);
278
+ --account_col3Distance: var(--sp11x);
279
+ --account_col4Distance: var(--sp4x);
278
280
 
279
- --orderItemsMarTop: var(--sp11x);
280
- --orderItemsTitleWrapPB: var(--sp3x);
281
- --itemWrapPadTB: var(--sp4x);
282
- --col1RightWrapML: var(--sp3x);
283
- --rightFirstItemWrapMTop: var(--sp2x);
284
- --rightSecondItemWrapMTop: var(--sp1x);
285
- --valueMarTop: 0;
286
- --imageWidth: 4.2vw;
281
+ --account_orderItemsMarTop: var(--sp11x);
282
+ --account_orderItemsTitleWrapPB: var(--sp3x);
283
+ --account_itemWrapPadTB: var(--sp4x);
284
+ --account_col1RightWrapML: var(--sp3x);
285
+ --account_rightFirstItemWrapMTop: var(--sp2x);
286
+ --account_rightSecondItemWrapMTop: var(--sp1x);
287
+ --account_valueMarTop: 0;
288
+ --account_imageWidth: 4.2vw;
287
289
 
288
- --editBtnWrapMTop: var(--sp2x);
289
- --favoriteAndRemoveDistance: var(--sp2x);
290
+ --account_editBtnWrapMTop: var(--sp2x);
291
+ --account_favoriteAndRemoveDistance: var(--sp2x);
290
292
 
291
- --qntPadTB: var(--sp1-5x);
292
- --qntPadLR: var(--sp2x);
293
- --qntMarR: var(--sp6x);
293
+ --account_qntPadTB: var(--sp1-5x);
294
+ --account_qntPadLR: var(--sp2x);
295
+ --account_qntMarR: var(--sp6x);
294
296
 
295
- --checkoutMTop: var(--sp11x);
296
- --titleEditWrapperMBot: var(--sp4x);
297
+ --account_checkoutMTop: var(--sp11x);
298
+ --account_titleEditWrapperMBot: var(--sp4x);
297
299
 
298
- --outOfStockMBot: var(--sp3x);
300
+ --account_outOfStockMBot: var(--sp3x);
299
301
 
300
302
  &.cart-st-wrap {
301
- --spaceLineMTop: var(--sp2x);
302
- --spaceLineMBot: var(--sp5x);
303
+ --account_spaceLineMTop: var(--sp2x);
304
+ --account_spaceLineMBot: var(--sp5x);
303
305
  }
304
306
  }
305
307
 
306
308
  @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeM}) {
307
- --spaceLineMTop: var(--sp2x);
308
- --spaceLineMBot: var(--sp4x);
309
+ --account_spaceLineMTop: var(--sp2x);
310
+ --account_spaceLineMBot: var(--sp4x);
309
311
 
310
312
  //! Col's width
311
- --col1Width: 44%;
312
- /* --col2Width: 12%; */
313
- --col2Width: 16.2%;
314
- /* --col3Width: 22%; */
315
- --col3Width: 19.9%;
313
+ --account_col1Width: 44%;
314
+ /* --account_col2Width: 12%; */
315
+ --account_col2Width: 16.2%;
316
+ /* --account_col3Width: 22%; */
317
+ --account_col3Width: 19.9%;
316
318
 
317
319
  //! Col's distance
318
- --col1Distance: var(--sp6x);
319
- --col2Distance: var(--sp6x);
320
- --col3Distance: var(--sp8x);
321
- --col4Distance: var(--sp8x);
320
+ --account_col1Distance: var(--sp6x);
321
+ --account_col2Distance: var(--sp6x);
322
+ --account_col3Distance: var(--sp8x);
323
+ --account_col4Distance: var(--sp8x);
322
324
 
323
- --orderItemsMarTop: var(--sp8x);
324
- --orderItemsTitleWrapPB: var(--sp2x);
325
- --itemWrapPadTB: var(--sp3x);
326
- --col1RightWrapML: var(--sp3x);
327
- --rightFirstItemWrapMTop: var(--sp2x);
328
- --rightSecondItemWrapMTop: var(--sp0-5x);
329
- --valueMarTop: 0;
330
- --imageWidth: 4.8vw;
325
+ --account_orderItemsMarTop: var(--sp8x);
326
+ --account_orderItemsTitleWrapPB: var(--sp2x);
327
+ --account_itemWrapPadTB: var(--sp3x);
328
+ --account_col1RightWrapML: var(--sp3x);
329
+ --account_rightFirstItemWrapMTop: var(--sp2x);
330
+ --account_rightSecondItemWrapMTop: var(--sp0-5x);
331
+ --account_valueMarTop: 0;
332
+ --account_imageWidth: 4.8vw;
331
333
 
332
- --editBtnWrapMTop: var(--sp2x);
333
- --favoriteAndRemoveDistance: var(--sp2x);
334
+ --account_editBtnWrapMTop: var(--sp2x);
335
+ --account_favoriteAndRemoveDistance: var(--sp2x);
334
336
 
335
- --qntPadTB: var(--sp1-5x);
336
- --qntPadLR: var(--sp2x);
337
- --qntMarR: var(--sp6x);
337
+ --account_qntPadTB: var(--sp1-5x);
338
+ --account_qntPadLR: var(--sp2x);
339
+ --account_qntMarR: var(--sp6x);
338
340
 
339
- --checkoutMTop: var(--sp8x);
340
- --titleEditWrapperMBot: var(--sp2x);
341
+ --account_checkoutMTop: var(--sp8x);
342
+ --account_titleEditWrapperMBot: var(--sp2x);
341
343
 
342
- --outOfStockMBot: var(--sp3x);
344
+ --account_outOfStockMBot: var(--sp3x);
343
345
 
344
346
  &.cart-st-wrap {
345
- --spaceLineMTop: var(--sp2x);
346
- --spaceLineMBot: var(--sp4x);
347
+ --account_spaceLineMTop: var(--sp2x);
348
+ --account_spaceLineMBot: var(--sp4x);
347
349
  }
348
350
  }
349
351
 
350
352
  @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeMMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeS}) {
351
- --spaceLineMTop: var(--sp2x);
352
- --spaceLineMBot: var(--sp3x);
353
+ --account_spaceLineMTop: var(--sp2x);
354
+ --account_spaceLineMBot: var(--sp3x);
353
355
 
354
356
  //! Col's width
355
- --col1Width: 45%;
356
- /* --col2Width: 13%; */
357
- --col2Width: 16.9%;
358
- /* --col3Width: 21%; */
359
- --col3Width: 19%;
357
+ --account_col1Width: 45%;
358
+ /* --account_col2Width: 13%; */
359
+ --account_col2Width: 16.9%;
360
+ /* --account_col3Width: 21%; */
361
+ --account_col3Width: 19%;
360
362
 
361
363
  //! Col's distance
362
- --col1Distance: var(--sp6x);
363
- --col2Distance: var(--sp6x);
364
- --col3Distance: var(--sp8x);
365
- --col4Distance: var(--sp8x);
364
+ --account_col1Distance: var(--sp6x);
365
+ --account_col2Distance: var(--sp6x);
366
+ --account_col3Distance: var(--sp8x);
367
+ --account_col4Distance: var(--sp8x);
366
368
 
367
- --orderItemsMarTop: var(--sp8x);
368
- --orderItemsTitleWrapPB: var(--sp2x);
369
- --itemWrapPadTB: var(--sp3x);
370
- --col1RightWrapML: var(--sp3x);
371
- --rightFirstItemWrapMTop: var(--sp2x);
372
- --rightSecondItemWrapMTop: var(--sp0-5x);
373
- --valueMarTop: 0;
374
- --imageWidth: 4.5vw;
369
+ --account_orderItemsMarTop: var(--sp8x);
370
+ --account_orderItemsTitleWrapPB: var(--sp2x);
371
+ --account_itemWrapPadTB: var(--sp3x);
372
+ --account_col1RightWrapML: var(--sp3x);
373
+ --account_rightFirstItemWrapMTop: var(--sp2x);
374
+ --account_rightSecondItemWrapMTop: var(--sp0-5x);
375
+ --account_valueMarTop: 0;
376
+ --account_imageWidth: 4.5vw;
375
377
 
376
- --editBtnWrapMTop: var(--sp5x);
377
- --favoriteAndRemoveDistance: var(--sp2x);
378
+ --account_editBtnWrapMTop: var(--sp5x);
379
+ --account_favoriteAndRemoveDistance: var(--sp2x);
378
380
 
379
- --qntPadTB: var(--sp1-5x);
380
- --qntPadLR: var(--sp2x);
381
- --qntMarR: var(--sp5x);
381
+ --account_qntPadTB: var(--sp1-5x);
382
+ --account_qntPadLR: var(--sp2x);
383
+ --account_qntMarR: var(--sp5x);
382
384
 
383
- --checkoutMTop: var(--sp8x);
384
- --titleEditWrapperMBot: var(--sp3x);
385
+ --account_checkoutMTop: var(--sp8x);
386
+ --account_titleEditWrapperMBot: var(--sp3x);
385
387
 
386
- --outOfStockMBot: var(--sp3x);
388
+ --account_outOfStockMBot: var(--sp3x);
387
389
 
388
390
  &.cart-st-wrap {
389
- --spaceLineMTop: var(--sp2x);
390
- --spaceLineMBot: var(--sp4x);
391
+ --account_spaceLineMTop: var(--sp2x);
392
+ --account_spaceLineMBot: var(--sp4x);
391
393
  }
392
394
  }
393
395
 
394
396
  @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXS}) {
395
- --spaceLineMTop: var(--sp2x);
396
- --spaceLineMBot: var(--sp3x);
397
+ --account_spaceLineMTop: var(--sp2x);
398
+ --account_spaceLineMBot: var(--sp3x);
397
399
 
398
400
  //! Col's width
399
- --col1Width: 43.5%;
400
- /* --col2Width: 14.5%; */
401
- --col2Width: 19.3%;
402
- /* --col3Width: 21%; */
403
- --col3Width: 18.5%;
401
+ --account_col1Width: 43.5%;
402
+ /* --account_col2Width: 14.5%; */
403
+ --account_col2Width: 19.3%;
404
+ /* --account_col3Width: 21%; */
405
+ --account_col3Width: 18.5%;
404
406
 
405
407
  //! Col's distance
406
- --col1Distance: var(--sp7x);
407
- --col2Distance: var(--sp7x);
408
- --col3Distance: var(--sp7x);
409
- --col4Distance: var(--sp7x);
408
+ --account_col1Distance: var(--sp7x);
409
+ --account_col2Distance: var(--sp7x);
410
+ --account_col3Distance: var(--sp7x);
411
+ --account_col4Distance: var(--sp7x);
410
412
 
411
- --orderItemsMarTop: var(--sp8x);
412
- --orderItemsTitleWrapPB: var(--sp2x);
413
- --itemWrapPadTB: var(--sp3x);
414
- --col1RightWrapML: var(--sp2x);
415
- --rightFirstItemWrapMTop: var(--sp2x);
416
- --rightSecondItemWrapMTop: var(--sp1x);
417
- --valueMarTop: 0;
418
- --imageBorderRadius: var(--sp0-5x);
419
- --imageWidth: 4.4vw;
413
+ --account_orderItemsMarTop: var(--sp8x);
414
+ --account_orderItemsTitleWrapPB: var(--sp2x);
415
+ --account_itemWrapPadTB: var(--sp3x);
416
+ --account_col1RightWrapML: var(--sp2x);
417
+ --account_rightFirstItemWrapMTop: var(--sp2x);
418
+ --account_rightSecondItemWrapMTop: var(--sp1x);
419
+ --account_valueMarTop: 0;
420
+ --account_imageBorderRadius: var(--sp0-5x);
421
+ --account_imageWidth: 4.4vw;
420
422
 
421
- --editBtnWrapMTop: var(--sp2x);
422
- --favoriteAndRemoveDistance: var(--sp2x);
423
+ --account_editBtnWrapMTop: var(--sp2x);
424
+ --account_favoriteAndRemoveDistance: var(--sp2x);
423
425
 
424
- --qntPadTB: var(--sp1-5x);
425
- --qntPadLR: var(--sp2x);
426
- --qntMarR: var(--sp5x);
426
+ --account_qntPadTB: var(--sp1-5x);
427
+ --account_qntPadLR: var(--sp2x);
428
+ --account_qntMarR: var(--sp5x);
427
429
 
428
- --checkoutMTop: var(--sp8x);
429
- --titleEditWrapperMBot: var(--sp4x);
430
+ --account_checkoutMTop: var(--sp8x);
431
+ --account_titleEditWrapperMBot: var(--sp4x);
430
432
 
431
- --outOfStockMBot: var(--sp3x);
433
+ --account_outOfStockMBot: var(--sp3x);
432
434
 
433
435
  &.cart-st-wrap {
434
- --spaceLineMTop: var(--sp2x);
435
- --spaceLineMBot: var(--sp3x);
436
+ --account_spaceLineMTop: var(--sp2x);
437
+ --account_spaceLineMBot: var(--sp3x);
436
438
  }
437
439
  }
438
440
 
439
441
  @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSize}) {
440
- --spaceLineMTop: var(--sp2x);
441
- --spaceLineMBot: var(--sp3x);
442
+ --account_spaceLineMTop: var(--sp2x);
443
+ --account_spaceLineMBot: var(--sp3x);
442
444
 
443
445
  //! Col's width
444
- /* --col1Width: 46.5%; */
445
- --col1Width: 43.5%;
446
- /* --col2Width: 13.5%; */
447
- --col2Width: 18.3%;
448
- /* --col3Width: 20%; */
449
- --col3Width: 17%;
446
+ /* --account_col1Width: 46.5%; */
447
+ --account_col1Width: 43.5%;
448
+ /* --account_col2Width: 13.5%; */
449
+ --account_col2Width: 18.3%;
450
+ /* --account_col3Width: 20%; */
451
+ --account_col3Width: 17%;
450
452
 
451
453
  //! Col's distance
452
- --col1Distance: var(--sp3x);
453
- --col2Distance: var(--sp3x);
454
- --col3Distance: var(--sp3x);
455
- --col4Distance: var(--sp3x);
454
+ --account_col1Distance: var(--sp3x);
455
+ --account_col2Distance: var(--sp3x);
456
+ --account_col3Distance: var(--sp3x);
457
+ --account_col4Distance: var(--sp3x);
456
458
 
457
- --orderItemsMarTop: var(--sp8x);
458
- --orderItemsTitleWrapPB: var(--sp2x);
459
- --itemWrapPadTB: var(--sp3x);
460
- --col1RightWrapML: var(--sp1x);
461
- --rightFirstItemWrapMTop: var(--sp2x);
462
- --rightSecondItemWrapMTop: var(--sp1x);
463
- --valueMarTop: 0;
464
- --imageBorderRadius: var(--sp0-5x);
465
- --imageWidth: 3.92vw;
459
+ --account_orderItemsMarTop: var(--sp8x);
460
+ --account_orderItemsTitleWrapPB: var(--sp2x);
461
+ --account_itemWrapPadTB: var(--sp3x);
462
+ --account_col1RightWrapML: var(--sp1x);
463
+ --account_rightFirstItemWrapMTop: var(--sp2x);
464
+ --account_rightSecondItemWrapMTop: var(--sp1x);
465
+ --account_valueMarTop: 0;
466
+ --account_imageBorderRadius: var(--sp0-5x);
467
+ --account_imageWidth: 3.92vw;
466
468
 
467
- --editBtnWrapMTop: var(--sp2x);
468
- --favoriteAndRemoveDistance: var(--sp2x);
469
+ --account_editBtnWrapMTop: var(--sp2x);
470
+ --account_favoriteAndRemoveDistance: var(--sp2x);
469
471
 
470
- --qntPadTB: var(--sp1x);
471
- --qntPadLR: var(--sp1-5x);
472
- --qntMarR: var(--sp5x);
472
+ --account_qntPadTB: var(--sp1x);
473
+ --account_qntPadLR: var(--sp1-5x);
474
+ --account_qntMarR: var(--sp5x);
473
475
 
474
- --checkoutMTop: var(--sp8x);
475
- --titleEditWrapperMBot: var(--sp3x);
476
+ --account_checkoutMTop: var(--sp8x);
477
+ --account_titleEditWrapperMBot: var(--sp3x);
476
478
 
477
- --outOfStockMBot: var(--sp3x);
479
+ --account_outOfStockMBot: var(--sp3x);
478
480
 
479
481
  &.cart-st-wrap {
480
- --spaceLineMTop: var(--sp2x);
481
- --spaceLineMBot: var(--sp3x);
482
+ --account_spaceLineMTop: var(--sp2x);
483
+ --account_spaceLineMBot: var(--sp3x);
482
484
  }
483
485
  }
484
486
 
485
487
  @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeS}) {
486
- --spaceLineMTop: var(--sp2x);
487
- --spaceLineMBot: var(--sp2x);
488
+ --account_spaceLineMTop: var(--sp2x);
489
+ --account_spaceLineMBot: var(--sp2x);
488
490
 
489
491
  //! Col's width
490
- /* --col1Width: 44%; */
491
- --col1Width: 40%;
492
- /* --col2Width: 16%; */
493
- --col2Width: 19.5%;
494
- --col3Width: 20%;
492
+ /* --account_col1Width: 44%; */
493
+ --account_col1Width: 40%;
494
+ /* --account_col2Width: 16%; */
495
+ --account_col2Width: 19.5%;
496
+ --account_col3Width: 20%;
495
497
 
496
498
  //! Col's distance
497
- --col1Distance: var(--sp5x);
498
- --col2Distance: var(--sp5x);
499
- --col3Distance: var(--sp9x);
500
- --col4Distance: var(--sp9x);
499
+ --account_col1Distance: var(--sp5x);
500
+ --account_col2Distance: var(--sp5x);
501
+ --account_col3Distance: var(--sp9x);
502
+ --account_col4Distance: var(--sp9x);
501
503
 
502
- --orderItemsMarTop: var(--sp8x);
503
- --orderItemsTitleWrapPB: var(--sp2x);
504
- --itemWrapPadTB: var(--sp3x);
505
- --col1RightWrapML: var(--sp2x);
506
- --rightFirstItemWrapMTop: var(--sp2x);
507
- --rightSecondItemWrapMTop: var(--sp1x);
508
- --valueMarTop: 0;
509
- --imageBorderRadius: var(--sp0-5x);
510
- --imageWidth: 7.4vw;
504
+ --account_orderItemsMarTop: var(--sp8x);
505
+ --account_orderItemsTitleWrapPB: var(--sp2x);
506
+ --account_itemWrapPadTB: var(--sp3x);
507
+ --account_col1RightWrapML: var(--sp2x);
508
+ --account_rightFirstItemWrapMTop: var(--sp2x);
509
+ --account_rightSecondItemWrapMTop: var(--sp1x);
510
+ --account_valueMarTop: 0;
511
+ --account_imageBorderRadius: var(--sp0-5x);
512
+ --account_imageWidth: 7.4vw;
511
513
 
512
- --editBtnWrapMTop: var(--sp5x);
513
- --favoriteAndRemoveDistance: var(--sp2x);
514
+ --account_editBtnWrapMTop: var(--sp5x);
515
+ --account_favoriteAndRemoveDistance: var(--sp2x);
514
516
 
515
- --qntPadTB: var(--sp1-5x);
516
- --qntPadLR: var(--sp2x);
517
- --qntMarR: var(--sp5x);
517
+ --account_qntPadTB: var(--sp1-5x);
518
+ --account_qntPadLR: var(--sp2x);
519
+ --account_qntMarR: var(--sp5x);
518
520
 
519
- --checkoutMTop: var(--sp8x);
520
- --titleEditWrapperMBot: var(--sp3x);
521
+ --account_checkoutMTop: var(--sp8x);
522
+ --account_titleEditWrapperMBot: var(--sp3x);
521
523
 
522
- --outOfStockMBot: var(--sp2-5x);
524
+ --account_outOfStockMBot: var(--sp2-5x);
523
525
 
524
526
  &.cart-st-wrap {
525
- --spaceLineMTop: var(--sp2x);
526
- --spaceLineMBot: var(--sp3x);
527
+ --account_spaceLineMTop: var(--sp2x);
528
+ --account_spaceLineMBot: var(--sp3x);
527
529
  }
528
530
  }
529
531
 
530
532
  @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
531
- --spaceLineMTop: var(--sp2x);
532
- --spaceLineMBot: 0;
533
- --orderItemsMarTop: var(--sp6x);
533
+ --account_spaceLineMTop: var(--sp2x);
534
+ --account_spaceLineMBot: 0;
535
+ --account_orderItemsMarTop: var(--sp6x);
534
536
 
535
- --checkoutMTop: var(--sp10x);
536
- --titleEditWrapperMBot: var(--sp2x);
537
+ --account_checkoutMTop: var(--sp10x);
538
+ --account_titleEditWrapperMBot: var(--sp2x);
537
539
 
538
- --col1Distance: 0;
540
+ --account_col1Distance: 0;
539
541
 
540
542
  .mobile-order-items-table-wrap {
541
543
  .mobile-order-item-wrap {
@@ -581,14 +583,14 @@ const CartItemsStyle = styled.section `
581
583
  }
582
584
 
583
585
  .select-and-out-of-stock-mobile-wrap {
584
- width: fit-content;
586
+ width: var(--account_cartItemSelectFixedWidth);
585
587
 
586
588
  .react-select-container {
587
589
  margin-top: var(--sp3x);
588
590
 
589
591
  .react-select__control {
590
- padding: var(--qntPadTB) var(--qntPadLR);
591
- gap: var(--qntPadLR);
592
+ padding: var(--account_qntPadTB) var(--account_qntPadLR);
593
+ gap: var(--account_qntPadLR);
592
594
 
593
595
  .react-select__value-container {
594
596
  padding: 0;
@@ -608,7 +610,7 @@ const CartItemsStyle = styled.section `
608
610
 
609
611
  .react-select__menu {
610
612
  .react-select__option {
611
- padding: var(--qntPadTB) var(--qntPadLR);
613
+ padding: var(--account_qntPadTB) var(--account_qntPadLR);
612
614
  font-weight: 400;
613
615
  }
614
616
  }
@@ -641,8 +643,8 @@ const CartItemsStyle = styled.section `
641
643
  }
642
644
 
643
645
  &.cart-st-wrap {
644
- --spaceLineMTop: var(--sp2x);
645
- --spaceLineMBot: 0;
646
+ --account_spaceLineMTop: var(--sp2x);
647
+ --account_spaceLineMBot: 0;
646
648
  }
647
649
  }
648
650
  `;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@weareconceptstudio/account",
3
- "version": "0.1.9",
3
+ "version": "0.2.0",
4
4
  "description": "Concept Studio Account",
5
5
  "author": "Concept Studio",
6
6
  "license": "ISC",