pathfinder/sass/layout/_map.scss

// start bounce mixin ==============================================

@mixin bounce-up-down{

  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  animation-iteration-count:infinite;
  -webkit-animation-iteration-count:infinite;

  -webkit-animation-name: bounce;
  animation-name: bounce;
}

@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
  40% {-webkit-transform: translateY(-10px);}
  60% {-webkit-transform: translateY(-5px);}
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
  40% {transform: translateY(-10px);}
  60% {transform: translateY(-5px);}
}

// end bounce mixin ================================================

.pf-map-wrapper{
  width: 100%;
  height: 530px;
  overflow: auto;
  padding: 5px;
  background: rgba($gray-darker, 0.95);

  box-shadow:inset -1px 1px 6px 0 rgba($black, 0.8);
  @include border-bottom-radius(5px);
  border: {
    width: 1px;
    style: solid;
    color: $gray-lighter;
  }
}

.pf-map{

  width: 1200px;
  height: 500px;
  position: relative;


  .pf-system{
    position: absolute;
    min-width: 80px;
    height: auto;
    background-color: $gray-dark;
    z-index: 100;

    //@include bounce-up-down;

    @include border-radius(5px);
    border: {
      width: 2px;
      style: solid;
      color: $gray-light;
    }

    .pf-system-head{
      padding: 0px 3px 2px 3px;
      cursor: pointer;

      .pf-system-head-name{
        border: none;
        color: $gray-lighter;
      }

      .pf-system-head-expand{
        margin-left: 5px;
        display: none;  // triggered by JS
      }
    }

    // ===============================================================

    .pf-system-body{
      height: 16px;
      width: 100%;
      overflow: hidden;
      cursor: -moz-grab;
      cursor: -webkit-grab;
      cursor: grab;
      padding: 0 2px;
      white-space: nowrap;
      display: none;  // triggered by JS

      border: {
        top: {
          width: 1px;
          style: dashed;
          color: $gray-light;
        }
      }



      .pf-system-body-item{
        color: $gray-light;
        font-size: 10px;

        .pf-system-body-right{
          float: right;
          color: $teal;
          display: none; // hover effect
        }
        // user status =================================================
        .pf-user-status{
          font-size: 7px;
        }

        .pf-user-status-corp{
          color: $green;
        }

        .pf-user-status-ally{
          color: $blue;
        }

      }

    }
  }

  .pf-system-active:not(.pf-map-endpoint-source):not(.pf-map-endpoint-target){
    @include box-shadow($yellow-lighter 0px 0px 8px 0px);
  }

  // system status ======================================================

  .pf-system-status-friendly{
    border-color: $blue;
  }

  .pf-system-status-occupied{
    border-color: $orange;
  }

  .pf-system-status-hostile{
    border-color: $red;
  }

  .pf-system-status-empty{
    border-color: $green;
  }

  .pf-system-status-unscanned{
    border-color: $teal;
  }

  // Endpoints ====================================================
  .pf-map-endpoint-source, .pf-map-endpoint-target{

    z-index: 50;
    svg {
      width: 10;
      height: 10;

      *{
        stroke: $gray-light;
        stroke-width: 2; // border width
        fill: $gray;
        cursor: pointer;

        &:hover{
          stroke: $gray-lightest; // hover style
        }
      }

    }
  }
  // Connections ==================================================

  // default hover effect for all connections
  svg._jsPlumb_connector{
    cursor: pointer;
    stroke-linecap: round; // line endings

    path:not(first-child){
      stroke: $gray; // inner line
    }

    path:first-child{
      stroke: $gray-light; // outer line
    }

    &:hover{
      path:first-child{
        stroke: $gray-lightest; // hover style
      }
    }
  }


  svg.pf-map-connection-wh  {
    // special wh-connection style (
  }

  svg.pf-map-connection-wh-eol  {

    path:first-child{
      stroke: $pink-dark;
    }

    &:hover{
      path:first-child{
        stroke: $pink;
      }
    }
  }

  svg.pf-map-connection-wh-reduced  {

    path:not(first-child){
      stroke: $orange;
    }
  }

  svg.pf-map-connection-wh-critical  {

    path:not(first-child){
      stroke: $red-darker;
    }
  }

  svg.pf-map-connection-frig  {

    path:not(first-child){
      stroke: $gray;
    }

    path:first-child{
      stroke: $gray-lighter;
    }
  }

  // Connection status ============================================

  svg.pf-map-connection-eol  {

    path:first-child{
      stroke: red;
    }
  }

}

// dialoges =======================================================
.ui-dialog-content{
  label{
    min-width: 60px;
  }
}

// context menu ==================================================
.dropdown-menu{
  i{
    width: 20px
  }
}