vue-form-schema/dist/dark.css

Two ways drag and drop form creator for Vue.

body,html{background-color:#17181c}#vue-form-gen-main{position:relative;width:1060px;margin:20px auto 10px auto;font-family:monospace;color:#e8e7e3}.vue-form-gen-action,.vue-form-gen-element{display:inline-block}.vue-form-gen-element{width:80%}.vue-form-gen-action{width:18%;text-align:right}#vue-form-gen-main input:not([type=radio]):not([type=checkbox]):not([type=file]){padding-left:5px;padding-right:5px;border-radius:4px;background-color:#17181c;border:1px solid #3d3d3d;height:30px;color:#e8e7e3}#vue-form-gen-main select{background-color:#17181c;border:1px solid #3d3d3d;color:#e8e7e3;height:30px}#vue-form-gen-main button{padding:7px 10px;border-radius:4px;background-color:#1b1d21;border:1px solid #3d3d3d;cursor:pointer;color:#e8e7e3}.vue-form-gen-button{margin-left:5px}.vue-form-gen-element button,.vue-form-gen-element input:not([type=radio]):not([type=checkbox]),.vue-form-gen-element select,.vue-form-gen-element textarea{width:100%;background-color:#17181c}.vue-form-gen-builder,.vue-form-gen-builder-restore,.vue-form-gen-element-list{display:inline-block;vertical-align:top}.vue-form-gen-builder{width:600px;border-radius:3px;padding:10px 10px 40px 10px;background-color:#1b1d21;border:2px solid #333}.vue-form-gen-drag-start{border:2px dashed #414141}.vue-form-gen-rendered span{float:left;width:150px;line-height:30px}.vue-form-gen-rendered input:not([type=checkbox]),.vue-form-gen-rendered select{width:300px}.vue-form-gen-rendered input[type=checkbox]{padding:0;margin:0;vertical-align:bottom;position:relative}.vue-form-gen-rendered{margin-bottom:10px}#vue-form-gen-main fieldset{border:1px solid #3d3d3d;margin-bottom:10px}#vue-form-gen-main legend{padding:.2em .5em;border:1px solid #3d3d3d;border-radius:10px}.vue-form-gen-attributes-options input{width:38%}.vue-form-gen-element-list{width:300px;position:fixed}.vue-form-gen-element-list .vue-form-gen-draggable{width:90px;text-align:center;padding:20px 0;display:inline-block;background-color:#1b1d21;border:1px solid #3d3d3d;margin-left:5px;margin-bottom:10px;border-radius:3px;font-size:14px;cursor:grab}.vue-form-gen-builder-restore{width:200px}.vue-form-gen-builder-restore .vue-form-gen-button{padding:2px 5px;border-radius:0;font-size:14px;width:100%;margin-top:5px}.vue-form-gen-export pre{padding:10px;border-radius:5px;background-color:#1f2228;white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word}