react-flow-ui/cjs/styles.css

O `react-edit-flow` é um módulo para React.js que fornece uma solução para desenvolvimento visual baseado em *no-code* e *low-code*. Este módulo facilita a criação e manipulação de fluxos de trabalho por meio de uma interface intuitiva e gráfica, permitin

*{margin:0;padding:0;box-sizing:border-box;position:relative;font-family:Arial,Helvetica,sans-serif}.radius3{-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;border-radius:3px}.radius5{-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px}.radius8{-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;border-radius:8px}.radius10{-webkit-border-radius:10px;-moz-border-radius:10px;-ms-border-radius:10px;-o-border-radius:10px;border-radius:10px}.radius11{-webkit-border-radius:11px;-moz-border-radius:11px;-ms-border-radius:11px;-o-border-radius:11px;border-radius:11px}.radius15{-webkit-border-radius:15px;-moz-border-radius:15px;-ms-border-radius:15px;-o-border-radius:15px;border-radius:15px}.radius20{-webkit-border-radius:20px;-moz-border-radius:20px;-ms-border-radius:20px;-o-border-radius:20px;border-radius:20px}.radius50{-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;border-radius:50%}.win2dp{-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);-moz-box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);-ms-box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);-o-box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12)}.win3dp{-webkit-box-shadow:0 3px 4px 0 rgba(0,0,0,.14),0 3px 3px -2px rgba(0,0,0,.2),0 1px 8px 0 rgba(0,0,0,.12);-moz-box-shadow:0 3px 4px 0 rgba(0,0,0,.14),0 3px 3px -2px rgba(0,0,0,.2),0 1px 8px 0 rgba(0,0,0,.12);-ms-box-shadow:0 3px 4px 0 rgba(0,0,0,.14),0 3px 3px -2px rgba(0,0,0,.2),0 1px 8px 0 rgba(0,0,0,.12);-o-box-shadow:0 3px 4px 0 rgba(0,0,0,.14),0 3px 3px -2px rgba(0,0,0,.2),0 1px 8px 0 rgba(0,0,0,.12);box-shadow:0 3px 4px 0 rgba(0,0,0,.14),0 3px 3px -2px rgba(0,0,0,.2),0 1px 8px 0 rgba(0,0,0,.12)}.win4dp{-webkit-box-shadow:0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);-moz-box-shadow:0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);-ms-box-shadow:0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);-o-box-shadow:0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);box-shadow:0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2)}.win6dp{-webkit-box-shadow:0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12),0 3px 5px -1px rgba(0,0,0,.2);-moz-box-shadow:0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12),0 3px 5px -1px rgba(0,0,0,.2);-ms-box-shadow:0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12),0 3px 5px -1px rgba(0,0,0,.2);-o-box-shadow:0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12),0 3px 5px -1px rgba(0,0,0,.2);box-shadow:0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12),0 3px 5px -1px rgba(0,0,0,.2)}.win8dp{-webkit-box-shadow:0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12),0 5px 5px -3px rgba(0,0,0,.2);-moz-box-shadow:0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12),0 5px 5px -3px rgba(0,0,0,.2);-ms-box-shadow:0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12),0 5px 5px -3px rgba(0,0,0,.2);-o-box-shadow:0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12),0 5px 5px -3px rgba(0,0,0,.2);box-shadow:0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12),0 5px 5px -3px rgba(0,0,0,.2)}.win16dp{-webkit-box-shadow:0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12),0 8px 10px -5px rgba(0,0,0,.2);-moz-box-shadow:0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12),0 8px 10px -5px rgba(0,0,0,.2);-ms-box-shadow:0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12),0 8px 10px -5px rgba(0,0,0,.2);-o-box-shadow:0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12),0 8px 10px -5px rgba(0,0,0,.2);box-shadow:0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12),0 8px 10px -5px rgba(0,0,0,.2)}.win24dp{-webkit-box-shadow:0 9px 46px 8px rgba(0,0,0,.14),0 11px 15px -7px rgba(0,0,0,.12),0 24px 38px 3px rgba(0,0,0,.2);-moz-box-shadow:0 9px 46px 8px rgba(0,0,0,.14),0 11px 15px -7px rgba(0,0,0,.12),0 24px 38px 3px rgba(0,0,0,.2);-ms-box-shadow:0 9px 46px 8px rgba(0,0,0,.14),0 11px 15px -7px rgba(0,0,0,.12),0 24px 38px 3px rgba(0,0,0,.2);-o-box-shadow:0 9px 46px 8px rgba(0,0,0,.14),0 11px 15px -7px rgba(0,0,0,.12),0 24px 38px 3px rgba(0,0,0,.2);box-shadow:0 9px 46px 8px rgba(0,0,0,.14),0 11px 15px -7px rgba(0,0,0,.12),0 24px 38px 3px rgba(0,0,0,.2)}.flow-ui-content{flex:1;display:flex;flex-direction:column;overflow:auto;height:100%;width:100%}.flow-ui{display:flex;align-items:center}.flow-ui-node_item{min-width:200px;background-color:#fff;display:flex;flex-direction:column;overflow:hidden;border-radius:5px;transition:all .3s;user-select:none}.flow-ui-node_item>*{border:solid 0px rgba(0,0,0,.2);border-left-width:2px;border-right-width:2px;border-bottom-width:2px;transition:all .3s;user-select:none}.flow-ui-node_item>.flow-ui-node__header{flex:1;display:flex;align-items:center;justify-content:flex-start;padding:0;width:100%;background-color:#f5f5f5;color:#000;z-index:1;overflow:hidden;border-top-width:2px;border-top-left-radius:5px;border-top-right-radius:5px;min-height:40px}.flow-ui-node_item>.flow-ui-node__header>*:last-child{margin-right:5px}.flow-ui-node_item>.flow-ui-node__header>.flow-ui-node__header__background{position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;opacity:.1}.flow-ui-node_item>.flow-ui-node__header>.flow-ui-node__header__content{flex:1;display:flex;align-items:center;justify-content:flex-start;padding:0}.flow-ui-node_item>.flow-ui-node__header>.flow-ui-node__header__content>.flow-ui-node__header__icon{display:flex;align-items:center;justify-content:center;width:35px;height:35px;margin:2.5px 15px 2.5px 2.5px;border-radius:5px}.flow-ui-node_item>.flow-ui-node__header>.flow-ui-node__header__content>.flow-ui-node__header__icon svg{fill:#fff;color:#fff;opacity:.9;width:20px;height:20px}.flow-ui-node_item>.flow-ui-node__header>.flow-ui-node__header__content>.flow-ui-node__header__title{flex:1;font-size:16px;color:currentColor;text-wrap:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:18px;opacity:.7;width:0}.flow-ui-node_item>.flow-ui-node__header>.flow-ui-node__header__action{display:flex;align-items:center;justify-content:center;width:28px;min-width:28px;height:35px;cursor:pointer}.flow-ui-node_item>.flow-ui-node__header>.flow-ui-node__header__action:hover{opacity:.7}.flow-ui-node_item>.flow-ui-node__header>.flow-ui-node__header__action svg{fill:currentColor;color:currentColor;opacity:.8;width:20px;height:20px}.flow-ui-node_item>.flow-ui-node__content{flex:1;display:flex;background-color:#f5f5f5;padding:15px;width:100%;z-index:0;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.flow-ui-node_item.hide>.flow-ui-node__header{border-bottom-left-radius:5px;border-bottom-right-radius:5px}.flow-ui-node_item.hide>.flow-ui-node__content{display:none}.flow-ui-node,.flow-ui-node__content-wrap,.flow-ui-node__content,.flow-ui-branch-node__content,.flow-ui-loop-node__content{display:flex;align-items:center;position:relative}.flow-ui-loop-node__content{z-index:5}.flow-ui-branch-node__add-button{position:absolute;cursor:pointer;z-index:1}.flow-ui-branch-node__add-button .flow-ui-drop-button{width:20px;height:20px}.flow-ui-branch-node .branch-add-disabled{position:absolute}.flow-ui-branch-node__conditions{display:flex;border:solid 2px rgba(0,0,0,.2);border-radius:5px;padding-top:15px}.flow-ui-branch-node__dashed,.flow-ui-branch-node__sorting__dashed{position:absolute;top:0;right:0;bottom:0;left:0}.flow-ui-branch-node__sorting__dashed{display:none}.flow-ui-vertical{margin:0 auto;padding:0px 40px;flex-direction:column}.flow-ui-vertical .flow-ui-node,.flow-ui-vertical .flow-ui-node__content-wrap,.flow-ui-vertical .flow-ui-node__content,.flow-ui-vertical .flow-ui-branch-node__content,.flow-ui-vertical .flow-ui-loop-node__content{flex-direction:column}.flow-ui-vertical .flow-ui-start-node{padding-top:40px}.flow-ui-vertical .flow-ui-end-node{padding-bottom:40px}.flow-ui-vertical .flow-ui-branch-node .flow-ui-branch-node__content{margin-top:10px}.flow-ui-vertical .flow-ui-branch-node__add-button{top:-10px}.flow-ui-vertical .flow-ui-branch-node__conditions{flex-direction:row}.flow-ui-vertical .flow-ui-branch-node__conditions>.flow-ui-condition-node>.flow-ui-node{height:100%;padding:0px 20px}.flow-ui-horizontal{margin:auto 0;padding:40px 0px;flex-direction:row}.flow-ui-horizontal .flow-ui-node,.flow-ui-horizontal .flow-ui-node__content-wrap,.flow-ui-horizontal .flow-ui-branch-node__content{flex-direction:row}.flow-ui-horizontal .flow-ui-start-node{padding-left:40px}.flow-ui-horizontal .flow-ui-end-node{padding-right:40px}.flow-ui-horizontal .flow-ui-branch-node .flow-ui-branch-node__content{margin-left:10px}.flow-ui-horizontal .flow-ui-branch-node__add-button{left:-10px}.flow-ui-horizontal .flow-ui-branch-node__conditions{flex-direction:column}.flow-ui-horizontal .flow-ui-branch-node__conditions>.flow-ui-condition-node>.flow-ui-node{width:100%;padding:20px 0px}.flow-ui-sortable-handle{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;cursor:move;opacity:0;position:absolute}.flow-ui-node_operations_taps{width:100%;display:flex;flex-direction:row;flex-wrap:nowrap;overflow-y:hidden;overflow-x:auto;gap:5px}.flow-ui-node_operations_taps>div{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px;cursor:pointer;border-radius:5px;margin:5px 0;color:#000;border:solid 2px rgba(0,0,0,0);width:70px;max-width:70px}.flow-ui-node_operations_taps>div:hover{background-color:rgba(0,0,0,.1)}.flow-ui-node_operations_taps>div.active{background-color:rgba(0,0,0,.05);border-color:rgba(0,0,0,.1)}.flow-ui-node_operations_taps>div>.flow-ui-node_operations_tap_icon{display:flex;align-items:center;justify-content:center;width:30px;height:30px;margin-bottom:5px;border-radius:5px;background-color:rgba(0,0,0,.1)}.flow-ui-node_operations_taps>div>.flow-ui-node_operations_tap_icon svg{fill:#fff;color:#fff;opacity:.9;width:25px;height:25px}.flow-ui-node_operations_taps>div>.flow-ui-node_operations_tap_title{font-size:12px;color:currentColor;text-wrap:pretty;overflow:hidden;font-size:12px;opacity:.7}.flow-ui-node_operations_list{flex:1;width:100%;display:flex;flex-direction:column;min-height:200px;max-height:600px;overflow-y:auto;overflow-x:hidden;border:solid 2px rgba(0,0,0,.1);border-radius:5px;padding:0px 5px}.flow-ui-node_operations_list:empty::before{content:"No operations";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);display:block;padding:10px;text-align:center;color:rgba(0,0,0,.4);font-style:italic}.flow-ui-node_operations_list>div{display:flex;align-items:center;justify-content:flex-start;padding:2px 15px 2px 2px;border:solid 1px rgba(0,0,0,0);cursor:pointer;border-radius:5px;margin:5px 0}.flow-ui-node_operations_list>div:hover{background-color:rgba(0,0,0,.1);border-color:rgba(0,0,0,.1)}.flow-ui-node_operations_list>div>.flow-ui-node_operation_title{font-size:16px;color:#000;text-wrap:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:18px;opacity:.7}.flow-ui-node_operations_list>div>.flow-ui-node_operation_icon{display:flex;align-items:center;justify-content:center;width:35px;height:35px;margin-right:15px;border-radius:5px}.flow-ui-node_operations_list>div>.flow-ui-node_operation_icon svg{fill:#fff;color:#fff;opacity:.9;width:25px;height:25px}.flow-ui-line__fill{flex:1}.flow-ui-line__cover{position:absolute}.flow-ui-vertical .flow-ui-line__cover.cover-condition-start,.flow-ui-vertical .flow-ui-line__cover.cover-loop-start{top:0}.flow-ui-vertical .flow-ui-line__cover.cover-condition-end,.flow-ui-vertical .flow-ui-line__cover.cover-loop-end{bottom:0}.flow-ui-vertical .flow-ui-line__cover.cover-condition-start.cover-first,.flow-ui-vertical .flow-ui-line__cover.cover-condition-start.cover-middle,.flow-ui-vertical .flow-ui-line__cover.cover-condition-end.cover-first,.flow-ui-vertical .flow-ui-line__cover.cover-condition-end.cover-middle{right:0}.flow-ui-vertical .flow-ui-line__cover.cover-condition-start.cover-last,.flow-ui-vertical .flow-ui-line__cover.cover-condition-end.cover-last{left:0}.flow-ui-vertical .flow-ui-line__cover.cover-loop-start,.flow-ui-vertical .flow-ui-line__cover.cover-loop-end{left:0}.flow-ui-horizontal .flow-ui-line__cover.cover-condition-start,.flow-ui-horizontal .flow-ui-line__cover.cover-loop-start{left:0}.flow-ui-horizontal .flow-ui-line__cover.cover-condition-end,.flow-ui-horizontal .flow-ui-line__cover.cover-loop-end{right:0}.flow-ui-horizontal .flow-ui-line__cover.cover-condition-start.cover-first,.flow-ui-horizontal .flow-ui-line__cover.cover-condition-start.cover-middle,.flow-ui-horizontal .flow-ui-line__cover.cover-condition-end.cover-first,.flow-ui-horizontal .flow-ui-line__cover.cover-condition-end.cover-middle{bottom:0}.flow-ui-horizontal .flow-ui-line__cover.cover-condition-start.cover-last,.flow-ui-horizontal .flow-ui-line__cover.cover-condition-end.cover-last{top:0}.flow-ui-horizontal .flow-ui-line__cover.cover-loop-start,.flow-ui-horizontal .flow-ui-line__cover.cover-loop-end{bottom:0}.flow-ui-branch-node-dragging>.flow-ui-branch-node__content>.flow-ui-branch-node__conditions>.flow-ui-condition-node>.flow-ui-line__cover{display:none}.flow-ui-branch-node-dragging>.flow-ui-branch-node__content>.flow-ui-branch-node__sorting__dashed{display:block}.flow-ui-node__add{display:flex;align-items:center;justify-content:center;height:30px;background-color:rgba(0,0,0,0) !important;cursor:pointer;transition:background-color .3s;border-color:rgba(0,0,0,0) !important;border-radius:0px !important;border-style:dashed;padding:0px !important}.flow-ui-node__add:hover{background-color:rgba(0,0,0,.05) !important;border-color:var(--lineColor) !important}.flow-ui-node__add .flow-ui-node__add-icon{font-size:20px}