@tmagic/editor 1.5.2 → 1.5.4

package/dist/style.css

@@ -346,10 +346,6 @@ fieldset.m-fieldset .m-form-tip {
 .m-fields-table .el-form-item {
   margin-bottom: 0;
 }
-.m-fields-table .m-table-delete-icon {
-  color: #f56c6c;
-  cursor: pointer;
-}
 
 .m-select {
   width: 100%;
@@ -720,8 +716,8 @@ fieldset.m-fieldset .m-form-tip {
 }
 
 .m-editor-resizer {
-  border-left: 1px solid transparent;
-  border-right: 1px solid transparent;
+  border-left: 2px solid transparent;
+  border-right: 2px solid transparent;
   width: 8px;
   margin: 0 -5px;
   height: 100%;
@@ -951,6 +947,10 @@ fieldset.m-fieldset .m-form-tip {
   align-items: center;
   border-bottom: 2px solid #d9dbdd;
 }
+.m-editor-props-panel .m-editor-props-style-panel .tmagic-design-form {
+  padding-right: 10px;
+  padding-left: 10px;
+}
 .m-editor-props-panel .m-editor-props-panel-src-icon {
   position: absolute;
   right: 15px;
@@ -969,6 +969,13 @@ fieldset.m-fieldset .m-form-tip {
   top: 0;
   z-index: 10;
 }
+.m-editor-props-panel .m-editor-resizer {
+  position: absolute;
+  display: block;
+  top: 0;
+  right: var(--props-style-panel-width);
+  z-index: 13;
+}
 .m-editor-props-panel.small .el-form-item__label {
   font-size: 12px;
 }
@@ -1464,6 +1471,359 @@ fieldset.m-fieldset .m-form-tip {
   flex: 2;
 }
 
+.border-box-container {
+  display: flex;
+}
+.border-box-container .border-icon-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 88px;
+}
+.border-box-container .border-icon-container-row {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.border-box-container .border-icon-container-row + .border-icon-container-row {
+  margin-top: 8px;
+}
+.border-box-container .border-icon-container .border-icon {
+  box-sizing: border-box;
+  width: 16px;
+  height: 16px;
+  border-width: 1px;
+  border-color: #111;
+  border-style: solid;
+  cursor: pointer;
+}
+.border-box-container .border-icon-container .border-icon + .border-icon {
+  margin-left: 8px;
+}
+.border-box-container .border-icon-container .border-icon.active {
+  border-width: 1px;
+  border-color: var(--el-color-primary);
+}
+.border-box-container .border-icon-container .border-icon.border-icon-top {
+  border-top-width: 2px;
+  border-style: solid dashed dashed dashed;
+}
+.border-box-container .border-icon-container .border-icon.border-icon-right {
+  border-right-width: 2px;
+  border-style: dashed solid dashed dashed;
+}
+.border-box-container .border-icon-container .border-icon.border-icon-bottom {
+  border-bottom-width: 2px;
+  border-style: dashed dashed solid dashed;
+}
+.border-box-container .border-icon-container .border-icon.border-icon-left {
+  border-left-width: 2px;
+  border-style: dashed dashed dashed solid;
+}
+.border-box-container .border-value-container {
+  margin-left: 16px;
+  flex: 1;
+}
+
+.layout-box-container {
+  position: relative;
+  width: 100%;
+  height: 150px;
+}
+.layout-box-container .help-txt {
+  float: left;
+  margin-left: -10px;
+  transform: scale(0.75);
+}
+.layout-box-container .outer-top-border,
+.layout-box-container .inner-top-border,
+.layout-box-container .outer-right-border,
+.layout-box-container .inner-right-border,
+.layout-box-container .outer-bottom-border,
+.layout-box-container .inner-bottom-border,
+.layout-box-container .outer-left-border,
+.layout-box-container .inner-left-border {
+  position: absolute;
+  transition: all 0.3s ease;
+}
+.layout-box-container .outer-top-border .next-input,
+.layout-box-container .inner-top-border .next-input,
+.layout-box-container .outer-right-border .next-input,
+.layout-box-container .inner-right-border .next-input,
+.layout-box-container .outer-bottom-border .next-input,
+.layout-box-container .inner-bottom-border .next-input,
+.layout-box-container .outer-left-border .next-input,
+.layout-box-container .inner-left-border .next-input {
+  position: absolute;
+  height: 20px;
+}
+.layout-box-container .outer-top-border .next-input input,
+.layout-box-container .inner-top-border .next-input input,
+.layout-box-container .outer-right-border .next-input input,
+.layout-box-container .inner-right-border .next-input input,
+.layout-box-container .outer-bottom-border .next-input input,
+.layout-box-container .inner-bottom-border .next-input input,
+.layout-box-container .outer-left-border .next-input input,
+.layout-box-container .inner-left-border .next-input 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;
+}
+.layout-box-container .outer-top-border,
+.layout-box-container .inner-top-border {
+  height: 0;
+  border-left: 20px solid transparent;
+  border-right: 20px solid transparent;
+  border-top: 20px solid #d6e4ff;
+}
+.layout-box-container .outer-top-border .next-input,
+.layout-box-container .inner-top-border .next-input {
+  left: 0;
+  right: 0;
+  top: -20px;
+}
+.layout-box-container .outer-top-border {
+  top: 0;
+  left: 0;
+  right: 0;
+}
+.layout-box-container .inner-top-border {
+  top: 25px;
+  left: 25px;
+  right: 25px;
+}
+.layout-box-container .outer-top-border:hover,
+.layout-box-container .inner-top-border:hover {
+  border-top: 20px solid #bfd4fb;
+}
+.layout-box-container .outer-right-border,
+.layout-box-container .inner-right-border {
+  width: 0;
+  border-top: 20px solid transparent;
+  border-bottom: 20px solid transparent;
+  border-right: 20px solid #d6e4ff;
+}
+.layout-box-container .outer-right-border .next-input,
+.layout-box-container .inner-right-border .next-input {
+  top: 0;
+  bottom: 0;
+  right: -20px;
+  width: 20px;
+  margin: auto;
+}
+.layout-box-container .outer-right-border .next-input input,
+.layout-box-container .inner-right-border .next-input input {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  margin: auto;
+  width: 20px;
+}
+.layout-box-container .outer-right-border {
+  top: 5px;
+  bottom: 5px;
+  right: 0;
+}
+.layout-box-container .inner-right-border {
+  top: 30px;
+  bottom: 30px;
+  right: 25px;
+}
+.layout-box-container .outer-right-border:hover,
+.layout-box-container .inner-right-border:hover {
+  border-right: 20px solid #bfd4fb;
+}
+.layout-box-container .outer-bottom-border,
+.layout-box-container .inner-bottom-border {
+  height: 0;
+  border-left: 20px solid transparent;
+  border-right: 20px solid transparent;
+  border-bottom: 20px solid #d6e4ff;
+}
+.layout-box-container .outer-bottom-border .next-input,
+.layout-box-container .inner-bottom-border .next-input {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -20px;
+}
+.layout-box-container .outer-bottom-border {
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+.layout-box-container .inner-bottom-border {
+  bottom: 25px;
+  left: 25px;
+  right: 25px;
+}
+.layout-box-container .outer-bottom-border:hover,
+.layout-box-container .inner-bottom-border:hover {
+  border-bottom: 20px solid #bfd4fb;
+}
+.layout-box-container .outer-left-border,
+.layout-box-container .inner-left-border {
+  width: 0;
+  border-top: 20px solid transparent;
+  border-bottom: 20px solid transparent;
+  border-left: 20px solid #d6e4ff;
+}
+.layout-box-container .outer-left-border .next-input,
+.layout-box-container .inner-left-border .next-input {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -20px;
+  width: 20px;
+  margin: auto;
+}
+.layout-box-container .outer-left-border .next-input input,
+.layout-box-container .inner-left-border .next-input input {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  margin: auto;
+  width: 20px;
+}
+.layout-box-container .outer-left-border {
+  top: 5px;
+  bottom: 5px;
+  left: 0;
+}
+.layout-box-container .inner-left-border {
+  top: 30px;
+  bottom: 30px;
+  left: 25px;
+}
+.layout-box-container .outer-left-border:hover,
+.layout-box-container .inner-left-border:hover {
+  border-left: 20px solid #bfd4fb;
+}
+
+.background-position-container {
+  display: flex;
+  width: 100%;
+}
+.background-position-container .presets-value-list {
+  display: flex;
+  flex-wrap: wrap;
+  width: 80px;
+  height: auto;
+}
+.background-position-container .presets-value-list .el-button + .el-button {
+  margin-left: 2px;
+}
+.background-position-container .presets-value-list .el-button:nth-child(3n+1) {
+  margin-left: 0 !important;
+}
+.background-position-container .presets-value-list .position-icon {
+  position: relative;
+  width: 14px;
+  height: 14px;
+  border: 1px solid #1d1f24;
+}
+.background-position-container .presets-value-list .position-icon.active {
+  background-color: var(--el-color-primary);
+}
+.background-position-container .presets-value-list .position-icon.active::after {
+  border: 1px solid #fff;
+}
+.background-position-container .presets-value-list .position-icon::after {
+  position: absolute;
+  content: "";
+  border: 1px solid #1d1f24;
+  box-sizing: border-box;
+}
+.background-position-container .presets-value-list .position-icon.left-top::after {
+  top: 1px;
+  left: 1px;
+  width: 6px;
+  height: 6px;
+}
+.background-position-container .presets-value-list .position-icon.center-top::after {
+  top: 1px;
+  left: 1px;
+  width: 12px;
+  height: 6px;
+}
+.background-position-container .presets-value-list .position-icon.right-top::after {
+  top: 1px;
+  right: 1px;
+  width: 6px;
+  height: 6px;
+}
+.background-position-container .presets-value-list .position-icon.left-center::after {
+  top: 1px;
+  left: 1px;
+  width: 6px;
+  height: 12px;
+}
+.background-position-container .presets-value-list .position-icon.center-center::after {
+  top: 1px;
+  left: 1px;
+  width: 12px;
+  height: 12px;
+}
+.background-position-container .presets-value-list .position-icon.right-center::after {
+  top: 1px;
+  right: 1px;
+  width: 6px;
+  height: 12px;
+}
+.background-position-container .presets-value-list .position-icon.left-bottom::after {
+  bottom: 1px;
+  left: 1px;
+  width: 6px;
+  height: 6px;
+}
+.background-position-container .presets-value-list .position-icon.center-bottom::after {
+  bottom: 1px;
+  left: 1px;
+  width: 12px;
+  height: 6px;
+}
+.background-position-container .presets-value-list .position-icon.right-bottom::after {
+  bottom: 1px;
+  right: 1px;
+  width: 6px;
+  height: 6px;
+}
+.background-position-container .custom-value {
+  position: relative;
+  flex: 1;
+}
+
+.m-fields-style-setter {
+  width: 100%;
+}
+.m-fields-style-setter .tmagic-design-collapse-item > .el-collapse-item__header {
+  background-color: #f2f3f7;
+  height: 36px;
+  padding: 10px;
+}
+.m-fields-style-setter .tmagic-design-collapse-item .el-collapse-item__wrap {
+  padding: 0 10px;
+}
+
+.text-align-list {
+  display: flex;
+  height: 100%;
+}
+.text-align-list .btn-active {
+  color: var(--el-color-primary) !important;
+}
+
 .fade-enter-active,
 .fade-leave-active {
   transition: opacity 0.5s;