459 lines
9.5 KiB
SCSS
459 lines
9.5 KiB
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;
|
|
}
|
|
}
|