resizable/test/index.css

Resizable behaviour for elements

* {
	/*box-sizing: border-box;*/
}

body {
	position: relative;
	outline: 2px solid red;
	min-height: 500px;
	height: 500px;
}

.resizable {
	float: left;
	width: 40px;
	height: 40px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='5' height='5'><path fill='rgba(130, 135, 140 ,1)' d='M 0 0 L 1 0 0 1 0 0 z'/><path fill='rgba(130, 135, 140 ,1)' d='M 0 5 L 5 0 5 1 1 5 0 5 z'/></svg>");
	border: 2px dashed rgba(120, 125, 130, 1);
	/*padding: 10px;
	margin: 15px;*/
	;
}

.resizable-handle {
	background: rgba(10, 20, 30, 0.1);
}

.resizable:hover .resizable-handle {
	background: rgba(10, 20, 30, 0.3);
}

.spacer {
	width: 10%;
	margin: 10px;
	padding: 10px;
	background: rgba(210, 255, 220, .5);
	float: left;
}

.container {
	background: rgba(200, 200, 200, .2);
	width: 20%;
	height: 200px;
	line-height: 200px;
	position: relative;
	float: right;
	padding: 20px;
	margin: 30px;
}

.container .resizable {
	line-height: 20px;
}

.list {
	position: relative;
	top: 20px;
	left: 100px;
	clear: both;
	line-height: 40px;
	width: 200px;
	background: rgba(100, 200, 255, .3);
}

.list .resizable {
	float: none;
	width: 20%;
	height: 40px;
	display: inline-block;
	vertical-align: top;
	line-height: 20px;
}

#mocha {
	margin: 0 !important;
	padding: 0;
	position: fixed;
	bottom: 15px;
	left: 0;
	width: 70%;
}

#mocha-stats {
	top: auto !important;
	bottom: 15px;
}

.heighty {
	height: 100%;
}