brouilleursdeblanc/_sass/_forms.scss

form { 
	margin: 0 0 5px 0;
	fieldset { 
		margin-bottom: 5px; 
		padding: 0; 
		border-width: 0; 
	}
	legend { 
		display: block;
		width: 100%;
		margin-bottom: 5px * 2;
		*margin-left: -7px; 
		padding: 0;
		color: $text-color;
		border: 0;
		border-bottom: 1px solid lighten($black, 80);
		white-space: normal; 
	}
	p {
		margin-bottom: 5px / 2; 
	}
	ul {
		list-style-type: none; 
		margin: 0 0 5px 0;
		padding: 0; 
	}
	br {
		display: none; 
	}
}
label,
input,
button,
select,
textarea {
	vertical-align: baseline; 
	*vertical-align: middle; 
}
input,
button,
select,
textarea {
	font-family: $base-font; 
	@include box-sizing(border-box); 
}
label {
	display: block;
	margin-bottom: 10px / 8;
	font-weight: bold;
	color: $text-color;
	cursor: pointer; 
	input,
	textarea,
	select {
		display: block; 
	}
}
input,
textarea,
select {
	display: inline-block;
	width: 100%;
	padding: 4px;
	margin-bottom: 5px / 4;
	background-color: $white;
	border: 1px solid lighten($black, 80);
	color: $text-color; 
	&:hover {
		border-color: lighten($accent-color, 50); 
	}
}
.input-mini { 
	width: 60px; 
}
.input-small { 
	width: 90px; 
}
input[type="image"],
input[type="checkbox"],
input[type="radio"] {
	width: auto;
	height: auto;
	padding: 0;
	margin: 3px 0;
	*margin-top: 0;
	line-height: normal;
	cursor: pointer;
	@include rounded(0);
	border: 0 \9; 
}
input[type="checkbox"], 
input[type="radio"] {  
	@include box-sizing(border-box);
	padding: 0; 
	*width: 13px; 
	*height: 13px; 
}
input[type="image"] {
	border: 0; 
	@include box-shadow(none); 
}
input[type="file"] {
	width: auto;
	padding: initial;
	line-height: initial;
	border: initial;
	background-color: transparent;
	background-color: initial;
	@include box-shadow(none); 
}
input[type="button"],
input[type="reset"],
input[type="submit"] {
	width : auto;
	height : auto;
	cursor : pointer;
	*overflow : visible; 
}
select,
input[type="file"] {
	*margin-top : 4px;  
}
select {
	width : auto;
	background-color : $white;
}
select[multiple],
select[size] {
	height : auto; 
}
textarea {
	@include resize(vertical);
	height : auto;
	overflow : auto; 
	vertical-align : top; 
}
input[type="hidden"] {
	display : none; 
}
.radio,
.checkbox {
	padding-left : 18px; 
	font-weight : normal; 
}
.radio input[type="radio"],
.checkbox input[type="checkbox"] {
	float : left;
	margin-left : -18px; 
}
.radio.inline,
.checkbox.inline {
	display : inline-block;
	padding-top : 5px;
	margin-bottom : 0;
	vertical-align : middle; 
}
.radio.inline + .radio.inline,
.checkbox.inline + .checkbox.inline {
	margin-left : 10px; 
}

// disabled
// --------------------------------------------------

input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly] {
	opacity: 0.5;
	cursor : not-allowed; 
}

// focus and active
// --------------------------------------------------

input:focus,
textarea:focus {
	border-color : $accent-color;
	outline : 0;
	outline : thin dotted \9; 
}
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus,
select:focus {
	@include box-shadow(none); 
}

// help text
// --------------------------------------------------

.help-block,
.help-inline {
	color : lighten($black, 50); 
}
.help-block {
	display : block; 
	margin-bottom : 1em; 
	line-height : 1em;
}
.help-inline {
	display : inline-block;
	vertical-align : middle;
	padding-left : 5px; 
}

// .form-inline
// --------------------------------------------------

.form-inline input,
.form-inline textarea,
.form-inline select {
	display : inline-block;
	margin-bottom : 0; 
}
.form-inline label {
	display : inline-block; 
}
.form-inline .radio,
.form-inline .checkbox,
.form-inline .radio {
	padding-left : 0;
	margin-bottom : 0;
	vertical-align : middle; 
}
.form-inline .radio input[type="radio"],
.form-inline .checkbox input[type="checkbox"] {
	float : left;
	margin-left : 0;
	margin-right : 3px; }

// Jekyll Simple Search
// -------------------------------------------------
.dosearch {
  padding: 6px 10px;
  cursor: pointer;
  display: block;
  color: $white;
  @include rounded(4px);
  &:hover {
	@include box-shadow($shadow: inset 0 0 1px $white);
  	background-color: lighten($black, 10);
  }
}
.search-form {
	width: 100%;
	position: relative;
	opacity: 0;
	transition: all 200ms 100ms cubic-bezier(0, 0.6, 0.4, 1);
	top: 0;
	left: -200px;
	z-index: 9002;
	.search-field {
		-webkit-appearance: none;
		border: none;
		width: 100%;
		color: $white;
		border: none;
		border-bottom: 1px solid lighten($white, 20);
		background-color: transparent;
		box-shadow: none;
		border-radius: 0;
		background-clip: padding-box;
		@include font-size(32);
		&:focus {
			box-shadow: none;
			outline: none;
		}
	}
	&.active {
		opacity: 1;
		top: 0;
		left: 0;
	}
	&.hidden {
		display: none;
	}
	::-webkit-input-placeholder {
		@include font-size(32);
	}
	.search-field::-webkit-search-decoration,
	.search-field::-webkit-search-cancel-button,
	.search-field::-webkit-search-results-button,
	.search-field::-webkit-search-results-decoration {
		display: none;
	}
	.post-list {
		position: absolute;
		width: 100%;
		h4, li, p, a {
			color: $white;
		}
		li {
			border-bottom: 1px solid lighten($white,20);
		}
	}
}
body.search-overlay {
	overflow: hidden;
}
body.search-overlay:after {
	content: '';
	background-color: lighten($black,5);
	background-color: rgba($black,.95);
	width: 100%;
	min-height: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9001;
}
.no-js .dosearch {
	display: none;
}