Signature

Sign above

Signature Pad install files:

HTML

<div class="signature_pad_wrapper">
	<div class="signature_pad_body">
		<canvas id="signaturePad" class="signature_pad"></canvas>
		<input type="hidden" value="" name="form[signature_input]" class="signature_input">
	</div>
	<div class="signature_pad_desc">Sign above</div>
	<div class="signature_pad_actions">
		<div class="action_item">
			<button type="button" class="button || small || clear" data-action="clear">Clear</button>
			<button type="button" class="button || small" data-action="change-color">Change color</button>
			<button type="button" class="button || small" data-action="undo">Undo</button>
		</div>
		<div class="action_item">
			<button type="button" class="button || small || save" data-action="save-png">Confirm signature as PNG</button>
			<button type="button" class="button || small || save" data-action="save-jpg">Confirm signature as JPG</button>
			<button type="button" class="button || small || save" data-action="save-svg">Confirm signature as SVG</button>
		</div>
	</div>
</div>

CSS

.signature_pad_wrapper{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-moz-box-orient:vertical;-moz-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100%;max-width:70rem;border:.1rem solid #e8e8e8;background-color:#f8f8f8;-webkit-border-radius:.4rem;-moz-border-radius:.4rem;border-radius:.4rem;padding:1.5rem 1.5rem 1rem;margin:auto}
.signature_pad_wrapper .signature_pad_body{position:relative;-webkit-box-flex:1;-webkit-flex:1;-moz-box-flex:1;-ms-flex:1;flex:1;border:.1rem solid #f4f4f4;min-height:36rem}
.signature_pad_wrapper .signature_pad_body canvas{position:absolute;left:0;top:0;width:100%;height:100%;-webkit-border-radius:.4rem;-moz-border-radius:.4rem;border-radius:.4rem;-webkit-box-shadow:0 0 .5rem rgba(0,0,0,0.02) inset;-moz-box-shadow:0 0 .5rem rgba(0,0,0,0.02) inset;box-shadow:0 0 .5rem rgba(0,0,0,0.02) inset}
.signature_pad_wrapper .signature_pad_desc{text-align:center;font-size:1.6rem;color:#c3c3c3;padding:1rem 1.5rem}
.signature_pad_wrapper .signature_pad_actions{margin:.5rem 0 0}
.signature_pad_wrapper .signature_pad_actions .action_item{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-webkit-justify-content:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center;margin:0 0 .5rem}
.signature_pad_wrapper .signature_pad_actions .action_item:last-child{margin:0}
.signature_pad_wrapper .signature_pad_actions .button{margin:.5rem;min-width:12.5rem;padding:0 2rem}

@media only screen and (max-width: 550px) {
	.signature_pad_actions .button{margin:.5rem 0;min-width:auto;width:100%}
}

SCSS

.signature_pad_wrapper {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 70rem;
	border: .1rem solid #e8e8e8;
	background-color: #f8f8f8;
	border-radius: .4rem;
	padding: 1.5rem 1.5rem 1rem;
	margin: auto;
	
	.signature_pad_body {
		position: relative;
		flex: 1;
		border: .1rem solid #f4f4f4;
		min-height: 36rem;
		
		canvas {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			border-radius: .4rem;
			box-shadow: 0 0 .5rem rgba(0, 0, 0, 0.02) inset;
		}
	}
	
	.signature_pad_desc {
		text-align: center;
		font-size: 1.6rem;
		color: #C3C3C3;
		padding: 1rem 1.5rem;
	}
	
	.signature_pad_actions {
		margin: .5rem 0 0;
		
		.action_item {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			margin: 0 0 .5rem;
			
			&:last-child {
				margin: 0;
			}
		}
		
		.button {
			margin: .5rem;
			min-width: 12.5rem;
			padding: 0 2rem;
		}
	}
}

@media only screen and (max-width: 550px) {
	.signature_pad_actions {
		.button {
			margin: 0.5rem 0;
			min-width: auto;
			width: 100%;
		}
	}
}