Hufe921
3 years ago
parent
790d669401
commit
ca676f5993
@ -0,0 +1,132 @@
|
|||||||
|
.ce-contextmenu-container {
|
||||||
|
z-index: 9;
|
||||||
|
position: fixed;
|
||||||
|
display: none;
|
||||||
|
padding: 4px;
|
||||||
|
overflow-x: hidden;
|
||||||
|
overflow-y: auto;
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: 0 2px 12px 0 rgb(56 56 56 / 20%);
|
||||||
|
border: 1px solid #e2e6ed;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ce-contextmenu-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ce-contextmenu-content .ce-contextmenu-sub-item::after {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
right: 12px;
|
||||||
|
background: url(../../images/submenu-dropdown.svg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ce-contextmenu-content .ce-contextmenu-item {
|
||||||
|
min-width: 140px;
|
||||||
|
padding: 0 32px 0 16px;
|
||||||
|
height: 30px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
white-space: nowrap;
|
||||||
|
box-sizing: border-box;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ce-contextmenu-content .ce-contextmenu-item.hover {
|
||||||
|
background: rgba(25, 55, 88, .04);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ce-contextmenu-content .ce-contextmenu-item span {
|
||||||
|
max-width: 300px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #3d4757;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ce-contextmenu-content .ce-contextmenu-item span.ce-shortcut {
|
||||||
|
color: #767c85;
|
||||||
|
height: 30px;
|
||||||
|
flex: 1;
|
||||||
|
text-align: right;
|
||||||
|
line-height: 30px;
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ce-contextmenu-content .ce-contextmenu-item i {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
vertical-align: middle;
|
||||||
|
display: inline-block;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ce-contextmenu-divider {
|
||||||
|
background-color: #e2e6ed;
|
||||||
|
margin: 4px 16px;
|
||||||
|
height: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ce-contextmenu-print {
|
||||||
|
background-image: url(../../../assets/images/print.svg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ce-contextmenu-image {
|
||||||
|
background-image: url(../../../assets/images/image.svg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ce-contextmenu-image-change {
|
||||||
|
background-image: url(../../../assets/images/image-change.svg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ce-contextmenu-insert-row-col {
|
||||||
|
background-image: url(../../../assets/images/insert-row-col.svg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ce-contextmenu-insert-top-row {
|
||||||
|
background-image: url(../../../assets/images/insert-top-row.svg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ce-contextmenu-insert-bottom-row {
|
||||||
|
background-image: url(../../../assets/images/insert-bottom-row.svg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ce-contextmenu-insert-left-col {
|
||||||
|
background-image: url(../../../assets/images/insert-left-col.svg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ce-contextmenu-insert-right-col {
|
||||||
|
background-image: url(../../../assets/images/insert-right-col.svg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ce-contextmenu-delete-row-col {
|
||||||
|
background-image: url(../../../assets/images/delete-row-col.svg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ce-contextmenu-delete-row {
|
||||||
|
background-image: url(../../../assets/images/delete-row.svg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ce-contextmenu-delete-col {
|
||||||
|
background-image: url(../../../assets/images/delete-col.svg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ce-contextmenu-delete-table {
|
||||||
|
background-image: url(../../../assets/images/delete-table.svg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ce-contextmenu-merge-cell {
|
||||||
|
background-image: url(../../../assets/images/merge-cell.svg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ce-contextmenu-merge-cancel-cell {
|
||||||
|
background-image: url(../../../assets/images/merge-cancel-cell.svg);
|
||||||
|
}
|
||||||
@ -0,0 +1,24 @@
|
|||||||
|
.ce-hyperlink-popup {
|
||||||
|
min-width: 100px;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 20px;
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: 0 2px 12px 0 rgb(98 107 132 / 20%);
|
||||||
|
border-radius: 2px;
|
||||||
|
color: #3d4757;
|
||||||
|
padding: 16px;
|
||||||
|
white-space: nowrap;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
text-align: center;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ce-hyperlink-popup a {
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: none;
|
||||||
|
border-bottom-width: 1px;
|
||||||
|
border-bottom-style: solid;
|
||||||
|
padding-bottom: 2px;
|
||||||
|
color: #0000ff;
|
||||||
|
}
|
||||||
@ -0,0 +1,98 @@
|
|||||||
|
.ce-image-previewer {
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
z-index: 1000;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
background: #f2f4f7;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
animation: previewerAnimation .3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes previewerAnimation {
|
||||||
|
0% {
|
||||||
|
opacity: 0.1;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ce-image-previewer .image-close {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
display: inline-block;
|
||||||
|
position: absolute;
|
||||||
|
right: 50px;
|
||||||
|
top: 30px;
|
||||||
|
z-index: 99;
|
||||||
|
cursor: pointer;
|
||||||
|
background: url(../../images/close.svg) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
transition: all .3s;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ce-image-previewer .image-close:hover {
|
||||||
|
background-color: #e2e6ed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ce-image-previewer .ce-image-container {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ce-image-previewer .ce-image-container img {
|
||||||
|
cursor: move;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ce-image-previewer .ce-image-menu {
|
||||||
|
height: 50px;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 50px;
|
||||||
|
z-index: 99;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ce-image-previewer .ce-image-menu i {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
margin: 0 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
transition: all .3s;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ce-image-previewer .ce-image-menu i:hover {
|
||||||
|
background-color: #e2e6ed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ce-image-previewer .ce-image-menu i.zoom-in {
|
||||||
|
background-image: url(../../images/zoom-in.svg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ce-image-previewer .ce-image-menu i.zoom-out {
|
||||||
|
background-image: url(../../images/zoom-out.svg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ce-image-previewer .ce-image-menu i.rotate {
|
||||||
|
background-image: url(../../images/rotate.svg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ce-image-previewer .ce-image-menu i.original-size {
|
||||||
|
background-image: url(../../images/original-size.svg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ce-image-previewer .ce-image-menu i.image-download {
|
||||||
|
background-image: url(../../images/image-download.svg);
|
||||||
|
}
|
||||||
@ -0,0 +1,51 @@
|
|||||||
|
.ce-resizer-selection {
|
||||||
|
position: absolute;
|
||||||
|
border: 1px solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ce-resizer-selection>div {
|
||||||
|
position: absolute;
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
box-shadow: 0 1px 4px 0 rgb(0 0 0 / 30%);
|
||||||
|
border-radius: 5px;
|
||||||
|
border: 2px solid #ffffff;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ce-resizer-selection .handle-0 {
|
||||||
|
cursor: nw-resize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ce-resizer-selection .handle-1 {
|
||||||
|
cursor: n-resize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ce-resizer-selection .handle-2 {
|
||||||
|
cursor: ne-resize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ce-resizer-selection .handle-3 {
|
||||||
|
cursor: e-resize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ce-resizer-selection .handle-4 {
|
||||||
|
cursor: se-resize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ce-resizer-selection .handle-5 {
|
||||||
|
cursor: s-resize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ce-resizer-selection .handle-6 {
|
||||||
|
cursor: sw-resize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ce-resizer-selection .handle-7 {
|
||||||
|
cursor: w-resize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ce-resizer-image {
|
||||||
|
position: absolute;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
@ -0,0 +1,85 @@
|
|||||||
|
.ce-table-tool__row {
|
||||||
|
position: absolute;
|
||||||
|
width: 12px;
|
||||||
|
border-radius: 6.5px;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: #E2E6ED;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ce-table-tool__row .ce-table-tool__row__item {
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ce-table-tool__row .ce-table-tool__row__item::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 2px;
|
||||||
|
width: 8px;
|
||||||
|
height: 1px;
|
||||||
|
background-color: #C0C6CF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ce-table-tool__row .ce-table-tool__row__item:last-child:after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ce-table-tool__col {
|
||||||
|
position: absolute;
|
||||||
|
height: 12px;
|
||||||
|
border-radius: 6.5px;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: #E2E6ED;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ce-table-tool__col .ce-table-tool__col__item {
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ce-table-tool__col .ce-table-tool__col__item::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 2px;
|
||||||
|
left: -1px;
|
||||||
|
width: 1px;
|
||||||
|
height: 8px;
|
||||||
|
z-index: 1;
|
||||||
|
background-color: #C0C6CF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ce-table-tool__col .ce-table-tool__col__item:first-child:after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ce-table-tool__row .ce-table-tool__row__item.active,
|
||||||
|
.ce-table-tool__col .ce-table-tool__col__item.active {
|
||||||
|
background-color: #C4D7FA;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ce-table-tool__col .ce-table-tool__anchor {
|
||||||
|
right: -5px;
|
||||||
|
width: 10px;
|
||||||
|
height: 12px;
|
||||||
|
z-index: 9;
|
||||||
|
position: absolute;
|
||||||
|
cursor: col-resize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ce-table-tool__row .ce-table-tool__anchor {
|
||||||
|
bottom: -5px;
|
||||||
|
left: 0;
|
||||||
|
width: 12px;
|
||||||
|
height: 10px;
|
||||||
|
z-index: 9;
|
||||||
|
position: absolute;
|
||||||
|
cursor: row-resize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ce-table-anchor__line {
|
||||||
|
z-index: 9;
|
||||||
|
position: absolute;
|
||||||
|
border: 1px dotted #000000;
|
||||||
|
}
|
||||||
@ -1 +1,2 @@
|
|||||||
export const EDITOR_COMPONENT = 'editor-component'
|
export const EDITOR_COMPONENT = 'editor-component'
|
||||||
|
export const EDITOR_PREFIX = 'ce'
|
||||||
Loading…
Reference in new issue