@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
2 lines (1 loc) • 14.4 kB
CSS
.fade-enter-active,.fade-leave-active{transition:opacity .5s ease}.fade-enter-from,.fade-leave-to{opacity:0}.fv-resizable-handle{position:absolute;font-size:.1px;display:block;touch-action:none}.fv-resizable-handle:hover{background:transparent}.fv-resizable-handle.fv-resizable-n{cursor:n-resize;height:.4375rem;width:100%;top:-.3125rem;left:0}.fv-resizable-handle.fv-resizable-e{cursor:e-resize;width:.4375rem;right:-.3125rem;height:100%;top:0}.fv-resizable-handle.fv-resizable-s{cursor:s-resize;height:.4375rem;width:100%;bottom:-.3125rem;left:0}.fv-resizable-handle.fv-resizable-w{cursor:w-resize;height:100%;width:.4375rem;left:-.3125rem;top:0}.fv-resizable-handle.fv-resizable-ne{cursor:ne-resize;width:.75rem;height:.75rem;right:1px;top:1px}.fv-resizable-handle.fv-resizable-se{cursor:se-resize;width:.75rem;height:.75rem;right:1px;bottom:1px}.fv-resizable-handle.fv-resizable-nw{cursor:nw-resize;width:.75rem;height:.75rem;left:1px;top:1px}.fv-resizable-handle.fv-resizable-sw{cursor:sw-resize;width:.75rem;height:.75rem;left:1px;bottom:1px}.modal-footer .buttons{white-space:nowrap;overflow:hidden;overflow-x:auto;padding-bottom:2px}.modal-footer .buttons button:not(:last-child){margin-right:.3125rem}.modal-footer .buttons button:not(:first-child){margin-left:.3125rem}.property-item .form-group{margin-bottom:2px}.property-item .col-form-label{line-height:26px}.property-item .row-item{align-items:center}.wide-panel .row-item{display:flex}.wide-panel .row-item .component{flex:1 1 0}.wide-panel .row-item label{width:89px;text-align:right;padding-right:10px}.wrap{overflow:hidden;text-overflow:ellipsis}.propertyCascadeItem{background-color:transparent;border:none}.propertyCascadeItem .card-header{background-color:transparent;padding:4px 0;color:inherit}.propertyCascadeItem .card-header .panel-item-title{width:100%;position:relative;font-size:inherit}.propertyCascadeItem .card-header .panel-item-title .farris-input-wrap{margin-left:-5px;margin-right:-5px}.propertyCascadeItem .form-group .col-form-label .f-icon{color:#a3a3a3}.propertyCascadeItem .f-accordion-collapse,.propertyCascadeItem .f-accordion-expand{right:0;left:auto;top:6px;color:#6b94ec;position:absolute}.propertyCascadeItem .card-body{padding:3px 12px;background:#fffc;border-radius:8px;margin:4px 0}.propertyCascadeItem .card-body.hidden{display:none}.landscape{display:none;flex-shrink:0;align-items:center;justify-content:flex-end}.wide-panel .vertical{display:none}.wide-panel .landscape{display:block;padding:0;overflow:hidden}.wide-panel .line-item{display:flex}.wide-panel .line-item .f-header{margin-bottom:0}.wide-panel .line-item .f-section-formgroup-legend{width:89px;text-align:right;padding-right:13px}.wide-panel .line-item .farris-input-wrap{flex:1 1 0}:host{width:inherit;height:inherit}.property-panel{position:relative}.property-panel .switcher{position:absolute;top:9px;right:0;width:40px;text-align:center}.property-panel .switcher i{color:#4190ff;font-size:12px;cursor:pointer}.property-panel .side-panel{width:41px;background-color:#fff;padding-top:45px;text-align:center}.property-panel .side-panel .icon{display:block;text-align:center;color:#4190ff;margin-bottom:10px}.property-panel .side-panel span{writing-mode:vertical-rl;font-size:14px;white-space:nowrap}.propertyPanel{width:300px;height:100%;color:#000000bf;background:#f3f8ff;border-color:#d8dbe2;display:flex}.propertyPanel .title{position:relative;background:#d0d8e9;flex-wrap:wrap;border:0}.propertyPanel .title.p-right{padding-right:40px}.propertyPanel .title>.title-label{line-height:34px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:12px;padding-right:12px;color:#333;font-size:13px;font-weight:600;cursor:pointer}.propertyPanel .title>.title-label.active{background:#8fb1df}.propertyPanel .title .title-actions{position:absolute;right:10px;top:0;padding-left:35px;height:35px;-ms-flex:1;flex:1;box-sizing:border-box}.propertyPanel .title .title-actions{position:absolute;right:10px;top:0}.propertyPanel .property-grid .group-label{line-height:30px;display:block;padding-left:13px;cursor:pointer;background:#e2e9f6;color:#435069;font-weight:600;border-radius:6px}.propertyPanel .search .textbox{padding-left:10px}.propertyPanel .search .input-group{border-radius:0}.propertyPanel .panel-body{overflow:auto;height:100%}.propertyPanel .property-grid{list-style:none;margin:0 10px;padding:0}.propertyPanel .property-grid li{padding:2px 0}.propertyPanel .panel-body .property-grid .group-label+div{padding-bottom:14px;padding-top:.25rem}.propertyPanel .action-item{cursor:pointer;display:inline-block;transition:transform 50ms ease;position:relative;padding:0}.propertyPanel .action-item>.f-icon{color:#424242bf;line-height:35px;font-weight:600}.propertyPanel .search .input-group-clear{border-radius:0}.white-theme .propertyPanel{background:#fff;border:1px solid #D8DCE6}.white-theme .propertyPanel .title{overflow:visible;background:#fff;justify-content:space-around}.white-theme .propertyPanel{background:#fff}.white-theme .propertyPanel .title{overflow:visible;background:#fff;flex-wrap:wrap;text-align:center}.white-theme .propertyPanel .title>.title-label{font-weight:400;border-bottom:0;background:#fff;flex:1;color:#83849b}.white-theme .propertyPanel .title>.title-label>span{padding:0 14px 7px}.white-theme .propertyPanel .title>.title-label.active>span{border-bottom:2px solid #5b89fe;color:#5b89fe;border-radius:1.5px}.white-theme .propertyPanel .title.only{text-align:left}.white-theme .propertyPanel .property-grid .group-label{background:#fff;line-height:30px;font-weight:400;font-size:13px;color:#3f4764;border-radius:6px;background:#eef4ff;color:#435069}.white-theme .propertyPanel .property-grid .group-label .f-icon{color:#5d89fe;font-size:13px}.f-flow-canvas{overflow:hidden;-webkit-user-select:none;user-select:none}.f-flow-canvas .br-node{position:absolute;top:120px;left:300px;width:fit-content;display:flex;justify-content:center;align-items:center;z-index:1}.f-flow-canvas .br-node.selected .node-content{border-color:#2a87ff;box-shadow:0 0 0 2px #2a87ff33}.f-flow-canvas .node-content{border:2px solid #1c1f2314;cursor:pointer;background-color:#fff;padding:12px;border-radius:8px;box-shadow:0 2px 4px #0000001a;text-align:left;min-height:auto}.f-flow-canvas .node-content.selected{border-color:#2a87ff}.f-flow-canvas .circle-left{width:8px;height:8px;background-color:#2a87ff;border-radius:50%;z-index:5;position:absolute;left:-4px;cursor:pointer}.f-flow-canvas .circle-top{width:8px;height:8px;background-color:#2a87ff;border-radius:50%;z-index:5;position:absolute;top:-4px;cursor:pointer}.f-flow-canvas .circle-right{width:8px;height:8px;background-color:#2a87ff;border-radius:50%;z-index:5;position:absolute;right:-4px;cursor:pointer}.f-flow-canvas .circle-bottom{width:8px;height:8px;background-color:#2a87ff;border-radius:50%;z-index:5;position:absolute;bottom:-4px;cursor:pointer}.f-flow-canvas .br-node .circle-left,.f-flow-canvas .br-node .circle-top,.f-flow-canvas .br-node .circle-right,.f-flow-canvas .br-node .circle-bottom{visibility:hidden}.f-flow-canvas .br-node:hover .circle-left,.f-flow-canvas .br-node:hover .circle-top,.f-flow-canvas .br-node:hover .circle-right,.f-flow-canvas .br-node:hover .circle-bottom{visibility:visible}.f-flow-canvas .editorPanel{min-width:initial}.f-flow-canvas .editorDiv{background-color:inherit}.f-flow-canvas .svg-container{background-color:#f2f3f5;height:500%;width:500%;position:relative;margin:0}.f-flow-canvas .node-content.start-node{min-width:50px;max-width:80px}.f-flow-canvas .node-content.end-node{min-width:70px;max-width:100px}.f-flow-canvas .node-content.if-node,.f-flow-canvas .node-content.selector-node{min-width:220px;max-width:300px}.f-flow-canvas .node-content.empty-node{min-width:120px;max-width:200px}.f-flow-canvas .br-node.dragging{z-index:1000}.f-flow-canvas .start-node-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:8px;background:#fff;border-radius:6px;min-width:60px}.f-flow-canvas .start-node-icon{width:24px;height:24px;border-radius:50%;background:#06b6d4;display:flex;align-items:center;justify-content:center}.f-flow-canvas .start-node-label{font-size:12px;color:#374151;font-weight:700;text-align:center}.f-flow-canvas .end-node-content .node-label{text-align:center;font-weight:700}.f-flow-canvas .if-node-header{display:flex;align-items:center;margin-bottom:12px;gap:8px}.f-flow-canvas .if-node-icon{width:24px;height:24px;background-color:#22c55e;color:#fff;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}.f-flow-canvas .if-node-title{font-size:14px;font-weight:500;color:#374151}.f-flow-canvas .condition-item{display:flex;align-items:center;padding:8px 12px;margin-bottom:6px;border:1px solid #e5e7eb;border-radius:6px;position:relative;background-color:#f9fafb;min-height:40px}.f-flow-canvas .condition-label{flex:1;font-size:14px;color:#374151;font-weight:400}.f-flow-canvas .and-button{padding:4px 16px;background-color:#f3f4f6;border:1px solid #d1d5db;border-radius:4px;font-size:12px;color:#6b7280;margin-left:auto;margin-right:12px;height:24px;display:flex;align-items:center;justify-content:center;min-width:32px}.f-flow-canvas .selector-node-content{padding:16px;width:100%}.f-flow-canvas .selector-title{font-size:16px;font-weight:600;color:#374151;margin-bottom:16px;text-align:left}.f-flow-canvas .category-title{font-size:14px;font-weight:500;color:#6b7280;margin-bottom:8px;margin-top:12px;text-align:left;border-bottom:1px solid #eee;padding-bottom:2px;grid-column:1 / -1}.f-flow-canvas .category-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:8px}.f-flow-canvas .option-item{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;margin-bottom:4px;border:1px solid #e5e7eb;border-radius:6px;background:#f9fafb;position:relative}.f-flow-canvas .option-text{font-size:14px;color:#374151;text-align:left}.f-flow-canvas .add-button{font-size:16px;color:#3b82f6;cursor:pointer;font-weight:700}.f-flow-canvas .default-node-content,.f-flow-canvas .empty-node-text{text-align:center;padding:20px}.node-selector-overlay{pointer-events:auto}.node-selector-overlay .node-content{border:2px solid #2a87ff;box-shadow:0 4px 16px #00000026;background:#fff;min-width:300px;max-width:400px}.node-selector-overlay .selector-node-content{padding:16px}.node-selector-overlay .selector-title{font-size:16px;font-weight:600;color:#374151;margin-bottom:0}.node-selector-overlay .close-button:hover{background-color:#f3f4f6;border-radius:4px}.node-selector-overlay .option-item{cursor:pointer}.node-selector-overlay .option-item:hover{background:#eff6ff;border-color:#2a87ff}.f-flow-canvas .if-node-content .condition-item .port-output{right:-18px}.f-flow-canvas .selector-node-content .option-item .port-output{right:-6px}.f-flow-canvas .flow-connection{pointer-events:auto;z-index:5}.f-flow-canvas .flow-connection-svg{width:100%;height:100%;pointer-events:auto}.f-flow-canvas .flow-connection-path{cursor:pointer;pointer-events:auto;transition:stroke .2s ease,stroke-width .2s ease}.f-flow-canvas .flow-connection-arrow{cursor:pointer;pointer-events:auto;transition:stroke .2s ease}.f-flow-canvas .flow-connection[data-selected=true] .flow-connection-path{stroke:#ff6b6b;stroke-width:3}.f-flow-canvas .flow-connection[data-selected=true] .flow-connection-arrow{stroke:#ff6b6b}.f-flow-canvas .flow-connection:hover .flow-connection-path{stroke:#37d0ff;stroke-width:3}.f-flow-canvas .flow-connection:hover .flow-connection-arrow{stroke:#37d0ff}.connection-insert-button{position:absolute;width:20px;height:20px;background:#2a87ff;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;cursor:pointer;z-index:100;border:2px solid white;box-shadow:0 2px 4px #0003;-webkit-user-select:none;user-select:none;transition:all .2s ease}.connection-insert-button:hover{background:#1a77ee;transform:scale(1.1);box-shadow:0 4px 8px #0000004d}.connection-insert-button:active{transform:scale(.95)}.f-flow-canvas .br-node.selected{z-index:10}.f-flow-canvas .br-node.selected .node-content{border-color:#2a87ff;box-shadow:0 0 0 2px #2a87ff4d;transform:scale(1.02);transition:all .2s ease}.f-flow-canvas .delete-hint{position:fixed;bottom:20px;left:50%;transform:translate(-50%);background:#000c;color:#fff;padding:8px 16px;border-radius:4px;font-size:12px;z-index:1000;pointer-events:none;opacity:0;transition:opacity .3s ease}.context-menu-overlay{pointer-events:auto}.context-menu{background:#fff;border:1px solid #e5e7eb;border-radius:6px;box-shadow:0 4px 12px #00000026;padding:4px 0;min-width:160px;font-size:14px;z-index:10000}.context-menu-item{display:flex;align-items:center;padding:8px 12px;cursor:pointer;color:#374151;transition:background-color .15s ease;-webkit-user-select:none;user-select:none}.context-menu-item:hover:not(.disabled){background-color:#f3f4f6}.context-menu-item.disabled{color:#9ca3af;cursor:not-allowed}.context-menu-item.danger{color:#ef4444}.context-menu-item.danger:hover:not(.disabled){background-color:#fef2f2;color:#dc2626}.menu-item-icon{margin-right:8px;width:16px;text-align:center;font-size:12px}.menu-item-label{flex:1;white-space:nowrap}.context-menu-divider{height:1px;background:#e5e7eb;margin:4px 0}.context-menu{animation:contextMenuFadeIn .15s ease-out}@keyframes contextMenuFadeIn{0%{opacity:0;transform:scale(.95) translateY(-10px)}to{opacity:1;transform:scale(1) translateY(0)}}.f-flow-canvas-property-panel-mask{margin:0 10px;display:flex;flex-direction:column;justify-self:flex-end}.f-flow-canvas-property-panel .property-panel{width:100%}.f-flow-canvas-property-panel .property-panel .panel{width:100%;border:none}.f-flow-canvas-property-panel .property-panel .switcher{display:none}.f-flow-canvas-property-panel .property-panel .panel>.title{display:none}.f-flow-canvas-property-panel .property-panel .panel>.search{display:none}