@import '../../../node_modules/amis-ui/scss/functions'; @import '../../../node_modules/amis-ui/scss/variables'; @import '../../../node_modules/amis-ui/scss/mixins'; @import '../../../node_modules/amis-ui/scss/components'; @import './mixin'; @import './variables'; @import './backTop'; @import './context-menu-setting'; @import './outline'; @import './leftPanel'; @import './rightPanel'; @import './bcn'; @import './classname-picker'; @import './renderers'; @import './searchRendererPanel'; @import './tableview'; @import './targetname'; @import './selection'; @import './data-chain'; @import './tooltip'; @import './shortcutKey'; @import './control/option-control'; @import './control/api-control'; @import './control/switch-more-control'; @import './control/validation-control'; @import './control/formItem-control'; @import './control/formula-control'; @import './control/expression-formula-control'; @import './control/textarea-formula-control'; @import './control/dateshortcut-control'; @import './control/badge-control'; @import './control/go-config'; @import './control/feature-control'; @import './control/databinding-control'; @import './control/event-action'; @import './control/tpl-formula-control'; @import './control/timeline_item_control'; @import './control/tree_option_control'; @import './control/_inpupt-file'; @import './control/_nav-control'; @import './control/_key-value-map-control'; @import './control/_status'; @import './control/_icon-button-group-control'; @import './control/_flex-setting-control'; @import './control/table-column-width-control.scss'; @import './control/crud2-control'; /* 样式控件 */ @import './style-control/box-model'; @import './style-control/font'; @import './style-control/border'; @import './style-control/box-shadow'; @import './style-control/background'; @import './style-control/size'; @import './style-control/style-common'; @import './style-control/theme-css-code'; /* 组件样式 */ @import './components/button'; @keyframes growing { 0% { box-shadow: 0 0 10px rgba(#23b7e5, 0) inset; border: 1px solid rgba($Editor-hlbox-bg, 0); } 50% { box-shadow: 0 0 10px rgba(#23b7e5, 0.6) inset; border: 1px solid $Editor-hlbox-bg; } 100% { box-shadow: 0 0 10px rgba(#23b7e5, 0.2) inset; border: 1px solid rgba($Editor-hlbox-bg, 0.1); } } .ae-Editor { display: block; min-height: 450px; min-width: 980px; overflow: hidden; // 覆盖amis默认top值,避免导致未垂直居中 .ae-Editor-toolbar svg.icon { top: 0 !important; font-size: 14px; } &.is-fixed { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .ae-Editor-inner { transform: scale(1); // 此后内部元素的fixed会相对此dom定位 transform-origin: center top; display: flex; height: 100%; width: 100%; flex-direction: row; } } // 公共组件专有样式 .ae-Editor-common-config { outline: 2px solid rgba($Editor-hlbox--onActiveConfig-bg, 0.2); } // 公共组件占位样式 .ae-Editor-common-config div[class*='Wrapper']:empty, .ae-Editor-common-config div[class*='Container']:empty { margin: 4px; min-height: 88px; background: #f7f7f8; border: 1px dashed rgb(206, 208, 211); } // 弹窗编辑器面板 .subEditor-dialog { overflow: hidden; border: 1px solid #e6e6e8; margin: 5px; padding: 0; } .ae-Main { flex: 1 1 auto; min-width: 0; // 防止撑开 background-color: $default-bg-color; display: flex; flex-direction: column; z-index: 0; .ant-back-top { bottom: 96px; right: 39px; width: 45px; height: 45px; z-index: 20000; svg.ant-fade-leave { visibility: hidden; } svg.ant-fade-enter { visibility: visible; } } } .ae-Preview { position: relative; flex-grow: 1; background-color: $default-bg-color; overflow: hidden; transform: scale(1); // 此后内部元素的fixed会相对此dom定位 transform-origin: center top; .ae-Preview-body { position: relative; height: 100%; width: 100%; padding: 0 16px 16px; min-width: 300px; background-color: $default-bg-color; overflow: auto; // 因为如果成员里面有 position:sticky 的内容 // 用 padding 会导致位置不正确 // 所以改成这种写法 &:before { content: ''; display: block; height: 24px; } @include minScrollBar(); &::-webkit-scrollbar { background-color: $default-bg-color; } &::-webkit-scrollbar-thumb { border: 2px solid $default-bg-color; background-color: #dadbdd; // #babac0; &:hover { background-color: #cecfd1; width: 10px !important; height: 10px !important; } } .ae-Preview-inner { position: relative; // display: flex; min-height: calc(100% - 40px); background: #fff; box-shadow: 0 2px 6px 0 rgba(211, 211, 211, 0.5); border-radius: 4px; transform: scale(1); transform-origin: center top; display: flex; flex-direction: column; > *:not(iframe):first-child { // min-width: 100%; position: relative; // min-height: calc(100vh - 131px); // 确保能撑开画布区 flex: 1; height: auto; background: white; box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.2); margin-bottom: 0; } .ae-Dialog-preview-mount-node { display: flex; flex-direction: column; > *:first-child { flex: 1; } .amis-dialog-widget { // 编辑态防止内容超出底部空白 position: static; z-index: 0; } > .cxd-Page > .cxd-Page-content { height: auto; } } } &:focus { outline: none; } &.is-edting { input, textarea, select, iframe { pointer-events: none; } } &.is-mobile { position: relative; border-width: 24px 22px 36px; border-color: #ddd; border-style: solid; border-radius: 40px; width: 419px; height: 798px; flex-grow: unset; min-height: unset; margin: 40px auto; min-width: unset; padding: 0; overflow: visible; // 这里覆盖 padding 没用 &:before { content: none; } > .ae-Preview-inner { background: transparent; overflow-x: hidden; overflow-y: auto; transform: scale(1); transform-origin: center top; height: 100%; display: block; position: relative; &::-webkit-scrollbar { display: none; } &::before { content: ''; height: 40px; position: sticky; top: 0; width: 100%; background: #ddd; flex-shrink: 0; display: block; } } // 移动端预览设备装饰 .mobile-sound, .mobile-receiver, .mobile-left-btn, .mobile-right-btn, .mobile-open-btn { position: absolute; background: #cdcdcd; border-radius: 3px; z-index: 100; } // 音响 .mobile-sound { top: 5px; left: 142px; // 164px - 22px; width: 58px; height: 6px; } // 听筒 .mobile-receiver { top: 3px; left: 224px; // 246px - 22px; width: 10px; height: 10px; border-radius: 5px; } // 左侧按钮 .mobile-left-btn { top: 162px; // 226px - 64px; left: -27px; // -5px - 22px; width: 6px; height: 50px; } // 右侧按钮(长条) .mobile-right-btn { top: 61px; // 125px - 64px; right: -27px; width: 6px; height: 100px; } // 开机键 .mobile-open-btn { top: 211px; // 275px - 64px; right: -27px; width: 6px; height: 50px; } } } // 移动端需要上下滚动,避免设备背景被遮挡 &.is-mobile-body { overflow-x: hidden; &::-webkit-scrollbar { background-color: $default-bg-color; } &::-webkit-scrollbar-thumb { border: 2px solid $default-bg-color; background-color: #dadbdd; // #babac0; &:hover { background-color: #cecfd1; width: 10px !important; height: 10px !important; } } } } .ae-PreviewFrame { pointer-events: all !important; border: 0; width: 100%; } .ae-PreviewIFrame { pointer-events: all !important; border: 0 !important; min-height: calc(100% - 46px); width: 100%; } .ae-IFramePreview { &, & > .frame-content, .ae-Dialog-preview-mount-node { width: 100%; height: 100%; display: flex; flex-direction: column; flex: 1; } > .frame-content .ae-Dialog-preview-mount-node > *:first-child { flex: 1; min-width: 100%; position: relative; min-height: 100%; background: white; } &.is-edting { input, textarea, select, iframe { pointer-events: none; } } } // 头部工具栏 .ae-Editor-toolbarPopover { position: absolute; top: -24px; left: -2px; z-index: 20; border: 0; padding-right: 8px; white-space: nowrap; background: $Editor-hlbox--onActive-bg; // border-radius: 3px 3px 0px 0px; // box-shadow: 0 -2px 5px rgba(255, 255, 255, 0.5); height: 24px; font-family: PingFangSC-Regular; font-size: 12px; font-weight: 400; color: #fff; line-height: 24px; color: #fff; line-height: 24px; display: inline-flex; justify-content: flex-start; align-items: center; &.is-right-elem { left: auto; right: -2px; } .ae-Editor-toolbar { z-index: 10; } } .ae-Editor-nav { pointer-events: all; display: inline-block; .ae-Editor-tip { opacity: 0; display: block; background: rgba($Editor-hlbox-bg, 0.8); &.current { opacity: 1; } } &:hover { .ae-Editor-tip { // transform-origin: 20px 9px; opacity: 1; // transform: skewY(-15deg); &.parent { // transform: skewY(-15deg) translate(-15px, -20px); transform: translate(0, -25px); } &.child { // transform: skewY(-15deg) translate(15px, 20px); transform: translate(0, 25px); } &:hover, &.current { background: rgba($Editor-hlbox-bg, 1); } } } } .ae-Editor-toolbar { position: relative; padding-left: 8px; display: inline-flex !important; pointer-events: all; align-items: center; justify-content: flex-start; &::before { position: absolute; top: -4px; left: 0; content: '|'; opacity: 0.4; color: #fff; height: 10px; width: 1px; } &.sencondary { padding-left: 0 !important; &::before { display: none; } } button { margin: 0 4px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 16px; padding: 0; text-align: center; color: #fff; opacity: 0.8; background: transparent; border: none; outline: none; font-size: 12px; svg { fill: currentColor; } &:hover { opacity: 1; } fa &[draggable] { cursor: move; } } } .ae-WResizer, .ae-HResizer, .ae-Resizer { width: 10px; height: 10px; border: 2px solid $Editor-theme; background-color: #fff; transform: translate(-50%, -50%); position: absolute; z-index: 100; pointer-events: all; display: none; &[data-value]::before { position: absolute; content: ''; pointer-events: none; right: 8px; top: 50%; transform: translateY(-50%); width: 0; margin: 0; padding: 0; box-sizing: content-box; border: 6px solid rgba(7, 12, 20, 0.85); border-color: transparent transparent transparent rgba(7, 12, 20, 0.85); z-index: 100; } &[data-value]:after { position: absolute; content: attr(data-value); padding: 2px 8px; color: #fff; text-align: center; background-color: rgba(7, 12, 20, 0.85); // background-color: $Editor-theme; box-shadow: 0 2px 8px 0 rgba(7, 12, 20, 0.12); } } .ae-border-WResizer, .ae-border-HResizer { position: absolute; top: 0px; right: -2px; width: 2px; height: 100%; border-right: 2px solid $Editor-theme; background-color: #fff; z-index: 99; pointer-events: all; cursor: ew-resize; display: none; } .ae-border-HResizer { top: auto; bottom: -2px; right: 0px; border-right: none; border-bottom: 2px solid $Editor-theme; width: 100%; height: 2px; cursor: ns-resize !important; } .ae-WResizer { left: calc(100% + 1px); top: 50%; cursor: ew-resize; &[data-value]:after { right: 20px; top: 50%; transform: translate(0, -50%); } } .ae-HResizer { left: 50%; top: calc(100% + 1px); cursor: ns-resize; &[data-value]::before { right: 50%; top: auto; bottom: 8px; transform: translate(50%, 0); border-color: rgba(7, 12, 20, 0.85) transparent transparent transparent; } &[data-value]:after { bottom: 20px; left: 50%; transform: translate(-50%, 0); } } .ae-Resizer { left: 100%; top: 100%; cursor: nwse-resize; &[data-value]::before { border-color: transparent; } &[data-value]:after { bottom: 15px; right: 15px; } } .ae-Editor-hlbox { position: absolute; z-index: 1; border: 1px dashed $Editor-hlbox-bg; box-sizing: border-box; pointer-events: none; transition: all ease-out 0.15s; &:hover { z-index: 3; } &.selected { background: rgba($Editor-hlbox--onActive-bg, 0.05); border: 2px solid $Editor-hlbox--onActive-bg; .ae-Editor-toolbar { background: $Editor-hlbox--onActive-bg; button.ae-InsertBefore, button.ae-InsertAfter { background: $Editor-hlbox--onActive-bg; } } .ae-WResizer, .ae-HResizer, .ae-Resizer, .ae-border-WResizer, .ae-border-HResizer { display: block; } } &.regionOn { background: transparent; z-index: 5; } &.isFreeContainerElem { // 自由容器的直接子元素拖拽剔除过渡 transition: none !important; &.selected { pointer-events: all; // 高亮区启用鼠标事件,支持拖拽 cursor: move; } } .ae-Editor-toolbar { display: none; background: $Editor-hlbox-bg; &.sencondary { position: absolute; top: -1px; right: -1px; border-radius: 0 0 3px 3px; height: 20px; line-height: 20px; > button { font-size: 12px; width: 16px; } } // 选中元素前后插入功能icon &.special { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: transparent !important; height: auto; width: auto; pointer-events: none; } button { &.ae-InsertBefore, &.ae-InsertAfter, &.ae-AppendChild { pointer-events: all; position: absolute; margin: 0; background: $Editor-hlbox-bg; width: 20px; height: 20px; line-height: 20px; border-radius: 20px; top: 50%; transform: translate(0, -50%); > svg { width: 16px; height: 16px; position: absolute; top: 50% !important; left: 50%; transform: translate(-50%, -50%); transition: transform ease-out 0.3s; } &.is-vertical { left: 50%; transform: translate(-50%, 0); } &:hover { > svg { transform: translate(-50%, -50%) rotate(90deg); } box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08); } } &.ae-InsertBefore { left: -25px; &.is-vertical { top: -25px; } } &.ae-InsertAfter { right: -25px; &.is-vertical { top: auto; bottom: -25px; } } &.ae-AppendChild { top: 5px; right: 5px; left: auto; bottom: auto; transform: none; } } } &.selected .ae-Editor-toolbar { display: block; background: $Editor-hlbox--onActive-bg; } } .ae-Editor-tip { user-select: none; max-width: 100px; padding: 0 8px; overflow: hidden; text-overflow: ellipsis; color: #fff; font-size: 12px; line-height: 24px; height: 24px; display: inline-flex; align-items: center; white-space: nowrap; position: relative; transition: all ease-out 0.3s; cursor: pointer; z-index: 2; &.parent, &.child { position: absolute; top: 0; left: 0; background: $Editor-hlbox--onActive-bg; z-index: 1; } &.child { z-index: 3; } } .ae-Preview-widgets { position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-sizing: border-box; z-index: 1000; pointer-events: none; } .ae-Editor-rendererCol { width: 140px; padding: 0 20px 0 0; vertical-align: middle !important; text-align: center; } .ae-Editor-rendererThumbOuter { position: absolute; top: 0; left: 0; min-width: 210px; min-height: 90px; padding: 10px; display: flex; justify-content: center; align-items: center; text-align: center; vertical-align: middle; } .ae-Settings-content { height: 100%; } .width-draggable-icon { position: absolute; width: 4px; height: 100%; top: 0; right: -2px; background-color: transparent; cursor: col-resize; z-index: 99; } .width-draggable-icon.leftBtn { left: -2px; right: auto; } .ae-DialogToolbar { height: 100%; flex: 1 auto; > button { background: 0 0; color: #222; outline: 0; border: 0; line-height: 1; cursor: pointer; margin: 0 2px; transition: background-color 0.2s ease 0s; border-radius: 0; background-clip: padding-box; z-index: 2; position: relative; box-sizing: border-box; text-decoration: none; float: left; padding: 0; width: 30px; height: 30px; text-align: left; > i { display: block; font-size: 14px; width: 14px; margin: 8px; text-align: center; float: none; } &:hover { background-color: #f2f2f2; } &.acitve { background: #d6d6d6 !important; color: #222 !important; } &[disabled] { color: #bdbdbd; cursor: default; pointer-events: none; } } } .ae-disable-mask { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1100; } .ae-RenderersPicker-thumb { width: 100%; padding: 10px; user-select: none; &.is-scaled { width: 140px; } .ae-Editor-rendererThumbWrap { position: relative; width: 100%; min-height: 60px; max-height: 150px; padding: 10px; text-align: left; z-index: 100; background: $body-bg; overflow: hidden; display: flex; justify-content: center; align-items: center; } .ae-Editor-rendererThumbIcon { position: absolute; top: 50%; left: 50%; z-index: 110; background: rgba(0, 0, 0, 0.6); border-radius: 5px; width: 30px; height: 30px; color: #fff; text-align: center; vertical-align: middle; line-height: 30px; transform: translate(-50%, -50%); opacity: 0; &:hover { opacity: 1 !important; } > svg { position: relative; top: 4px; width: 16px; height: 16px; } } .ae-Editor-rendererThumbWrap:hover > .ae-Editor-rendererThumbIcon { opacity: 0.4; } .ae-Editor-rendererThumbIcon i { display: block; position: absolute; bottom: 0; right: 0; color: #dcdcdc; } .ae-Editor-rendererThumb { display: inline-block; width: 100%; } .ae-Editor-rendererThumbInner { margin: 0; width: 100%; transform-origin: 0% 0%; transform: scale(1); pointer-events: none; text-align: center; > * { text-align: left; margin-bottom: 0; } } &.is-scaled .ae-Editor-rendererThumbInner { margin: 0; width: 200%; transform-origin: 0% 0%; transform: scale(0.5); pointer-events: none; text-align: center; } } .ae-Editor-rendererPlaceholder { position: relative; text-align: center; } // 左侧 组件面板 和 Code 面板 .ae-RendererPanel, .ae-CodePanel { display: flex; flex-direction: column; height: 100%; .ae-RendererPanel-content, .ae-CodePanel-content { flex: 1 1 auto; overflow: hidden; } } /* 左侧大纲和组件面板的公用样式 */ .ae-RendererPanel, .ae-Outline-panel, .ae-InsertPanel, .ae-CodePanel { // 左侧面板Header .panel-header { margin: 12px 0; flex: 0 0 22px; padding: 0 12px; font-family: PingFangSC-Medium; font-size: 14px; color: #141a25; letter-spacing: 0; line-height: 22px; font-weight: 500; display: flex; justify-content: space-between; align-items: center; } // 搜索框样式 .editor-InputSearch { margin: 0 12px; background: #fff !important; border: 1px solid $editor-border-color !important; border-radius: 4px !important; display: flex; justify-content: flex-start; align-items: center; &:hover { border-color: $editor-active-color !important; } &.is-focused { border-color: #144bcc !important; } svg.icon-search, svg.icon-editor-search, svg.delete-btn-icon { top: 0 !important; width: 16px; height: 16px; color: #d4d6d9; fill: #d4d6d9; cursor: pointer; &:hover { color: $editor-active-color; fill: $editor-active-color; } &.margin-right { right: 4px !important; } } // clear 和 search 同时显示 svg.delete-btn-icon { width: 14px; height: 14px; } } // 间隔线样式 hr.margin-top { margin: 12px 6px 3px 6px; height: 1px; border: none; border-top: 1px solid $editor-border-color !important; } } // 组件插入和替换面板的搜索框 .ae-InsertPanel .editor-InputSearch { margin: 0; } .ae-Widget-iframe { position: relative; &:after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1210; content: ''; } } .ae-Drawer-preview { display: flex; flex-direction: column; } .ae-Drawer-preview .panel-footer { .btn + .btn { margin-left: 5px; } } .ae-Drawer-preview { .resize-ctrl { display: none; } } .dropdown-menu.preview { display: block; position: static; } [data-editor-id][draggable] { cursor: move; } [data-editor-id].ae-is-draging, .ae-is-draging { display: none !important; } [data-editor-id][data-visible='false'] { opacity: 0.6; position: relative; &:before { pointer-events: none; font-size: 12px; content: attr(data-hide-text); z-index: 10; color: rgb(108, 113, 124); border: 1px dashed rgb(206, 208, 211); background: rgba(10, 19, 37, 0.05); position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; } } // 布局容器类元素隐藏标记样式 [data-editor-id][data-visible='false'][style*='position: static'], [data-editor-id][data-visible='false'][style*='position:static'] { position: relative !important; } .ae-Region-placeholder { display: none; text-align: center; color: var(--text--muted-color); user-select: none; text-align: center; text-transform: uppercase; border: 1px dashed rgb(206, 208, 211); background: rgba(10, 19, 37, 0.05); &.layout-content { height: 100%; min-height: 88px; } &.fill-placeholder { position: absolute; top: 4px; left: 4px; width: calc(100% - 8px) !important; height: calc(100% - 8px) !important; } &:first-child { display: flex; align-items: center; justify-content: center; width: 100%; } } [data-region] { position: relative; min-height: 34px; &:empty { min-width: 20px; &:before { height: 100%; content: attr(data-region-placeholder); position: relative; display: flex; flex: 1; flex-direction: column; justify-content: center; padding: 0 5px; -webkit-user-select: none; user-select: none; text-align: center; text-transform: uppercase; color: rgb(108, 113, 124); border: 1px dashed rgb(206, 208, 211); background: rgba(10, 19, 37, 0.05); } } &.is-dragenter { // background-color: #fff; } &.is-dragenter .ae-AddBtn { display: none; } &.is-dragenter > [data-editor-id], &.is-dragenter > *:not([data-editor-id]) > [data-editor-id] { position: relative; &::before { position: absolute; content: ''; pointer-events: none; top: -1px; left: -1px; right: -1px; bottom: -1px; z-index: 10; background: rgba($Editor-rgion-bg, 0.05); border: 1px solid rgba($Editor-rgion-bg, 0.2); } } &.is-dragenter > span[data-editor-id] { display: inline-block; } &.is-entering:not(.is-dragenter) { position: relative; &::before { z-index: 10; content: ''; position: absolute; pointer-events: none; left: 0; top: 0; right: 0; bottom: 0; animation: growing 1s infinite linear; // transform: translate3d(0, 0, 0); } &::after { z-index: 20; content: '保持3s不动切换'; pointer-events: none; position: absolute; left: 50%; transform: translateX(-50%); top: 10%; background: $Editor-theme; border-radius: 5px; font-size: 12px; color: #fff; padding: 2px 5px; } } } [data-renderer='switch-container'], [data-renderer='container'] { min-height: 0; } // 移动端有问题,先注释了 // 优化画布区页面展示效果 // [data-region='aside'][data-renderer='page'] { // min-height: calc(100vh - 131px); // } // [data-region='body'][data-renderer='page'] { // min-height: calc(100vh - 165px); // } .ae-Editor-rhlbox { position: absolute; left: -1px; top: -1px; display: block; box-sizing: content-box; border-style: solid; border-color: transparent; // background: rgba($Editor-rgion-bg, 0.05); pointer-events: none; z-index: 2; transition: all ease-out 0.15s; &:before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; content: ''; border: 1px dotted lighten($Editor-rgion-bg, 15%); visibility: hidden; } > .region-tip { position: absolute; right: 50%; top: -19px; transform: translateX(50%); background: $Editor-rgion-bg; // $Editor-rgion-bg; color: #fff; padding: 3px 8px; font-size: 11px; line-height: 12px; white-space: nowrap; border-radius: 3px 3px 0 0; // box-shadow: 0 2px 5px rgba(255, 255, 255, 0.5); pointer-events: all; display: flex; justify-content: center; align-items: center; visibility: hidden; button { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; outline: none; font-size: 11px; line-height: 12px; } button.clear-icon-btn { padding: 0 !important; } svg { width: 12px; height: 12px; fill: #fff; opacity: 0.8; cursor: pointer; &:hover { opacity: 1; } } // 头部工具栏/分割线样式 .margin-space { opacity: 0.8; margin: 0 6px; } } // 兼容方案,避免便签被遮挡: 区域仅有 [内容区],头部标签放内部展示 > div.region-tip.is-only-child-region, &.region-label-within > .region-tip { top: 1px; border-radius: 0 0 3px 3px; } // 高亮区域hover态 &.region-hover { &:before, > .region-tip { visibility: visible; } } // 高亮区域选中态 &.is-highlight { border-color: rgba($Editor-hlbox--onActive-bg, 0.05); background: transparent; &:before { visibility: visible; // box-shadow: 0 1px 7px rgba(0, 0, 0, 0.2); border: 1px solid lighten($Editor-rgion-bg, 5%); } > .region-tip { visibility: visible; } } &.is-dragenter { &[data-renderer='form'][data-region='controls'] { margin: -12px; padding: 12px; } &[data-renderer='form'][data-region='body'] { margin: -12px; padding: 12px; } } } .ae-Editor-hlbox.selected > .ae-Editor-rhlbox { left: -2px; top: -2px; } [data-region='columns'] > .ae-AddBtn, [data-renderer='card'][data-region='actions'] > .ae-AddBtn { position: absolute; left: -30px; top: 5px; } div.ae-DragImage { position: absolute; top: 0; left: 0; background: rgba(66, 133, 244, 0.1); border: 1px solid $Editor-hlbox-bg; white-space: nowrap; width: 50px; height: 30px; z-index: -10; > span { position: absolute; left: -1px; top: -16px; background: $Editor-hlbox-bg; color: #fff; padding: 2px 5px; font-size: 11px; border-radius: 3px 3px 0 0; line-height: 12px; z-index: 1204; display: block; white-space: nowrap; box-shadow: 0 -2px 5px rgba(255, 255, 255, 0.5); } } .ae-DragGhost { margin-bottom: 12px; > * { // opacity: 0.6; position: relative; &::before { content: ''; position: absolute; z-index: 10; top: -1px; left: -1px; right: -1px; bottom: -1px; min-width: 100%; min-height: 100%; background: rgba($Editor-rgion-bg, 0.2); border: 1px solid $Editor-rgion-bg; } } &.use-position { display: inline-block; position: absolute; background: $Editor-rgion-bg; height: 5px; width: 100%; z-index: 5; &::before { content: ' '; } &.is-horizontal { width: 5px; height: 100%; } } } @media (min-width: 768px) { .ae-BulkActions-control { .col-edit { width: 30px; flex-grow: 0; > button { border: 0; background-color: transparent; outline: none; } } } } .ae-Editor-rendererItem { display: block; max-width: unset; margin-bottom: 10px; &:hover { background: rgba(66, 133, 244, 0.1); color: #58666e; } &.is-active, &:hover:active { background: rgba(66, 133, 244, 0.1); border: 1px solid $Editor-theme; color: #58666e; &:after { border-color: $Editor-theme; } } } // Pagination配置面板里的layout字段样式 .ae-pagination-layout-item { input + div { > div:nth-child(1) { flex-basis: px2rem(32px); flex-grow: 0; padding-right: 0; } } } .ae-dialog { padding: 0 !important; position: relative; > div { position: absolute; width: 100%; height: 100%; padding: 0; overflow: auto; > div { height: 100%; margin-bottom: 0; > .ae-Editor { position: relative; height: 100%; } } } } .ae-Dialog-footerRegion { text-align: right; } .ae-InlineModal { display: flex; flex-direction: column; height: auto; width: 100%; > div:nth-child(2), div[data-renderer='drawer'] { flex-basis: auto; overflow: visible; } &-footer { display: flex; align-items: center; justify-content: flex-end; padding: 0 #{px2rem(24px)}; &-btn { margin-left: #{px2rem(8px)}; } } } .ae-EditableRenderers { padding: 5px 10px; background: rgba(#27c24c, 0.2); border: 1px solid darken(rgba(#27c24c, 0.2), 20%); margin-bottom: 10px; &-tip { display: block; color: #27c24c; } } .ae-EditableRender { display: flex; flex-direction: row; align-items: center; &-title { font-size: 12px; color: #333; padding-right: 10px; } &-body { flex-grow: 1; width: 0; margin: -3px; > * { margin: 3px; } } margin-top: 10px; } .ae-ErrorRenderer { display: flex; align-items: center; justify-content: center; color: #a94442; background: #f2dede; border: 1px solid darken(adjust-hue(#f2dede, -10), 5%); min-height: 30px; padding: 0 10px; } .ae-ApiSample { min-width: 200px; max-height: 300px; &-desc { font-size: var(--fontSizeSm); display: inline-block; margin-top: #{px2rem(5px)}; color: #84868c; } &-icon { --Remark-onHover-bg: #{$Editor-theme-color}; & > i { border: none; padding: #{px2rem(10px)}; border-radius: #{px2rem(3px)}; } } > pre { overflow: auto; page-break-inside: avoid; display: block; padding: 9.5px; margin: 0 0 10px; font-size: 13px; line-height: 1.42857143; color: #333; word-break: break-all; word-wrap: break-word; background-color: #f7f7f9; border-radius: #{$Editor-borderRadius}; border: none; > code { white-space: pre; color: #151a26; } } &-tooltip { max-width: 360px; } } .ae-JsonEditor { height: 400px; border: 1px solid $borderColor; } .ae-Editor-popOverForm { min-width: 300px; max-width: 600px; padding: 10px 20px; } // hover时才显示滚动条 .hoverShowScrollBar { overflow: auto !important; @include minScrollBar(); &::-webkit-scrollbar-thumb { visibility: hidden !important; } &:hover { &::-webkit-scrollbar-thumb { visibility: visible !important; } } } .ae-collapse-checkbox { label { margin-right: 0; } } .ae-scaffoldForm-Modal { @include panel-sm-content(); } .ae-Scaffold-Modal { width: px2rem(700px); @include panel-sm-content(); --Form-item-fontSize: #{$Editor-right-panel-font-size}; --select-base-default-fontSize: #{$Editor-right-panel-font-size}; --select-base-default-option-fontSize: #{$Editor-right-panel-font-size}; --Table-thead-fontSize: #{$Editor-right-panel-font-size}; --button-size-default-fontSize: #{$Editor-right-panel-font-size}; --checkbox-checkbox-default-fontSize: #{$Editor-right-panel-font-size}; --radio-default-default-fontSize: #{$Editor-right-panel-font-size}; --radio-default-default-lineHeight: #{$Editor-right-panel-radios-line-height}; --Tabs--vertical-fontSize: #{$Editor-right-panel-font-size}; --Tabs--vertical-active-fontSize: #{$Editor-right-panel-font-size}; --Tabs--vertical-hover-fontSize: #{$Editor-right-panel-font-size}; &--CRUD { width: px2rem(800px); } .ae-Steps { margin: auto; max-width: px2rem(350px); --Steps-title-fontsize: #{px2rem(14px)}; &-Icon { display: flex !important; width: px2rem(22px) !important; height: px2rem(22px) !important; margin-top: px2rem(5px); font-size: px2rem(12px) !important; align-items: center; justify-content: center; } } &-Tabs { --Tabs-linkFontSize: #{px2rem(12px)}; } } /* 脚手架中配置弹窗 */ .ae-Scaffold-Modal-settings { .ae-Scaffold-Modal { width: px2rem(400px); max-width: px2rem(400px); } } .ae-Button--link { display: inline-flex; align-items: center; padding: 0 !important; svg { width: 12px; margin-right: 4px !important; } } .ae-Fields-Setting { &-Item { display: flex; height: px2rem(32px); margin-bottom: 12px; padding: 0 px2rem(8px); border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor); border-radius: var(--Form-input-borderRadius); &-label { flex-grow: 1; line-height: px2rem(30px); } } } // 空表单组样式优化 div[class*='Form-group']:empty { margin-bottom: 0 !important; }