.doc-container{ width:100%; min-height:98vh; position:relative; .editor-top{ display: flex; width:100%; height:60px; min-height: 60px; flex-direction: row; justify-content: space-between; align-items: center; position:fixed; top:0px; z-index: 999; background: #fff; border-bottom:1px solid #ebebeb; .left{ width:50%; height:100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; font-size:14px; padding-left:10px; .doc{ margin-right:20px; font-size:14px; >span{ font-weight:800; } } .creator{ font-size:14px; >span{ font-weight:800; } } } .right{ width:50%; display: flex; flex-direction: row; justify-content: flex-end; justify-items: center; padding-right: 10px; } } .editor-content{ width:100%; min-height:80vh; margin-top:60px; border:1px solid #ebebeb; .neary-doc{ position:fixed; top:60px; left:0px; width:205px; // min-height: 100%; height: 99vh; border:1px solid #ebebeb; padding:5px; border-radius: 10px; border-top-left-radius: 0; z-index:1000!important; background:#FFF; .left-content{ padding:10px; height:80vh; overflow:hidden; overflow-y:auto; overflow-x: auto; /* Enable horizontal scrolling */ .new-article{ background:#FFF; margin-top:5px; .sub-title{ height:30px; line-height: 30px; font-weight: bold; margin-top:10px; font-size:14px; border-bottom: 1px solid #e5e5e5; } .el-collapse{ width:90%; margin:auto; .el-collapse-item { .el-collapse-item__content{ .sub-menus{ margin-left:15px; font-size:12px; height:20px; line-height: 20px; cursor:pointer; } } } } } } } .editor-main{ width:65%; margin:auto; overflow: hidden; overflow-y: auto; position:relative; .menus-box{ position: fixed; top:60px; background:#FFF; z-index:999; width: 61.5%; } .editor-box{ margin-top:80px; } .editor{ width: 100%; div{ span{ } } .template-textarea{ .rich-editor{ padding: 0 10px; } } } } .editor-option{ width:255px; height: 100vh; position:fixed; top:60px; right:0; border:1px solid #f0f0f0; z-index: 1000 !important; background:#FFF; .editor-menu{ writing-mode: vertical-rl; position: fixed; width:60px; right:254px; top:65px; font-size:12px; .item{ background-color: #fff; border: 1px solid rgba(0,0,0,.1); /* -webkit-box-shadow: 0 2px 8px 0 rgba(0,0,0,.1); box-shadow: 0 2px 8px 0 rgba(0,0,0,.1); */ border-radius: 2px; /* width: 94px; */ letter-spacing: 3px; height: 75px; display: inline-block; text-align: center; line-height: 32px; margin-bottom: 12px; -webkit-transition: all .8s; transition: all .8s; cursor: pointer; .name{ font-size:12px; } } .active-item{ background-color: #155bd4; color: #fff; } } } } } /* .neary-doc { display: flex; } .left-content { flex: 1; } */ .right-sidebarew{ position: absolute; left: 203px; top: 10px; display: flex; writing-mode: vertical-rl; flex-direction: row; font-size: 12px; } .sidebar-item { background-color: #fff; border: 1px solid #ddd; padding: 10px; letter-spacing: 3px; margin-bottom: 10px; cursor: pointer; text-align: center; } .active-item{ background-color: #155bd4; color: #fff; }