STEINNI
85 lines
2.4 KiB
HTML
85 lines
2.4 KiB
HTML
<style>
|
|
.bzgf-node {
|
|
border-width:2px;
|
|
border-style: solid;
|
|
border-radius: 6px;
|
|
width: 160px;
|
|
height: 80px;
|
|
color: black;
|
|
text-align: center;
|
|
position: absolute;
|
|
padding: .5em;
|
|
}
|
|
|
|
.bzgf-node .title {
|
|
font-weight: bold;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 2em;
|
|
color: white;
|
|
}
|
|
.bzgf-node .body { margin-top: 2em; }
|
|
.bzgf-node .body input {
|
|
width:4em;
|
|
font-size: .9em;
|
|
border-radius: 6px;
|
|
border: 1px solid #CCC;
|
|
}
|
|
.bzgf-node .port{
|
|
position: absolute;
|
|
height: 10px;
|
|
width: 10px;
|
|
border: 1px solid black;
|
|
border-radius: 10px;
|
|
}
|
|
.bzgf-node .port[data-type="in"] { background: #0F0; }
|
|
.bzgf-node .port[data-type="out"] { background: #FF0; }
|
|
|
|
.bzgf-node [data-direction="w"]{ left: -7px; top: 50%; }
|
|
.bzgf-node [data-direction="e"]{ right: -7px; top: 50%;}
|
|
.bzgf-node [data-direction="n"]{ top: -7px; left: 50%;}
|
|
.bzgf-node [data-direction="s"]{ bottom: -7px; left: 50%;}
|
|
|
|
.bzgf-node[data-nodetype="inc"]{
|
|
background: #DFD;
|
|
border-color: #090;
|
|
}
|
|
.bzgf-node[data-nodetype="inc"] .title{ background: #090; }
|
|
|
|
.bzgf-node[data-nodetype="factor"]{
|
|
background: #DDF;
|
|
border-color: #009;
|
|
}
|
|
.bzgf-node[data-nodetype="factor"] .title{ background: #009; }
|
|
|
|
.bzgf-wire{
|
|
stroke: #0AF;
|
|
stroke-width: 2;
|
|
}
|
|
</style>
|
|
|
|
<template>
|
|
<div class="bzgf-node" data-nodetype="inc">
|
|
<div class="title">Increment</div>
|
|
<div class="port" data-type="in" data-id="inp1" data-direction="w"></div>
|
|
<div class="port" data-type="in" data-id="inp2" data-direction="s"></div>
|
|
<div class="port" data-type="out" data-id="out1" data-direction="e"></div>
|
|
<div class="body">
|
|
<input type="text" value="1">
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template>
|
|
<div class="bzgf-node" data-nodetype="factor">
|
|
<div class="title">Multiply</div>
|
|
<div class="port" data-type="in" data-id="inp1" data-direction="w"></div>
|
|
<div class="port" data-type="in" data-id="inp2" data-direction="s"></div>
|
|
<div class="port" data-type="out" data-id="out1" data-direction="e"></div>
|
|
<div class="body">
|
|
<input type="text" value="0.5">
|
|
</div>
|
|
</div>
|
|
</template> |