Rift.IO OSM R1 Initial Submission

[osm/UI.git] / skyquake / plugins / composer / src / src / styles / DescriptorGraph.scss

diff --git a/skyquake/plugins/composer/src/src/styles/DescriptorGraph.scss b/skyquake/plugins/composer/src/src/styles/DescriptorGraph.scss
new file mode 100644 (file)
index 0000000..7efafaa
--- /dev/null
+++ b/skyquake/plugins/composer/src/src/styles/DescriptorGraph.scss
@@ -0,0 +1,170 @@
+@import "_ColorGroups";
+
+/*
+ * 
+ *   Copyright 2016 RIFT.IO Inc
+ *
+ *   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.
+ *
+ */
+
+@function dim-color($color) {
+       @return hsl(hue($color), 50%, 80%);
+}
+
+/* TODO this CSS has to be complete refactored - most of it may not even be used anymore!!! */
+
+.DescriptorGraph {
+       background-color: transparent;
+       border: 1px solid transparent;
+       -webkit-user-select: none;
+       -moz-user-select: none;
+       user-select: none;
+       .grid {
+               line {
+                       stroke: #CBD1D1;
+                       stroke-width: 0.5px;
+                       shape-rendering: geometricPrecision;
+               }
+       }
+       .selection-indicator {
+               stroke-dasharray: 2, 2;
+       }
+       .connector {
+               &.-is-not-connected {
+                       fill: white !important;
+               }
+               &.-is-connected {
+                       fill: #9fc4f4 !important;
+               }
+       }
+       .connection,
+       .new-connection {
+               /* note colors are also defined in ColorGroups.js */
+               //stroke: #295725;
+               stroke-width: 5px;
+               &.-selected {
+                       stroke-width: 7px;
+                       stroke: red;
+               }
+       }
+       .connection-point {
+               &:hover {
+                       cursor: pointer;
+               }
+               &.-is-highlight {
+                       stroke: red !important;
+               }
+       }
+
+       .connection-point-number {
+               text-shadow: 0 0 10px rgba(171, 161, 161, 0.89);
+               font-size: 18px;
+               fill: white;
+               stroke: white;
+               &.-is-highlight {
+                       fill: red;
+                       stroke: red;
+               }
+       }
+
+       .relation-marker-end {
+               stroke: transparent;
+               fill: transparent;
+       }
+
+       &.-is-dragging-connection-point {
+               cursor: no-drop !important;
+               .border,
+               .background,
+               &.connector,
+               &.connector:hover,
+               .connector,
+               .connector:hover {
+                       cursor: no-drop !important;
+                       fill-opacity: 0.33;
+                       stroke-opacity: 0.33;
+               }
+               .-is-valid-drop-target {
+                       cursor: copy !important;
+                       .border,
+                       .background,
+                       &.connector,
+                       &.connector:hover,
+                       .connector,
+                       .connector:hover {
+                               cursor: copy !important;
+                               fill-opacity: 1;
+                               stroke-opacity: 1;
+                       }
+                       &.-is-drag-over {
+                               .border {
+                                       stroke-width: 3px;
+                               }
+                       }
+               }
+       }
+
+       .forwarding-graph-paths {
+               pointer-events: none;
+       }
+
+       text {
+
+               pointer-events: none;
+               fill: $common-foreground-color;
+               stroke: $common-foreground-color;
+               font-size: 14px;
+
+               &.type {
+                       text-transform: uppercase;
+                       stroke: white;
+                       fill: white;
+               }
+
+               &.vld-type {
+                       display: none;
+               }
+
+               &.internal-vld-type {
+                       display: none;
+               }
+
+               &:hover {
+                       cursor: default;
+               }
+
+       }
+
+       path {
+
+               stroke-linejoin: round;
+
+               &.relation {
+                       display: none;
+               }
+
+       }
+
+       .color-legend {
+               display: none;
+               &.vnffgd-rsp-color-legend {
+                       display: block;
+                       text {
+                               font-size: xx-small;
+                               color: white;
+                       }
+               }
+       }
+
+}