123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687 |
- // @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);
- }
- }
- }
|