drag-resize.css

/*
 * @license
 * Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
 * This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 * The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 * The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 * Code distributed by Google as part of the polymer project is also
 * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 */

:host {
	position: absolute;
	border: 1px dashed transparent;
	display: none;
	z-index: 999;
	transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	/*transition: all 0.1s linear;*/
}

:host(.drag-resize-focus) {
	z-index: 998;
	position: absolute;
}

:host > div {
	width: 100%;
	height: 100%;
	position: absolute;
}

:host(.drag-resize-selected) {
	border-color: rgb(0, 150, 253);
	cursor: move;
	display: block;
}

/* Apply the element you want to drag/resize */
::content {
	position: relative;
	left: 0;
	top: 0;
	font-size: 14px;
	-webkit-user-select: none;
	user-select: none;
	border: 1px solid transparent;
	z-index: 10;
}

.drag-resize-handlers {
	position: absolute;
	width: 5px;
	height: 5px;
	font-size: 1px;
	background: rgb(0, 150, 253);
	-webkit-transition: all 0.1s linear;
	transition: all 0.1s linear;
	opacity: 0;
	border: 1px solid rgb(255, 255, 255);
}

:host(.drag-resize-selected) .drag-resize-handlers {
 opacity: 1;
}

:host .debug-info {
	font-size: 10px;
	border: 1px solid;
	border-radius: 4px;
	text-align: center;
	color: rgb(255, 255, 255);
	background: rgb(0,0,0);
	line-height: 15px;
	width: 180px;
	position: absolute;
	bottom: -40px;
	left: 50%;
	margin-left: -100px;
	padding: 4px;
}


.drag-resize-handlers:hover {
	transform: scale(3); /*chrome*/
	-webkit-transform: scale(3); /*nodewebkit*/
}

/*
 Individual corner classes - required for resize support.
*/
.drag-resize-handlers[data-direction="tl"] {
 top: -5px;
 left: -5px;
 cursor: nw-resize;
}
.drag-resize-handlers[data-direction="tm"] {
 top: -5px;
 left: 50%;
 margin-left: -5px;
 cursor: n-resize;
}
.drag-resize-handlers[data-direction="tr"] {
 top: -5px;
 right: -5px;
 cursor: ne-resize;
}

.drag-resize-handlers[data-direction="ml"] {
 top: 50%;
 margin-top: -5px;
 left: -5px;
 cursor: w-resize;
}
.drag-resize-handlers[data-direction="mr"] {
 top: 50%;
 margin-top: -5px;
 right: -5px;
 cursor: e-resize;
}

.drag-resize-handlers[data-direction="bl"] {
 bottom: -5px;
 left: -5px;
 cursor: sw-resize;
}
.drag-resize-handlers[data-direction="bm"] {
 bottom: -5px;
 left: 50%;
 margin-left: -5px;
 cursor: s-resize;
}
.drag-resize-handlers[data-direction="br"] {
 bottom: -5px;
 right: -5px;
 cursor: se-resize;
}

.hidden {
	display: none;
}