@tmagic/editor 1.5.1 → 1.5.3

package/src/theme/style-setter/background.scss

@@ -0,0 +1,113 @@
+.background-position-container {
+  display: flex;
+  width: 100%;
+  .presets-value-list {
+    display: flex;
+    flex-wrap: wrap;
+    width: 80px;
+    height: auto;
+    .el-button {
+      & + .el-button {
+        margin-left: 2px;
+      }
+      &:nth-child(3n + 1) {
+        margin-left: 0 !important;
+      }
+    }
+
+    .position-icon {
+      position: relative;
+      width: 14px;
+      height: 14px;
+      border: 1px solid #1d1f24;
+      &.active {
+        background-color: var(--el-color-primary);
+        &::after {
+          border: 1px solid #fff;
+        }
+      }
+      &::after {
+        position: absolute;
+        content: "";
+        border: 1px solid #1d1f24;
+        box-sizing: border-box;
+      }
+      &.left-top {
+        &::after {
+          top: 1px;
+          left: 1px;
+          width: 6px;
+          height: 6px;
+        }
+      }
+      &.center-top {
+        &::after {
+          top: 1px;
+          left: 1px;
+          width: 12px;
+          height: 6px;
+        }
+      }
+      &.right-top {
+        &::after {
+          top: 1px;
+          right: 1px;
+          width: 6px;
+          height: 6px;
+        }
+      }
+      &.left-center {
+        &::after {
+          top: 1px;
+          left: 1px;
+          width: 6px;
+          height: 12px;
+        }
+      }
+      &.center-center {
+        &::after {
+          top: 1px;
+          left: 1px;
+          width: 12px;
+          height: 12px;
+        }
+      }
+      &.right-center {
+        &::after {
+          top: 1px;
+          right: 1px;
+          width: 6px;
+          height: 12px;
+        }
+      }
+      &.left-bottom {
+        &::after {
+          bottom: 1px;
+          left: 1px;
+          width: 6px;
+          height: 6px;
+        }
+      }
+      &.center-bottom {
+        &::after {
+          bottom: 1px;
+          left: 1px;
+          width: 12px;
+          height: 6px;
+        }
+      }
+      &.right-bottom {
+        &::after {
+          bottom: 1px;
+          right: 1px;
+          width: 6px;
+          height: 6px;
+        }
+      }
+    }
+  }
+  .custom-value {
+    position: relative;
+    flex: 1;
+  }
+}

package/src/theme/style-setter/border.scss

@@ -0,0 +1,53 @@
+.border-box-container {
+  display: flex;
+  .border-icon-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: 88px;
+    &-row {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      & + .border-icon-container-row {
+        margin-top: 8px;
+      }
+    }
+    .border-icon {
+      box-sizing: border-box;
+      width: 16px;
+      height: 16px;
+      border-width: 1px;
+      border-color: #111;
+      border-style: solid;
+      cursor: pointer;
+      & + .border-icon {
+        margin-left: 8px;
+      }
+      &.active {
+        border-width: 1px;
+        border-color: var(--el-color-primary);
+      }
+      &.border-icon-top {
+        border-top-width: 2px;
+        border-style: solid dashed dashed dashed;
+      }
+      &.border-icon-right {
+        border-right-width: 2px;
+        border-style: dashed solid dashed dashed;
+      }
+      &.border-icon-bottom {
+        border-bottom-width: 2px;
+        border-style: dashed dashed solid dashed;
+      }
+      &.border-icon-left {
+        border-left-width: 2px;
+        border-style: dashed dashed dashed solid;
+      }
+    }
+  }
+  .border-value-container {
+    margin-left: 16px;
+    flex: 1;
+  }
+}

package/src/theme/style-setter/index.scss

@@ -0,0 +1,28 @@
+@use "./border.scss";
+@use "./layout.scss";
+@use "./background.scss";
+
+.m-fields-style-setter {
+  width: 100%;
+
+  .tmagic-design-collapse-item {
+    > .el-collapse-item__header {
+      background-color: #f2f3f7;
+      height: 36px;
+      padding: 10px;
+    }
+
+    .el-collapse-item__wrap {
+      padding: 0 10px;
+    }
+  }
+}
+
+.text-align-list {
+  display: flex;
+  height: 100%;
+
+  .btn-active {
+    color: var(--el-color-primary) !important;
+  }
+}

package/src/theme/style-setter/layout.scss

@@ -0,0 +1,199 @@
+// 盒子模型
+.layout-box-container {
+  position: relative;
+  width: 100%;
+  height: 150px;
+
+  .help-txt {
+    float: left;
+    margin-left: -10px;
+    transform: scale(0.75);
+  }
+
+  .outer-top-border,
+  .inner-top-border,
+  .outer-right-border,
+  .inner-right-border,
+  .outer-bottom-border,
+  .inner-bottom-border,
+  .outer-left-border,
+  .inner-left-border {
+    position: absolute;
+    transition: all 0.3s ease;
+    .next-input {
+      position: absolute;
+      height: 20px;
+      input {
+        padding: 0;
+        width: 100%;
+        border: none;
+        outline: none;
+        margin: 0;
+        font-weight: 400;
+        vertical-align: top;
+        background-color: transparent;
+        color: #333;
+        text-align: center;
+        line-height: 20px;
+        height: 20px;
+      }
+    }
+  }
+
+  // top
+  .outer-top-border,
+  .inner-top-border {
+    height: 0;
+    border-left: 20px solid transparent;
+    border-right: 20px solid transparent;
+    border-top: 20px solid #d6e4ff;
+    .next-input {
+      left: 0;
+      right: 0;
+      top: -20px;
+    }
+  }
+
+  .outer-top-border {
+    top: 0;
+    left: 0;
+    right: 0;
+  }
+
+  .inner-top-border {
+    top: 25px;
+    left: 25px;
+    right: 25px;
+  }
+
+  .outer-top-border,
+  .inner-top-border {
+    &:hover {
+      border-top: 20px solid #bfd4fb;
+    }
+  }
+
+  // right
+  .outer-right-border,
+  .inner-right-border {
+    width: 0;
+    border-top: 20px solid transparent;
+    border-bottom: 20px solid transparent;
+    border-right: 20px solid #d6e4ff;
+
+    .next-input {
+      top: 0;
+      bottom: 0;
+      right: -20px;
+      width: 20px;
+      margin: auto;
+      input {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        margin: auto;
+        width: 20px;
+      }
+    }
+  }
+
+  .outer-right-border {
+    top: 5px;
+    bottom: 5px;
+    right: 0;
+  }
+
+  .inner-right-border {
+    top: 30px;
+    bottom: 30px;
+    right: 25px;
+  }
+
+  .outer-right-border,
+  .inner-right-border {
+    &:hover {
+      border-right: 20px solid #bfd4fb;
+    }
+  }
+
+  // bottom
+  .outer-bottom-border,
+  .inner-bottom-border {
+    height: 0;
+    border-left: 20px solid transparent;
+    border-right: 20px solid transparent;
+    border-bottom: 20px solid #d6e4ff;
+
+    .next-input {
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: -20px;
+    }
+  }
+
+  .outer-bottom-border {
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+
+  .inner-bottom-border {
+    bottom: 25px;
+    left: 25px;
+    right: 25px;
+  }
+
+  .outer-bottom-border,
+  .inner-bottom-border {
+    &:hover {
+      border-bottom: 20px solid #bfd4fb;
+    }
+  }
+
+  // left
+  .outer-left-border,
+  .inner-left-border {
+    width: 0;
+    border-top: 20px solid transparent;
+    border-bottom: 20px solid transparent;
+    border-left: 20px solid #d6e4ff;
+
+    .next-input {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: -20px;
+      width: 20px;
+      margin: auto;
+      input {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        right: 0;
+        margin: auto;
+        width: 20px;
+      }
+    }
+  }
+
+  .outer-left-border {
+    top: 5px;
+    bottom: 5px;
+    left: 0;
+  }
+
+  .inner-left-border {
+    top: 30px;
+    bottom: 30px;
+    left: 25px;
+  }
+
+  .outer-left-border,
+  .inner-left-border {
+    &:hover {
+      border-left: 20px solid #bfd4fb;
+    }
+  }
+}

package/src/theme/theme.scss

@@ -26,3 +26,4 @@
 @use "./page-fragment-select.scss";
 @use "./data-source-field.scss";
 @use "./data-source-field-select.scss";
+@use "./style-setter/index.scss";