Skip to content

Instantly share code, notes, and snippets.

@anareyna

anareyna/forms.styl

Created September 11, 2014 19:28
Show Gist options
  • Save anareyna/1cfd87e1be20daf67a67 to your computer and use it in GitHub Desktop.
Save anareyna/1cfd87e1be20daf67a67 to your computer and use it in GitHub Desktop.
Download ZIP
formularios
Raw
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%
Raw
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment