resources/scss/d3/_forceDirectedGraph.scss

   1 /**
   2  * ============LICENSE_START=======================================================
   3  * org.onap.aai
   4  * ================================================================================
   5  * Copyright © 2017-2018 AT&T Intellectual Property. All rights reserved.
   6  * Copyright © 2017-2018 Amdocs
   7  * ================================================================================
   8  * Licensed under the Apache License, Version 2.0 (the "License");
   9  * you may not use this file except in compliance with the License.
  10  * You may obtain a copy of the License at
  11  *
  12  *       http://www.apache.org/licenses/LICENSE-2.0
  13  *
  14  * Unless required by applicable law or agreed to in writing, software
  15  * distributed under the License is distributed on an "AS IS" BASIS,
  16  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  17  * See the License for the specific language governing permissions and
  18  * limitations under the License.
  19  * ============LICENSE_END=========================================================
  20  */
  21 .ts-force-selected-graph {
  22   padding: 0px;
  23   -webkit-user-select: none;  /* Chrome all / Safari all */
  24   -moz-user-select: none;     /* Firefox all */
  25   -ms-user-select: none;      /* IE 10+ */
  26   user-select: none;          /* Likely future */
  27 }
  28
  29 .aai-entity-node{
  30   font-family: $base-font-regular;
  31   font-size: $body-font-4;
  32   line-height: $body-font-2;
  33   text-anchor: middle;
  34 }
  35
  36 .aai-entity-node > .id-type-label {
  37   fill: $text-color1;
  38   font-weight: bold;
  39 }
  40
  41 .aai-entity-node > .id-value-label {
  42   fill: $background-color2;
  43 }
  44
  45 .aai-entity-link {
  46   stroke: $graph-border-color4;
  47   stroke-width: 2px;
  48 }
  49
  50 .general-node > .inner {
  51   fill: $background-color2;
  52 }
  53
  54 .general-node > .outer {
  55   fill: $graph-background-color3;
  56   stroke: $graph-border-color2;
  57   stroke-width: 2px;
  58 }
  59
  60 .search-node > .inner {
  61   fill: $graph-background-color1;
  62 }
  63
  64 .search-node > .outer {
  65   fill: $graph-background-color3;
  66   stroke: $graph-border-color2;
  67   stroke-width: 2px;
  68 }
  69
  70 .selected-node > .inner {
  71   fill: $graph-background-color1;
  72 }
  73
  74 .selected-node > .outer {
  75   fill: $graph-background-color4;
  76   stroke: $graph-border-color2;
  77   stroke-width: 3px;
  78   filter: url(#selected-node-drop-shadow);
  79 }
  80
  81 .selected-search-node > .inner {
  82   fill: $border-color3;
  83 }
  84
  85 .selected-search-node > .outer {
  86   fill: $graph-background-color4;
  87   stroke: $graph-border-color2;
  88   stroke-width: 3px;
  89   filter: url(#selected-node-drop-shadow);
  90 }
  91
  92 @-moz-document url-prefix() {
  93   .selected-search-node > .outer {
  94     fill: $graph-background-color4;
  95     stroke: $graph-border-color2;
  96     stroke-width: 3px;
  97     filter: drop-shadow(-1px 1px 3px rgba(0,0,0,0.5));
  98   }
  99
 100   .selected-node > .outer {
 101     fill: $graph-background-color4;
 102     stroke: $graph-border-color2;
 103     stroke-width: 3px;
 104     filter: drop-shadow(-1px 1px 3px rgba(0,0,0,0.5));
 105   }
 106 }
 107
 108 .background-unselected {
 109   fill: $background-color2;
 110 }
 111
 112 .background-selected {
 113   fill: $graph-border-color2;
 114 }
 115
 116 .ellipses-ellipse {
 117   fill: $graph-background-color3;
 118 }
 119
 120 .triangle-warning {
 121   fill: $graph-background-color3;
 122   fill-rule: evenodd;
 123 }
 124
 125 .icon_tick_circle{
 126   fill: $graph-background-color5;
 127 }
 128
 129 .icon_tick_path {
 130   fill-rule: evenodd;
 131   fill: $graph-background-color3;
 132   stroke: $graph-border-color3;
 133   strokeWidth: 0.8;
 134 }
 135
 136 .icon_warning_circle{
 137   fill: $red;
 138 }
 139
 140 .icon_warning_path {
 141   fill-rule: evenodd;
 142   fill: $graph-background-color3;
 143   stroke: $graph-border-color3;
 144   strokeWidth: 0.5;
 145 }