_relation-menu.scss

// The actions menu that appears next to a service block.
.environment-menu {
  background-color: $white;
  border-radius: $border-radius;
  box-shadow: 0 0 2px rgba(0, 0, 0, .3);
  color: $cool-grey;
  display: none;
  left: 0;
  position: absolute;
  top: 0;

  &.active {
    display: block;
  }

  .triangle {
    border-style: solid;
    color: $white;
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
  }

  &.right .triangle {
    border-color: transparent $white;
    border-width: 10px 17.3px 10px 0;
    left: -16px;
  }

  &.left .triangle {
    border-color: transparent transparent transparent $white;
    border-width: 10px 0 10px 17.3px;
    right: -16px;
  }

  &.top .triangle {
    border-color: $white transparent transparent;
    border-width: 17.3px 10px 0;
    bottom: -16px;
    top: auto;
  }

  .menu-title {
    padding: 20px;
  }

  .cancel {
    position: absolute;
    right: 20px;
    top: 25px;
  }

  ul {
    list-style-type: none;
    margin: 0;

    li {
      background-position: 10px center;
      background-repeat: no-repeat;
      cursor: pointer;
      line-height: 40px;
      padding: 0 15px;
      white-space: nowrap;

      a {
        color: $cool-grey;
        font-size: 13px;
        text-decoration: none;
      }

      &:last-child {
        border-bottom: 0;
      }

      &:focus,
      &:active,
      &:hover {
        background-color: $light-grey;
      }

      &.disabled {
        color: $grey;
        cursor: default;

        &:focus,
        &:active,
        &:hover {
          background-color: inherit;
        }
      }
    }
  }

  .menu {
    li {
      border-top: 1px solid $light-grey;
    }
  }
}

// scss-lint:disable IdSelector
#relation-menu { // sass-lint:disable-line no-ids, id-name-format
  // scss-lint:enable IdSelector
  $icon-size: 16px;
  $height: 30px;
  $gutter: 10px;

  .relation-container {
    cursor: inherit;
    padding: 0 0 0 (($gutter * 2) + $icon-size);
    line-height: $height;
    background-repeat: no-repeat;
    background-position: $gutter (($height - $icon-size) / 2);
    background-image: url('static/gui/build/app/assets/images/unit_running_16.png');

    &.error {
      background-image: url('static/gui/build/app/assets/images/error_16.png');
    }

    .endpoint.error {
      color: $error;
    }

    &:focus,
    &:active,
    &:hover {
      background-color: inherit;
    }
  }

  .triangle {
    bottom: -3px;
    border-width: 3px 5px 0;
  }

  .relation-remove {
    line-height: normal;
    margin: (($height - $icon-size) / 2) $gutter;
    display: block;
    float: right;
    height: $icon-size;
    width: $icon-size;
  }

  .inspect-relation {
    cursor: pointer;
  }
}