@sc-360-v2/storefront-cms-library 0.4.8 → 0.4.9

package/dist/product-actions.scss

@@ -78,10 +78,6 @@
       //   white-space: nowrap;
       // }
 
-      .show__more__btn__wrapper {
-        position: relative;
-      }
-
       .btn__with__text[data-btn-name="addToCart"] {
         justify-content: center;
         &[data-show-shadow="false"] {
@@ -2126,6 +2122,174 @@
       //       )
       //   );
       // }
+      .popover-container {
+        position: relative;
+        display: inline-block;
+        .popover-trigger {
+          cursor: pointer;
+          font-weight: 500;
+          color: #2b6cb0;
+        }
+
+        .popover-box {
+          // position: absolute;
+          // top: calc(100% + 10px);
+          // right: 0;
+          // background: white;
+          // padding: 12px 16px;
+          // box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
+          // border-radius: 8px;
+          // min-width: 150px;
+          // z-index: 10;
+          position: absolute;
+          // border: 1px solid #ccc;
+          min-width: 150px;
+          max-width: 200px;
+          z-index: 1000;
+          // left: 40px;
+          // top: 0;
+          // right: -125%;
+          padding: 8px;
+          border-radius: 4px;
+        }
+
+        .popover-box {
+          display: flex;
+          flex-direction: column;
+
+          // width: 100%;
+          gap: prepareMediaVariable(--_ctm-dn-pr-se-im-gp);
+          background-color: var(
+            --_ctm-mob-dn-pr-se-bd-cr,
+            var(--_ctm-tab-dn-pr-se-bd-cr, var(--_ctm-dn-pr-se-bd-cr))
+          );
+
+          border-color: var(
+            --_ctm-mob-dn-pr-se-br-cr,
+            var(--_ctm-tab-dn-pr-se-br-cr, var(--_ctm-dn-pr-se-br-cr))
+          );
+
+          border-style: var(
+            --_ctm-mob-dn-pr-se-br-se,
+            var(--_ctm-tab-dn-pr-se-br-se, var(--_ctm-dn-pr-se-br-se))
+          );
+
+          border-width: var(
+            --_ctm-mob-dn-pr-se-br-wh,
+            var(--_ctm-tab-dn-pr-se-br-wh, var(--_ctm-dn-pr-se-br-wh))
+          );
+
+          border-radius: var(
+            --_ctm-mob-dn-pr-se-br-rs,
+            var(--_ctm-tab-dn-pr-se-br-rs, var(--_ctm-dn-pr-se-br-rs))
+          );
+
+          box-shadow: var(
+            --_show-shadow,
+            var(
+                --_ctm-mob-dn-pr-se-sw-ae,
+                var(--_ctm-tab-dn-pr-se-sw-ae, var(--_ctm-dn-pr-se-sw-ae))
+              )
+              var(
+                --_ctm-mob-dn-pr-se-sw-br,
+                var(--_ctm-tab-dn-pr-se-sw-br, var(--_ctm-dn-pr-se-sw-br))
+              )
+              var(
+                --_ctm-mob-dn-pr-se-sw-sd,
+                var(--_ctm-tab-dn-pr-se-sw-sd, var(--_ctm-dn-pr-se-sw-sd))
+              )
+              var(
+                --_ctm-mob-dn-pr-se-sw-cr,
+                var(--_ctm-tab-dn-pr-se-sw-cr, var(--_ctm-dn-pr-se-sw-cr))
+              )
+          );
+
+          padding: var(
+            --_ctm-mob-dn-pr-se-pg,
+            var(--_ctm-tab-dn-pr-se-pg, var(--_ctm-dn-pr-se-pg))
+          );
+        }
+
+        .popover-box strong {
+          display: block;
+          margin-bottom: 6px;
+          font-weight: bold;
+        }
+
+        .popover-arrow {
+          position: absolute;
+          top: 8px;
+          left: -5px;
+          width: 12px;
+          min-height: 12px;
+
+          // background-color: var(
+          //   --_ctm-mob-dn-pr-se-bd-cr,
+          //   var(--_ctm-tab-dn-pr-se-bd-cr, var(--_ctm-dn-pr-se-bd-cr))
+          // );
+          transform: rotate(-45deg);
+          box-shadow: -1px -1px 0px
+            var(
+              --_ctm-mob-dn-pr-se-br-cr,
+              var(--_ctm-tab-dn-pr-se-br-cr, var(--_ctm-dn-pr-se-br-cr))
+            );
+        }
+
+        .popover_item {
+          // padding-inline: var(--_sf-cd-gp);
+          color: var(--_ctm-mob-dn-pr-se-cr, var(--_ctm-tab-dn-pr-se-cr, var(--_ctm-dn-pr-se-cr)));
+          font-family:
+            var(
+              --_ctm-mob-dn-pr-se-ft-fy,
+              var(--_ctm-tab-dn-pr-se-ft-fy, var(--_ctm-dn-pr-se-ft-fy))
+            ),
+            sans-serif;
+          font-size: var(
+            --_ctm-mob-dn-pr-se-ft-se,
+            var(--_ctm-tab-dn-pr-se-ft-se, var(--_ctm-dn-pr-se-ft-se))
+          );
+          font-weight: var(
+            --_ctm-mob-dn-pr-se-ft-wt,
+            var(--_ctm-tab-dn-pr-se-ft-wt, var(--_ctm-dn-pr-se-ft-wt))
+          );
+          font-style: var(
+            --_ctm-mob-dn-pr-se-ft-se-ic,
+            var(--_ctm-tab-dn-pr-se-ft-se-ic, var(--_ctm-dn-pr-se-ft-se-ic))
+          );
+          text-align: var(
+            --_ctm-mob-dn-pr-se-tt-an,
+            var(--_ctm-tab-dn-pr-se-tt-an, var(--_ctm-dn-pr-se-tt-an))
+          );
+          letter-spacing: var(
+            --_ctm-mob-dn-pr-se-lr-sg,
+            var(--_ctm-tab-dn-pr-se-lr-sg, var(--_ctm-dn-pr-se-lr-sg))
+          );
+          line-height: var(
+            --_ctm-mob-dn-pr-se-le-ht,
+            var(--_ctm-tab-dn-pr-se-le-ht, var(--_ctm-dn-pr-se-le-ht-dc))
+          );
+          text-decoration: var(
+            --_ctm-mob-dn-pr-se-ue,
+            var(--_ctm-tab-dn-pr-se-ue, var(--_ctm-dn-pr-se-ue))
+          );
+          // margin-left: 10px;
+        }
+      }
+
+      &[data-display-style="Stack Vertically"] {
+        .popover-box {
+          left: 100%;
+          transform: translate(0%);
+          margin-left: 6px;
+          top: 0;
+        }
+      }
+      &[data-display-style="Stack Horizontally"] {
+        .popover-box {
+          right: 0;
+          margin-top: 6px;
+        }
+      }
     }
   }
 }

package/dist/types/builder/tools/element-edit/productActions.d.ts

@@ -44,6 +44,7 @@ export interface selfDesignInterface {
     download: any;
     hoverState: any;
     more: any;
+    popoverStyle: any;
 }
 export declare enum ButtonSelectorKeysEnum {
     HOVER_STATE = "hover",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sc-360-v2/storefront-cms-library",
-  "version": "0.4.8",
+  "version": "0.4.9",
   "main": "/dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {