1
0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00
node-red/editor/sass/flow.scss

297 lines
5.2 KiB
SCSS
Raw Normal View History

2015-04-09 15:46:29 +02:00
/**
* Copyright JS Foundation and other contributors, http://js.foundation
2015-04-09 15:46:29 +02:00
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
**/
.hidden {
display: none;
}
.lasso {
stroke-width: 1px;
2015-04-09 15:46:29 +02:00
stroke: #ff7f0e;
fill: rgba(20,125,255,0.1);
stroke-dasharray: 10 5;
}
.group-box {
stroke-width: 1px;
stroke: #aaaaaa;
fill: rgba(208, 211, 238, 0.1);
stroke-dasharray: 3 3;
}
.group-box-active {
fill: #fff;
stroke: #ff7f0e;
}
.group_label {
stroke-width: 0;
fill: #999;
font-size: 11px;
pointer-events: none;
-webkit-touch-callout: none;
@include disable-selection;
}
.pull-right {
margin-left: 20px;
}
.node_label_italic {
font-style: italic;
}
.node_label_unknown {
font-style: italic;
fill: #e00 !important;
}
.node_label_white {
fill: #eee !important;
}
.node_label {
stroke-width: 0;
fill: #333;
font-size: 14px;
pointer-events: none;
-webkit-touch-callout: none;
@include disable-selection;
}
.port_label {
stroke-width: 0;
fill: #888;
font-size: 16px;
alignment-baseline: middle;
text-anchor: middle;
pointer-events: none;
-webkit-touch-callout: none;
@include disable-selection;
}
.function_label {
font-size: 12px;
}
.node {
stroke: #999;
cursor: move;
2015-07-12 00:43:45 +02:00
stroke-width: 1;
2015-04-09 15:46:29 +02:00
}
.node_unknown {
stroke-dasharray:10,4;
stroke: #f33;
}
.tool_arrow {
stroke-width: 1;
stroke: #999;
fill: #999;
cursor: pointer;
}
.node_tools {
fill: #ddd;
stroke: #999;
cursor: move;
stroke-width: 1;
cursor: pointer;
}
.node_tools_hovered {
stroke: #ff7f0e;
fill: #eee;
}
.node_button {
fill: inherit;
2015-07-12 00:43:45 +02:00
2015-04-09 15:46:29 +02:00
}
.port {
stroke: #999;
2015-07-12 00:43:45 +02:00
stroke-width: 1;
2015-04-09 15:46:29 +02:00
fill: #ddd;
cursor: crosshair;
}
.port_highlight {
stroke: #6DA332;
stroke-width: 3;
fill: #fff;
pointer-events:none;
fill-opacity: 0.5;
}
.node_error {
stroke: #ff0000;
stroke-width: 2;
fill: #ff7f0e;
}
.node_badge {
stroke: rgb(93, 114, 145);
stroke-width: 1;
fill: rgb(190, 209, 255);
}
.node_badge_label {
stroke-width:0;
fill: #fff;
font-size: 11px;
pointer-events: none;
-webkit-touch-callout: none;
@include disable-selection;
2015-07-12 00:43:45 +02:00
2015-04-09 15:46:29 +02:00
}
.node_invalid {
stroke: #ff0000;
}
.node_selected {
2015-07-12 00:43:45 +02:00
stroke-width: 2;
2015-07-13 12:26:29 +02:00
stroke: $node-selected-color !important;
2015-04-09 15:46:29 +02:00
}
.node_highlighted {
2016-09-30 00:46:29 +02:00
border-color: #dd1616 !important;
border-style: dashed !important;
2015-04-09 15:46:29 +02:00
stroke: #dd1616;
2015-07-12 00:43:45 +02:00
stroke-width: 2;
2015-04-09 15:46:29 +02:00
stroke-dasharray: 10, 4;
}
.node_hovered {
}
.node_subflow .node {
stroke-dasharray:8, 3;
}
.node_quickadd * {
stroke-dasharray: 12,3;
}
.node_status_label {
@include disable-selection;
stroke-width: 0;
fill: #888;
font-size:9pt;
stroke:#000;
text-anchor:start;
}
2015-04-09 15:46:29 +02:00
.port_hovered {
2015-07-14 00:21:03 +02:00
stroke: $port-selected-color;
fill: $port-selected-color;
2015-04-09 15:46:29 +02:00
}
.port_quick_link {
stroke: $port-selected-color;
fill: $port-selected-color;
}
2015-04-09 15:46:29 +02:00
.subflowport {
stroke-dasharray: 5,5;
fill: #eee;
stroke: #999;
}
.drag_line {
2015-07-13 12:26:29 +02:00
stroke: $node-selected-color;
stroke-width: 3;
2015-04-09 15:46:29 +02:00
fill: none;
pointer-events: none;
}
.drag_line_hidden {
2015-07-13 12:26:29 +02:00
stroke: $node-selected-color;
2015-04-09 15:46:29 +02:00
stroke-width: 0;
pointer-events: none;
fill: none;
}
.link_line {
2015-07-14 00:21:03 +02:00
stroke: $link-color;
2015-07-12 00:43:45 +02:00
stroke-width: 3;
2015-04-09 15:46:29 +02:00
fill: none;
pointer-events: none;
}
.link_link {
stroke-width: 2;
stroke-dasharray: 10,5;
stroke: $link-link-color;
fill: none;
stroke-dasharray: 15,2;
pointer-events: none;
}
.link_port {
fill: #fff;
stroke: $link-link-color;
stroke-width: 1;
}
.link_group_active .link_port {
stroke: $link-link-active-color;
}
.link_group:hover {
cursor: pointer;
}
2015-04-09 15:46:29 +02:00
.link_subflow {
2015-07-14 00:21:03 +02:00
stroke: $link-subflow-color;
2015-04-09 15:46:29 +02:00
stroke-dasharray: 10,5;
2015-07-12 00:43:45 +02:00
stroke-width: 2;
2015-04-09 15:46:29 +02:00
}
.link_outline {
stroke: #fff;
2015-07-12 00:43:45 +02:00
stroke-width: 4;
2015-04-09 15:46:29 +02:00
cursor: crosshair;
fill: none;
pointer-events: none;
}
.link_background {
stroke: #fff;
opacity: 0;
2015-07-12 00:43:45 +02:00
stroke-width: 20;
2015-04-09 15:46:29 +02:00
cursor: crosshair;
fill: none;
}
.link_splice > .link_line {
stroke-dasharray: 15,8;
}
2015-04-09 15:46:29 +02:00
g.link_selected path.link_line {
2015-07-13 12:26:29 +02:00
stroke: $node-selected-color;
2015-04-09 15:46:29 +02:00
}
g.link_unknown path.link_line {
2015-07-14 00:21:03 +02:00
stroke: $link-unknown-color;
2015-04-09 15:46:29 +02:00
stroke-width: 2;
stroke-dasharray: 10, 4;
}
2017-01-26 16:38:25 +01:00
2017-01-27 17:33:11 +01:00
@keyframes port_tooltip_fadeIn { from { opacity:0; } to { opacity:1; } }
2017-01-26 16:38:25 +01:00
2017-01-27 17:33:11 +01:00
.port_tooltip {
2017-01-26 16:38:25 +01:00
opacity:0;
2017-01-27 17:33:11 +01:00
animation: 0.1s ease-in 0s 1 normal forwards port_tooltip_fadeIn;
2017-01-26 16:38:25 +01:00
pointer-events: none;
2017-01-27 17:33:11 +01:00
path {
fill: white;
stroke: #999;
stroke-width: 1;
}
}
.port_tooltip_label {
stroke-width: 0;
fill: #666;
font-size: 12px;
pointer-events: none;
-webkit-touch-callout: none;
@include disable-selection;
2017-01-26 16:38:25 +01:00
}