Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div class="options">
		<h2>CSS Border-Radius Generator <a href="#openInfoModal" title="Info/Help" class="info"></a></h2>
		<div>
				<input type="checkbox" id="mode" name="mode" class="switch" checked="checked" />
				<label for="mode">Advanced mode?</label>
		</div>
		<div id="showsecondary-wrapper">
				<input type="checkbox" id="showsecondary" name="showsecondary" class="switch" />
				<label for="showsecondary">Show secondary handles?</label>
		</div>
		<div class="cssoutput">CSS Code: <span id="csscode">-</span>
				<label for="unit">Units:</label>
				<select name="unit" id="unit">
						<option value="%">% (Percent)</option>
						<option value="px">px (Pixels)</option>
				</select>
		</div>
</div>
<br>

<div class="wrapper">
		<div class="box">
				<div class="centernav">
						<div class="topLeft" id="tl-group">
								<div class="lock closed"></div>
						</div>
						<div class="topRight" id="tr-group">
								<div class="lock closed"></div>
						</div>
						<div class="bottomLeft" id="bl-group">
								<div class="lock closed"></div>
						</div>
						<div class="bottomRight" id="br-group">
								<div class="lock closed"></div>
						</div>
				</div>
				<div class="boxsize" title="Click to change box size">400 &times; 300</div>
		</div>
		<div class="handlegroup tl-group">
				<div class="handle subhandle" id="leftTop">50%</div>
				<div class="handle mainhandle" id="topLeft">0%</div>
		</div>
		<div class="handlegroup tr-group">
				<div class="handle subhandle" id="rightTop">50%</div>
				<div class="handle mainhandle" id="topRight">0%</div>
		</div>
		<div class="handlegroup bl-group">
				<div class="handle subhandle" id="leftBottom">50%</div>
				<div class="handle mainhandle" id="bottomLeft">0%</div>
		</div>
		<div class="handlegroup br-group">
				<div class="handle subhandle" id="rightBottom">50%</div>
				<div class="handle mainhandle" id="bottomRight">0%</div>
		</div>
</div>

<div id="openSizeModal" class="modalDialog">
		<div>
				<a href="#" title="Close" class="close">X</a>
				<h2>Box size</h2>
				<label for="newwidth">Width:
						<input type="text" id="newwidth" class="diminput" value="0" />
				</label>
				<label for="newheight">Height:
						<input type="text" id="newheight" class="diminput" value="0" />
				</label>
				&nbsp;
				<button type="button" id="updatebutton">Update</button>
		</div>
</div>
<div id="openInfoModal" class="modalDialog">
		<div>
				<a href="#" title="Close" class="close">X</a>
				<h2>CSS Border-Radius Generator<span>&copy; 2015 Peter Klein</span></h2>
				<p>This is a CSS border-radius generator that supports the 2nd set of radius parameter.
						<br>- 1st set is based on the WIDTH of the element.
						<br>- 2nd set is based on the HEIGHT of the element.</p>
				<ul>
						<li>In Advanced mode, the main and secondary handles operates independently.</li>
						<li>In Simple mode, the main and secondary handles are locked.</li>
						<li>You can also lock each of the 4 quadrants to each other by clicking the quadrant to toggle lock mode on/off.
								<br>A locked quadrant is indicated by a <span class="locked"></span> green color.</li>
						<li>You can change the unit type of the resulting CSS between PX and %.
								<br>(If you need a different unit type, select PX and then use my "<a href="https://codepen.io/pmk/pen/GgeZmW" target="_blank">Stylesheet Unit Converter</a>" to convert it.)</li>
						<li>You can change the size of the box by clicking the center of the box, or by dragging the bottom right corner.</li>
				</ul>
		</div>
</div>
            
          
!
            
              /* Palette color codes */
/* Palette URL: http://paletton.com/#uid=7030u0kgIko8htRcQoykHgEptco */

$color-primary-0: #A2544E;	// Main Primary color
$color-primary-1: #EEB5B0;
$color-primary-2: #C47B75;
$color-primary-3: #85352F;
$color-primary-4: #631A14;

$color-secondary-1-0: #A2764E;	// Main Secondary color (1)
$color-secondary-1-1: #EECEB0;
$color-secondary-1-2: #C49B75;
$color-secondary-1-3: #85582F;
$color-secondary-1-4: #633A14;

$color-secondary-2-0: #305D63;	// Main Secondary color (2)
$color-secondary-2-1: #6D8D92;
$color-secondary-2-2: #497278;
$color-secondary-2-3: #1E4B51;
$color-secondary-2-4: #0D373C;

$color-complement-0: #3B7C47;	// Main Complement color
$color-complement-1: #87B68F;
$color-complement-2: #5A9664;
$color-complement-3: #24652F;
$color-complement-4: #0F4B1A;

$textColor: #111111;

$wrapperPadding: 10px;

$boxWidth: 400px;
$boxHeight: 300px;
$boxBackground: linear-gradient(to bottom, $color-secondary-1-1 0%,$color-secondary-1-2 100%);
$boxBorderSize: 2px;
$boxBorderColor: #000;

$handleFontSize: 11px;
$handleHeight: $handleFontSize + 7px;
$handleWidth: 32px;
$handleBorderSize: 2px;
$handleBorderColor: $color-secondary-2-4;
$handleBorderColorSecondary: $color-secondary-2-3;
$arrowSize: 7px;

body {
  background: $color-secondary-2-2;
  color:$textColor;
	margin: 0;
  font: normal 11px Arial, sans-serif;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
a {
	color: $color-complement-4;
	font-weight: bold;
	text-decoration: none;
}

.wrapper {
	position: relative;
	display: inline-block;
	width: #{$boxWidth + ($wrapperPadding + $handleWidth + $arrowSize)*2};
	height: #{$boxHeight + ($wrapperPadding + $handleHeight + $arrowSize)*2};
	background: $color-secondary-2-1;
	margin: 2em 0 0 3em;
	box-sizing: border-box;
	padding: #{$wrapperPadding + $handleHeight + $arrowSize} #{$wrapperPadding + $handleWidth + $arrowSize};
	box-shadow: 1px 1px 2px rgba(0, 0, 0,.5);
}
.box {
	position: relative;
	width: 100%;
	height: 100%;
	background: $boxBackground;
	border: $boxBorderSize solid $boxBorderColor;
	border-radius: 50% / 50%;
	box-sizing: border-box;
	text-align: center;
	overflow: hidden;
	.boxsize {
		position: absolute;
		top: 50%;
		left: 50%;
		font-size: 12px;
		line-height: 1;
  	transform: translate(-50%,-50%);
		color: rgba(0,0,0,.5);
		font-weight: bold;
		cursor: pointer;
	}
}

.handle {
	box-sizing: content-box;
	position: absolute;
	display: inline-block;
	width: $handleWidth;
	height: $handleHeight;
	text-align: right;
	font: bold $handleFontSize Arial;
	line-height: $handleFontSize;
	padding: 2px 3px;
	border: $handleBorderSize solid $handleBorderColor;
	box-sizing: border-box;
	border-radius: 3px;
	color: black;
	background: white;
	transition: .2s background linear;
	//box-shadow: 1px 1px 2px rgba(0, 0, 0,.5);
	filter: drop-shadow(1px 1px 1px rgba(0, 0, 0,.5));

  -user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
	&:before {
		display: none;
		position: absolute;
		content: "";
		background: green;
	}
 	&:after {
		position: absolute;
		content: "";
	  height: 0px;
	  width: 0px;
		border-style: solid;
		border-color:  transparent;
	}
	// Primary handles
  &#topLeft {
		cursor: ew-resize;
    top: $wrapperPadding;
    left: $wrapperPadding + $arrowSize;
		border-bottom-right-radius: 0;
		&:after {
			right: -$handleBorderSize;
			bottom: -#{$arrowSize + $handleBorderSize};
			border-width: 0 $arrowSize $arrowSize 0;
			border-color: transparent $handleBorderColor transparent transparent;
		}
  }
  &#topRight {
		cursor: ew-resize;
    top: $wrapperPadding;
    left: $wrapperPadding + $arrowSize + $handleWidth + $boxWidth;
		border-bottom-left-radius: 0;
		&:after {
			left: -$handleBorderSize;
			bottom: -#{$arrowSize + $handleBorderSize};
			border-width: $arrowSize $arrowSize 0 0;
			border-color: $handleBorderColor transparent transparent transparent;
		}
  }
  &#bottomLeft {
		cursor: ew-resize;
    top: $wrapperPadding + $arrowSize + $arrowSize + $handleHeight + $boxHeight;
    left: $wrapperPadding + $arrowSize;
		border-top-right-radius: 0;
		&:after {
			right: -$handleBorderSize;
			top: -#{$arrowSize + $handleBorderSize};
			border-width: 0 0 $arrowSize $arrowSize;
			border-color: transparent transparent $handleBorderColor transparent;
		}
  }
  &#bottomRight {
		cursor: ew-resize;
    top: $wrapperPadding + $arrowSize + $arrowSize + $handleHeight + $boxHeight;
    left: $wrapperPadding + $arrowSize + $handleWidth + $boxWidth;
		border-top-left-radius: 0;
		&:after {
			left: -$handleBorderSize;
			top: -#{$arrowSize + $handleBorderSize};
			border-width: $arrowSize 0 0 $arrowSize;
			border-color: transparent transparent transparent $handleBorderColor;
		}
  }
	&.subhandle {
		border: $handleBorderSize solid $handleBorderColorSecondary;
	}
	// Secondary handles
  &#leftTop {
		cursor: ns-resize;
    top: #{$wrapperPadding + ($boxHeight / 2)};
   	left: $wrapperPadding;
		border-bottom-right-radius: 0;
		&:after {
			right: -#{$arrowSize + $handleBorderSize};
			bottom: -$handleBorderSize;
			border-width: $arrowSize 0 0 $arrowSize;
			border-color: transparent transparent transparent $handleBorderColorSecondary;
		}
  }
  &#leftBottom {
		cursor: ns-resize;
    top: #{$wrapperPadding + $handleHeight + ($boxHeight / 2)};
    left: $wrapperPadding;
		border-top-right-radius: 0;
		&:after {
			right: -#{$arrowSize + $handleBorderSize};
			top: -$handleBorderSize;
			border-width: $arrowSize $arrowSize 0 0;
			border-color: $handleBorderColorSecondary transparent transparent transparent;
		}
  }
  &#rightTop {
		cursor: ns-resize;
    top: #{$wrapperPadding + ($boxHeight / 2)};
    left: #{$wrapperPadding + $arrowSize + $arrowSize + $handleWidth + $boxWidth};
		border-bottom-left-radius: 0;
		&:after {
			left: -#{$arrowSize + $handleBorderSize};
			bottom: -$handleBorderSize;
			border-width: 0 0 $arrowSize $arrowSize;
			border-color: transparent transparent $handleBorderColorSecondary transparent;
		}
  }
  &#rightBottom {
		cursor: ns-resize;
    top: #{$wrapperPadding + $handleHeight + ($boxHeight / 2)};
    left: #{$wrapperPadding + $arrowSize + $arrowSize + $handleWidth + $boxWidth};
		border-top-left-radius: 0;
		&:after {
			left: -#{$arrowSize + $handleBorderSize};
			top: -$handleBorderSize;
			border-width: 0 $arrowSize $arrowSize 0;
			border-color: transparent $handleBorderColorSecondary transparent transparent;
		}
  }
	&.active {
		cursor: none !important;
		z-index: 10;
		background: $color-secondary-1-1;
	}
}


.centernav {
	//display: none;
	position: absolute;
	z-index: 0;
	$activeColor: $color-secondary-1-0;
	$disabledColor: $color-secondary-1-1;
	width: 100%;
	height: 100%;
	top:0;
	left: 0;
	background: linear-gradient(to bottom, $color-secondary-1-1 0%,$color-secondary-1-2 100%);
	> div {
		position: absolute;
		width: 50%;
		height: 50%;
		//background: $activeColor,;
		border: 1px solid rgba(0,0,0,.05);
		cursor: pointer;
		box-sizing: border-box;
		transition: .2s background linear;
		.lock {
			display: none;
			$lockColor: $color-secondary-1-3;
			position: absolute;
			margin-top: 6px;
			border-radius: 2px;
			box-shadow: inset 6px 6px 0 0 $lockColor,inset -6px 6px 0 0 $lockColor,inset 0px -4px 0 0 $lockColor;
			width: 14px;
			height: 14px;
			box-sizing: border-box;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			&:before {
				position: absolute;
				content: "";
				border-radius: 8px 8px 0 0;
				border: 2px solid $lockColor;
				border-bottom: none;
				top: -6px;
				width: 6px;
				height: 6px;
				left: 10px;
			}
		}
		&:hover {
			background: rgba($color-secondary-1-0, 1 );
		}
		&.active {
			background: rgba($color-complement-2,1);
			.lock {
				&:before {
					left: 3px;
				}
			}
			&:hover {
				background: rgba($color-complement-3, 1);
			}
		}
		&.topLeft {
			top: 0;
			left: 0;
		}
		&.topRight {
			top: 0;
			right: 0;
		}
		&.bottomRight {
			bottom: 0;
			right: 0;
		}
		&.bottomLeft {
			bottom: 0;
			left: 0;
		}
	}
}


.rt-handle {
  position: absolute;
  display: block;
  width: 11px;
  height: 11px;
  bottom: 0;
  right: 0;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE9JREFUeNpiVFJSYiACRADxciZiFQJxJBOxCoF4BROxCkECTEQqBPH/MxGpEKubcSpEdzNehchuJqQQ7mZiFIL5jMAY/I9sFcgEXHyAAAMAjogmlinhJ1cAAAAASUVORK5CYII=');
  cursor: grab;
	&:active {
		cursor: grabbing;
	}
}



.modalDialog {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8);
	z-index: 99999;
	opacity:0;
	transition: opacity .4s ease-in;
	pointer-events: none;
	&:target {
		opacity:1;
		pointer-events: auto;
	}
	> div {
		max-width: 300px;
		position: relative;
		font-size: 110%;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		padding: 5px 20px 13px 20px;
		border-radius: 10px;
		background: linear-gradient(#fff, #999);
		span {
			display: block;
			font-size: 60%;
		}
		li {
			margin-bottom: .3em;
		}
	}
	&#openInfoModal {
		> div {
			max-width: 500px;
			span.locked {
				display: inline-block;
				width: 1.2em;
				height: 1.2em;
				background: $color-complement-2;
			}
		}
	}
	.close {
		background: #606061;
		color: #FFFFFF;
		line-height: 25px;
		position: absolute;
		right: -12px;
		text-align: center;
		top: -10px;
		width: 24px;
		text-decoration: none;
		font-weight: bold;
		border-radius: 12px;
		box-shadow: 1px 1px 3px #000;
	}
	.close:hover {
		background: $color-primary-3;
	}
	input[type="text"] {
		width: 6ch;
	}
}

.options {
	position: relative;
	min-width: 470px;
	//display: inline-block;
	padding: 5px 10px;
	border: 1px solid #888;
	background: #ddd;
}
.cssoutput {
	clear: both;
	display: block;
}
#csscode {
	display: inline-block;
	padding: 2px 3px;
	background: white;
	color: black;
	background: #fff;
	margin: 10px 0;
	min-width: 300px;
	box-shadow: -1px -1px 1px rgba(0,0,0,.5);
	cursor: copy;
  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}
#unit {
  font: normal 11px Arial, sans-serif;
}
#showsecondary-wrapper {
	visibility: hidden;
}
#unit-wrapper {
	clear:both;
}
input.switch {
	&:empty {
		//margin-left: -999px;
		display: none;
		~ label {
			position: relative;
			float: left;
			line-height: 1.6em;
			text-indent: 4em;
			margin: 0.2em 1em 0.2em 0;
			cursor: pointer;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
			&:before, &:after {
				position: absolute;
				display: block;
				top: 0;
				bottom: 0;
				left: 0;
				content: ' ';
				width: 3.6em;
				background-color: $color-primary-3;
				border-radius: 0.3em;
				box-shadow: inset 0 0.2em 0 rgba(0,0,0,0.3);
				transition: all 100ms ease-in;
			}
			&:after {
				width: 1.4em;
				top: 0.1em;
				bottom: 0.1em;
				margin-left: 0.1em;
				background-color: #fff;
				border-radius: 0.15em;
				box-shadow: inset 0 -0.2em 0 rgba(0,0,0,0.2);
			}
		}
	}
	&:checked {
		~ label {
			&:before {
				background-color: $color-complement-3;
			}
			&:after {
				margin-left: 2em;
			}
		}
	}
}
.info {
	position: relative;
	display: inline-block;
	background: #2385BA;
	border-radius: 50%;
	width:1em;
	height:1em;
	top: .2em;
	&:before {
		position: absolute;
		width: inherit;
		height: inherit;
		content: "?";
		left: .25em;
		top: .1em;
		font: bold italic .8em/1em Arial;
		color:#fff;
	}
}

            
          
!
            
              jQuery( document ).ready(function( $ ) {

	var $wrapper = $('.wrapper'),
			$box = $('.box',$wrapper),
			$handles = $('.handle',$wrapper),
	   	$secondaryhandles = $('#leftTop,#rightTop,#leftBottom,#rightBottom',$wrapper),
			$selectedHandle = null,
			decimalPlaces = 0,
	    boxRadius = {
	        topLeft:			50,
	        topRight:			50,
	        bottomLeft:		50,
	        bottomRight:	50,
	        leftTop:			50,
	        leftBottom:		50,
	        rightTop:			50,
	        rightBottom:	50
	    },
			boxBorderSize = parseInt($box.css('borderTopWidth')),
			arrowSize = 7,
	    handleWidth = $handles.outerWidth(),
	    handleHeight = $handles.outerHeight(),
			handleBorderSize = parseInt($handles.css('borderTopWidth')),
			paddingH = parseFloat($wrapper.css('paddingLeft')),
			paddingV = parseFloat($wrapper.css('paddingTop')),
			mode = $('#mode').is(':checked'),
			showsecondary = $('#showsecondary').is(':checked'),
			getClampAreas = function() {
				return {
					topLeft			: [-handleWidth, ($box.outerWidth() / 2) - handleWidth - boxBorderSize],
					topRight		: [($box.width() / 2) , $box.width()],
					bottomLeft	: [-handleWidth, ($box.outerWidth() / 2) - handleWidth - boxBorderSize],
					bottomRight	: [($box.width() / 2) , $box.width() ],
					leftTop			: [-handleHeight, ($box.height() / 2) - handleHeight],
					leftBottom	: [($box.height() / 2), $box.height()],
					rightTop		: [-handleHeight, ($box.height() / 2) - handleHeight],
					rightBottom	: [($box.height() / 2), $box.height()]
				};
			},
			handleClampAreas = getClampAreas();

	var roundNum = function(num) {
		return Number(Math.round(num + 'e' + decimalPlaces) + 'e-' + decimalPlaces);
	}
	var widthPercentToPixels = function(num) {
		return roundNum($box.outerWidth()/100 * num);
	}
	var heightPercentToPixels = function(num) {
		return roundNum($box.outerHeight()/100 * num);
	}

	var positionHandle = function(handles, percentPositions) {

	 	$(handles).each(function(i,e) {

			var handleId = $(e).attr('id'), x, y;

			switch (handleId) {
		  	case 'topLeft':
					y = paddingV - handleHeight - arrowSize;
					x = widthPercentToPixels(percentPositions) - handleWidth + paddingH;
				break;
		    case 'bottomLeft':
					y = $box.outerHeight() + paddingV + arrowSize;
					x = widthPercentToPixels(percentPositions) - handleWidth + paddingH;
		      break;
		    case 'topRight':
					y = paddingV - handleHeight - arrowSize;
					x = widthPercentToPixels(100 - percentPositions) + paddingH;
				break;
		    case 'bottomRight':
					y = $box.outerHeight() + paddingV + arrowSize;
					x = widthPercentToPixels(100 - percentPositions) + paddingH;
		      break;
		  	case 'leftTop':
					y = heightPercentToPixels(percentPositions) - handleHeight + paddingV;
					x = paddingH - handleWidth - arrowSize;
				break;
		  	case 'leftBottom':
					y = heightPercentToPixels(100 - percentPositions) + paddingV;
					x = paddingH - handleWidth - arrowSize;
				break;
		  	case 'rightTop':
					y = heightPercentToPixels(percentPositions) - handleHeight + paddingV;
					x = $box.outerWidth() + paddingH + arrowSize;
				break;
		  	case 'rightBottom':
					y = heightPercentToPixels(100 - percentPositions) + paddingV;
					x = $box.outerWidth() + paddingH + arrowSize;
				break;
		  }
			$(e).css({ top: y, left: x }).text(percentPositions + '%');
			boxRadius[handleId] = percentPositions;
			updateBorderRadius();
  	});
	};

  positionHandles = function(handles) {
  	$(handles).each(function(i,e) {
    	positionHandle(e,boxRadius[$(e).attr('id')]);
  	})
  }

	var updateBorderRadius = function() {
		var getRadius = function(val,hw) {
			var unit = $('select[name="unit"] option:selected').val();
			if (unit == 'px') {
				val = hw == 'h' ? heightPercentToPixels(val) : widthPercentToPixels(val);
			}
			return val + unit;
		}
    $box.css({
    	'borderTopLeftRadius'			: boxRadius.topLeft + '% ' + boxRadius.leftTop + '%',
    	'borderTopRightRadius'		: boxRadius.topRight + '% ' + boxRadius.rightTop + '%',
    	'borderBottomLeftRadius'	: boxRadius.bottomLeft + '% ' + boxRadius.leftBottom + '%',
    	'borderBottomRightRadius'	: boxRadius.bottomRight + '% ' + boxRadius.rightBottom + '%'
		});
		$('#csscode').text('border-radius: ' +
			getRadius(boxRadius.topLeft,'w') + ' ' +
			getRadius(boxRadius.topRight,'w') + ' ' +
			getRadius(boxRadius.bottomRight,'w') + ' ' +
			getRadius(boxRadius.bottomLeft,'w') + ' / ' +
			getRadius(boxRadius.leftTop,'h') + ' ' +
			getRadius(boxRadius.rightTop,'h') + ' ' +
			getRadius(boxRadius.rightBottom,'h') + ' ' +
			getRadius(boxRadius.leftBottom,'h') + ';' +
			'width: ' + roundNum($box.outerWidth()) + 'px; ' +
			'height: ' + roundNum($box.outerHeight()) + 'px;'
		);
	}

// Handles dragging event handler
	$(document).on('mousedown','.handle', function(e) {
		// Handle drag start
		if ($selectedHandle == null) {
   		$selectedHandle = $(this);
			$selectedHandle.addClass('active');
		  if (e.offsetX == undefined) {
				initialX = e.pageX - $(this).offset().left;
				initialY = e.pageY - $(this).offset().top;
			}
			else {
				initialX = e.offsetX;
				initialY = e.offsetY;
			};
		}
	}).on('mouseup',function(e) {
		// Handle drag end
		if ($selectedHandle !== null) {
			$selectedHandle.removeClass('active');
	   	$selectedHandle = null;
		}
	}).on('mousemove',function(e) {
		// Handle dragging
		if ($selectedHandle != null) {

     	var newXPos = e.clientX - initialX - $box.offset().left + $(window).scrollLeft(),
       		newYPos = e.clientY - initialY - $box.offset().top + $(window).scrollTop(),
					handleId = $selectedHandle.attr('id')
					pos = null,
					handleBounds = handleClampAreas[handleId],
					$activehandles = [];

			switch (handleId) {
       	case 'topLeft':
        case 'bottomLeft':
				 	if (newXPos >= handleBounds[0] && newXPos <= handleBounds[1]) {
			 			pos = roundNum((newXPos + handleWidth)/ ($box.width()) * 100);
					}
          break;
        case 'topRight':
        case 'bottomRight':
				 	if (newXPos >= handleBounds[0] && newXPos <= handleBounds[1]) {
			 			pos = roundNum(($box.width() - newXPos) / ($box.width()) * 100);
					}
          break;
       	case 'leftTop':
        case 'rightTop':
				 	if (newYPos >= handleBounds[0] && newYPos <= handleBounds[1]) {
						pos = roundNum((newYPos + handleHeight) / ($box.height()) * 100)
					}
          break;
        case 'leftBottom':
        case 'rightBottom':
				 	if (newYPos >= handleBounds[0] && newYPos <= handleBounds[1]) {
						pos = roundNum(($box.height() - newYPos) / ($box.height()) * 100)
					}
          break;
      }

		 	if (pos !== null) {
				var activeGroups = $wrapper.find('.handlegroup.active').map(function(i,v) { return v;});
						currentGroup = $selectedHandle.parent('.handlegroup')[0],
						$activehandles = [];
				if ( $.inArray(currentGroup, activeGroups)!=-1 && activeGroups.length>1) {
					// Joined groups enabled
					var type = mode ? ($selectedHandle.hasClass('mainhandle') ? '.mainhandle' : '.subhandle') : '.handle';
					$.each(activeGroups, function(i,e) {
						$activehandles = $.merge($activehandles, $(e).find(type));
					})
				}
				else {
					// Single handle/group
		 			$activehandles = mode ? $selectedHandle : $(currentGroup).find('.handle');
				}
				positionHandle($activehandles,pos);
			}
		}
	});

	var minSize = 32;
	var $resizable = $('.wrapper').resizeThis({
		noNative: true, // Forces the plugin to use Javascript Implementation of resize
    minSize: minSize + paddingH*2, // Positive Integer to represent the minimal height and width that the element can be reiszed to
    //maxSize: 1000, // Positive Integer to represent the maximal height and width that the element can be reiszed to
	});

	// Resize box events
	$resizable.on( 'rt:start', function() {
		// Box resizing start
		$('.handle').hide();
	}).on( 'rt:stop', function( evt ) {
		// Box resizing end
		handleClampAreas = getClampAreas();
		positionHandles($handles);
		$('.handle').show();
	}).on( 'rt:resizing', function( evt ) {
		$('.boxsize',$box).html(roundNum($box.outerWidth()) + ' &times; ' + roundNum($box.outerHeight()));
	});

	// Box size modal event handler
	var boxsizeInput = null, inputField = null;
	$('.boxsize').on('click',function(e) {
		$('#newwidth').val($box.outerWidth());
		$('#newheight').val($box.outerHeight());
		// Open Modal box
		window.location.hash = 'openSizeModal';
	})

	// Box size update event handler
	$('#updatebutton').on('click',function(e) {
		$wrapper.css({
			width: parseInt(Math.max(minSize,$('#newwidth').val())) + paddingH*2,
			height: parseInt(Math.max(minSize+28,$('#newheight').val())) + paddingV*2
		})
		$('.boxsize',$box).html(roundNum($box.outerWidth()) + ' &times; ' + roundNum($box.outerHeight()));
		handleClampAreas = getClampAreas();
		positionHandles($handles);
		window.location.hash = '';
	})

	// Group event handler
	$('.centernav',$wrapper).on('click','div', function(e) {
		$(this).add('.handlegroup.' + $(this).attr('id')).toggleClass('active');
	});

	// Options

	// Mode toggle event
  $('#mode').on('click',function(e) {
   	if ($(this).is(':checked')) {
			mode = true;
   		$secondaryhandles.css('display','block');
			$('#showsecondary-wrapper').css('visibility','hidden');
   	}
		else {
			mode = false;
      boxRadius.leftTop =  boxRadius.topLeft;
      boxRadius.leftBottom = boxRadius.bottomLeft;
      boxRadius.rightTop = boxRadius.topRight;
      boxRadius.rightBottom = boxRadius.bottomRight;
			$('#showsecondary-wrapper').css('visibility','visible');
	   	$secondaryhandles.css('display',(showsecondary ? 'block' : 'none'));
		}
		positionHandles($secondaryhandles);
	});

	// Show Secondary handles toggle event
  $('#showsecondary').on('click',function(e) {
   	if ($(this).is(':checked')) {
			showsecondary = true;
   	}
		else {
			showsecondary = false;
			positionHandles($secondaryhandles);
		}
   	$secondaryhandles.css('display',(showsecondary ? 'block' : 'none'));
	});

	// Unit event handler
	$('#unit').on('change', function(e) {
		updateBorderRadius();
	});

	// Highlight text event handler
	$('#csscode').on('click',function() {
    var doc = document;
    if (doc.body.createTextRange) { // ms
      var range = doc.body.createTextRange();
      range.moveToElementText(this);
      range.select();
    } else if (window.getSelection) {
      var selection = window.getSelection();
      var range = doc.createRange();
      range.selectNodeContents(this);
      selection.removeAllRanges();
      selection.addRange(range);
    }
	});

	positionHandles($handles);

});

/* ResizeThis */
/*!
 * jQuery lightweight resizable plug-in
 * Author: @0mbre
 * Licensed under the MIT license
 */

;(function( factory ) {
    /*
     * Exposes the plugin according to environment (window, AMD, CommonJS)
     */
    if ( typeof exports === 'object' ) {
        module.exports = factory( this.jQuery || require('jquery') );
    } else if ( typeof define === 'function' && define.amd ) {
        define([ 'jquery' ], function ( $ ) {
            return factory( $ );
        });
    } else {
        this.ResizeThis = factory( this.jQuery );
    }

})(function( $ ) {

    var defaults = {
        propertyName: "value",
        handles: "se",
        noNative: false,
        minSize: 10,
        maxSize: Number.POSITIVE_INFINITY,
    };

    // Helper function to test for CSS property support
    var _supports = function( property ) {
        var prefixes = [ 'Webkit', 'Moz', 'O' ];
        var supported = false;

        // Capitalize Property
        var Property = property.replace( /^./, function (match) {
            return match.toUpperCase();
        });

        // Try Vendors prefixes
        for ( var i in prefixes ) {
            // Bitwise opperation -- If any is true then property is active
            supported = supported | prefixes[ i ] + Property in document.body.style;
        }

        // Try standard syntax
        supported = supported | property in document.body.style;

        return supported;
    }

    // Helper function to disable element dragging
    var disableDragging = function ( node ) {
        // this works for FireFox and WebKit in future according to http://help.dottoro.com/lhqsqbtn.php
        node.draggable = false;

        // this works for older web layout engines
        node.onmousedown = function( event ) {
            event.preventDefault();
            return false;
        };
    };

    /*
     *  Constructor
     *  Args: DOM element, Options hash
     */
    function ResizeThis( element, options ) {
        this.el = element;
        this.$el = $( element );

        this.options = $.extend({}, defaults, options ) ;

        this._defaults = defaults;

        this.init();
    }

    /*
     *  Initializing Logic
     */
    ResizeThis.prototype.init = function() {

        // Check if native CSS resize is supported
        // and if allowed from options
        this._isNative = ! this.options.noNative && _supports( 'resize' );

        if ( this._isNative ) {
            this.$el.css({
                "resize": "both",
                "min-width": this.options.minSize + "px",
                "min-height": this.options.minSize + "px",
                "max-width": this.options.maxSize + "px",
                "max-height": this.options.maxSize + "px",
                "overflow": "hidden"
            });

        } else {
            // Insert Handles
            this._insertHandles();
        }
    };

    /*
     * Parses handle option and inject handles
     * @TODO support for more handles (right now only South East works)
     */
    ResizeThis.prototype._insertHandles = function() {
        this.handles = this.options.handles;

        // Makes sure that the element has a position attribute
        if ( this.el.style.position === '' ) {
            this.el.style.position = 'relative'
        }

        if ( this.handles === "all") {
            this.handles = "n,e,s,w,se,sw,ne,nw";
        }

        var n = this.handles.split(",");

        for( var i = 0; i < n.length; i++ ) {
            var handle = $.trim( n[i] );
            var $handle = $( "<div class='rt-handle'></div>" );
            $handle.css({ zIndex: 2999 });
            disableDragging( $handle[0] );
            $handle.on( 'mousedown.rtStart', $.proxy(this._mouseStart, this) );
            this.$el.append( $handle );
        }
    }

    /*
     * Mouse Start Handler
     */
    ResizeThis.prototype._mouseStart = function ( evt ) {
        // Trigger start event
        this.$el.trigger( "rt:start" );

        if ( ! this._isNative ) {
            var width = this.$el.innerWidth();
            var height = this.$el.innerHeight();
            $( document ).on( 'mousemove.rtMove', $.proxy(this._mouseDrag, this) );
            $( document ).on( 'mouseup.rtStop', $.proxy(this._mouseStop, this) );
            this._startPos = {
                x: evt.pageX,
                y: evt.pageY,
            }

            this._startSize = {
                x: width,
                y: height
            }
        }
    }

    /*
     * Mouse Stop Handler
     */
    ResizeThis.prototype._mouseStop = function ( evt ) {
        // Trigger stop event
        this.$el.trigger( "rt:stop" );
        $( document ).off( 'mousemove.rtMove' );
        $( document ).off( 'mouseup.rtStop' );
    }

    /*
     * Mouse Move Handler
     */
    ResizeThis.prototype._mouseDrag = function( evt ) {
        // Trigger resizing event
        this.$el.trigger( "rt:resizing" );
        if ( ! this._isNative ) {
             var XY = {
                x: evt.pageX - this._startPos.x,
                y: evt.pageY - this._startPos.y
            }
             this._resize( XY );
        }
    }

    /*
     * Resizing Logic
     */
    ResizeThis.prototype._resize = function( XY ) {
        var sX = this._startSize.x;
        var sY = this._startSize.y;

        // New size to be applied to the element
        var nWidth = sX + XY.x;
        var nHeight = sY + XY.y;

        // Make sure that size can not be lower than the minSize & maxSize value
        var min = this.options.minSize;
        var max = this.options.maxSize;

        // Nested Ternary
        nWidth = nWidth < min ? min :
            nWidth > max ? max :
                nWidth;
        nHeight = nHeight < min ? min :
            nHeight > max ? max :
                nHeight;

        this.$el.css({
            width: nWidth,
            height: nHeight
        })
    }

    // A really lightweight plugin wrapper around the constructor,
    // preventing against multiple instantiations
    $.fn.resizeThis = function ( options ) {
        return this.each(function () {
            new ResizeThis( this, options );
        });
    }

    /*
     * Static defaults setter
     */
    $.fn.resizeThis._setDefaults = function ( defaultsObj ) {
         defaults = $.extend( defaults, defaultsObj ) ;
    }

})

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console