@gem-sdk/styles 2.0.0-dev.895 → 2.0.0

package/src/css/builds/base.css

@@ -82,7 +82,9 @@ html {
 }
 
 .gp-text ul,
-.gp-text ol {
+.gp-text ol,
+.gp-text-instant ul,
+.gp-text-instant ol {
   display: block;
   margin-block-start: 1em;
   margin-block-end: 1em;
@@ -97,18 +99,31 @@ html {
   padding-left: 40px;
 }
 
-.gp-text ul {
-  list-style-type: disc;
+.gp-text ul>li,
+.gp-text-instant ul>li {
+  list-style: disc inside !important;
 }
 
-.gp-text li {
-  list-style-position: inside;
+.gp-text ol>li,
+.gp-text-instant ol>li {
+  list-style: decimal inside !important;
 }
 
-.gp-text ol {
-  list-style-type: decimal;
+[display-init='hide'] {
+  > div {
+    visibility: hidden !important;
+    max-height: 0 !important;
+    max-width: 0 !important;
+    overflow: hidden !important;
+    display: inline !important;
+    * {
+      max-height: 0 !important;
+      max-width: 0 !important;
+    }
+  }
 }
 
+
 [data-slot='children'] {
   width: 100%;
   min-height: 60px;
@@ -121,6 +136,12 @@ html {
   visibility: hidden;
   overflow: hidden;
 
+  &.product-feature-image {
+    visibility: visible !important;
+    border: unset;
+    border-radius: 0px;
+  }
+
   &:not(.product-feature-image) {
     &:after {
       content: 'Drop element here';
@@ -138,6 +159,23 @@ html {
   }
 }
 
+.gp-instant-page {
+  [data-slot='children'].product-feature-image {
+    visibility: visible !important;
+    border: unset;
+
+    &:after {
+      visibility: visible;
+      color: #aaa;
+      border: unset;
+    }
+
+    .drag-placeholder {
+      height: 100%;
+    }
+  }
+}
+
 .gp-dialog {
   display: none;
 }
@@ -284,6 +322,90 @@ p {
   width: 100%;
 }
 
+.gp-p-description-text p:last-child {
+  margin-bottom: 0 !important;
+}
+
 .gp-tab-header-list::-webkit-scrollbar {
   display: none;
 }
+
+.rfm-marquee-container {
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  width: var(--width);
+  transform: var(--transform);
+  max-width: unset !important;
+}
+
+@media (min-width: 1025px) {
+  .rfm-marquee-container:hover div {
+    animation-play-state: var(--pause-on-hover);
+  }
+
+  .rfm-marquee-container:active div {
+    animation-play-state: var(--pause-on-click);
+  }
+
+}
+
+.rfm-overlay {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.rfm-overlay::after {
+  right: 0;
+  top: 0;
+  transform: rotateZ(180deg);
+}
+
+.rfm-overlay::before {
+  left: 0;
+  top: 0;
+}
+
+.rfm-marquee {
+  flex: 0 0 auto;
+  min-width: var(--min-width);
+  z-index: 1;
+  max-width: unset !important;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  animation: scroll var(--duration) linear var(--delay) var(--iteration-count);
+  animation-play-state: var(--play);
+  animation-delay: var(--delay);
+  animation-direction: var(--direction);
+}
+
+@keyframes scroll {
+  0% {
+    transform: translateX(0%);
+  }
+
+  100% {
+    transform: translateX(-100%);
+  }
+}
+
+.rfm-initial-child-container {
+  flex: 0 0 auto;
+  display: flex;
+  min-width: auto;
+  flex-direction: row;
+  align-items: center;
+}
+
+.rfm-child {
+  transform: var(--transform);
+}
+
+[style*="--grchild:"]> :first-child {
+  grid-row: var(--grchild);
+}
+[style*="--mbchild:"]> :first-child {
+  margin-bottom: var(--mbchild);
+}

package/src/css/builds/builder.css

@@ -134,7 +134,10 @@
         display: none;
       }
 
-      font-family: Inter, sans-serif, ui-sans-serif, system-ui;
+      font-family: Inter,
+      sans-serif,
+      ui-sans-serif,
+      system-ui;
       border: 1px dashed #f44336 !important;
       /* border-radius: 3px; */
       visibility: visible;
@@ -191,9 +194,7 @@
       background-color: #ebddf866;
     }
 
-    &.visual-placeholder-theme-section.visual-placeholder-error.has-section:not(
-        [is-component-dragging='true']
-      ) {
+    &.visual-placeholder-theme-section.visual-placeholder-error.has-section:not([is-component-dragging='true']) {
       background-color: #f44336 !important;
     }
 
@@ -222,7 +223,8 @@
       background-color: #d8e1ff !important;
     }
 
-    &[is-drag-to-theme-section='true'], &[is-drag-to-shopify-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;
 
@@ -261,11 +263,6 @@
       }
     }
 
-    &[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;
     }
@@ -418,15 +415,15 @@
 
 .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";
+  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;
@@ -481,4 +478,107 @@
 
 .editor-content {
   font-family: Inter, sans-serif, ui-sans-serif, system-ui !important;
+}
+
+.rfm-marquee-container {
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  width: var(--width);
+  transform: var(--transform);
+  max-width: unset !important;
+}
+
+.rfm-marquee-container:hover div {
+  animation-play-state: var(--pause-on-hover);
+}
+
+.rfm-marquee-container:active div {
+  animation-play-state: var(--pause-on-click);
+}
+
+.rfm-overlay {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.rfm-overlay::after {
+  right: 0;
+  top: 0;
+  transform: rotateZ(180deg);
+}
+
+.rfm-overlay::before {
+  left: 0;
+  top: 0;
+}
+
+.rfm-marquee {
+  flex: 0 0 auto;
+  min-width: var(--min-width);
+  z-index: 1;
+  max-width: unset !important;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  animation: scroll var(--duration) linear var(--delay) var(--iteration-count);
+  animation-play-state: var(--play);
+  animation-delay: var(--delay);
+  animation-direction: var(--direction);
+
+
+}
+
+@keyframes scroll {
+  0% {
+    transform: translateX(0%);
+  }
+
+  100% {
+    transform: translateX(-100%);
+  }
+}
+
+
+.rfm-initial-child-container {
+  flex: 0 0 auto;
+  display: flex;
+  min-width: auto;
+  flex-direction: row;
+  align-items: center;
+}
+
+.rfm-child {
+  transform: var(--transform);
+}
+
+.product-badge.inside-image {
+  [data-outline] {
+    visibility: visible;
+  }
+}
+
+.interaction-select-mode-header {
+  font-family: Inter, sans-serif, ui-sans-serif, system-ui !important;
+}
+
+
+[display-init='hide'] {
+  visibility: hidden !important;
+  max-height: 0 !important;
+  overflow: hidden !important;
+  display: inline !important;
+}
+
+[display-init='hide'] * {
+  max-height: 0 !important;
+}
+
+.interaction-select-mode [data-component-tag] * {
+  cursor: default !important;
+
+    & [data-toolbar] * {
+      cursor: pointer !important;
+    }
 }