graflow: fixed missing styles in shadow dom + fixed bad coords in autoplacement
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
<style>
|
||||
.bzgf-node {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
border-width:2px;
|
||||
border-style: solid;
|
||||
border-radius: 6px;
|
||||
@@ -27,7 +28,7 @@
|
||||
border-radius: 6px;
|
||||
border: 1px solid #CCC;
|
||||
}
|
||||
.bzgf-node .body span{ font-size: 12px; text-align: left; line-height: 21px; }
|
||||
.bzgf-node .body div{ font-size: 12px; text-align: left; line-height: 24px; }
|
||||
.bzgf-node .port{
|
||||
position: absolute;
|
||||
height: 10px;
|
||||
@@ -38,8 +39,8 @@
|
||||
.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%; transform: translateY(-50%);}
|
||||
.bzgf-node [data-direction="e"]{ right: -7px; top: 50%; transform: translateY(-50%);}
|
||||
.bzgf-node [data-direction="w"]{ left: -7px; top: calc(50% + 1em); transform: translateY(-50%);}
|
||||
.bzgf-node [data-direction="e"]{ right: -7px; top: calc(50% + 1em); transform: translateY(-50%);}
|
||||
.bzgf-node [data-direction="n"]{ top: -7px; left: 50%; transform: translateX(-50%);}
|
||||
.bzgf-node [data-direction="s"]{ bottom: -7px; left: 50%; transform: translateX(-50%);}
|
||||
|
||||
@@ -57,11 +58,11 @@
|
||||
}
|
||||
.bzgf-node[data-nodetype="wadder"] .body{ display: grid; grid-gap: 4px; margin-left:0.5em; grid-template-columns: 1fr 1fr; align-items: center; }
|
||||
.bzgf-node[data-nodetype="wadder"] .title{ background: #090; }
|
||||
.bzgf-node[data-nodetype="wadder"] .port[data-id="inp1"] { top:37px; }
|
||||
.bzgf-node[data-nodetype="wadder"] .port[data-id="inp2"] { top:63px; }
|
||||
.bzgf-node[data-nodetype="wadder"] .port[data-id="inp3"] { top:89px; }
|
||||
.bzgf-node[data-nodetype="wadder"] .port[data-id="inp4"] { top:115px; }
|
||||
.bzgf-node[data-nodetype="wadder"] .port[data-id="inp5"] { top:141px; }
|
||||
.bzgf-node[data-nodetype="wadder"] .port[data-id="inp1"] { top:51px; }
|
||||
.bzgf-node[data-nodetype="wadder"] .port[data-id="inp2"] { top:75px; }
|
||||
.bzgf-node[data-nodetype="wadder"] .port[data-id="inp3"] { top:99px; }
|
||||
.bzgf-node[data-nodetype="wadder"] .port[data-id="inp4"] { top:123px; }
|
||||
.bzgf-node[data-nodetype="wadder"] .port[data-id="inp5"] { top:147px; }
|
||||
|
||||
.bzgf-node[data-nodetype="factor"]{
|
||||
background: #DDF;
|
||||
@@ -131,11 +132,11 @@
|
||||
<div class="port" data-type="out" data-id="out1" data-direction="e"></div>
|
||||
<div class="body">
|
||||
<div>
|
||||
<span>x <input type="text" name="weight1" value="1"></span>
|
||||
<span>x <input type="text" name="weight2" value="1"></span>
|
||||
<span>x <input type="text" name="weight3" value="1"></span>
|
||||
<span>x <input type="text" name="weight4" value="1"></span>
|
||||
<span>x <input type="text" name="weight5" value="1"></span>
|
||||
<div>x <input type="text" name="weight1" value="1"></div>
|
||||
<div>x <input type="text" name="weight2" value="1"></div>
|
||||
<div>x <input type="text" name="weight3" value="1"></div>
|
||||
<div>x <input type="text" name="weight4" value="1"></div>
|
||||
<div>x <input type="text" name="weight5" value="1"></div>
|
||||
</div>
|
||||
<div style="font-size:40px;font-weight: bold;transform: translateY(-50%);">∑</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user