@javaguns/flow-ui
Version:
``` <template> <a-spin :spinning="loading"> <FlowDesigner ref="flowDesigner" top="50px"> </FlowDesigner> </a-spin> </template> <script lang="ts" setup> import { ref, provide, onMounted } from 'vue'; import { FlowDesigner, LoadingKey } from '@j
51 lines (50 loc) • 1.96 kB
CSS
.guns-flow-design-panel {
position: relative;
padding: 0;
background-color: #f5f5f5;
background-image: radial-gradient(#d6d9db 10%, transparent 0);
background-size: 16px 16px;
}
.guns-flow-design-panel .guns-flow-design-panel-context {
display: contents;
position: absolute;
inset: 0;
background-color: #f5f5f5;
background-image: radial-gradient(#d6d9db 10%, transparent 0);
background-size: 16px 16px;
}
.guns-flow-design-panel .guns-flow-design-panel-context .guns-flow-design-panel-container {
display: grid;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
min-width: 100%;
min-height: 100%;
z-index: 2;
padding-bottom: 20px;
background-color: #f5f5f5;
background-image: radial-gradient(#d6d9db 10%, transparent 0);
background-size: 16px 16px;
}
.guns-flow-design-panel .guns-flow-design-panel-context .guns-flow-design-panel-container > div {
display: flex;
flex-direction: column;
justify-content: center;
}
.guns-flow-design-panel .guns-flow-design-panel-context .guns-flow-design-panel-container .guns-flow-item-card-hover:hover {
box-shadow: 0 0 0 1px var(--hover-color), 0 0 5px 4px rgba(0, 0, 0, 0.2);
border-radius: 4px;
}
.guns-flow-design-panel .guns-flow-design-panel-context .guns-flow-design-panel-container .guns-flow-item-card-hover:hover + .guns-flow-remove-button {
display: flex ;
}
.guns-flow-design-panel .guns-flow-design-panel-context .guns-flow-design-panel-container .guns-flow-item-card-hover:hover .guns-flow-remove-button {
display: flex ;
}
.guns-flow-design-panel .guns-flow-design-panel-context .guns-flow-design-panel-container .guns-flow-item-card-hover:hover .guns-flow-item-card-footer-handle {
display: flex ;
}
.guns-flow-design-panel .guns-flow-design-panel-context .guns-flow-design-panel-container .guns-flow-item-card-active {
box-shadow: 0 3px 30px var(--hover-color);
border-radius: 4px;
}