Contact Form 7 SCSS Styles

_wpcf7.scss

/*********************
CONTACT FORM 7
*********************/	

/* Colours */

// Primary alert colours

	$alert-yellow:		#eadb33;
	$alert-red:			#be3333;
	$alert-green:		#a8c923;
	
// Newsprint, black and white
	
	$white:				#fff;

// Primary colours
	
	$brand-colour:		#3e454c;
	$brand-highlight:	#ff642d;


.wpcf7 {
	margin: 0;
	padding: 0;
}

.wpcf7-response-output {
    clear: both;
    float: right;
    font-size: 0.8em;
    margin: 0;
    padding: 9px 20px;
    width: 100%;
    color: $white;
}

.wpcf7-mail-sent-ok {
	border-color: darken($alert-green, 5%);
	background: $alert-green;
}

.wpcf7-mail-sent-ng {
	border-color: darken($alert-red, 5%);
	background: $alert-red;
}

.wpcf7-spam-blocked {
	border-color: darken($alert-red, 5%);
	background: $alert-red;
}

.wpcf7-validation-errors {
	border-color: darken($alert-yellow, 5%);
	background: $alert-yellow;
}

.wpcf7-form-control-wrap {
	position: relative;
}

.wpcf7-not-valid-tip {
	border-color: darken($alert-red, 5%);
	background: $alert-red;
    color: $white;
    @include font-size(0.85);
    left: 0;
    padding: 11px 5px;
    position: absolute;
    top: -9px;
    width: 100%;
    z-index: 100;
}

wpcf7-not-valid-tip-no-ajax {
	border-color: darken($alert-red, 5%);
	background: $alert-red;
    @include font-size(0.85);
    display: block;
}

wpcf7-list-item {
	margin-left: 0.5em;
}

.wpcf7-display-none {
	display: none;
}

.wpcf7 img.ajax-loader {
	border: none;
	vertical-align: middle;
	margin-left: 4px;
	max-width: 16px;
	height: auto;
}

.wpcf7 .watermark {
	color: fade-out(darken($white, 15%), 0.2);
}

.wpcf7-textarea{
	resize: none;
	height: 100px;
	padding-top: 40px; 
}	

.wpcf7-text, .wpcf7-textarea {
	width: 100%;
	border: 1px solid darken($white, 30%);
	color: lighten($black, 15%);
	padding: 10px;
	box-shadow:inset 0 2px 1px fade-out(darken($white, 30%),0.8);
	border-radius: 3px;
}

.wpcf7-submit{
	@include transition(all 0.2s ease-in-out);
	padding: 10px 35px;
	border: 1px solid darken($brand-highlight, 10%);
	background: $brand-highlight;
	color: $white;
	border-radius: 2px;
	text-shadow: 0 -1px 1px darken($brand-highlight, 30%), 0 1px 0px fade-out(darken($brand-highlight, 30%), 0.9);
	box-shadow: 0 3px darken($brand-highlight, 10%);
	text-transform: uppercase;
	@include font-size(1);
	font-weight: 700;
	letter-spacing: 0.025em;
	margin-bottom: 1em;
	
	&:active{
		box-shadow: 0 0px darken($brand-highlight, 10%);
		margin: 3px 0 13px;

	}
}

select{
	@include appearance(none);
    border: 0 none;
    border-radius: 2px;
    font-size: 100%;
    margin: 0;
    padding: 6px 4px;
    vertical-align: baseline;
    width: 100%;
}