<div class="search wrapper">
	<div class="upper">
		<h1>Pure CSS expand text box on focus</h1>
		<p>Click inside the search box to see an animation</p>
		<p>You can also align the search box with the links below</p>
		<a href="#" class="left-ta-c ib">Left!</a>
		<a href="#" class="center-ta-c ib">Center!</a>
		<a href="#" class="right-ta-c ib">Right!</a>
	</div>
	<div class="ib-cont">
		<input type="text" placeholder="Search" class="search-textbox ib-m ib-el">
		<input type="submit" value="&#xf002;" class="search-button ib-m ib-el">
	</div>
</div>

/* ==============================
	$---Contents
	$-Variables
	$-Mixins
	$-Resets
	$-Modules
	$-Styles
	$-Media-queries
============================== */





/* ==============================
	$-Variables
============================== */

$heading-typeface: "Roboto Slab", Times, "Times New Roman", serif;
$body-typeface: Roboto, Helvetica, Arial, sans-serif;
$color: #333;





/* ==============================
	$-Mixins
============================== */

@mixin box-sizing {
	box-sizing: border-box;
}

@mixin fa {
	font-family: FontAwesome;
	font-style: normal;
}





/* ==============================
	$-Resets
============================== */

html,
body {
	height: 100%;
	font-size: 24px;
}

html {
	@include box-sizing;
}

*,
*:before,
*:after {
	@include box-sizing;
}

body {
	min-width: 220px;
	margin: 0;
	line-height: 1.5;
	background-color: #eee;
	font-family: $body-typeface;
	color: $color;
}

/* headers */
h1 {
	font-family: $heading-typeface;
	font-size: 2.2em;
}

/* highlight colors */
::-moz-selection {
	background-color: #333;
	color: #fff;
}

::selection {
	background-color: #333;
	color: #fff;
}

/* anchor links */
a {
	text-decoration: none;
	color: coral;
	&:hover,
	&:active {
		text-decoration: underline;
	}
}

/* form elements */
input {
	max-width: 100%;
	padding: 0;
	margin: 0;
	font-family: $body-typeface;
	font-weight: 400;
	font-size: 1rem;
	color: $color;
}

input[type=submit],
input[type=button] {
	cursor: pointer;
}

input[type=submit] {
	-webkit-appearance: none;
	-webkit-border-radius: 0;
}





/* ==============================
	$-Modules
============================== */

/* inline block */
.ib {
	display: inline-block;
	vertical-align: top;
}

.ib-m {
	display: inline-block;
	vertical-align: middle;
}

.ib-cont {
	font-size: 0;
}

.ib-el {
	font-size: 1rem;
}

/* link colour reset for coloured backgrounds */
.link-reset a {
	text-decoration: underline;
	color: inherit;
	&:hover,
	&:active {
		text-decoration: none;
	}
	&:visited {
		color: inherit;
	}
}

/* wrapper */
.wrapper {
	max-width: 70ch;
	padding-right: 10px;
	padding-left: 10px;
	margin-right: auto;
	margin-left: auto;
}





/* ==============================
	$-Styles
============================== */

.upper {
	margin-bottom: 1rem;
	text-align: center;
	h1 {
		margin-top: 0;
		font-size: 1.4em;
		color: teal;
	}
}

.center-ta-c {
	margin-right: 1rem;
	margin-left: 1rem;
}

.search {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	text-align: center;
}

.search-textbox {
	min-width: 200px;
	width: 33.33333%;
	height: 3rem;
	padding: 1rem;
	padding-right: 3rem;
	border: 1px solid #ccc;
	font-size: 1rem;
	transition: width 250ms ease-in-out;
	&:focus {
		width: 100%;
	}
}

.search-button {
	width: calc(3rem - 2px);
	height: calc(3rem - 5px);
	border: none;
	margin-left: -3rem;
	background-color: #fff;
	@include fa;
	font-size: 1rem;
	transition: opacity 100ms ease-in-out;
	&:hover {
		opacity: .75;
	}
}





/* ==============================
	$-Media-queries
============================== */

@media only screen and (max-width:1024px) {
	html,
	body {
		font-size: 20px;
	}
}
@media only screen and (max-width:768px) {
	html,
	body {
		font-size: 18px;
	}
}
@media only screen and (max-width:480px) {
	html,
	body {
		font-size: 16px;
	}
}

// j
$('.left-ta-c').click(function(){
	$('.search').css({'text-align':'left'});
});

$('.center-ta-c').click(function(){
	$('.search').css({'text-align':'center'});
});

$('.right-ta-c').click(function(){
	$('.search').css({'text-align':'right'});
});