groupbasedpolicy-old-ui/module/src/main/resources/gbp-old/js/joint.css

   1 /*! JointJS v0.9.3 - JavaScript diagramming library  2015-05-22
   2
   3
   4 This Source Code Form is subject to the terms of the Mozilla Public
   5 License, v. 2.0. If a copy of the MPL was not distributed with this
   6 file, You can obtain one at http://mozilla.org/MPL/2.0/.
   7  */
   8 /* This Source Code Form is subject to the terms of the Mozilla Public
   9  * License, v. 2.0. If a copy of the MPL was not distributed with this
  10  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
  11
  12
  13 /*
  14 A complete list of SVG properties that can be set through CSS is here:
  15 http://www.w3.org/TR/SVG/styling.html
  16
  17 Important note: Presentation attributes have a lower precedence over CSS style rules.
  18 */
  19
  20
  21 /* .viewport is a <g> node wrapping all diagram elements in the paper */
  22 .viewport {
  23    -webkit-user-select: none;
  24    -moz-user-select: none;
  25    user-select: none;
  26 }
  27
  28 /*
  29 1. IE can't handle paths without the `d` attribute for bounding box calculation
  30 2. IE can't even handle 'd' attribute as a css selector (e.g path[d]) so the following rule will
  31    break the links rendering.
  32
  33 path:not([d]) {
  34     display: none;
  35 }
  36
  37 */
  38
  39 /* .magnet is an element that can be either source or a target of a link */
  40 /*
  41 .magnet {
  42    fill: black;
  43    fill-opacity: 0;
  44    stroke: black;
  45    stroke-width: 15;
  46    stroke-opacity: 0;
  47    pointer-events: visibleStroke;
  48    cursor: crosshair;
  49    vector-effect: non-scaling-stroke;
  50 }
  51
  52 .magnet:hover {
  53    stroke-opacity: .5;
  54 }
  55 */
  56
  57 [magnet=true]:not(.element) {
  58    cursor: crosshair;
  59 }
  60 [magnet=true]:not(.element):hover {
  61    opacity: .7;
  62 }
  63
  64 /*
  65
  66 Elements have CSS classes named by their types. E.g. type: basic.Rect has a CSS class "element basic Rect".
  67 This makes it possible to easilly style elements in CSS and have generic CSS rules applying to
  68 the whole group of elements. Each plugin can provide its own stylesheet.
  69
  70 */
  71
  72 .element {
  73    /* Give the user a hint that he can drag&drop the element. */
  74    cursor: move;
  75 }
  76
  77 .element * {
  78    /* The default behavior when scaling an element is not to scale the stroke in order to prevent the ugly effect of stroke with different proportions. */
  79    vector-effect: non-scaling-stroke;
  80    -moz-user-select: none;
  81    user-drag: none;
  82 }
  83
  84
  85 /*
  86
  87 connection-wrap is a <path> element of the joint.dia.Link that follows the .connection <path> of that link.
  88 In other words, the `d` attribute of the .connection-wrap contains the same data as the `d` attribute of the
  89 .connection <path>. The advantage of using .connection-wrap is to be able to catch pointer events
  90 in the neighborhood of the .connection <path>. This is especially handy if the .connection <path> is
  91 very thin.
  92
  93 */
  94
  95 .connection-wrap {
  96    fill: none;
  97    stroke: black;
  98    stroke-width: 15;
  99    stroke-linecap: round;
 100    stroke-linejoin: round;
 101    opacity: 0;
 102    cursor: move;
 103 }
 104 .connection-wrap:hover {
 105    opacity: .4;
 106    stroke-opacity: .4;
 107 }
 108
 109
 110 .connection {
 111    /* stroke: black; */
 112    /* stroke width cannot be overriden by attribute? */
 113    /*   stroke-width: 1; */
 114    fill: none;
 115    stroke-linejoin: round;
 116 }
 117
 118 .marker-source, .marker-target {
 119 /* Cannot be in CSS otherwise it could not be overruled by attributes.
 120    fill: black;
 121    stroke: black;
 122 */
 123    /* This makes the arrowheads point to the border of objects even though the transform: scale() is applied on them. */
 124    vector-effect: non-scaling-stroke;
 125 }
 126
 127 /*
 128
 129 Vertex markers are `<circle>` elements that appear at connection vertex positions.
 130
 131 */
 132
 133 /* <g> element wrapping .marker-vertex-group. */
 134 .marker-vertices {
 135    opacity: 0;
 136    cursor: move;
 137 }
 138 .marker-arrowheads {
 139    opacity: 0;
 140    cursor: move;
 141    cursor: -webkit-grab;
 142    cursor: -moz-grab;
 143 /*   display: none;   */   /* setting `display: none` on .marker-arrowheads effectivelly switches of links reconnecting */
 144 }
 145 .link-tools {
 146    opacity: 0;
 147    cursor: pointer;
 148 }
 149 .link-tools .tool-options {
 150    display: none;       /* by default, we don't display link options tool */
 151 }
 152 .link-tools .tool-remove circle {
 153    fill: red;
 154 }
 155 .link-tools .tool-remove path {
 156    fill: white;
 157 }
 158 .link:hover .marker-vertices,
 159 .link:hover .marker-arrowheads,
 160 .link:hover .link-tools {
 161    opacity: 1;
 162 }
 163
 164 /* <circle> element inside .marker-vertex-group <g> element */
 165 .marker-vertex {
 166    fill: #1ABC9C;
 167 }
 168 .marker-vertex:hover {
 169    fill: #34495E;
 170    stroke: none;
 171 }
 172
 173 .marker-arrowhead {
 174    fill: #1ABC9C;
 175 }
 176 .marker-arrowhead:hover {
 177    fill: #F39C12;
 178    stroke: none;
 179 }
 180
 181 /* <circle> element used to remove a vertex */
 182 .marker-vertex-remove {
 183    cursor: pointer;
 184    opacity: .1;
 185    fill: white;
 186 }
 187
 188 .marker-vertex-group:hover .marker-vertex-remove {
 189    opacity: 1;
 190 }
 191
 192 .marker-vertex-remove-area {
 193    opacity: .1;
 194    cursor: pointer;
 195 }
 196 .marker-vertex-group:hover .marker-vertex-remove-area {
 197    opacity: 1;
 198 }
 199
 200 /* Cell highlighting - e.g a cell underneath the dragged link get highlighted.
 201    See joint.dia.cell.js highlight(); */
 202 .highlighted {
 203     opacity: 0.7;
 204 }
 205
 206 /* For some reason, CSS `outline` property
 207    does not work on `<text>` elements. */
 208 text.highlighted {
 209     fill: #FF0000;
 210 }
 211
 212 /* `outline` doesn't work in Firefox, Opera and IE9+.
 213    The only engine supporting outlines on SVG elements is Webkit. */
 214 @media screen and (-webkit-min-device-pixel-ratio:0) {
 215     .highlighted {
 216         outline: 2px solid #FF0000;
 217         opacity: initial;
 218     }
 219 }
 220
 221 /*
 222 Example of custom changes (in pure CSS only!):
 223
 224 Do not show marker vertices at all:  .marker-vertices { display: none; }
 225 Do not allow adding new vertices: .connection-wrap { pointer-events: none; }
 226 */
 227
 228 /* foreignObject inside the elements (i.e joint.shapes.basic.TextBlock) */
 229 .element .fobj body {
 230     background-color: transparent;
 231     margin: 0px;
 232 }
 233 .element .fobj div {
 234     text-align: center;
 235     vertical-align: middle;
 236     display: table-cell;
 237     padding: 0px 5px 0px 5px;
 238 }
 239
 240 svg {
 241   border: none;
 242   border-radius: none;
 243   background-image: none;
 244 }
 245
 246 text.text1, text.text2 {
 247   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 248   font-size: 14px;
 249 }