Sass code for creating a basic search box. Resulting CSS used for two that are different widths.
The goals is to define sass that generates CSS that is easily re-usable as well as concise and efficient and to keep the initial definitions as DRY as possible.
Review:
- Coding style
- Re-usability
- DRY principles
SASS:
$container-width:940px;
$search-container-padding:54px;
$form-width:$container-width - ($search-container-padding * 2);
$form-height:47px;
$button-width:118px;
$search-container-background:#e9e9e9;
$form-background:#fff;
$input-border:1px solid #dadadc;
$focus-border:1px solid #052546;
$input-br:4px;
$input-inset:15px;
/*
input width, sets the width of an imput and adds polyfill placeholder correctly
*/
@mixin input-width($width)
{
.search-input
{
width:$width;
}
.search-placeholder
{
left:$form-width - $width - $button-width + $input-inset;
}
}
.search-container
{
box-sizing:border-box;
width:$container-width;
background-color:$search-container-background;
padding:30px $search-container-padding 0;
}
.case-search-container
{
padding-bottom:20px;
}
.book-search-container
{
height:124px;
}
.search-form
{
box-sizing:padding-box;
width:$form-width;
height:$form-height;
position:relative;
background-color:$form-background;
border:5px solid $form-background;
border-radius:6px;
input[type=submit],
button[type=submit]
{
width:$button-width;
height:$form-height;
position:absolute;
top:0;
right:0;
background:image-url("structure/button-sprite.png") 0px 0px no-repeat;
cursor:pointer;
border:0px;
color:#fff;
font-weight:bold;
text-transform:uppercase;
&:hover{
background-position:0px 0 - $form-height;
}
}
.text
{
input
{
box-sizing:border-box;
height:$form-height;
position:absolute;
top:0;
right:$button-width;
border-top:$input-border;
border-bottom:$input-border;
border-left:$input-border;
border-radius:$input-br 0 0 $input-br;
margin:0;
padding:10px $input-inset;
&:focus
{
outline:none;
border:$focus-border;
}
}
}
.search-placeholder
{
position:absolute;
top:13px;
z-index:10;
font-size:15px;
}
}
/* specific width over-rides and label placement relative to this */
.book-search-form
{
@include input-width(714px);
}
.case-search-form
{
@include input-width(455px);
}
HTML:
<section class='search-container case-search-container'>
<form class='search-form'>
<label class='placeholder-label'> <!-- IE8 friendly placeholder polyfill -->
<div class='text'> <!-- cake generated inputs -->
<input class='search-input' type='text' ... />
</div>
<div class='submit'>
<input type='submit' ... />
</div>
</form>
</section>
<section class='search-container book-search-container'>
<form class='search-form'>
<label class='placeholder-label'> <!-- IE8 friendly placeholder polyfill -->
<div class='text'> <!-- cake generated inputs -->
<input class='search-input' type='text' ... />
</div>
<div class='submit'>
<input class='submit' ... />
</div>
</form>
</section>