my code stock.com

Tobias Hopp

WordPress Ajax Search Lite Mark-Up
by Tobias Hopp

WordPress Plugin Ajax Search lite less mark-up - ready to use more or less..

Snippet options

Download: Download snippet as wordpress-ajax-search-lite-mark-up.less.
Copy snippet: For this you need a free my code stock.com account.
Embed code : You will find the embed code for this snippet at the end of the page, if you want to embed it into a website or a blog!

#ajaxsearchlite1 {
	padding: 0;
	margin: 0;
	.probox {
		.relative;
		z-index: 120;
		/* Search Icon */
		.promagnifier {
			svg {
				fill: rgb(74,134,232);
				.allTrans;
			}
			svg:hover {
				fill: rgb(182,232,74);
			}
		}
		.promagnifier {
			
		}
		/* Search Settings / Filter */
		.prosettings {
			background: rgb(74, 134, 232);
			svg {
				fill: rgb(74,134,232);
				.allTrans;
			}
		}
		.prosettings:hover {
			svg {
				fill: rgb(182,232,74);
				.allTrans;
			}
		}
		/* Input field */
		.proinput {
			background: @white;
			padding: 0;
			margin-left: 15px;
			padding-bottom: 2px;
			input {
				border-bottom: 1px solid @primary!important;
				color: @primary!important;
				font-size: 16px;
				font-family: 'Roboto Condensed';
				.allTrans;
			}
			input:hover {
				border-bottom: 1px solid @highlight!important;
			}
		}
		/* Input field */
		.proinput {
			background: @white;
		}

		/* Load Icon */
		.proloading {
			margin-right: 15px;
			background: @white;
			.asl_loader {
				.asl_loader-inner {
					border-color: @primary;
				}
			}
		}
		/* Close Icon */
		.proclose {
			margin-right: 15px;
			background: @white;
			svg {
				fill: rgb(74,134,232);
				background: @white;
				.allTrans;
			}
		}
		.proclose:hover {
			svg {
				fill: rgb(182,232,74);
			}
		}
	}
}
div[id*="ajaxsearchlite"] {
	.noBorder;
	.noShadow;
	.probox {
		.proinput {
			margin-left: 0;
		}
	}
}

Create a free my code stock.com account now.

my code stok.com is a free service, which allows you to save and manage code snippes of any kind and programming language. We provide many advantages for your daily work with code-snippets, also for your teamwork. Give it a try!

Find out more and register now

You can customize the height of iFrame-Codes as needed! You can find more infos in our API Reference for iframe Embeds.