@tmagic/editor 1.0.0-beta.8 → 1.0.0-rc.2

package/dist/style.css

@@ -13,7 +13,7 @@
   justify-content: space-between;
   -webkit-box-align: center;
   align-items: center;
-  background-color: #f8fbff;
+  background-color: #ffffff;
   font-size: 19.2px;
   color: #070303;
   font-weight: 400;
@@ -48,12 +48,15 @@
   display: flex !important;
   transition: all 0.3s ease 0s;
   border-bottom: 2px solid transparent;
-  margin: 0 5px;
+  margin: 0;
 }
 .m-editor-nav-menu .menu-item .is-disabled {
   opacity: 0.5;
 }
-.m-editor-nav-menu .menu-item .el-button--text,
+.m-editor-nav-menu .menu-item .is-text {
+  padding: 5px;
+}
+.m-editor-nav-menu .menu-item .is-text,
 .m-editor-nav-menu .menu-item i {
   color: #070303;
 }
@@ -84,7 +87,7 @@
   flex: 1;
 }
 .m-editor-framework-left {
-  background-color: #f8fbff;
+  background-color: #ffffff;
 }
 .m-editor-framework-center .el-scrollbar__view {
   height: 100%;
@@ -153,11 +156,11 @@
   border: 0;
   height: auto;
   padding: 8px;
-  color: white;
+  color: rgb(255, 255, 255);
   box-sizing: border-box;
 }
 .m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__item.is-left.is-left.is-active {
-  background: #f8fbff;
+  background: #ffffff;
   border: 0;
 }
 .m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__item.is-left.is-left.is-active i {
@@ -174,7 +177,7 @@
   color: rgba(255, 255, 255, 0.6);
 }
 .m-editor-sidebar.el-tabs--left .el-tabs__header i:hover {
-  color: white;
+  color: rgb(255, 255, 255);
 }
 .m-editor-sidebar.el-tabs--left .el-tabs__header .magic-editor-tab-panel-title {
   font-size: 12px;
@@ -205,10 +208,10 @@
   height: 100%;
 }
 .magic-editor-layer-panel {
-  background: #f8fbff;
+  background: #ffffff;
 }
 .magic-editor-layer-panel .search-input {
-  background: #f8fbff;
+  background: #ffffff;
   color: #bbbbbb;
   padding: 10px;
   position: absolute;
@@ -242,13 +245,21 @@
 }
 .magic-editor-layer-panel,
 .magic-editor-layer-panel .el-tree {
-  background-color: #f8fbff;
+  background-color: #ffffff;
   color: #313a40;
 }
 .magic-editor-layer-panel .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
   background-color: #2882e0;
   color: #fff;
 }
+.magic-editor-layer-panel .cus-tree-node {
+  width: 100%;
+  overflow: hidden;
+}
+.magic-editor-layer-panel .cus-tree-node-hover {
+  background-color: #f3f5f9;
+  width: 100%;
+}
 .magic-editor-layer-panel .el-tree-node:focus > .el-tree-node__content {
   background-color: #2882e0;
   color: #fff;
@@ -257,7 +268,7 @@
   width: 100%;
   height: 25px;
   margin-left: 10px;
-  background: #f8fbff;
+  background: #ffffff;
   font-style: italic;
   color: #555554;
   position: absolute;
@@ -269,7 +280,7 @@
   height: 100%;
   border-top: 0 !important;
   margin-top: 50px;
-  background-color: #f8fbff;
+  background-color: #ffffff;
 }
 .ui-component-panel .search-input {
   background: #f8fbff;
@@ -279,6 +290,7 @@
   top: 0;
   left: 0;
   box-sizing: border-box;
+  z-index: 1;
 }
 .ui-component-panel .search-input .el-input__prefix {
   padding: 10px;
@@ -291,7 +303,7 @@
   margin-bottom: 10px;
 }
 .ui-component-panel .el-collapse-item__header {
-  background: #f8fbff;
+  background: #ffffff;
   color: #070303;
   height: 25px;
   line-height: 25px;
@@ -303,7 +315,7 @@
   font-size: 14px;
 }
 .ui-component-panel .el-collapse-item__wrap {
-  background: #f8fbff;
+  background: #ffffff;
   border-bottom: 0;
 }
 .ui-component-panel .el-collapse-item__wrap .el-collapse-item__content {
@@ -320,6 +332,7 @@
   color: #070303;
   flex-direction: column;
   width: 42px;
+  cursor: pointer;
 }
 .ui-component-panel .el-collapse-item__wrap .component-item i {
   font-size: 20px;
@@ -409,84 +422,117 @@
   width: 100%;
   height: 32px;
   line-height: 32px;
-  background-color: #f3f3f3;
   color: #070303;
+  background-color: #f3f3f3;
   border-top: 1px solid #d9dbdd;
   z-index: 2;
+  overflow: hidden;
+}
+.m-editor-page-bar-items {
+  display: flex;
+  transition: transform 0.3s;
 }
-.m-editor-page-bar .m-editor-page-bar-item {
+.m-editor-page-bar-item {
   padding: 0 10px;
   cursor: pointer;
   border-right: 1px solid #d9dbdd;
   display: flex;
   justify-items: center;
   align-items: center;
+  background-color: #f3f3f3;
 }
-.m-editor-page-bar .m-editor-page-bar-item.active {
+.m-editor-page-bar-item.active {
   background-color: #fff;
   cursor: text;
 }
-.m-editor-page-bar .m-editor-page-bar-item.active .m-editor-page-bar-menu-icon {
+.m-editor-page-bar-item.active .m-editor-page-bar-menu-icon {
+  cursor: pointer;
+}
+.m-editor-page-bar-item-icon {
+  position: relative;
+  z-index: 1;
+}
+.m-editor-page-bar-item-title {
+  max-width: 150px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.page-bar-popover.el-popper.el-popover {
+  padding: 10px 0;
+}
+.page-bar-popover .menu-item {
   cursor: pointer;
+  transition: all 0.2s ease 0s;
+  padding: 5px 14px;
+}
+.page-bar-popover .menu-item .el-button--text,
+.page-bar-popover .menu-item i {
+  color: #070303;
+}
+.page-bar-popover .menu-item:hover {
+  background-color: #f3f5f9;
 }
 .m-editor-props-panel {
   padding: 0 10px;
 }
-.m-editor-props-panel .el-form-item__label {
+.m-editor-props-panel.small .el-form-item__label {
   font-size: 12px;
 }
-.m-editor-props-panel .m-fieldset legend {
+.m-editor-props-panel.small .m-fieldset legend {
   font-size: 12px;
 }
-.m-editor-props-panel .el-tabs__item {
+.m-editor-props-panel.small .el-tabs__item {
   font-size: 12px;
 }
-.m-editor-props-panel span,
-.m-editor-props-panel a,
-.m-editor-props-panel p {
-  font-size: 12px;
+.m-editor-props-panel .el-input__wrapper {
+  border-radius: 0;
 }
-.m-editor-props-panel-popper span,
-.m-editor-props-panel-popper a,
-.m-editor-props-panel-popper p {
+.m-editor-props-panel-popper.small span,
+.m-editor-props-panel-popper.small a,
+.m-editor-props-panel-popper.small p {
   font-size: 12px;
 }
 .magic-editor-content-menu {
   position: fixed;
   font-size: 12px;
   background: #fff;
-  color: #333;
   box-shadow: 0 2px 8px 2px rgba(68, 73, 77, 0.16);
   z-index: 9999;
   transform-origin: 0% 0%;
   font-weight: 600;
   padding: 4px 0px;
+  overflow: auto;
+  max-height: 100%;
 }
-.magic-editor-content-menu .separation {
-  width: 100%;
-  height: 0;
-  border-color: rgba(155, 155, 155, 0.1);
-}
-.magic-editor-content-menu .subMenu {
-  position: absolute;
-  right: 0;
-  transform: translate(100%, 0);
-  background-color: #fff;
+.magic-editor-content-menu .menu-item {
   color: #333;
-  box-shadow: 0 2px 8px 2px rgba(68, 73, 77, 0.16);
-  top: 0;
-  height: 223px;
-}
-.magic-editor-content-menu-item {
   display: flex;
   -webkit-box-align: center;
   align-items: center;
   cursor: pointer;
   min-width: 140px;
   transition: all 0.2s ease 0s;
-  padding: 10px 14px;
+  padding: 5px 14px;
   border-left: 2px solid transparent;
 }
+.magic-editor-content-menu .menu-item .el-button {
+  width: 100%;
+  justify-content: flex-start;
+}
+.magic-editor-content-menu .menu-item .el-button--text,
+.magic-editor-content-menu .menu-item i {
+  color: #070303;
+}
+.magic-editor-content-menu .menu-item.divider {
+  padding: 0 14px;
+}
+.magic-editor-content-menu .menu-item.divider .el-divider {
+  margin: 0;
+}
+.magic-editor-content-menu .menu-item:hover {
+  background-color: #f3f5f9;
+}
 .m-editor-stage {
   position: relative;
   width: 100%;