alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(docs): update example styles (#1469)

Browse Source 
* chore(docs): update basic example styles

* chore(docs): update confirm delete example styles

* chore(docs): update dnd example styles

* chore(docs): update hidden example

* chore(docs): update update node example

* chore(docs): update node toolbar example styles

* chore(docs): update transition example styles

* chore(docs): cleanup basic example els

* chore(docs): cleanup examples
This commit is contained in:
Braks
2024-06-10 23:51:47 +02:00
committed by braks
parent 5dc8711a6b
commit d71de0a92d
34 changed files with 528 additions and 244 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/examples/dnd/style.css
+31 -12
View File
@@ -1,51 +1,70 @@
.dndflow {
.dnd-flow {
flex-direction: column;
display: flex;
height: 100%;
}
.dndflow aside {
.dnd-flow aside {
color: white;
font-weight: 700;
border-right: 1px solid #eee;
padding: 15px 10px;
font-size: 12px;
background: rgba(16, 185, 129, 0.75);
-webkit-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.3);
box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.3);
}
.dndflow aside .nodes > * {
.dnd-flow aside .nodes > * {
margin-bottom: 10px;
cursor: grab;
font-weight: 500;
-webkit-box-shadow: 5px 5px 10px 2px rgba(0,0,0,0.25);
box-shadow: 5px 5px 10px 2px rgba(0,0,0,0.25);
-webkit-box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.25);
box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.25);
}
.dndflow aside .description {
.dnd-flow aside .description {
margin-bottom: 10px;
}
.dndflow .vue-flow-wrapper {
.dnd-flow .vue-flow-wrapper {
flex-grow: 1;
height: 100%;
}
@media screen and (min-width: 640px) {
.dndflow {
.dnd-flow {
flex-direction: row;
}
.dndflow aside {
.dnd-flow aside {
min-width: 25%;
}
}
@media screen and (max-width: 639px) {
.dndflow aside .nodes {
.dnd-flow aside .nodes {
display: flex;
flex-direction: row;
gap: 5px;
}
}
.dropzone-background {
position: relative;
height: 100%;
width: 100%
}
.dropzone-background .overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
pointer-events: none;
}