@gem-sdk/styles 1.36.8 → 2.0.0-dev.871

package/src/css/builds/toolbar.css

@@ -200,10 +200,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 +248,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 +301,7 @@
       }
 
       &:hover {
-        background: rgba(225, 225, 225, 0.2);
+        background-color: rgba(225, 225, 225, 0.2);
       }
 
       [data-toolbar-icon-drag] {
@@ -301,7 +326,7 @@
       }
 
       &:hover {
-        background: rgba(225, 225, 225, 0.2);
+        background-color: rgba(225, 225, 225, 0.2);
       }
 
       &[data-toolbar-disable='true'] {
@@ -377,6 +402,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 +436,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 +491,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);
@@ -485,6 +523,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'],
@@ -520,6 +565,21 @@
     }
   }
 
+  [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,6 +752,7 @@
         }
 
         [data-value-number] {
+          font-family: Inter;
           background-color: #3c67ff;
           border-radius: 6px;
           color: #fff;
@@ -757,7 +818,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;
@@ -789,7 +850,7 @@
         margin-top: -5px;
         border-width: 5px;
         border-style: solid;
-        border-color: transparent #676767 transparent transparent;
+        border-color: transparent #333333 transparent transparent;
       }
     }
 
@@ -805,7 +866,7 @@
         margin-top: -5px;
         border-width: 5px;
         border-style: solid;
-        border-color: transparent transparent transparent #676767;
+        border-color: transparent transparent transparent #333333;
       }
     }
 
@@ -816,12 +877,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;
       }
     }
 
@@ -837,7 +898,7 @@
         margin-left: -5px;
         border-width: 5px;
         border-style: solid;
-        border-color: transparent transparent #676767 transparent;
+        border-color: transparent transparent #333333 transparent;
       }
     }
   }
@@ -861,6 +922,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] {
@@ -869,6 +960,86 @@
       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] {
@@ -902,7 +1073,7 @@
     min-width: 284px;
     display: flex;
     flex-direction: column;
-    border-radius: 3px;
+    border-radius: 12px;
     position: absolute;
     right: -4px;
     top: 100%;
@@ -922,7 +1093,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;
@@ -955,7 +1126,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;
@@ -966,7 +1137,7 @@
       width: 100%;
       text-align: center;
       background: #3c67ff;
-      border-radius: 3px;
+      border-radius: 8px;
       height: 40px;
       font-size: 14px;
       line-height: 24px;
@@ -982,12 +1153,11 @@
 
   .theme-section-tooltip__action-limit {
     button {
-      background: #fdb913 !important;
-      color: #212121 !important;
+      background: #3c67ff !important;
     }
 
     button:hover {
-      background: #fdc742 !important;
+      background: #2856f8 !important;
     }
   }
 
@@ -1007,81 +1177,116 @@
   }
 }
 
+/* Toolbar onboarding */
+[data-toolbar-onboarding] {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 320px;
+  background-color: #fff;
+  color: rgba(60, 103, 255, 0.24);
+  border-radius: 8px;
+  box-shadow:
+    0px 4px 16px 0px rgba(0, 0, 0, 0.12),
+    0px -4px 16px 0px rgba(0, 0, 0, 0.06);
+  z-index: 40;
+  visibility: hidden;
+  opacity: 0;
+
+  &[data-onboarding-active] {
+    visibility: visible;
+    opacity: 1;
+    transition: opacity 0.25s;
+  }
 
-  /* Toolbar onboarding */
-  [data-toolbar-onboarding] {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 320px;
-    background-color: #fff;
-    color:rgba(60, 103, 255, 0.24);
-    border-radius:  8px;
-    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12), 0px -4px 16px 0px rgba(0, 0, 0, 0.06);
-    z-index: 40;
-    visibility: hidden;
-    opacity: 0;
+  [data-onboarding-wrapper] {
+  }
 
-    &[data-onboarding-active]{
-      visibility: visible;
-      opacity: 1;
-      transition: opacity .25s;
+  [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 0.25s;
 
-    [data-onboarding-wrapper] {
-      
+    &:hover {
+      background-color: #e2e2e2;
     }
-
-    [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;
-      }
+    svg {
+      filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
     }
-    [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));
-      }
-    }
+  [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-content] {
-      padding: 16px;
+    &[data-position="top"] {
+      top: unset;
+      bottom: -4px;
     }
-    video {
-      border-radius: 8px 8px 0 0;
+  }
+  [data-close] {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    z-index: 99;
+    border-radius: 8px;
+    background-color: transparent;
+    transition: background .25s;
+
+    &:hover {
+      background-color: #E2E2E2;
     }
-    h3 {
-      color: #212121;
-      font-family: Inter;
-      font-size: 16px;
-      font-style: normal;
-      font-weight: 600;
-      line-height: 24px; /* 150% */
-      letter-spacing: -0.32px;
-    }
-    p{
-      color: #676767;
-      font-family: Inter;
-      font-size: 14px;
-      font-style: normal;
-      font-weight: 400;
-      line-height: 24px; /* 171.429% */
+    svg {
+      filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
     }
-  }
+  }
+
+  [data-content] {
+    padding: 16px;
+  }
+  video {
+    border-radius: 8px 8px 0 0;
+  }
+  h3 {
+    color: #212121;
+    font-family: Inter;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 24px; /* 150% */
+    letter-spacing: -0.32px;
+  }
+  p {
+    color: #676767;
+    font-family: Inter;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px; /* 171.429% */
+  }
+}
+
+[data-slot="children"] {
+  font-family: Inter;
+}