@sc-360-v2/storefront-cms-library 0.2.73 → 0.2.76

package/dist/contact-us.scss

@@ -2,7 +2,8 @@
 @use "sass:list";
 
 [data-div-type="element"] {
-  &[data-element-type="contactUs"] {
+  &[data-element-type="contactUs"],
+  &[data-element-type="createForm"] {
     width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
     height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
     margin: var(--_ctm-lt-mn, --_tst-lt-mn);
@@ -10,11 +11,11 @@
     position: relative;
 
     & > .wrapper {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 100%;
-      height: 100%;
+      // display: flex;
+      // align-items: center;
+      // justify-content: center;
+      // width: 100%;
+      // height: 100%;
     }
 
     & form {
@@ -24,9 +25,18 @@
 
     &[data-widget-border="true"] {
       .search-wrapper {
-        border-color: var(--_ctm-dn-sh-br-br-cr, var(--_tst-dn-sh-br-br-cr));
-        border-style: var(--_ctm-dn-sh-br-br-se, var(--_tst-dn-sh-br-br-se));
-        border-width: var(--_ctm-dn-sh-br-br-wh, var(--_tst-dn-sh-br-br-wh));
+        border-color: var(
+          --_ctm-mob-dn-sh-br-br-cr,
+          var(--_ctm-tab-dn-sh-br-br-cr, var(--_ctm-dn-sh-br-br-cr))
+        );
+        border-style: var(
+          --_ctm-mob-dn-sh-br-br-se,
+          var(--_ctm-tab-dn-sh-br-br-se, var(--_ctm-dn-sh-br-br-se))
+        );
+        border-width: var(
+          --_ctm-mob-dn-sh-br-br-wh,
+          var(--_ctm-tab-dn-sh-br-br-wh, var(--_ctm-dn-sh-br-br-wh))
+        );
       }
     }
 
@@ -37,143 +47,5 @@
     &[data-show-shadow="false"] {
       --_show-shadow: none;
     }
-
-    .contact-us-container {
-      display: flex;
-      padding: 48px 96px 96px 96px;
-      flex-direction: column;
-      align-items: flex-start;
-      gap: 24px;
-      align-self: stretch;
-      width: 100%;
-      height: 100%;
-      .header-section {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        align-self: stretch;
-        .head-title {
-          color: #333;
-          font-family: "Hanken Grotesk";
-          font-size: 24px;
-          font-style: normal;
-          font-weight: 600;
-          line-height: 125%; /* 30px */
-          letter-spacing: -0.48px;
-        }
-        .sub-title {
-          color: #626262;
-          font-family: "Hanken Grotesk";
-          font-size: 14px;
-          font-style: normal;
-          font-weight: 400;
-          line-height: 150%; /* 21px */
-          letter-spacing: -0.28px;
-        }
-      }
-      .form-section {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        align-self: stretch;
-        gap: 16px;
-        .form-row {
-          display: flex;
-          align-items: flex-start;
-          gap: 24px;
-          align-self: stretch;
-        }
-        .form-group {
-          display: flex;
-          flex-direction: column;
-          align-items: flex-start;
-          gap: 6px;
-          flex: 1 0 0;
-        }
-        .form-group-uploadfile {
-          display: flex;
-          padding: 12px;
-          justify-content: center;
-          align-items: center;
-          gap: 8px;
-          flex: 1 0 0;
-          align-self: stretch;
-          border-radius: 4px;
-          border: 1px dashed var(--d-0-d-7-e-2, #d0d7e2);
-          background: #fafafa;
-          .input-control {
-            display: none;
-          }
-          label {
-            color: #4f5970;
-            font-family: "Hanken Grotesk";
-            font-size: 20px;
-            font-style: normal;
-            font-weight: 400;
-            line-height: 150%; /* 30px */
-            letter-spacing: -0.4px;
-          }
-        }
-        label {
-          color: var(--4-f-5970, #4f5970);
-          text-align: center;
-          font-family: Inter;
-          font-size: 14px;
-          font-style: normal;
-          font-weight: 600;
-          line-height: normal;
-        }
-        .input-control {
-          width: 100%;
-          display: flex;
-          height: 48px;
-          padding: 12px;
-          align-items: center;
-          gap: 10px;
-          align-self: stretch;
-          border-radius: 4px;
-          border: 1px solid var(--d-0-d-7-e-2, #d0d7e2);
-          background: var(--ffffff, #fff);
-          line-height: 18px;
-          outline: none;
-          transition: border-color 0.2s ease-in-out;
-        }
-        .form-column {
-          display: flex;
-          flex-direction: column;
-          align-items: flex-start;
-          gap: 10px;
-          align-self: stretch;
-          width: 100%;
-          .form-group {
-            width: 100%;
-          }
-          .textarea-control {
-            display: flex;
-            height: 120px;
-            padding: 12px;
-            align-items: flex-start;
-            gap: 10px;
-            align-self: stretch;
-            border-radius: 4px;
-            border: 1px solid var(--d-0-d-7-e-2, #d0d7e2);
-            background: var(--ffffff, #fff);
-            width: 100%;
-          }
-        }
-      }
-      .submit-btn {
-        display: flex;
-        padding: 16px 24px;
-        justify-content: center;
-        align-items: center;
-        gap: 12px;
-        flex: 1 0 0;
-        border-radius: 4px;
-        background: #243dc6;
-        color: #fff;
-        width: 100%;
-      }
-    }
   }
 }

package/dist/container.scss

@@ -32,10 +32,31 @@ $activeElementSelector: "[data-has-clicked='true']";
       &.wrapper {
         width: 100%;
         padding: var(--_ctm-mob-con-lt-pg, var(--_ctm-tab-con-lt-pg, var(--_ctm-con-lt-pg)));
-        background: var(
+
+        background-color: var(
           --_ctm-mob-con-dn-bd-cr,
           var(--_ctm-tab-con-dn-bd-cr, var(--_ctm-con-dn-bd-cr))
         );
+        background-image: var(
+          --_ctm-mob-con-dn-bd-ie,
+          var(--_ctm-tab-con-dn-bd-ie, var(--_ctm-con-dn-bd-ie))
+        );
+        background-attachment: var(
+          --_ctm-mob-con-dn-bd-at,
+          var(--_ctm-tab-con-dn-bd-at, var(--_ctm-con-dn-bd-at))
+        );
+        background-position: var(
+          --_ctm-mob-con-dn-bd-pn,
+          var(--_ctm-tab-con-dn-bd-pn, var(--_ctm-con-dn-bd-pn))
+        );
+        background-repeat: var(
+          --_ctm-mob-con-dn-bd-rt,
+          var(--_ctm-tab-con-dn-bd-rt, var(--_ctm-con-dn-bd-rt))
+        );
+        background-size: var(
+          --_ctm-mob-con-dn-bd-se,
+          var(--_ctm-tab-con-dn-bd-se, var(--_ctm-con-dn-bd-se))
+        );
         border-radius: var(
           --_ctm-mob-con-dn-br-rs,
           var(--_ctm-tab-con-dn-br-rs, var(--_ctm-con-dn-br-rs))