921 lines
20 KiB
SCSS
921 lines
20 KiB
SCSS
$mapHeight: 1500px;
|
|
$mapWidth: 2500px;
|
|
|
|
$mapWrapperHeight: 520px + 35px;
|
|
$mapWrapperMinHeight: 250px;
|
|
$mapWrapperMaxHeight: 1000px; // no vertical scrollbar: $mapHeight + 35px;
|
|
$mapWrapperMaxWidth: $mapWidth + 35px;
|
|
|
|
$mapOverlayTop: 8px;
|
|
$mapOverlayRight: 25px;
|
|
$mapOverlayBottom: 25px;
|
|
$mapOverlayLeft: 5px;
|
|
|
|
$mapBubbleWidth: 30px;
|
|
|
|
// start bounce mixin =================================================================================================
|
|
@mixin bounce-up-down{
|
|
animation-duration: 1s;
|
|
animation-delay: 0.5s;
|
|
animation-fill-mode: both;
|
|
animation-timing-function: linear;
|
|
animation-iteration-count: infinite;
|
|
animation-name: bounce;
|
|
}
|
|
|
|
@include keyframes(bounce){
|
|
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
|
|
40% {transform: translateY(-8px);}
|
|
60% {transform: translateY(-4px);}
|
|
}
|
|
|
|
// end bounce mixin ===================================================================================================
|
|
#pf-map-tab-element{
|
|
max-width: $mapWrapperMaxWidth;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.pf-map-move{
|
|
cursor: move !important;
|
|
}
|
|
|
|
.pf-map-tab-content{
|
|
|
|
.pf-map-wrapper{
|
|
position: relative;
|
|
resize: vertical;
|
|
width: 100%;
|
|
height: $mapWrapperHeight;
|
|
max-width: $mapWrapperMaxWidth;
|
|
max-height: $mapWrapperMaxHeight;
|
|
min-height: $mapWrapperMinHeight;
|
|
overflow: auto;
|
|
padding: 5px;
|
|
background: rgba($gray-darker, 0.93);
|
|
box-shadow:inset -3px 3px 10px 0 rgba($black, 0.3);
|
|
will-change: width, height;
|
|
@include border-bottom-radius(5px);
|
|
border: {
|
|
width: 1px;
|
|
style: solid;
|
|
color: $gray-dark;
|
|
}
|
|
|
|
&:before{
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
border-style: solid;
|
|
border-width: 14px 14px 0 0 ;
|
|
border-color: transparent $gray-dark transparent transparent;
|
|
cursor: nwse-resize;
|
|
}
|
|
|
|
&:focus, &:hover{
|
|
border: 1px solid $gray;
|
|
|
|
&:before{
|
|
border-color: transparent $gray transparent transparent;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// map overlay ========================================================================================================
|
|
.pf-map-overlay{
|
|
position: absolute;
|
|
display: none; // triggered by js
|
|
z-index: 10000;
|
|
background: rgba($black, 0.25);
|
|
@include border-radius(5px);
|
|
|
|
&.pf-map-overlay-timer{
|
|
right: $mapOverlayRight;
|
|
bottom: $mapOverlayBottom;
|
|
width: 36px;
|
|
height: 38px;
|
|
}
|
|
|
|
&.pf-map-overlay-zoom{
|
|
bottom: $mapOverlayBottom;
|
|
left: $mapOverlayLeft;
|
|
width: 26px;
|
|
height: 52px;
|
|
padding: 2px 4px;
|
|
display: block;
|
|
|
|
.pf-zoom-overlay-up,
|
|
.pf-zoom-overlay-down{
|
|
display: block;
|
|
text-align: center;
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
@include transition(color .18s ease-in-out);
|
|
will-change: color;
|
|
|
|
&:hover{
|
|
color: $orange-dark;
|
|
}
|
|
|
|
&.disabled{
|
|
cursor: not-allowed;
|
|
color: $gray-darker;
|
|
}
|
|
}
|
|
|
|
.pf-zoom-overlay-value{
|
|
display: block;
|
|
margin-top: 2px;
|
|
text-align: center;
|
|
font-size: 11px;
|
|
line-height: 13px;
|
|
@include transition(color .18s ease-in-out);
|
|
will-change: color;
|
|
}
|
|
|
|
.active{
|
|
color: $orange-dark;
|
|
}
|
|
}
|
|
|
|
&.pf-map-overlay-info{
|
|
top: $mapOverlayTop;
|
|
right: $mapOverlayRight;
|
|
height: 36px;
|
|
min-height: 36px;
|
|
min-width: 36px;
|
|
padding: 3px 3px 3px 8px;
|
|
line-height: 26px;
|
|
|
|
i{
|
|
margin: 0; // overwrite default
|
|
margin-top: 5px;
|
|
width: 0; // is animated
|
|
height: 26px;
|
|
opacity: 0; // is animated
|
|
color: $gray-light;
|
|
transform: scale(0);
|
|
transform-origin: 50% 50% 0px;
|
|
@include transition(color .18s ease-in-out );
|
|
cursor: help;
|
|
will-change: all;
|
|
|
|
&.fas, &.far{
|
|
font-size: 20px;
|
|
}
|
|
|
|
&.glyphicon{
|
|
margin-top: 1px;
|
|
font-size: 22px;
|
|
padding-left: 3px;
|
|
}
|
|
|
|
&.active, &:hover{
|
|
color: $orange-dark;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.pf-map-overlay-local{
|
|
top: 54px;
|
|
right: $mapOverlayRight;
|
|
min-height: 80px;
|
|
width: 32px;
|
|
display: block;
|
|
will-change: width;
|
|
|
|
.pf-map-overlay-local-content {
|
|
margin-right: 36px;
|
|
padding: 5px 0 5px 5px;
|
|
overflow: hidden;
|
|
|
|
.pf-map-overlay-headline{
|
|
font-size: 12px;
|
|
font-family: $font-family-bold;
|
|
white-space: nowrap;
|
|
|
|
.badge{
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.pf-system-sec{
|
|
cursor: default; // overwrite
|
|
}
|
|
}
|
|
|
|
.pf-local-table {
|
|
font-size: 10px;
|
|
|
|
td {
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
.dataTables_paginate,
|
|
.dataTables_empty{
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.pf-map-overlay-toolbar{
|
|
.pf-map-overlay-toolbar-icon{
|
|
vertical-align: 0; // overwrite default
|
|
margin-top: 14px;
|
|
}
|
|
|
|
.pf-map-overlay-toolbar-checkbox{
|
|
display: inline-block;
|
|
margin-bottom: 0; // overwrite default
|
|
}
|
|
}
|
|
}
|
|
|
|
.pf-map-overlay-local-main{
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
height: 100%;
|
|
padding: 3px;
|
|
width: 32px;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
border-left: 1px solid $gray-darker;
|
|
|
|
.pf-map-overlay-local-trigger{
|
|
margin-bottom: 10px;
|
|
|
|
&:hover, &.right{
|
|
color: $orange-dark; // overlay open
|
|
}
|
|
}
|
|
|
|
i{
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
.pf-map-overlay-local-jumps{
|
|
position: absolute;
|
|
bottom: 5px;
|
|
width: calc(100% - 6px);
|
|
}
|
|
|
|
.badge{
|
|
font-family: Arial, sans-serif; // fix for element width on custom font family
|
|
background-color: $gray-darker;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
// 20x20px grid background
|
|
.pf-grid-small{
|
|
&:before{
|
|
content: ' ';
|
|
display: block;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0.6;
|
|
background: inline-image("/grid_40x40.png") !important;
|
|
}
|
|
}
|
|
|
|
// class gets applied to body tag if system/connection gets dragged
|
|
// to prevent cursor "flicker" we need to change the cursor for "neighbored" elements
|
|
.jtk-drag-select{
|
|
.pf-map{
|
|
cursor: grab !important;
|
|
.pf-system{
|
|
cursor: grab !important;
|
|
.pf-system-head{
|
|
cursor: grab !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.pf-map{
|
|
width: $mapWidth;
|
|
height: $mapHeight;
|
|
position: relative;
|
|
font-family: $font-family-bold;
|
|
will-change: transform;
|
|
|
|
// jsPlumb classes ==================================================================================================
|
|
.jtk-drag{
|
|
@extend .pf-system-selected;
|
|
}
|
|
|
|
.jtk-hover:not(.jtk-overlay){
|
|
@include bounce-up-down; // label should not bounce
|
|
}
|
|
|
|
.jtk-source-hover, .jtk-target-hover{
|
|
@include bounce-up-down;
|
|
@include box-shadow(0 6px 12px rgba(0,0,0,.3));
|
|
}
|
|
|
|
// ==================================================================================================================
|
|
.pf-system{
|
|
position: absolute;
|
|
min-width: 60px;
|
|
height: auto;
|
|
overflow: hidden; // hide bg on round corners -_-
|
|
background-color: $gray-dark;
|
|
font-family: $font-family-bold;
|
|
z-index: 100;
|
|
will-change: top, left, opacity, transform;
|
|
|
|
//opacity: 0; // trigger by js
|
|
border: {
|
|
width: 2px;
|
|
style: solid;
|
|
color: $gray-light;
|
|
}
|
|
@include border-radius(5px);
|
|
|
|
// change border color with transition
|
|
@include transition( border-color 0.2s ease-out, box-shadow 0.12s ease-out, opacity 0.12s ease-out );
|
|
@include transform( translate3d(0, 0, 0) );
|
|
|
|
&:hover{
|
|
// makes the systems "flying" :)
|
|
@include box-shadow(0 6px 12px rgba(0,0,0, 0.3));
|
|
@include transform(translate3d(0, -1px, 0) !important);
|
|
}
|
|
|
|
.pf-system-head{
|
|
padding: 0 3px 0 3px;
|
|
cursor: pointer;
|
|
font-family: Arial, sans-serif; // fix for element width on custom font family
|
|
font-weight: bold;
|
|
white-space: nowrap;
|
|
|
|
.pf-system-head-name{
|
|
border: none;
|
|
display: inline-block;
|
|
min-width: 50px;
|
|
color: $gray-lighter;
|
|
margin-right: 2px;
|
|
}
|
|
|
|
.pf-system-head-counter{
|
|
display: inline-block;
|
|
text-align: right;
|
|
min-width: 8px;
|
|
margin-right: 1px;
|
|
color: $green;
|
|
cursor: help;
|
|
|
|
&:empty{
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.pf-system-effect{
|
|
font-size: 11px;
|
|
}
|
|
|
|
.fa-lock{
|
|
font-size: 11px;
|
|
display: none; // triggered by system-lock class
|
|
}
|
|
|
|
.pf-system-head-expand{
|
|
margin-left: 2px;
|
|
color: $gray-light;
|
|
width: 10px;
|
|
display: none; // triggered by JS
|
|
}
|
|
|
|
// overwrites "xEditable" style for empty values
|
|
.editable-empty{
|
|
font-style: normal;
|
|
}
|
|
}
|
|
|
|
// ================================================================================================================
|
|
.pf-system-head-info{
|
|
display: flex;
|
|
color: lighten($gray-light, 10%);
|
|
font-size: 10px;
|
|
line-height: 10px;
|
|
padding-right: 1px; // bring right aligned text in line with wh "effect" icon
|
|
margin-bottom: 2px;
|
|
|
|
[class^="pf-system-sec-"]{
|
|
cursor: help;
|
|
}
|
|
}
|
|
|
|
.pf-system-head-info-left{
|
|
flex: 1;
|
|
}
|
|
|
|
.pf-system-head-info-right{
|
|
flex: 1;
|
|
text-align: right;
|
|
}
|
|
|
|
// ================================================================================================================
|
|
|
|
.pf-system-body{
|
|
height: 0px;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
cursor: -moz-grab;
|
|
cursor: -webkit-grab;
|
|
cursor: grab;
|
|
padding: 0 4px;
|
|
white-space: nowrap;
|
|
display: none; // triggered by JS
|
|
will-change: width;
|
|
|
|
border: {
|
|
top: {
|
|
width: 1px;
|
|
style: dashed;
|
|
color: $gray-light;
|
|
}
|
|
}
|
|
|
|
.pf-system-body-item{
|
|
position: relative;
|
|
color: lighten($gray-light, 10%);
|
|
font-size: 10px;
|
|
line-height: 16px;
|
|
height: 16px;
|
|
|
|
.pf-system-body-right{
|
|
float: right;
|
|
color: $orange-light;
|
|
width: 50px;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
display: none; // hover effect
|
|
}
|
|
|
|
// user status ================================================================================================
|
|
.pf-user-status{
|
|
font-size: 6px;
|
|
width: 10px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.pf-system-body-item-name{
|
|
position: absolute;
|
|
display: inline-block;
|
|
width: calc(100% - 10px); // -10px icon
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
// system head specific tooltip style
|
|
.tooltip{
|
|
|
|
&.in{
|
|
opacity: 1;
|
|
}
|
|
|
|
.tooltip-inner{
|
|
color: $gray-dark;
|
|
background-color: $gray-lighter;
|
|
padding: 3px 3px;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
// active system
|
|
.pf-system-active:not(.pf-map-endpoint-source):not(.pf-map-endpoint-target){
|
|
@include box-shadow($yellow-lighter 0px 0px 8px 0px);
|
|
}
|
|
|
|
|
|
// selected system
|
|
.pf-system-selected:not(.pf-map-endpoint-source):not(.pf-map-endpoint-target){
|
|
@include box-shadow($red-darkest 0px 0px 8px 0px);
|
|
background-color: $red-darkest;
|
|
.pf-system-head, .pf-system-body{
|
|
background-color: $red-darkest;
|
|
}
|
|
}
|
|
|
|
// locked system
|
|
.pf-system-locked{
|
|
|
|
.pf-system-sec{
|
|
cursor: default !important;
|
|
}
|
|
|
|
.pf-system-body{
|
|
cursor: default !important;
|
|
}
|
|
|
|
.fa-lock{
|
|
color: $gray-light !important;
|
|
display: inline-block !important;
|
|
}
|
|
}
|
|
|
|
// debug system class
|
|
.pf-system-debug{
|
|
position: absolute;
|
|
color: $white;
|
|
font-size: 10px;
|
|
line-height: 22px;
|
|
text-align: center;
|
|
pointer-events: none;
|
|
font-family: Oxygen, Arial, sans-serif;
|
|
z-index: 500;
|
|
|
|
&:before{
|
|
content: attr(data-depth);
|
|
font-family: Oxygen, Arial, sans-serif;
|
|
position: absolute;
|
|
line-height: 10px;
|
|
top: 1px;
|
|
left: 2px;
|
|
color: $black;
|
|
}
|
|
}
|
|
|
|
// Endpoints ========================================================================================================
|
|
.jtk-endpoint{
|
|
z-index: 90;
|
|
|
|
svg {
|
|
circle{
|
|
@include transition(stroke 0.18s ease-out, fill 0.18s ease-out);
|
|
}
|
|
|
|
*{
|
|
stroke: $gray-light;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
// hover (with cursor) on endpoints (before drag)
|
|
&:hover{
|
|
circle{
|
|
stroke: $orange !important;
|
|
}
|
|
}
|
|
|
|
// hover class (e.g. connection is hovered -> endpoints get this class)
|
|
&.jtk-hover{
|
|
z-index: 95; // increase z-index -> prevent overlapping multiple endpoints
|
|
|
|
&.pf-map-endpoint-bubble{
|
|
&:after{
|
|
filter: drop-shadow( -3px 3px 4px rgba(0,0,0, 0.3));
|
|
animation-iteration-count: infinite;
|
|
animation-delay: 0.5s;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:after{
|
|
content: url("#{$base-url}/bubble.svg");
|
|
position: absolute;
|
|
display: block;
|
|
pointer-events: none;
|
|
top: ($mapBubbleWidth / -2) + 7;
|
|
left: ($mapBubbleWidth / -2) + 7;
|
|
width: $mapBubbleWidth;
|
|
height: $mapBubbleWidth;
|
|
z-index: -1;
|
|
will-change: opacity, transform;
|
|
|
|
animation-name: pfBubblePop;
|
|
animation-duration: 0.09s;
|
|
animation-timing-function: cubic-bezier(0.16, 0.87, 0.48, 0.99);
|
|
animation-fill-mode: forwards;
|
|
animation-iteration-count: 1;
|
|
}
|
|
}
|
|
|
|
.pf-map-endpoint-bubble{
|
|
&:after{
|
|
display: block;
|
|
animation-name: pfBubbleWobble;
|
|
animation-duration: 1s;
|
|
animation-timing-function: linear;
|
|
animation-iteration-count: 1;
|
|
animation-fill-mode: both;
|
|
}
|
|
}
|
|
|
|
.jtk-endpoint-drop-allowed{
|
|
circle {
|
|
stroke: $green !important;
|
|
fill: $green !important;
|
|
}
|
|
}
|
|
|
|
.jtk-endpoint-drop-forbidden{
|
|
circle {
|
|
stroke: $red-darker !important;
|
|
fill: $red-darker !important;
|
|
}
|
|
}
|
|
|
|
// Connections ======================================================================================================
|
|
.jtk-connector{
|
|
z-index: 40; // min z-index for connections
|
|
cursor: pointer;
|
|
overflow: unset; // fixes a strange 1px flicker issue when connection is hovered and "jumps" up+down
|
|
@include transition(stroke 0.18s ease-out, opacity 0.18s ease-out);
|
|
will-change: all;
|
|
|
|
path{
|
|
@include transition(stroke 0.18s ease-out);
|
|
}
|
|
|
|
&.jtk-hover{
|
|
z-index: 80; // max z-index for connections
|
|
filter: drop-shadow(-3px 3px 4px rgba(0,0,0, 0.3));
|
|
|
|
path:first-child{
|
|
stroke: $gray-lightest;
|
|
}
|
|
}
|
|
|
|
&.jtk-dragging{
|
|
z-index: 80; // max z-index for connections
|
|
opacity: 0.4;
|
|
}
|
|
}
|
|
|
|
.pf-map-connection-abyssal {
|
|
z-index: 40;
|
|
|
|
path:first-child{
|
|
stroke: rgba(255,255,255,0); // invisible border color
|
|
}
|
|
|
|
path:nth-child(2){
|
|
stroke: darken($pink-darker, 8%);
|
|
}
|
|
|
|
&.jtk-hover{
|
|
path:first-child{
|
|
stroke: rgba(255,255,255,0); // invisible border color
|
|
}
|
|
|
|
path:nth-child(2){
|
|
stroke: $gray-lightest;
|
|
}
|
|
}
|
|
}
|
|
|
|
.pf-map-connection-jumpbridge {
|
|
z-index: 50;
|
|
|
|
path:first-child{
|
|
stroke: rgba(255,255,255,0); // invisible border color
|
|
}
|
|
|
|
path:nth-child(2){
|
|
stroke: $teal-lighter;
|
|
}
|
|
|
|
&.jtk-hover{
|
|
path:first-child{
|
|
stroke: rgba(255,255,255,0); // invisible border color
|
|
}
|
|
|
|
path:nth-child(2){
|
|
stroke: $gray-lightest;
|
|
}
|
|
}
|
|
}
|
|
|
|
.pf-map-connection-stargate {
|
|
z-index: 60;
|
|
|
|
path:first-child{
|
|
stroke: $gray-light;
|
|
}
|
|
|
|
path:nth-child(2){
|
|
stroke: $indigo-darkest;
|
|
}
|
|
}
|
|
|
|
.pf-map-connection-wh-fresh,
|
|
.pf-map-connection-wh-reduced,
|
|
.pf-map-connection-wh-critical,
|
|
.pf-map-connection-wh-eol{
|
|
z-index: 70;
|
|
}
|
|
|
|
.pf-map-connection-wh-eol {
|
|
|
|
path:first-child{
|
|
stroke: $pink-dark;
|
|
}
|
|
}
|
|
|
|
.pf-map-connection-wh-reduced {
|
|
|
|
path:nth-child(2){
|
|
stroke: $orange;
|
|
}
|
|
}
|
|
|
|
.pf-map-connection-wh-critical {
|
|
|
|
path:nth-child(2){
|
|
stroke: $red-darker;
|
|
}
|
|
}
|
|
|
|
.pf-map-connection-wh-size-s,
|
|
.pf-map-connection-wh-size-m {
|
|
|
|
path:nth-child(2){
|
|
stroke-linecap: square !important; // smoother look for "inner" path
|
|
}
|
|
}
|
|
|
|
.pf-map-connection-active{
|
|
filter: drop-shadow( 0px 0px 3px $yellow-lighter) !important; // overwrite "hover" shadow
|
|
}
|
|
|
|
.pf-map-connection-process{
|
|
opacity: 0.4 !important;
|
|
|
|
path{
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
// Overlays =========================================================================================================
|
|
.jtk-overlay{
|
|
opacity: 1;
|
|
pointer-events: none; // click through overlays
|
|
will-change: opacity;
|
|
@include transition(opacity 0.18s ease-out);
|
|
|
|
&.jtk-hover:not(.debug){
|
|
opacity: 0 !important;
|
|
}
|
|
}
|
|
|
|
%map-overlay{
|
|
font-size: 11px;
|
|
z-index: 1020;
|
|
background-color: $gray;
|
|
color: $gray-lighter;
|
|
}
|
|
|
|
.pf-map-component-overlay{
|
|
@extend %map-overlay;
|
|
line-height: 14px;
|
|
padding: 1px 4px;
|
|
@include border-radius(6px);
|
|
@include box-shadow(0 3px 6px rgba(0,0,0,.3));
|
|
|
|
&.small{
|
|
-webkit-font-smoothing: antialiased;
|
|
font-family: Arial, sans-serif;
|
|
padding: 1px 2px;
|
|
line-height: 12px;
|
|
min-width: 14px;
|
|
@include border-radius(3px);
|
|
}
|
|
|
|
&.icon{
|
|
font-size: 12px;
|
|
line-height: 12px;
|
|
padding: 0;
|
|
width: 12px;
|
|
height: 12px;
|
|
overflow: hidden;
|
|
text-align: center;
|
|
@include border-radius(50%);
|
|
}
|
|
|
|
&.debug{
|
|
background-color: $purple-dark;
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
// Connection overlays ==============================================================================================
|
|
.pf-map-connection-state-overlay{
|
|
|
|
@extend %map-overlay;
|
|
background-color: transparent;
|
|
font-size: 12px;
|
|
width: 15px;
|
|
height: 15px;
|
|
opacity: 0.4 !important;
|
|
z-index: 1030;
|
|
}
|
|
|
|
.frig{
|
|
background-color: $orange-light;
|
|
color: $gray-darkest;
|
|
}
|
|
|
|
.mass{
|
|
background-color: $red-darker;
|
|
color: $gray-lightest;
|
|
}
|
|
|
|
.eol{
|
|
background-color: $gray;
|
|
color: $pink-dark;
|
|
}
|
|
|
|
// Arrow overlays ===================================================================================================
|
|
.pf-map-connection-arrow-overlay-success{
|
|
.pf-map-connection-arrow-overlay{
|
|
stroke: $gray-dark;
|
|
fill: $green;
|
|
}
|
|
}
|
|
|
|
.pf-map-connection-arrow-overlay-danger{
|
|
.pf-map-connection-arrow-overlay{
|
|
stroke: $gray-dark;
|
|
fill: $red;
|
|
|
|
animation-name: pfPulseDanger;
|
|
animation-duration: 4s;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
}
|
|
}
|
|
|
|
// dialogs ============================================================================================================
|
|
.ui-dialog-content{
|
|
label{
|
|
min-width: 60px;
|
|
}
|
|
}
|
|
|
|
// context menu =======================================================================================================
|
|
.dropdown-menu{
|
|
min-width: 150px; // overwrite default
|
|
font-family: $font-family-bold;
|
|
z-index: 1050; // over tooltips
|
|
will-change: opacity, top, left, transform;
|
|
|
|
a{
|
|
cursor: pointer; // fixed bug on Chrome anchor tag: href="#"
|
|
}
|
|
|
|
i{
|
|
width: 20px;
|
|
pointer-events: none;
|
|
|
|
&.fa-char:before{
|
|
font-weight: bolder;
|
|
}
|
|
}
|
|
|
|
// nested (sub) menu
|
|
.dropdown-menu{
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
clip-path: inset(-12px -12px -12px 0px); // hide left box shadow
|
|
}
|
|
|
|
// top menu
|
|
&[role] > li{
|
|
@include pf-navigation-indicator(left);
|
|
}
|
|
|
|
& > li {
|
|
|
|
&.disabled{
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
}
|
|
|
|
& > a {
|
|
padding: 3px 8px; // overwrite default
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
// tooltip for a system with active user (they are not positioned within the system element)
|
|
.pf-system-tooltip-inner{
|
|
color: $gray-lighter;
|
|
padding: 2px 4px;
|
|
min-width: 25px; // make sure tooltip is not flickering on low numbers -> fix width
|
|
@include transition( color 0.2s ease-out );
|
|
}
|