edlp_d8/web/modules/custom/edlp_corpus/assets/styles/corpus.scss

// @Author: Bachir Soussi Chiadmi <bach>
// @Date:   18-12-2017
// @Email:  bachir@figureslibres.io
// @Filename: corpus.scss
// @Last modified by:   bach
// @Last modified time: 20-12-2017
// @License: GPL-V3

canvas#corpus-map{
  &.de-activated{
    background-color: rgb(244, 244, 244);
  }
  position: absolute;
  box-sizing: border-box;
  top:0; left:0;
  // width:100%; height:100%;
  z-index:0;
}


//  _  _         _     ___          _   _
// | \| |___  __| |___| _ \___ _ __| | | |_ __
// | .` / _ \/ _` / -_)  _/ _ \ '_ \ |_| | '_ \
// |_|\_\___/\__,_\___|_| \___/ .__/\___/| .__/
//                            |_|        |_|
div.node-popup{
  // display:none;
  z-index: 10;
  position: absolute;
  box-sizing: content-box;
  width:300px; min-height: 30px;
  pointer-events: none;
  top:60%; left:30%;
  pointer-events: none;

  .inner{
    padding:0.6em;
    outline: 1px solid red;
    background-color: white;
  }

  $w:60px; // diagonal length
  $s:($w *1.4)*0.5; // side given the diagonal (1.4 is the square root of 2)
  &:before{
    content:"";
    position: absolute;
    width: $w; height:0;
    border-top: 1px solid red;
  }
  // pos attributes refers to where the popup appears
  &[pos="bottom-right"]{
    transform: translateY($s) translateX($s);
    &:before{
      top:-1px;
      left: -$w - 1px;
      transform-origin: bottom right;
      transform: rotateZ(45deg);
    }
  }
  &[pos="bottom-left"]{
    transform: translateX(-100%) translateY($s) translateX(-$s);
    &:before{
      top:calc(100% +1px);
      left: 100%;
      transform-origin: top left;
      transform: rotateZ(-45deg);
    }
  }
  &[pos="top-left"]{
    transform: translateY(-100%) translateX(-100%) translateY(-$s) translateX(-$s);
    &:before{
      bottom:0;
      left: 100%;
      transform-origin: top left;
      transform: rotateZ(45deg);
    }
  }
  &[pos="top-right"]{
    transform: translateY(-100%) translateY(-$s) translateX($s);
    &:before{
      top:calc(100% + 1px);
      left: - ($w +1px);
      transform-origin: top right;
      transform: rotateZ(-45deg);
    }
  }
}