@gem-sdk/styles 1.36.13 → 2.0.0-dev.877

package/src/css/builds/base.css

@@ -30,45 +30,57 @@ html {
   width: 100%;
   min-height: 100%;
 }
+
 .gem-slider:not([data-keen-slider-disabled])[data-keen-slider-reverse] {
   flex-direction: row-reverse;
 }
+
 .gem-slider:not([data-keen-slider-disabled])[data-keen-slider-v] {
   flex-wrap: wrap;
 }
+
 [data-keen-slider-moves] * {
   pointer-events: none;
 }
+
 .pb-safe {
   padding-bottom: env(safe-area-inset-bottom);
 }
+
 .pt-safe {
   padding-top: env(safe-area-inset-top);
 }
+
 .pl-safe {
   padding-left: env(safe-area-inset-left);
 }
+
 .pr-safe {
   padding-right: env(safe-area-inset-right);
 }
+
 .p-safe {
-  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
-    env(safe-area-inset-left);
+  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
 }
+
 .px-safe {
   padding-left: env(safe-area-inset-left);
   padding-right: env(safe-area-inset-right);
 }
+
 .py-safe {
   padding-top: env(safe-area-inset-top);
   padding-bottom: env(safe-area-inset-bottom);
 }
+
 .h-safe {
   height: calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)));
 }
+
 .min-h-safe {
   min-height: calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)));
 }
+
 .gp-text ul,
 .gp-text ol {
   display: block;
@@ -84,12 +96,15 @@ html {
   -webkit-padding-start: 40px;
   padding-left: 40px;
 }
+
 .gp-text ul {
   list-style-type: disc;
 }
+
 .gp-text li {
   list-style-position: inside;
 }
+
 .gp-text ol {
   list-style-type: decimal;
 }
@@ -105,20 +120,24 @@ html {
   align-items: center;
   visibility: hidden;
   overflow: hidden;
-  &:after {
-    content: 'Drop element here';
-    visibility: hidden;
-    text-align: center;
-    font-size: 14px;
-    font-weight: bold;
-    /* display: -webkit-box;
-    -webkit-line-clamp: 1;
-    -webkit-box-orient: vertical; */
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
+
+  &:not(.product-feature-image) {
+    &:after {
+      content: 'Drop element here';
+      visibility: hidden;
+      text-align: center;
+      font-size: 14px;
+      font-weight: bold;
+      /* display: -webkit-box;
+      -webkit-line-clamp: 1;
+      -webkit-box-orient: vertical; */
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
   }
 }
+
 .gp-dialog {
   display: none;
 }
@@ -179,12 +198,23 @@ p {
   margin-inline-end: 0px;
 }
 
-.gp-p-description-text h1, .gp-p-description-text h2, .gp-p-description-text h3, .gp-p-description-text h4, .gp-p-description-text h5, .gp-p-description-text h6 {
+.gp-p-description-text h1,
+.gp-p-description-text h2,
+.gp-p-description-text h3,
+.gp-p-description-text h4,
+.gp-p-description-text h5,
+.gp-p-description-text h6 {
   display: block;
   font-weight: bold;
 }
 
-.gp-p-description-text p, .gp-p-description-text h1, .gp-p-description-text h2, .gp-p-description-text h3, .gp-p-description-text h4, .gp-p-description-text h5, .gp-p-description-text h6 {
+.gp-p-description-text p,
+.gp-p-description-text h1,
+.gp-p-description-text h2,
+.gp-p-description-text h3,
+.gp-p-description-text h4,
+.gp-p-description-text h5,
+.gp-p-description-text h6 {
   margin: 0 0 1em 0;
   line-height: 1.4;
 }
@@ -218,6 +248,7 @@ p {
 .gp-p-description-text ul {
   list-style-type: disc;
 }
+
 .gp-p-description-text ol {
   list-style-type: decimal;
 }
@@ -255,4 +286,4 @@ p {
 
 .gp-tab-header-list::-webkit-scrollbar {
   display: none;
-}
+}

package/src/css/builds/builder.css

@@ -222,11 +222,11 @@
       background-color: #d8e1ff !important;
     }
 
-    &[is-drag-to-theme-section='true'] {
+    &[is-drag-to-theme-section='true'], &[is-drag-to-shopify-section='true'] {
       background-color: rgba(254, 228, 227, 0.24) !important;
       display: block;
 
-      .drag-to-theme-section-message {
+      .drag-to-section-message {
         display: flex;
         align-items: center;
         position: sticky;
@@ -261,6 +261,11 @@
       }
     }
 
+    &[is-drag-to-exceeded-section='true'] {
+      background-color: rgba(244,67,54, 0.08) !important;
+      border: 1px solid rgba(244,67,54) !important;
+      display: block;
+    }
     &[is-component-dragging='true'] {
       background-color: #8aa4ff66 !important;
     }
@@ -411,6 +416,17 @@
   }
 }
 
+.post-purchase-page {
+  font-size: 14px;
+  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  line-height: 15px;
+  select:focus {
+    border-color: #1879b9;
+    box-shadow: 0 0 0 1px #1879b9;
+  }
+}
+
+
 /* .button-text.ck p {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -462,3 +478,7 @@
     background-color: #d8e1ff !important;
   } */
 }
+
+.editor-content {
+  font-family: Inter, sans-serif, ui-sans-serif, system-ui !important;
+}

package/src/css/builds/toolbar.css

@@ -125,6 +125,7 @@
     [data-toolbar-icon-parent],
     [data-toolbar-zoom-out],
     [data-toolbar-duplicate],
+    [data-toolbar-visibility],
     [data-toolbar-delete] {
       display: none;
     }
@@ -200,10 +201,27 @@
     }
   }
 
+  [data-toolbar][data-toolbar-shopify-section='true'][data-toolbar-hover][data-toolbar-hover-focus] {
+    background: #29845A;
+    padding: 4px;
+  }
+
+  [data-toolbar][data-toolbar-shopify-section='true'][data-toolbar-hover] {
+    &:hover {
+      background: #29845A;
+    }
+  }
+
+  [data-toolbar][data-toolbar-shopify-section='true'][data-toolbar-active] {
+    &:hover {
+      background: #29845A;
+    }
+  }
+
   [data-toolbar][data-toolbar-active] {
     opacity: 1;
     visibility: visible;
-    z-index: 20;
+    z-index: 1000;
     height: 32px;
     top: -35px;
     background: #151515;
@@ -231,6 +249,14 @@
       }
     }
 
+    &[data-toolbar-shopify-section='true'] {
+      background: #29845A;
+
+      &[data-toolbar-hover-focus] {
+        background: #29845A;
+      }
+    }
+
     [data-toolbar-show-parent] {
       padding: 4px;
       margin-right: 9px;
@@ -276,7 +302,7 @@
       }
 
       &:hover {
-        background: rgba(225, 225, 225, 0.2);
+        background-color: rgba(225, 225, 225, 0.2);
       }
 
       [data-toolbar-icon-drag] {
@@ -285,6 +311,7 @@
     }
 
     [data-toolbar-duplicate],
+    [data-toolbar-visibility],
     [data-toolbar-delete],
     [data-toolbar-zoom-out],
     [data-toolbar-active-create-theme-section] {
@@ -301,7 +328,7 @@
       }
 
       &:hover {
-        background: rgba(225, 225, 225, 0.2);
+        background-color: rgba(225, 225, 225, 0.2);
       }
 
       &[data-toolbar-disable='true'] {
@@ -358,8 +385,7 @@
     border-color: #424242;
   }
 
-  [data-toolbar][data-toolbar-section='true'][data-toolbar-hover-focus]
-    [data-toolbar-create-theme-section] {
+  [data-toolbar][data-toolbar-section='true'][data-toolbar-hover-focus] [data-toolbar-create-theme-section] {
     border-color: #424242;
   }
 
@@ -377,6 +403,11 @@
     border-color: #9144da;
   }
 
+  [data-toolbar][data-toolbar-shopify-section='true'][data-toolbar-hover-focus],
+  [data-toolbar][data-toolbar-shopify-section='true'][data-toolbar-active] {
+    border-color: #29845A;
+  }
+
   [data-toolbar][data-toolbar-active][data-toolbar-limit='true'],
   [data-toolbar][data-toolbar-hover][data-toolbar-limit='true'],
   [data-toolbar][data-toolbar-hover][data-toolbar-hover-focus][data-toolbar-limit='true'],
@@ -406,6 +437,12 @@
     transition: opacity 0ms ease-in-out;
   }
 
+  &[data-section-exceeded][data-toolbar-wrap] {
+    [data-outline][data-outline-section='true'] {
+      border-color: #f44336;
+    }
+  }
+
   /* State Outline */
   [data-outline][data-outline-hover],
   [data-outline][data-outline-force-hover] {
@@ -455,7 +492,9 @@
   }
 
   [data-component-tag='Heading'],
-  [data-component-tag='Text'] {
+  [data-component-tag='Text'],
+  [data-component-tag='PostPurchaseHeading'],
+  [data-component-tag='PostPurchaseText'] {
     [data-outline][data-outline-editor-inline-focus] {
       border-color: #3c67ff;
       outline: 4px solid rgba(60, 103, 255, 0.24);
@@ -468,8 +507,9 @@
   }
 
   [data-component-tag='Section'] {
+
     /* disable divider */
-    > [data-toolbar] [data-toolbar-show-parent] {
+    >[data-toolbar] [data-toolbar-show-parent] {
       margin-right: 0px;
 
       &:before {
@@ -485,6 +525,13 @@
     z-index: 0;
   }
 
+  [data-outline][data-outline-shopify-section='true'],
+  [data-outline][data-outline-shopify-section='true'][data-outline-hover-focus],
+  [data-outline][data-outline-shopify-section='true'][data-outline-active] {
+    border-color: #29845A;
+    z-index: 0;
+  }
+
   [data-outline][data-outline-active][data-outline-limit='true'],
   [data-outline][data-outline-hover][data-outline-limit='true'],
   [data-outline][data-outline-hover][data-outline-hover-focus][data-outline-limit='true'],
@@ -498,6 +545,7 @@
   }
 
   [data-theme-section] {
+
     /* disable delay animation on theme section */
     [data-toolbar][data-toolbar-hover][data-toolbar-hover-focus],
     [data-outline][data-outline-hover][data-outline-hover-focus],
@@ -520,6 +568,22 @@
     }
   }
 
+  [data-shopify-section] {
+
+    /* disable delay animation on shopify section */
+    [data-toolbar][data-toolbar-hover][data-toolbar-hover-focus],
+    [data-outline][data-outline-hover][data-outline-hover-focus],
+    [data-toolbar-add-top],
+    [data-toolbar-add-bottom] {
+      transition-delay: 0ms;
+    }
+
+    [data-toolbar-add-top],
+    [data-toolbar-add-bottom] {
+      border-color: #29845A;
+    }
+  }
+
   [data-theme-section-status] {
     display: none;
     align-items: center;
@@ -692,7 +756,7 @@
         }
 
         [data-value-number] {
-          font-family: Inter, sans-serif;
+          font-family: Inter;
           background-color: #3c67ff;
           border-radius: 6px;
           color: #fff;
@@ -758,7 +822,7 @@
     [data-toolbar-tooltip] {
       width: unset;
       max-width: unset;
-      background-color: #676767 !important;
+      background-color: #333333 !important;
       color: #fff;
       text-align: center;
       border-radius: 6px;
@@ -790,7 +854,7 @@
         margin-top: -5px;
         border-width: 5px;
         border-style: solid;
-        border-color: transparent #676767 transparent transparent;
+        border-color: transparent #333333 transparent transparent;
       }
     }
 
@@ -806,7 +870,7 @@
         margin-top: -5px;
         border-width: 5px;
         border-style: solid;
-        border-color: transparent transparent transparent #676767;
+        border-color: transparent transparent transparent #333333;
       }
     }
 
@@ -817,12 +881,12 @@
       &::after {
         content: ' ';
         position: absolute;
-        top: 100%;
+        top: calc(100% - 0.5px);
         left: 50%;
         margin-left: -5px;
         border-width: 5px;
         border-style: solid;
-        border-color: #676767 transparent transparent transparent;
+        border-color: #333333 transparent transparent transparent;
       }
     }
 
@@ -838,7 +902,7 @@
         margin-left: -5px;
         border-width: 5px;
         border-style: solid;
-        border-color: transparent transparent #676767 transparent;
+        border-color: transparent transparent #333333 transparent;
       }
     }
   }
@@ -862,6 +926,36 @@
     }
   }
 
+  [data-toolbar-tooltip-trigger][data-toolbar-delete] {
+    position: relative;
+
+    [data-toolbar-tooltip] {
+      width: 206px;
+      white-space: normal;
+      font-size: 12px;
+      line-height: 20px;
+      text-align: left;
+      padding: 8px;
+
+      &[data-toolbar-tooltip-position='top'] {
+        margin-bottom: 12px;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+
+      &[data-toolbar-tooltip-position='bottom'] {
+        top: 36px;
+        right: -4px;
+        left: unset;
+
+        &::after {
+          right: 10px;
+          left: unset;
+        }
+      }
+    }
+  }
+
   [data-toolbar-tooltip-trigger][data-toolbar-add-top],
   [data-toolbar-tooltip-trigger][data-toolbar-add-bottom] {
     [data-toolbar-tooltip] {
@@ -870,6 +964,93 @@
       transform: translateX(-50%);
     }
   }
+
+  /* Resize column */
+  [data-column] {
+    z-index: 10;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+
+    [data-column-hand-drag] {
+      justify-content: center;
+      align-items: center;
+      visibility: hidden;
+      opacity: 0;
+      cursor: grab;
+      pointer-events: auto;
+
+      [data-column-hand-visual] {
+        border-radius: 2px;
+        width: 3px;
+        height: 80%;
+        background-color: #d6d6d6;
+        transition: all 0.2s;
+      }
+
+      [data-column-hand-visual-drag] {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        color: #3c67ff;
+        visibility: hidden;
+        opacity: 0;
+        transition: all 0.2s;
+        width: 16px;
+
+        svg {
+          width: 16px;
+          height: 16px;
+          transform: rotate(45deg);
+        }
+      }
+
+      &:hover,
+      &[data-column-hand-drag-active='true'] {
+        [data-column-hand-visual] {
+          background-color: #3c67ff;
+        }
+
+        [data-column-hand-visual-drag] {
+          visibility: visible;
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+  [data-column][data-column-theme-section='true'] {
+    [data-column-hand-drag] {
+      [data-column-hand-visual-drag] {
+        color: #9144da;
+      }
+
+      &:hover,
+      &[data-column-hand-drag-active='true'] {
+        [data-column-hand-visual] {
+          background-color: #9144da;
+        }
+
+        [data-column-hand-visual-drag] {
+          visibility: visible;
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+  [data-column][data-column-visible],
+  [data-column][data-column-force-visible='true'],
+  [data-column][data-column-is-drag-visible='true'] {
+    [data-column-hand-drag] {
+      visibility: visible;
+      opacity: 1;
+    }
+  }
 }
 
 [data-toolbar-debug] {
@@ -903,7 +1084,7 @@
     min-width: 284px;
     display: flex;
     flex-direction: column;
-    border-radius: 3px;
+    border-radius: 12px;
     position: absolute;
     right: -4px;
     top: 100%;
@@ -923,7 +1104,7 @@
 
   .theme-section-tooltip__image {
     background: #212121;
-    border-radius: 3px 3px 0 0;
+    border-radius: 12px 12px 0 0;
     padding-top: 16px;
     padding-bottom: 8px;
     padding-left: 21px;
@@ -956,7 +1137,7 @@
 
   .theme-section-tooltip__action {
     padding: 16px;
-    border-radius: 0 0 3px 3px;
+    border-radius: 0 0 12px 12px;
     border-top: solid 1px #3b3b3b;
     background: #151515;
     display: flex;
@@ -967,7 +1148,7 @@
       width: 100%;
       text-align: center;
       background: #3c67ff;
-      border-radius: 3px;
+      border-radius: 8px;
       height: 40px;
       font-size: 14px;
       line-height: 24px;
@@ -983,12 +1164,11 @@
 
   .theme-section-tooltip__action-limit {
     button {
-      background: #fdb913 !important;
-      color: #212121 !important;
+      background: #3c67ff !important;
     }
 
     button:hover {
-      background: #fdc742 !important;
+      background: #2856f8 !important;
     }
   }
 
@@ -1030,8 +1210,7 @@
     transition: opacity 0.25s;
   }
 
-  [data-onboarding-wrapper] {
-  }
+  [data-onboarding-wrapper] {}
 
   [data-icon] {
     position: absolute;
@@ -1047,6 +1226,7 @@
       bottom: -4px;
     }
   }
+
   [data-close] {
     position: absolute;
     top: 8px;
@@ -1059,6 +1239,38 @@
     &:hover {
       background-color: #e2e2e2;
     }
+
+    svg {
+      filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+    }
+  }
+
+  [data-icon] {
+    position: absolute;
+    top: -4px;
+    left: 16px;
+    /* Popover */
+    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12), 0px -4px 16px 0px rgba(0, 0, 0, 0.06);
+
+    &[data-position="top"] {
+      top: unset;
+      bottom: -4px;
+    }
+  }
+
+  [data-close] {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    z-index: 99;
+    border-radius: 8px;
+    background-color: transparent;
+    transition: background .25s;
+
+    &:hover {
+      background-color: #E2E2E2;
+    }
+
     svg {
       filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
     }
@@ -1067,28 +1279,33 @@
   [data-content] {
     padding: 16px;
   }
+
   video {
     border-radius: 8px 8px 0 0;
   }
+
   h3 {
     color: #212121;
-    font-family: Inter, sans-serif;
+    font-family: Inter;
     font-size: 16px;
     font-style: normal;
     font-weight: 600;
-    line-height: 24px; /* 150% */
+    line-height: 24px;
+    /* 150% */
     letter-spacing: -0.32px;
   }
+
   p {
     color: #676767;
-    font-family: Inter, sans-serif;
+    font-family: Inter;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
-    line-height: 24px; /* 171.429% */
+    line-height: 24px;
+    /* 171.429% */
   }
 }
 
-[data-slot='children'] {
-  font-family: Inter, sans-serif;
+[data-slot="children"] {
+  font-family: Inter;
 }