spacedeck-open/styles/handles.scss

@import "vars";
@import "mixins";
.artifact {
  .selection-actions {display: none; }
  &.selected {
    .selection-actions {display: block; }
  }
}

.selection-actions {
  position: absolute;
  right: 0;
  top: 0;
  padding: 10px;
  pointer-events: auto;
}

@mixin tri-s {
  &:after {
    top: 100%;
    margin-left: -13px;
    left: 50%;
    margin-top: -5px;
    border-left: 13px solid transparent;
    border-right: 13px solid transparent;
    border-top: 13px solid $dark;
  }
}

@mixin tri-n {
  &:after {
    bottom: 100%;
    margin-left: -13px;
    left: 50%;
    margin-bottom: -5px;
    border-left: 13px solid transparent;
    border-right: 13px solid transparent;
    border-bottom: 13px solid $dark;
  }
}

@mixin tri-e {
  &:after {
    left: 100%;
    margin-top: -13px;
    top: 50%;
    margin-left: -5px;
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
    border-left: 13px solid $dark;
  }
}

@mixin tri-w {
  &:after {
    right: 100%;
    margin-top: -13px;
    top: 50%;
    margin-right: -5px;
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
    border-right: 13px solid $dark;
  }
}

.selected .handles {
    display: block;
    // box-shadow: 0 0 0 1px rgba(41,41,41,0.4);
}

.handles {
  //border: 1px solid rgba(255,255,255,0.5);
  position: absolute;
  left: 0;
  top: 0;
  bottom: -1;
  right: 0;
  z-index: 800;
  pointer-events: none;
  
  background: rgba(255,255,255,0.1);
  
  &:after{
    border: 4px dotted #000000;
    content: "";
    display: block;
    position: absolute;
    height: auto;
    width: auto;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: -1px;
  }
}

.extreme-zoom .handles {
  border: 8px solid rgba(255,255,255,0.5);
  
  &:after{
    border: 8px dotted #000000;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
  }
}

.extreme-zoom .handle {
  @include scale(8,8);
  
  &:hover {
    @include scale(12,12);
  }
}

.mouse-scribble, .mouse-vector_transform {
  .handles, .handles:after {
    display: none !important;
  }
}

// .n-resize        { cursor: n-resize; }
// .e-resize        { cursor: e-resize; }
// .s-resize        { cursor: s-resize; }
// .w-resize        { cursor: w-resize; }
// .ns-resize       { cursor: ns-resize; }
// .ew-resize       { cursor: ew-resize; }
// .ne-resize       { cursor: ne-resize; }
// .nw-resize       { cursor: nw-resize; }
// .se-resize       { cursor: se-resize; }
// .sw-resize       { cursor: sw-resize; }
// .nesw-resize     { cursor: nesw-resize; }
// .nwse-resize     { cursor: nwse-resize; }

.resize-nw {
  .value-w {
    right: 35px;
    top: -10px;
    @include transform-origin(center right);
    @include tri-e;
  }
  .value-h {
    left: -10px;
    bottom: 35px;
    @include transform-origin(bottom center);
    @include tri-s;
  }
}

.resize-ne {
  .value-w {
    left: 35px;
    top: -10px;
    @include tri-w;
    @include transform-origin(center left);
  }
  .value-h {
    right: -10px;
    bottom: 35px;
    @include transform-origin(bottom center);
    @include tri-s;
  }
}


.resize-se {
  .value-w {
    left: 35px;
    bottom: -10px;
    @include tri-w;
    @include transform-origin(center left);
  }
  .value-h {
    right: -10px;
    top: 35px;
    @include transform-origin(top center);
    @include tri-n;
    pointer-events: none;
  }
}

.resize-sw {
  .value-w {
    right: 35px;
    bottom: -10px;
    @include tri-e;
    @include transform-origin(center right);
    // border-top-left-radius: 5px;
    // border-bottom-left-radius: 5px;

  }
  .value-h {
    left: -10px;
    top: 35px;
    @include transform-origin(top center);
    @include tri-n;
    // border-bottom-left-radius: 5px;
    // border-bottom-right-radius: 5px;
  }
}

.resize-n {
  .value-h {
    margin-left: -20px;
    left: 50%;
    bottom: 20px;
    @include transform-origin(bottom center);
    @include tri-s;
  }
}

.resize-e {
  .value-w {
    left: 20px;
    top: 50%;
    margin-top: -20px;
    @include tri-w;
    @include transform-origin(center left);
  }
}

.resize-s {
  .value-h {
    left: 50%;
    margin-left: -20px;
    top: 20px;
    @include transform-origin(top center);
    @include tri-n;
  }
}

.resize-w {
  .value-w {
    right: 20px;
    top: 50%;
    margin-top: -20px;
    @include tri-e;
    @include transform-origin(center right);
  }
}


.value-h,
.value-w {
  z-index: 1;
  line-height: 40px;
  width: 40px;
  height: 40px;
  display: inline-block;
  position: absolute;
  border-radius: 100%;
  // border-radius: $radius;
  @include scale(0,0);
  // opacity: 0;
  pointer-events: none !important;
  @include transition( all 0.1s 0.05s ease-in-out);
  text-align: center;  
  background-color: $dark;
  color: $light;
  font-size: 10px;
  &:after {
    @include transition( all 0.3s ease-in-out);
    content: "";
    position: absolute;
    width: 0; 
    height: 0; 
    pointer-events: none !important;
  }
}

.handle > div > div > div:active .value-w, 
.handle:active .value-h{ 
  @include transition( all 0.05s 0s cubic-bezier(0, 0, 0.7, 1.7));
  opacity: 1;
  @include scale(1,1);
}


.edge-handle:active .value-w, 
.edge-handle:active .value-h{ 
  @include transition( all 0.05s 0s cubic-bezier(0, 0, 0.7, 1.7));
  opacity: 1;
  @include scale(1,1);
}

.edge-handle {
  @include user-select(none);
  pointer-events:auto;
  
  z-index: 1000;
  position: absolute;
  background-clip: content-box;
  
  @include transition( background-color 0.05s ease-in-out);

  &:active,
  &:hover {
    background-color: $blue;
    @include transition( background-color 0s ease-in-out);
  }

  &.resize-n,
  &.resize-s {
    width: 100%;
    height: 10px;
  }

  &.resize-w,
  &.resize-e {
    width: 10px;
    height: 100%;
  }

  &.resize-n:active { border-top: 3px solid transparent; border-bottom: 3px solid transparent; }
  &.resize-s:active { border-top: 3px solid transparent; border-bottom: 3px solid transparent; }
  &.resize-w:active { border-left: 3px solid transparent; border-right: 3px solid transparent; }
  &.resize-e:active { border-left: 3px solid transparent; border-right: 3px solid transparent; }

  &.resize-n { &:active,&:hover, { cursor: ns-resize;}}
  &.resize-s { &:active,&:hover, { cursor: ns-resize;}}
  &.resize-w { &:active,&:hover, { cursor: ew-resize;}}
  &.resize-e { &:active,&:hover, { cursor: ew-resize;}}

  &.resize-n { border-top: 4px solid transparent; border-bottom: 4px solid transparent; bottom: 100%;  margin-bottom: -5px; }
  &.resize-s { border-top: 4px solid transparent; border-bottom: 4px solid transparent; top: 100%;  margin-top: -5px; }
  &.resize-w { border-left: 4px solid transparent; border-right: 4px solid transparent; right: 100%;  margin-right: -5px; }
  &.resize-e { border-left: 4px solid transparent; border-right: 4px solid transparent; left: 100%;  margin-left: -5px; }
}

.vector-handle {
  @include user-select(none);
  pointer-events:auto;
  z-index: 2000;
  position: absolute;
  border-radius: 100%;

  border: 1px solid black;
  margin: -5px;
  padding: 4px;
  
  &:hover {
      background-color: black;
      cursor: move;
  }
}

.handles-vector {
  .handle, .edge-handle {
    display: none !important;
  }
}

.handles:not(.handles-vector) .vector-handle {
  display: none;
}

.handle {
  @include user-select(none);
  pointer-events:auto;
  z-index: 2000;
  position: absolute;
  width: 60px !important;
  height: 60px !important;
  border-radius: 100%;
  margin: -30px;
  @include transition(all 0.1s ease-in-out);
  @include scale(0.5,0.5);
  
  &:hover {
    @include scale(1,1);
    .value-h,
    .value-w {
      display: block;
    }
  }
  
  // &:after {
  //   @include transition( all 0.3s ease-in-out);
  //   content: "";
  //   position: absolute;
  //   top: 0px;
  //   margin-left: -20px;
  //   width: 0; 
  //   height: 0; 
  //   border-left: 20px solid transparent;
  //   border-right: 20px solid transparent;
  //   border-top: 20px solid $dark;
  //   pointer-events: none !important;
  //   left: 50%;
  // }

  &.resize-nw { top: 0%; left: 0%;}
  &.resize-n { top: 0%; left: 50%;}
  &.resize-ne { top: 0%; left: 100%;}
  &.resize-e { top: 50%; left: 100%;}
  &.resize-se { top: 100%; left: 100%;}
  &.resize-s { top: 100%; left: 50%;}
  &.resize-sw { top: 100%; left: 0%;}
  &.resize-w { top: 50%; left: 0%;}

  &.resize-nw > div > div > div { cursor: nwse-resize; }
  &.resize-n > div > div > div { cursor: ns-resize;}

  &.resize-ne > div > div > div { cursor: nesw-resize; }
  &.resize-e > div > div > div { cursor: ew-resize; }

  &.resize-se > div > div > div { cursor: nwse-resize; }
  &.resize-s > div > div > div { cursor: ns-resize; }

  &.resize-sw > div > div > div { cursor: nesw-resize; }
  &.resize-w > div > div > div { cursor: ew-resize; }

  &.resize-n { display: none;}
  &.resize-e { display: none;}
  &.resize-s { display: none;}
  &.resize-w { display: none;}

  &:hover > div > div > div { border-width: 9px; }
  > div:hover > div > div   { border-width: 8px; }
  > div > div:hover > div   { border-width: 7px; }
  > div > div > div:hover   { border-width: 6px; }
  > div > div > div:active  { border-width: 6px; }

  > div > div > div {
    background-color: $dark;

    border-style: solid;
    border-width: 10px;
    border-color: transparent;
    background-clip: padding-box;
    transition: all .05s ease-in-out;
  }

  div {
    position: relative;
    border-radius: 100%;
    top: 5px;
    left: 5px;
    @include transition( all 0.5s ease-in-out);
  }

  > div {
    width: 50px;
    height: 50px;
  }

  > div > div {
    width: 40px;
    height: 40px;
  }

  > div > div > div {
    z-index: 10;
    width: 30px;
    height: 30px;
  }
}