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