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
docs/examples/math/ResultNode.vue
+1 -1
View File
@@ -64,7 +64,7 @@ const result = computed(() => {
<span> = </span> <span> = </span>
<span class="counter" :style="{ color: result > 0 ? '#5EC697' : '#f15a16' }"> <span class="result" :style="{ color: result > 0 ? '#5EC697' : '#f15a16' }">
{{ result }} {{ result }}
</span> </span>
docs/examples/math/style.css
+17 -4
View File
@@ -15,12 +15,15 @@
stroke-width: 3; stroke-width: 3;
} }
.vue-flow__node {
background-color: #f3f4f6;
}
.vue-flow__node-value { .vue-flow__node-value {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
padding: 8px 16px; padding: 8px 16px;
background-color: #f3f4f6;
border-radius: 8px; border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
} }
@@ -39,6 +42,8 @@
.vue-flow__node-value input:focus { .vue-flow__node-value input:focus {
outline: none; outline: none;
box-shadow: 0 0 0 2px #ec4899;
transition: box-shadow 0.2s;
} }
.vue-flow__node-value .vue-flow__handle { .vue-flow__node-value .vue-flow__handle {
@@ -51,7 +56,6 @@
align-items: center; align-items: center;
gap: 8px; gap: 8px;
padding: 16px 24px; padding: 16px 24px;
background-color: #f3f4f6;
border-radius: 8px; border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
} }
@@ -112,7 +116,6 @@
align-items: center; align-items: center;
gap: 8px; gap: 8px;
padding: 16px 24px; padding: 16px 24px;
background-color: #f3f4f6;
border-radius: 8px; border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
} }
@@ -121,8 +124,18 @@
box-shadow: 0 0 0 2px #5EC697; box-shadow: 0 0 0 2px #5EC697;
} }
.vue-flow__node-result .calculation { .vue-flow__node-result .result {
display: flex; display: flex;
gap: 8px; gap: 8px;
font-size: 24px; font-size: 24px;
} }
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield;
}