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/custom-node/style.css
+27 -11
View File
@@ -1,8 +1,14 @@
.custom-node-flow .vue-flow__edges {
.vue-flow__edges {
filter: invert(100%);
}
.custom-node-flow .vue-flow__node-color-selector {
.vue-flow__handle {
height: 24px;
width: 8px;
border-radius: 4px;
}
.vue-flow__node-color-selector {
border: 1px solid #777;
padding: 10px;
border-radius: 10px;
@@ -15,7 +21,7 @@
max-width: 250px;
}
.custom-node-flow .vue-flow__node-color-selector .color-selector {
.vue-flow__node-color-selector .color-selector {
display: flex;
flex-direction: row;
flex-wrap: wrap;
@@ -25,20 +31,30 @@
gap: 4px
}
.custom-node-flow .vue-flow__node-color-selector .color-selector button {
border: 1px solid #777;
.vue-flow__node-color-selector .color-selector button {
border: none;
cursor: pointer;
padding: 5px;
width: 25px;
height: 25px;
border-radius: 25px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.custom-node-flow .vue-flow__node-color-selector .color-selector button:hover {
-webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
transform: scale(105%);
transition: 250ms all ease;
.vue-flow__node-color-selector .color-selector button:hover {
box-shadow: 0 0 0 2px #2563eb;
transition: box-shadow 0.2s;
}
.vue-flow__node-color-selector .color-selector button.selected {
box-shadow: 0 0 0 2px #2563eb;
}
.vue-flow__node-color-selector .vue-flow__handle {
background-color: #ec4899;
height: 24px;
width: 8px;
border-radius: 4px;
}
.animated-bg-gradient {