jquery-meme-generator/src/less/jquery.memegenerator.less

Meme Generator is a jQuery plugin allowing easily creating images with captions (memes) using interactive editor.

.mg-wrapper {
	position: relative;
	text-align: center;
	
	&.mg-horizontal-layout {
		.mg-image {
			float: left;
			width: 55%;
			margin-right: 5%;
		}
		
		.mg-controls {
			float: left;
			width: 40%;
		}
	}
	
	.mg-image {
		position: relative;
		display: inline-block;
		margin: 0 auto 10px;
		width: auto;
		overflow: hidden;
		text-align: left;
		
		& > img {
			max-width: 100%;
			width: 100%;
		}
		
		&:hover .mg-helpers {
			visibility: visible;
		}
	}
	
	.mg-canvas {
		position: absolute;
		z-index: 3;
		.sides(0px);
		
		canvas {
			position: absolute;
			.sides(0px);
			z-index: 3;
		}
	}
	
	&:not(.usingBootstrap) {
		.mg-controls {
			.mg-textbox {
				margin-bottom: 10px;
				text-align: right;
				
				&:last-child {
					margin: 0;
				}
				
				&:after {
					.clear();
				}
				
				input {
					box-sizing: border-box;
					padding: 0 5px;
					max-width: 100%;
					height: 30px;
					
					font-size: 16px;
					
					border-top: none;
					border-right: none;
					border-left: none;
					border-bottom: 2px solid #DDD;
				}
				
				input:not(:last-child), .colorpickerContainer {
					float: left;
					margin-right: 2%;
				}
				
				.mg-textbox-text {
					width: 40%;
				}
				
				.mg-textbox-size, .mg-textbox-border-width {
					width: 13%;
				}
				
				.colorpickerContainer {
					width: 13%;
				}
				
				.colorpickerReplacer {
					width: 100%;
				}
			}
			
			.mg-add-textbox, .mg-advanced-settings-toggle, .mg-toolbox-toggle {
				display: block;
				padding: 5px 0;
				
				text-align: center;
				font-size: 20px;
				
				&.active {
					font-weight: bold;
				}
			}
			
			.option {
				input {
					margin-right: 5%;
				}
				
				label {
					display: inline;
				}
			}
			
			.mg-toolbox {
				.mg-toolbox-item {
					float: left;
					width: 21.25%;
					margin-right: 5%;
					
					text-align: center;
					
					button, input, .colorpickerReplacer {
						box-sizing: border-box;
						width: 100%;
						height: 30px;
					}
					
					&:last-child {
						margin-right: 0;
					}
				}
			}
		}
	}
	
	&.usingBootstrap {
		.mg-controls {
			.row:not(:last-child) {
				margin-bottom: 10px;
			}
			
			input, .colorpickerReplacer {
				width: 100%;
			}
			
			.set-col-margins(12);
		}
	}
	
	.mg-controls {
		text-align: left;
		
		.mg-textbox {
			margin-bottom: 10px;
			
			& > div {
				text-align: center;
			}
		}
		
		.option :first-child {
			text-align: center;
		}
		
		
		/* Adjustments for default color picker */
		
		.sp-preview {
			margin: 0;
			width: 80%;
		}
		
		.sp-dd {
			width: 20%;
			text-align: right;
		}
	}
	
	.mg-helpers {
		visibility: hidden;
		position: absolute;
		.sides(0px);
		
		.draggable {
			box-sizing: border-box;
			position: absolute;
			top: 0;
			z-index: 4;
			
			width: 100%;
			
			border: 2px dashed #222;
			
			&:hover {
				&:before {
					border-color: #FFF;
				}
			}
			
			&:before {
				display: block;
				content: ' ';
				
				position: absolute;
				.sides(0px);
				
				border: 2px dashed #CCC;
			}
		}
	}
	
	.mg-css-preview {
		position: absolute;
		.sides(0px);
		z-index: 2;
		
		div {
			position: absolute;
// 			z-index: 3;
		}
	}
	
	.mg-drawing {
		display: none;
		position: absolute;
		z-index: 5;
		.sides(0px);
	}
	
	&:after {
		.clear();
	}
}

.set-col-margins(@n, @i: 1) when (@i =< @n) {
	.col-md-@{i} {
		margin-bottom: 5px
	}
	
	.set-col-margins(@n, (@i + 1));
}

.sides(@length) {
	top: @length;
	bottom: @length;
	left: @length;
	right: @length;
}

.clear() {
	content: ' ';
	height: 0;
	display: block;
	clear: both;
}