formularios

forms.styl

/**
* Forms
* @module forms
*/
form
	width 100%
	margin 30px auto 0
	text-align left
	font-size 1em
	&.vertical
		label
			display block
			float none
			line-height 1.3em
			&.ioption
				float left
				font-size 1em
				margin-left 70px
				&:first-child
					margin 0
				&.ck
					padding-right 20px
					margin-bottom 1em 
					margin-top 1em 
					
			
		input[type="text"],input[type="email"],input[type="tel"],input[type="password"],select
			width 100%
			
		textarea
			width 100%
		.btn
			margin 0
	&.nolabel
		label
			display none
			&.ioption
				display block
				font-size 1em
				line-height 18px
				margin-left 60px
				width 80px
				input[type="radio"]
					top 4px		
				&:first-child
					margin 0
				&.ck
					padding-right 20px
					margin-bottom 1em 
					margin-top 1em 
		input[type="text"],input[type="email"],input[type="tel"],input[type="password"],select
			width 100%
		textarea
			width 100%
		.btn
			margin 0
form#frmNewAddress
	+mobile()
		margin 0 0 0 20px
.form_control
	margin-bottom 0.5em
	*zoom 1
	.form_control_inline
		.form_control
			margin-bottom 0
			display inline-block
			margin-left 1em
			vertical-align top
			&.half
				width 45%
			&:first-child 
				margin-left 0 !important
	&:before,&:after
		display table
		content ""
		line-height 0
	&:after
		clear both
	label
		margin 0
		float left
		font-size 1em
		line-height 35px
		width 12em
		&.nbsp:after
			content "\00a0"
		&.ioption
			cursor pointer
			line-height 35px
			padding-left 20px
			position relative
			width 11em
			input[type="radio"],input[type="checkbox"]
				left 0
				margin 0
				padding 0
				position absolute
				top 12px
			&.ck
				font-size 0.929em
				line-height 1.5em
				margin-left 12.5em
				width auto
				margin-top 1em 
				margin-bottom 1em
				input[type="checkbox"]
					top 2px
		&.required
			background url($imgPath+"bullet_red.png?version") no-repeat left 11px
			padding 0 0 0 10px
		.required
			color $colorError
			font-size 1.1em
	input[type="text"],input[type="email"],input[type="tel"],input[type="password"], select, textarea
		background-color #fff
		border 1px solid $grey40
		border-radius 3px
		font 1em/1.5em $family1
		height 30px
		line-height 30px
		outline none
		padding 0 6px 
		width 300px
		&.error
			background-color #fcdddd
			border 1px solid #fc7d7d
		&.disabled
			background $grey10
			border 1px solid #ddd
	input[type="password"]
		font-family Verdana, sans-serif !important
	select
		padding 2px 6px
		height 30px
	textarea
		background-color #fff
		border 1px solid $grey40
		border-radius 3px
		font 1em/1.5em $family1
		height 70px
		padding 7px 10px
		width 300px
		&.error
			background-color #fcdddd
			border 1px solid #fc7d7d
.input_xlarge
	width 480px !important
#referencia
	&.input_xlarge
		width 250px !important
.input_mlarge
	width 398px !important
.input_slarge
	width 382px !important
#descripcion
	&.input_slarge
		+mobile()
			width 150px !important
.input_large
	width 250px !important
.input_medium 
	width 205px !important
.input_xmedium 
	width 120px !important
.input_small 
	width 100px !important
.input_xsmall 
	width 80px !important
label[for="txtAddress"]
	+mobile()
		width 100%

registration.jade

h2 Crear cuenta
			form(method="POST", id="frmRegistration", name="frmRegistration", autocomplete="off") 
				//- data-parsley-validate=""
				.form_control
					label(for="txtName")
						span.required * 
						| Nombres:
					input(type="text", name="txtName", id="txtName", required="", data-parsley-trigger="change",  data-parsley-minlength="2",  data-parsley-maxlength="40", data-parsley-pattern="/^[a-z-ñáéíóúÑÁÉÍÓÚ ]+$/gi")
				.form_control
					label(for="txtLastName") 
						span.required * 
						| Apellidos:
					input(type="text", name="txtLastName", id="txtLastName", required="", data-parsley-trigger="change", data-parsley-minlength="2",  data-parsley-maxlength="50")
				.form_control
					label(for="txtEmail") 
						span.required * 
						| Email:
					input(type="text", name="txtEmail", id="txtEmail", required="", data-parsley-type="email", data-parsley-trigger="change", data-parsley-maxlength="50")
				.form_control
					label
						span.required * 
						| Contraseña:
					input(type="password", name="txtPassword", id="txtPassword1", required="", data-parsley-trigger="change", data-parsley-minlength="8",  data-parsley-maxlength="20")
				.form_control
					label
						span.required * 
						| Repetir Contraseña:
					input(type="password", name="txtRepeatPassword", id="txtRepeatPassword", required="", data-parsley-trigger="change", data-parsley-minlength="8",  data-parsley-maxlength="20", data-parsley-equalto="#txtPassword1", data-parsley-error-message="Debe ingresar la misma contraseña")
				.form_control
					label(for="selDocument") 
						span.required * 
						| Documento
					.form_control_inline 
						.form_control
							select.input_xsmall(id="selDocument", name="selDocument", required="", data-parsley-trigger="change", data-parsley-error-message="Requerido")
								option 
								option(value="1") L.E / DNI
								option(value="2") RUC
								option(value="3") Pasaporte
						.form_control
							input.input_medium(type="tel", name="txtDocument", id="txtDocument", required="", data-parsley-trigger="change")
	

				.form_control
					label(for="txtPhone1") 
						span.required * 
						| Teléfono 1:
					input(type="tel", name="txtPhone1", id="txtPhone1", required="", data-parsley-trigger="change", data-parsley-minlength="3",  data-parsley-maxlength="10")
				.form_control
					label(for="txtPhone2") Teléfono 2:
					input(type="tel", name="txtPhone2", id="txtPhone2", data-parsley-minlength="3",  data-parsley-maxlength="10")
				.form_control
					label 
						span.required * 
						| Género
					.iopinline
						label.ioption(for="radGender1")
							input(id="radGender1", name="radGender", type="radio", required="", data-parsley-trigger="change", data-parsley-errors-container="#genderError", data-parsley-error-message="Debe seleccionar una de estas opciones")
							| Masculino
						label.ioption(for="radGender2")
							input(id="radGender2", name="radGender", type="radio", required="", data-parsley-trigger="change")
							| Femenino
					span#genderError.custom_error

				.form_control
					label(for="txtAddress") 
						span.required * 
						| Dirección
					.form_control_inline 
						.form_control
							select.input_xsmall(id="selAddress", name="selAddress", required="", data-parsley-trigger="change", data-parsley-error-message="Requerido")
								option
								option Via
								option Calle
						.form_control
							input.input_medium(type="text", name="txtAddress", id="txtAddress", required="", data-parsley-trigger="change", data-parsley-maxlength="150")
				.form_control
					label(for="txtDepartment") 
						span.required * 
						| Departamento:
					select(id="selDepartment", name="selDepartment", required="", data-parsley-trigger="change")
						option
						option Lima
				.form_control
					label(for="txtProvince") 
						span.required * 
						| Provincia:
					select(id="selProvince", name="selProvince", required="", data-parsley-trigger="change")
						option Lince
				.form_control
					label(for="txtDistrict") 
						span.required * 
						| Distrito:
					select(id="selDistrict", name="selDistrict", required="", data-parsley-trigger="change")
						option Lince

				.form_control
					label.ioption.ck
						input(id="chkTerms", name="chkTerms", type="checkbox", checked="checked", required="", data-parsley-trigger="change", data-parsley-errors-container="#termsError")
						| He leído y estoy de acuerdo con los 
						a(href="javascript:;", target="_blank", title="Términos y Condiciones") Términos y Condiciones
						span#termsError
				.form_control
					label  
					button(type="submit", id="sbmRegister", class="btn btn_medium mt10", title="Registrarse") Registrarse