mkfashion-sdk 2.4.7 → 2.4.8
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.
- package/mkfashion-sdk-2.4.8.tgz +0 -0
- package/package.json +1 -1
- package/src/mkfashion.js +4 -3
- package/test-responsive.html +45 -0
|
Binary file
|
package/package.json
CHANGED
package/src/mkfashion.js
CHANGED
|
@@ -1009,8 +1009,9 @@ const mkfashion = {
|
|
|
1009
1009
|
|
|
1010
1010
|
return this._el('button', {
|
|
1011
1011
|
attrs: { type: 'button' },
|
|
1012
|
-
style: `display:
|
|
1013
|
-
gap: 8px; padding: 8px; width:
|
|
1012
|
+
style: `display: flex; align-items: center; justify-content: center;
|
|
1013
|
+
gap: 8px; padding: 8px; width: 100%; max-width: 238px;
|
|
1014
|
+
box-sizing: border-box;
|
|
1014
1015
|
background: ${c.bgColor};
|
|
1015
1016
|
border: ${this._borderFromConfig(c)};
|
|
1016
1017
|
border-radius: ${c.borderRadiusPx};
|
|
@@ -1124,7 +1125,7 @@ const mkfashion = {
|
|
|
1124
1125
|
|
|
1125
1126
|
return this._el('div', {
|
|
1126
1127
|
style: `display: flex; flex-direction: column; align-items: flex-start;
|
|
1127
|
-
padding: 12px; width: 402px; min-height: 140px;
|
|
1128
|
+
padding: 12px; width: 100%; max-width: 402px; min-height: 140px;
|
|
1128
1129
|
box-sizing: border-box;
|
|
1129
1130
|
background: ${c.cardBgColor};
|
|
1130
1131
|
border-radius: ${c.cardBorderRadiusPx};
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="pt-BR">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<title>Test — Responsividade do botão</title>
|
|
6
|
+
<script src="./src/mkfashion.js"></script>
|
|
7
|
+
<style>
|
|
8
|
+
body { font-family: system-ui, sans-serif; margin: 24px; }
|
|
9
|
+
h3 { margin: 20px 0 8px; font-size: 13px; color: #444; }
|
|
10
|
+
.box { background: #fef3c7; padding: 8px; margin-bottom: 8px; }
|
|
11
|
+
</style>
|
|
12
|
+
</head>
|
|
13
|
+
<body>
|
|
14
|
+
|
|
15
|
+
<h3>Container 800px (mais largo que o max-width)</h3>
|
|
16
|
+
<div class="box" style="width: 800px;">
|
|
17
|
+
<div id="c1"></div>
|
|
18
|
+
</div>
|
|
19
|
+
|
|
20
|
+
<h3>Container 300px (menor que 402px do card)</h3>
|
|
21
|
+
<div class="box" style="width: 300px;">
|
|
22
|
+
<div id="c2"></div>
|
|
23
|
+
</div>
|
|
24
|
+
|
|
25
|
+
<h3>Container 180px (menor que 238px do simples)</h3>
|
|
26
|
+
<div class="box" style="width: 180px;">
|
|
27
|
+
<div id="c3"></div>
|
|
28
|
+
</div>
|
|
29
|
+
|
|
30
|
+
<h3>Container sem width (herda do pai)</h3>
|
|
31
|
+
<div class="box">
|
|
32
|
+
<div id="c4"></div>
|
|
33
|
+
</div>
|
|
34
|
+
|
|
35
|
+
<script>
|
|
36
|
+
var pid = '69c56d5373ecdf64df48e330'
|
|
37
|
+
var sku = '000756397001'
|
|
38
|
+
// Configura os 4 inits — todos pra mesma config (gregory-card no momento)
|
|
39
|
+
mkfashion.init({ projectId: pid, identifier: sku, target: '#c1' })
|
|
40
|
+
mkfashion.init({ projectId: pid, identifier: sku, target: '#c2' })
|
|
41
|
+
mkfashion.init({ projectId: pid, identifier: sku, target: '#c3' })
|
|
42
|
+
mkfashion.init({ projectId: pid, identifier: sku, target: '#c4' })
|
|
43
|
+
</script>
|
|
44
|
+
</body>
|
|
45
|
+
</html>
|