@pagenflow/email 1.3.5 → 1.3.6
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/dist/index.cjs.js +14 -12
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +14 -12
- package/dist/index.esm.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs.js
CHANGED
|
@@ -2022,53 +2022,55 @@ function Head({ children, backgroundColor = "#ffffff", title = "Email Preview",
|
|
|
2022
2022
|
}
|
|
2023
2023
|
|
|
2024
2024
|
/* 3. Handling Mobile Wrap - Pure CSS Solution */
|
|
2025
|
+
/* Target only the direct row-content-table, not nested ones */
|
|
2026
|
+
|
|
2025
2027
|
/* Force table to act like block container */
|
|
2026
|
-
.responsive-row[data-mobile-wrap="true"] .content-table {
|
|
2028
|
+
.responsive-row[data-mobile-wrap="true"] > tbody > tr > td > table > tbody > tr > td > table > tbody > tr > td > .row-content-table {
|
|
2027
2029
|
width: 100% !important;
|
|
2028
2030
|
max-width: 100% !important;
|
|
2029
2031
|
}
|
|
2030
2032
|
|
|
2031
2033
|
/* Force table row to stack cells */
|
|
2032
|
-
.responsive-row[data-mobile-wrap="true"] .content-tr {
|
|
2034
|
+
.responsive-row[data-mobile-wrap="true"] > tbody > tr > td > table > tbody > tr > td > table > tbody > tr > td > .row-content-table > tbody > .content-tr {
|
|
2033
2035
|
display: block !important;
|
|
2034
2036
|
}
|
|
2035
2037
|
|
|
2036
2038
|
/* Force each child cell to be full width block */
|
|
2037
|
-
.responsive-row[data-mobile-wrap="true"] .child-cell {
|
|
2039
|
+
.responsive-row[data-mobile-wrap="true"] > tbody > tr > td > table > tbody > tr > td > table > tbody > tr > td > .row-content-table > tbody > .content-tr > .child-cell {
|
|
2038
2040
|
display: block !important;
|
|
2039
2041
|
width: 100% !important;
|
|
2040
2042
|
box-sizing: border-box !important;
|
|
2041
2043
|
}
|
|
2042
2044
|
|
|
2043
2045
|
/* Hide horizontal gap cells and create vertical spacing with padding */
|
|
2044
|
-
.responsive-row[data-mobile-wrap="true"] .row-gap-td {
|
|
2046
|
+
.responsive-row[data-mobile-wrap="true"] > tbody > tr > td > table > tbody > tr > td > table > tbody > tr > td > .row-content-table > tbody > .content-tr > .row-gap-td {
|
|
2045
2047
|
display: none !important;
|
|
2046
2048
|
width: 0 !important;
|
|
2047
2049
|
height: 0 !important;
|
|
2048
2050
|
}
|
|
2049
2051
|
|
|
2050
2052
|
/* Add vertical spacing between stacked cells using margin */
|
|
2051
|
-
.responsive-row[data-mobile-wrap="true"] .child-cell:not(:last-child) {
|
|
2053
|
+
.responsive-row[data-mobile-wrap="true"] > tbody > tr > td > table > tbody > tr > td > table > tbody > tr > td > .row-content-table > tbody > .content-tr > .child-cell:not(:last-child) {
|
|
2052
2054
|
margin-bottom: 20px !important;
|
|
2053
2055
|
}
|
|
2054
2056
|
|
|
2055
2057
|
/* Dynamic gap support - common values */
|
|
2056
|
-
.responsive-row[data-mobile-wrap="true"][data-gap="10px"] .child-cell:not(:last-child) {
|
|
2058
|
+
.responsive-row[data-mobile-wrap="true"][data-gap="10px"] > tbody > tr > td > table > tbody > tr > td > table > tbody > tr > td > .row-content-table > tbody > .content-tr > .child-cell:not(:last-child) {
|
|
2057
2059
|
margin-bottom: 10px !important;
|
|
2058
2060
|
}
|
|
2059
|
-
.responsive-row[data-mobile-wrap="true"][data-gap="15px"] .child-cell:not(:last-child) {
|
|
2061
|
+
.responsive-row[data-mobile-wrap="true"][data-gap="15px"] > tbody > tr > td > table > tbody > tr > td > table > tbody > tr > td > .row-content-table > tbody > .content-tr > .child-cell:not(:last-child) {
|
|
2060
2062
|
margin-bottom: 15px !important;
|
|
2061
2063
|
}
|
|
2062
|
-
.responsive-row[data-mobile-wrap="true"][data-gap="20px"] .child-cell:not(:last-child) {
|
|
2064
|
+
.responsive-row[data-mobile-wrap="true"][data-gap="20px"] > tbody > tr > td > table > tbody > tr > td > table > tbody > tr > td > .row-content-table > tbody > .content-tr > .child-cell:not(:last-child) {
|
|
2063
2065
|
margin-bottom: 20px !important;
|
|
2064
2066
|
}
|
|
2065
|
-
.responsive-row[data-mobile-wrap="true"][data-gap="24px"] .child-cell:not(:last-child) {
|
|
2067
|
+
.responsive-row[data-mobile-wrap="true"][data-gap="24px"] > tbody > tr > td > table > tbody > tr > td > table > tbody > tr > td > .row-content-table > tbody > .content-tr > .child-cell:not(:last-child) {
|
|
2066
2068
|
margin-bottom: 24px !important;
|
|
2067
2069
|
}
|
|
2068
|
-
.responsive-row[data-mobile-wrap="true"][data-gap="30px"] .child-cell:not(:last-child) {
|
|
2070
|
+
.responsive-row[data-mobile-wrap="true"][data-gap="30px"] > tbody > tr > td > table > tbody > tr > td > table > tbody > tr > td > .row-content-table > tbody > .content-tr > .child-cell:not(:last-child) {
|
|
2069
2071
|
margin-bottom: 30px !important;
|
|
2070
2072
|
}
|
|
2071
|
-
.responsive-row[data-mobile-wrap="true"][data-gap="40px"] .child-cell:not(:last-child) {
|
|
2073
|
+
.responsive-row[data-mobile-wrap="true"][data-gap="40px"] > tbody > tr > td > table > tbody > tr > td > table > tbody > tr > td > .row-content-table > tbody > .content-tr > .child-cell:not(:last-child) {
|
|
2072
2074
|
margin-bottom: 40px !important;
|
|
2073
2075
|
}
|
|
2074
2076
|
}
|
|
@@ -2346,7 +2348,7 @@ function Row({ children, config, devNode }) {
|
|
|
2346
2348
|
width: "100%",
|
|
2347
2349
|
height: "100%",
|
|
2348
2350
|
borderCollapse: "collapse",
|
|
2349
|
-
}, children: jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { align: tdAlign, children: jsxRuntime.jsx("table", Object.assign({ "aria-label": "Row Content", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: contentTableStyle }, (config.height && { height: config.height }), { className: "content-table", children: jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { className: "content-tr", children: childrenArray.map((child, index) => (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx("td", { valign: tdValign, style: {
|
|
2351
|
+
}, children: jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { align: tdAlign, children: jsxRuntime.jsx("table", Object.assign({ "aria-label": "Row Content", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: contentTableStyle }, (config.height && { height: config.height }), { className: "content-table row-content-table", children: jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { className: "content-tr", children: childrenArray.map((child, index) => (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx("td", { valign: tdValign, style: {
|
|
2350
2352
|
verticalAlign: tdValign,
|
|
2351
2353
|
textAlign: "left",
|
|
2352
2354
|
padding: "0",
|