@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
2 lines (1 loc) • 7.12 kB
CSS
.f-layout-editor{min-height:500px;min-width:900px;height:100%;overflow:hidden}.f-layout-editor-top{width:100%;height:75px;background-color:#fff;z-index:99;border:1px solid #dee1ea}.f-layout-editor-content{display:flex;margin-bottom:0;border-right:1px solid #dee1ea}.f-layout-editor-bottom{margin-top:0;height:60px;width:100%;border:1px solid #dee1ea;background-color:#fff;z-index:2000;bottom:0;left:0}.f-layout-editor-button{float:right;margin-top:10px;margin-right:30px}.f-layout-editor-left,.f-layout-editor-left-standard,.f-layout-editor-left-customize{height:100%}.f-layout-editor-right{width:50%;flex:1;vertical-align:top;height:100%}.f-layout-editor-right-standard,.f-layout-editor-right-customize{height:100%}.f-layout-editor-cancel-btn{width:75px;height:32px;display:inline-block;background:#fff;border:1px solid #d8dce6;box-shadow:0 1px #0000000a;border-radius:3px;margin-right:8px;text-align:center;padding:7px;cursor:pointer}.f-layout-editor-sure-btn{width:100px;height:32px;display:inline-block;background:#5989e7;border-radius:3px;text-align:center;padding:7px;cursor:pointer}.f-layout-editor-text-cancel{font-family:PingFangSC-Regular;font-size:13px;color:#2d2f33}.f-layout-editor-text-sure{font-family:PingFangSC-Regular;font-size:13px;color:#fff}.f-layout-editor-column-width-editor-row{display:flex;width:100%;margin:13px 0}.f-layout-editor-column-width-editor-row-middle{font-family:PingFangSC-Regular;font-size:10px;color:#2d2f3375;text-align:center;flex:26%;float:left;display:block}.f-layout-editor-column-width-editor-row-left{border-top:1px dashed #eaedf3;margin-top:9px;display:block;flex:37%}.f-layout-editor-column-width-editor-row-right{margin-top:9px;border-top:1px dashed #eaedf3;float:right;display:block;flex:37%}.f-layout-editor-show-top-border{border-top:1px solid #eaedf3;margin-bottom:18px;margin-top:18px;padding-top:18px}.f-layout-editor-column-width-editor-component{background:#f7f8fb99;border:1px solid rgba(233,236,243,.45);border-radius:3px;margin:3px 8px 6px 0;width:95%;height:40px;padding-bottom:5px;padding-top:5px;position:relative}.f-layout-editor-column-width-editor-label{font-family:PingFangSC-Regular;font-size:13px;color:#2d2f33;margin:6px 0 9px 16px;width:58px;height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;float:left}.f-layout-editor-column-width-editor-click-button{height:22px;margin:3px 8px 0 0;float:right;font-family:PingFangSC-Regular;font-size:13px;color:#2d2f33}.f-layout-editor-column-width-editor-rectangle{height:22px;margin:3px 8px 0 0;float:right;display:flex}.f-layout-editor-rate-show-column{display:inline-block;width:1.875rem;line-height:1.375rem;text-align:right;font-family:PingFangSC-Regular;font-size:10px;color:#2d2f3375;margin-right:30px}.f-layout-editor-drag-handler{cursor:move;line-height:1.375rem}.f-layout-editor-column-width-editor-choices.active{z-index:1}.f-layout-editor-text-align{margin-left:-5px}.f-layout-editor-field-list-standard{padding-left:41px;height:500px;z-index:98;width:450px;position:relative;display:inline-block}.f-layout-editor-field-list-customize{padding-left:41px;z-index:98;position:relative;display:inline-block}.f-layout-editor-field-list-header{font-family:PingFangSC-Regular;font-size:14px;color:#6a6f79;margin-top:12px;display:inline-block}.f-layout-editor-choose-group{display:inline-block;margin-top:12px;margin-left:160px;width:130px}.f-layout-editor-field-list-content{overflow-x:hidden;overflow-y:scroll;z-index:1200;margin-top:5px;margin-right:20px}.f-layout-editor-field-list-content-cdk-preview{z-index:1200;width:280px;background:#f7f8fb99;border:1px solid rgba(233,236,243,.45);box-shadow:2px 12px 12px #779aec73;border-radius:3px;margin:3px 8px 6px 0;height:40px;padding-bottom:5px;padding-top:5px}.f-layout-editor-column-width-editor-label{font-family:PingFangSC-Regular;font-size:13px;color:#2d2f33;margin:6px 0 9px 16px;width:70px;height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;float:left}.f-layout-editor-preview{margin-left:16px;width:100%;position:relative}.f-layout-editor-preview-header{font-family:PingFangSC-Regular;font-size:14px;color:#6a6f79;margin-top:12px}.f-layout-editor-row{height:26px;margin-bottom:15px;opacity:70%;display:flex}.f-layout-editor-preview-view{padding:15px 42px 5px 15px;position:relative}.f-layout-editor-preview-row-group{display:absolute;z-index:0;margin-top:13px;margin-left:5px}.f-layout-editor-preview-customize-whole-background{z-index:0;position:absolute;top:40px;right:28px;left:14px;bottom:2px}.f-layout-editor-preview-customize-whole-background>div{float:left;padding-left:0;height:100%}.f-layout-editor-preview-customize-single-background{height:100%;background-color:#edf9ff}.f-layout-editor-screen-resolution-selector{width:100%;position:sticky;padding:21px 0 21px 24px;min-width:640px;display:flex}.f-layout-editor-screen-resolution-selector-header{font-family:PingFangSC-Medium;font-size:17px;color:#2d2f33;display:inline-block;height:32px}.f-layout-editor-screen-resolution-selector-form{height:32px}.f-layout-editor-screen-resolution-selector-frame{background:#8cb6ff24;border-radius:17px;margin-left:30px;height:32px;display:inline-flex;align-items:center;justify-content:center}.f-layout-editor-namelist{font-family:PingFangSC-Regular;font-size:12px;color:#446a9f;line-height:16px;margin:8px 13px;display:inline-block}.f-layout-editor-namelist-focus{opacity:.6;font-family:PingFangSC-Regular;font-size:12px;line-height:16px;color:#2a87ff;margin:8px 12px;padding:4px 8px;background:#ffffffe6;box-shadow:0 4px 18px #024bc133;border-radius:15px}.f-layout-editor-screen-resolution-selector-switch{float:right;margin:5px 60px 0 0;flex:1}.f-layout-editor-show-switch{float:right!important;margin-left:8px}.f-layout-editor-show-switch-label{float:right;font-family:PingFangSC-Regular;font-size:13px;color:#2d2f33;text-align:right;line-height:18px;margin-top:2px}.f-layout-editor-column-width-view{background:#eff2f7;border:1px solid #d5dae7;border-radius:4px;margin-bottom:15px;height:26px;padding-left:9.4px}.f-layout-editor-column-width-view-label{margin-top:2px;margin-left:2px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.f-layout-editor .f-icon.f-icon-add{margin:4px 10px;flex:10%}.f-column-width-setting-button{border:1px solid #cbd1e7;margin:5px;display:flex;position:relative}.f-column-width-setting-button .f-icon{margin:4px 10px}.f-column-width-setting-button-center{text-align:center;position:absolute;left:50%;transform:translate(-50%);width:100%}.f-column-width-setting-button-name{font-family:PingFangSC-Regular;font-size:14px;color:#a2a9b9;flex:90%;margin:2px 0}.f-layout-editor-column-width-editor-click-button .f-radio-button{border:none}.f-layout-editor-column-width-editor-click-button .farris-input-wrap>.btn{width:40px;font-family:PingFangSC-Regular;font-size:10px;text-align:center;color:#2d2f3375}.f-layout-editor-column-width-editor-click-button .farris-input-wrap .btn-secondary:not(:disabled):not(.disabled).active{color:#fff;background-color:#5d89fe;font-family:PingFangSC-Regular;font-size:10px;width:40px}