@useinsider/guido 2.1.0-beta.42f5dfa → 2.1.0-beta.486ee9c

package/dist/static/styles/customEditorStyle.css.js

@@ -20,44 +20,72 @@ const n = `.esd-x,
 }
 .ins-product-cart ue-node-actions,
 /* Horizontal layout - hide for info, image, and button cells */
-.ins-recommendation-v3-block-v2 .product-info-cell ue-node-actions,
-.ins-recommendation-v3-block-v2 .product-info-cell ue-node-panel,
-.ins-recommendation-v3-block-v2 .product-image-cell ue-node-actions,
-.ins-recommendation-v3-block-v2 .product-image-cell ue-node-panel,
-.ins-recommendation-v3-block-v2 .button-cell ue-node-actions,
-.ins-recommendation-v3-block-v2 .button-cell ue-node-panel,
+.recommendation-block-v2 .product-info-cell ue-node-actions,
+.recommendation-block-v2 .product-info-cell ue-node-panel,
+.recommendation-block-v2 .product-image-cell ue-node-actions,
+.recommendation-block-v2 .product-image-cell ue-node-panel,
+.recommendation-block-v2 .button-cell ue-node-actions,
+.recommendation-block-v2 .button-cell ue-node-panel,
 /* Vertical layout - hide for product-card-segment inner cells */
-.ins-recommendation-v3-block-v2 .product-card-segment ue-node-actions,
-.ins-recommendation-v3-block-v2 .product-card-segment ue-node-panel,
+.recommendation-block-v2 .product-card-segment ue-node-actions,
+.recommendation-block-v2 .product-card-segment ue-node-panel,
 /* Hide for specific product attribute cells in both layouts */
-.ins-recommendation-v3-block-v2 .product-image ue-node-actions,
-.ins-recommendation-v3-block-v2 .product-image ue-node-panel,
-.ins-recommendation-v3-block-v2 .product-name ue-node-actions,
-.ins-recommendation-v3-block-v2 .product-name ue-node-panel,
-.ins-recommendation-v3-block-v2 .product-price ue-node-actions,
-.ins-recommendation-v3-block-v2 .product-price ue-node-panel,
-.ins-recommendation-v3-block-v2 .product-old-price ue-node-actions,
-.ins-recommendation-v3-block-v2 .product-old-price ue-node-panel,
-.ins-recommendation-v3-block-v2 .product-omnibus-price ue-node-actions,
-.ins-recommendation-v3-block-v2 .product-omnibus-price ue-node-panel,
-.ins-recommendation-v3-block-v2 .product-omnibus-discount ue-node-actions,
-.ins-recommendation-v3-block-v2 .product-omnibus-discount ue-node-panel,
-.ins-recommendation-v3-block-v2 .product-button ue-node-actions,
-.ins-recommendation-v3-block-v2 .product-button ue-node-panel {
+.recommendation-block-v2 .product-image ue-node-actions,
+.recommendation-block-v2 .product-image ue-node-panel,
+.recommendation-block-v2 .product-name ue-node-actions,
+.recommendation-block-v2 .product-name ue-node-panel,
+.recommendation-block-v2 .product-price ue-node-actions,
+.recommendation-block-v2 .product-price ue-node-panel,
+.recommendation-block-v2 .product-old-price ue-node-actions,
+.recommendation-block-v2 .product-old-price ue-node-panel,
+.recommendation-block-v2 .product-omnibus-price ue-node-actions,
+.recommendation-block-v2 .product-omnibus-price ue-node-panel,
+.recommendation-block-v2 .product-omnibus-discount ue-node-actions,
+.recommendation-block-v2 .product-omnibus-discount ue-node-panel,
+.recommendation-block-v2 .product-button ue-node-actions,
+.recommendation-block-v2 .product-button ue-node-panel {
     display: none !important;
 }
 
-/* Apply to the table cell (td) with text-trim-enabled class */
-.text-trim-enabled {
-    max-width: 0 !important;
+/* Mobile layout: hide mobile container by default in editor */
+.ins-recommendation-mobile-container {
+    display: none;
 }
 
-.text-trim-enabled p {
-    overflow: hidden !important;
-    text-overflow: ellipsis !important;
-    white-space: nowrap !important;
-    margin: 0 !important;
-    display: block !important;
+/* Mobile layout: when Stripo mobile mode is active, swap containers (grid layout only) */
+.ue-mobile-mode .ins-recommendation-desktop-container {
+    display: none !important;
+}
+
+.ue-mobile-mode .ins-recommendation-mobile-container {
+    display: table !important;
+}
+
+/* List layout: keep desktop container visible in mobile mode (list rows are inherently responsive)
+   Uses class selector instead of [data-layout="list"] for Gmail compatibility */
+.ue-mobile-mode .ins-recommendation-list-layout .ins-recommendation-desktop-container {
+    display: table !important;
+}
+
+.ue-mobile-mode .ins-recommendation-list-layout .ins-recommendation-mobile-container {
+    display: none !important;
+}
+
+/* List layout mobile: reduce image and button width for better text readability */
+.ue-mobile-mode .ins-recommendation-list-layout .product-image-cell {
+    width: 80px !important;
+}
+
+.ue-mobile-mode .ins-recommendation-list-layout .product-image-cell img {
+    max-width: 80px !important;
+}
+
+.ue-mobile-mode .ins-recommendation-list-layout .button-cell {
+    width: 80px !important;
+}
+
+.ue-mobile-mode .ins-recommendation-list-layout .product-info-cell {
+    padding: 5px 8px !important;
 }
 `;
 export {

package/dist/static/styles/variables.css.js

@@ -10,6 +10,7 @@ const o = `:host {
     --guido-color-gray-1: #F0F0F0;
     --guido-color-gray-0: #F9F9F9;
     --guido-color-neutral-800: #222938;
+    --guido-color-neutral-700: #2C3546;
     --guido-color-neutral-200: #DCDFE6;
     --guido-color-neutral-100: #EFF2F4;
     --guido-color-danger-300: #e84342;
@@ -25,6 +26,7 @@ const o = `:host {
     --guido-color-border-onpage-message-error: var(--guido-color-danger-500);
     --guido-color-background-toaster-success: #128745;
     --guido-color-background-toaster-error: var(--guido-color-danger-500);
+    --guido-color-background-toaster-info: var(--guido-color-neutral-700);
     --guido-color-background-toaster-warn: #D37400;
 }
 `;

package/dist/static/templates/empty/index.html.js

@@ -0,0 +1,74 @@
+const t = `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+
+<head>
+    <meta charset="UTF-8">
+    <meta content="width=device-width, initial-scale=1" name="viewport">
+    <meta name="x-apple-disable-message-reformatting">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta content="telephone=no" name="format-detection">
+    <title></title>
+    <!--[if (mso 16)]><style type="text/css">a{text-decoration:none}</style><![endif]-->
+    <!--[if gte mso 9]><style>sup{font-size:100% !important}</style><![endif]-->
+    <!--[if gte mso 9]><style>sup{font-size:100% !important}</style><![endif]-->
+    <!--[if gte mso 9]><style>sup{font-size:100% !important}</style><![endif]-->
+    <!--[if gte mso 9]><style>sup{font-size:100% !important}</style><![endif]-->
+    <!--[if gte mso 9]><style>sup { font-size: 100% !important; }</style><![endif]-->
+</head>
+
+<body>
+    <div class="es-wrapper-color">
+        <!--[if gte mso 9]>
+			<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
+				<v:fill type="tile" color="#f6f6f6"></v:fill>
+			</v:background>
+		<![endif]-->
+        <table class="es-wrapper" width="100%" cellspacing="0" cellpadding="0">
+            <tbody>
+                <tr>
+                    <td class="esd-email-paddings" valign="top">
+                        <table class="es-content esd-footer-popover" cellspacing="0" cellpadding="0" align="center">
+                            <tbody>
+                                <tr>
+                                    <td class="esd-stripe" align="center">
+                                        <table class="es-content-body" width="600" cellspacing="0" cellpadding="0" bgcolor="#ffffff" align="center">
+                                            <tbody>
+                                                <tr>
+                                                    <td class="esd-structure es-p20" align="left">
+                                                        <table cellpadding="0" cellspacing="0" width="100%">
+                                                            <tbody>
+                                                                <tr>
+                                                                    <td width="560" class="esd-container-frame" align="center" valign="top">
+                                                                        <table cellpadding="0" cellspacing="0" width="100%">
+                                                                            <tbody>
+                                                                                <tr>
+                                                                                    <td align="center" class="esd-empty-container" style="display: none;"></td>
+                                                                                </tr>
+                                                                            </tbody>
+                                                                        </table>
+                                                                    </td>
+                                                                </tr>
+                                                            </tbody>
+                                                        </table>
+                                                    </td>
+                                                </tr>
+                                            </tbody>
+                                        </table>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+    <div style="position: absolute; left: -9999px; top: -9999px; margin: 0px;"></div>
+    <div style="position: absolute; left: -9999px; top: -9999px; margin: 0px; padding: 0px; border: 0px none; width: 1px;"></div>
+</body>
+
+</html>
+`;
+export {
+  t as default
+};