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

chore(docs): update math examples styles

Browse Source
This commit is contained in:
braks
2024-06-09 14:58:29 +02:00
parent 5e953bdb44
commit ee8d30d1cf
2 changed files with 18 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/examples/math/ResultNode.vue
View File

@@ -64,7 +64,7 @@ const result = computed(() => {
<span> = </span>
<span class="counter" :style="{ color: result > 0 ? '#5EC697' : '#f15a16' }">
<span class="result" :style="{ color: result > 0 ? '#5EC697' : '#f15a16' }">
{{ result }}
</span>

21
docs/examples/math/style.css
View File

@@ -15,12 +15,15 @@
stroke-width: 3;
}
.vue-flow__node {
background-color: #f3f4f6;
}
.vue-flow__node-value {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background-color: #f3f4f6;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
@@ -39,6 +42,8 @@
.vue-flow__node-value input:focus {
outline: none;
box-shadow: 0 0 0 2px #ec4899;
transition: box-shadow 0.2s;
}
.vue-flow__node-value .vue-flow__handle {
@@ -51,7 +56,6 @@
align-items: center;
gap: 8px;
padding: 16px 24px;
background-color: #f3f4f6;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
@@ -112,7 +116,6 @@
align-items: center;
gap: 8px;
padding: 16px 24px;
background-color: #f3f4f6;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
@@ -121,8 +124,18 @@
box-shadow: 0 0 0 2px #5EC697;
}
.vue-flow__node-result .calculation {
.vue-flow__node-result .result {
display: flex;
gap: 8px;
font-size: 24px;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield;
}