pixel-editor/views/popups/canvas-resize.hbs

<!--CANVAS RESIZE-->
<div class="update" id="resize-canvas">
	<button class="close-button">{{svg "x.svg" width="20" height="20"}}</button>
	<h1>Resize canvas</h1>

	<!--PIVOTS-->
	<span id="pivot-menu">
		<button class="pivot-button" value="topleft">{{svg "arrows/topleft.svg" width="20" height="20"}}</button>
		<button class="pivot-button" value="top">{{svg "arrows/top.svg" width="20" height="20"}}</button>
		<button class="pivot-button" value="topright">{{svg "arrows/topright.svg" width="20" height="20"}}</button>
		<button class="pivot-button" value="left">{{svg "arrows/left.svg" width="20" height="20"}}</button>
		<button class="pivot-button rc-selected-pivot" value="middle">{{svg "arrows/middle.svg" width="20" height="20"}}</button>
		<button class="pivot-button" value="right">{{svg "arrows/right.svg" width="20" height="20"}}</button>
		<button class="pivot-button" value="bottomleft">{{svg "arrows/bottomleft.svg" width="20" height="20"}}</button>
		<button class="pivot-button" value="bottom">{{svg "arrows/bottom.svg" width="20" height="20"}}</button>
		<button class="pivot-button" value="bottomright">{{svg "arrows/bottomright.svg" width="20" height="20"}}</button>
	</span>
	<!-- SIZE-->
	<span id="rc-size-menu">
		<h2>Size</h2>
		<div>
			<span>
				Width: <input id="rc-width" type="number" default="0" step="1" 
				value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
			</span>
			
			<span>
				Height: <input id="rc-height" default="0" step="1" type="number" 
				value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
			</span>
		</div>
	</span>        
	<!--BORDERS-->
	<span id="borders-menu">
		<h2>Borders offsets</h2>
		<div>
			<span>
				Left: <input id="rc-border-left" type="number" default="0" step="1" 
				value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
			</span>
			
			<span>
				Right: <input id="rc-border-right" type="number" default="0" step="1" 
				value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
			</span>
			
			<span>
				Top: <input id="rc-border-top" type="number" default="0" step="1" 
				value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
			</span>
			
			<span>
				Bottom: <input id="rc-border-bottom" default="0" step="1" type="number" 
				value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
			</span>
		</div>
		<button id="resize-canvas-confirm">Resize canvas</button>
	</span>            
</div>