Skip to content
This repository has been archived by the owner on Apr 6, 2023. It is now read-only.

Commit

Permalink
feat: add class error
Browse files Browse the repository at this point in the history
  • Loading branch information
@ignaciorodrigues1
ignaciorodrigues1 committed Mar 21, 2019
1 parent 7070885 commit fbb4422
Show file tree
Hide file tree
Showing 2 changed files with 73 additions and 58 deletions.
96 changes: 47 additions & 49 deletions assets/scss/core/_base.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,30 @@ textarea {
border: 1px solid $dp-color-yellow;
}
}

.checkmark {
position: absolute;
left: 0;
height: 16px;
width: 16px;
border: 1px solid $dp-color-grey;
border-radius: $dp-border-radius;
background-color: $dp-color-white;
pointer-events: none;

&:after {
content: '';
position: absolute;
left: 5px;
top: 1px;
width: 5px;
height: 10px;
border: solid $dp-color-white;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
}
}

/* validate form*/
.field-group {
.field-item {
Expand All @@ -87,57 +111,11 @@ textarea {
/* Field to 50% percent */
&__checkbox {
cursor: pointer;
display: flex;
position: relative;

label {
margin-top: 12px;
margin-left: -30px;
font-weight: normal;
}

input[type='checkbox'] {
height: 40px;
opacity: 0;
z-index: 0;
cursor: pointer;
margin-left: -20px;
flex: 0 1 80px;

&:checked {
& ~ .checkmark {
border-color: $dp-color-green;
background-color: $dp-color-green;

&:after {
display: block;
}
}
}
}

.checkmark {
position: absolute;
left: 0;
height: 16px;
width: 16px;
border: 1px solid $dp-color-grey;
border-radius: $dp-border-radius;
background-color: $dp-color-white;
pointer-events: none;
bottom: 32%;

&:after {
content: '';
position: absolute;
left: 5px;
top: 1px;
width: 5px;
height: 10px;
border: solid $dp-color-white;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
}
vertical-align: middle;
margin-left: 25px;
}
}

Expand All @@ -151,6 +129,25 @@ textarea {
}
}

input[type='checkbox'] {
opacity: 0;
z-index: 0;
cursor: pointer;
zoom: 2.5;
position: absolute;

&:checked {
& ~ .checkmark {
border-color: $dp-color-green;
background-color: $dp-color-green;

&:after {
display: block;
}
}
}
}

input:not([type='checkbox']) {
padding: 10px 12px;
height: 40px;
Expand Down Expand Up @@ -202,7 +199,8 @@ input[type="tel"] {
.error {
input,
select,
textarea {
textarea,
.checkmark {
border: 1px solid $dp-color-red;
}

Expand Down
35 changes: 26 additions & 9 deletions assets/templates/signup.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,47 +44,64 @@ <h5>Regístrate</h5>
<ul class="field-group">
<li class="field-item">
<ul class="field-group">
<li class="field-item field-item--50 m-bottom--lv5">
<li class="field-item field-item--50 m-bottom--lv5 error">
<label for="name">Nombre:</label>
<input type="name" name="name" id="name" placeholder="Nombre">
<div class="wrapper-errors bounceIn">
<p class="error-message">¡Ouch! Este campo está vacío</p>
</div>
</li>
<li class="field-item field-item--50 m-bottom--lv5">
<li class="field-item field-item--50 m-bottom--lv5 error">
<label for="lastname">Apellido:</label>
<input type="lastname" name="name" id="lastname" placeholder="Apellido">
<div class="wrapper-errors bounceIn">
<p class="error-message">¡Ouch! Este campo está vacío</p>
</div>
</li>
</ul>
</li>
<li class="field-item m-bottom--lv5">
<li class="field-item m-bottom--lv5 error">
<label for="phone">Teléfono:</label>
<input type="tel" name="phone" id="phone" placeholder="9 11 2345-6789">
<div class="wrapper-errors bounceIn">
<p class="error-message">¡Ouch! Este campo está vacío</p>
</div>
</li>
</ul>
</fieldset><!-- personal information -->
<fieldset>
<ul class="field-group">
<legend>Usuario y contraseña</legend>
<li class="field-item m-bottom--lv5">
<li class="field-item m-bottom--lv5 error">
<label for="email">Email:</label>
<input type="email" name="email" id="email" placeholder="Tu Email será tu nombre de usuario">
<div class="wrapper-errors bounceIn">
<p class="error-message">¡Ouch! Este campo está vacío</p>
</div>
</li>
<li class="field-item m-bottom--lv5">
<li class="field-item m-bottom--lv5 error">
<label for="password">Contraseña:</label>
<input type="password" name="password" id="password" placeholder="Escribe tu clave secreta">
<div class="wrapper-errors bounceIn">
<p class="error-message">¡Ouch! Este campo está vacío</p>
</div>
</li>
</ul>
</fieldset><!-- user and password -->
<fieldset>
<legend>Politica de privacidad y promociones</legend>
<ul class="field-group">
<li class="field-item field-item__checkbox">
<li class="field-item field-item__checkbox error">
<input type="checkbox" name="acepto_politicas">
<span class="checkmark"></span>
<label for="acepto_politicas">Acepto la <a class="link-green" href="#">Política de Privacidad</a> de Doppler.</label>
<span class="checkmark"></span><label for="acepto_politicas"> Acepto la <a class="link-green" href="#">Política de Privacidad</a> de Doppler.</label>
<div class="wrapper-errors bounceIn">
<p class="error-message">¡Ouch! Este campo está vacío</p>
</div>
</li>
<li class="field-item field-item__checkbox m-bottom--lv5">
<input type="checkbox" name="acepto_promociones">
<span class="checkmark"></span>
<label for="acepto_promociones">Acepto recibir las promociones de Doppler y sus aliados.</label>
<label for="acepto_promociones"> Acepto recibir las promociones de Doppler y sus aliados.</label>
</li>
</ul>
<button type="button" class="dp-button button-medium primary-green">Crear cuenta</button>
Expand Down

0 comments on commit fbb4422

Please sign in to comment.