eduardo
/
datasurvey
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add custom data survey form styles

This commit is contained in:
Pablo Bonilla 2021-07-09 00:19:21 -06:00
parent 3686de93a8
commit bda6395d9d
No known key found for this signature in database
GPG Key ID: 46877262B8DE47E2
4 changed files with 88 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/main/webapp/app/account/settings/settings.component.html
View File

@ -172,16 +172,24 @@
<div class="col-lg-4 mr-lg-5">
<div class="row">
<div class="w-100">
<p><b>Perfil</b></p>
<p class="ds-title">Perfil</p>
</div>
<div>
<p>Información general de su usuario, el correo electrónico es su identificador en DataSurvey.</p>
<p class="ds-subtitle">Información general de su usuario, el correo electrónico es su identificador en DataSurvey.</p>
</div>
</div>
</div>
<!-- Form -->
<form class="col-lg ml-lg-5 mr-lg-5 pr-lg-5" name="editForm" role="form" novalidate (ngSubmit)="save()" [formGroup]="editForm">
<form
autocomplete="off"
class="ds-form col-lg ml-lg-5 mr-lg-5 pr-lg-5"
name="editForm"
role="form"
novalidate
(ngSubmit)="save()"
[formGroup]="editForm"
>
<div class="row mb-2">
<div class="form-group w-100">
<label class="form-control-label" for="field_email">Correo electrónico</label>
@ -258,16 +266,26 @@
<div class="col-lg-4 mr-lg-5">
<div class="row">
<div class="w-100">
<p><b>Contraseña</b></p>
<p class="ds-title">Contraseña</p>
</div>
<div>
<p>Utilice una contraseña segura al realizar el cambio, este dato debe ser secreto ya que provee acceso a su cuenta.</p>
<p class="ds-subtitle">
Utilice una contraseña segura al realizar el cambio, este dato debe ser secreto ya que provee acceso a su cuenta.
</p>
</div>
</div>
</div>
<!-- Form -->
<form class="col-lg ml-lg-5 mr-lg-5 pr-lg-5" name="passwordForm" role="form" novalidate (ngSubmit)="save()" [formGroup]="passwordForm">
<form
autocomplete="off"
class="ds-form col-lg ml-lg-5 mr-lg-5 pr-lg-5"
name="passwordForm"
role="form"
novalidate
(ngSubmit)="save()"
[formGroup]="passwordForm"
>
<div class="row mb-3 pb-3" style="border-bottom: 1px solid #e7ebf3">
<div class="form-group w-100">
<label class="form-control-label" for="field_password">Contraseña actual</label>
@ -359,7 +377,7 @@
class="ds-btn ds-btn--secondary"
(click)="previousState()"
>
<fa-icon icon="ban"></fa-icon>&nbsp;<span jhiTranslate="entity.action.cancel">Cancel</span>
<fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;<span jhiTranslate="entity.action.cancel">Cancel</span>
</button>
<button

6
src/main/webapp/content/scss/paper-dashboard.scss
View File

@ -35,7 +35,6 @@
// Core CSS
@import 'paper-dashboard/nucleo-outline';
@import 'paper-dashboard/buttons';
@import 'paper-dashboard/datasurvey-buttons';
@import 'paper-dashboard/social-buttons';
@import 'paper-dashboard/animated-buttons';
@import 'paper-dashboard/inputs';
@ -90,3 +89,8 @@
@import 'paper-dashboard/responsive';
@import 'paper-dashboard/media-queries';
// Data Survey
@import 'paper-dashboard/datasurvey-buttons';
@import 'paper-dashboard/datasurvey-form';
@import 'paper-dashboard/datasurvey-global';

46
src/main/webapp/content/scss/paper-dashboard/_datasurvey-form.scss Normal file
View File

@ -0,0 +1,46 @@
// Form variables
$form-background: #f1f5f9;
.ds-form {
.form-group label {
transition: all 0.3s ease-in-out;
}
.form-group:focus-within {
label,
input {
color: #313747;
}
}
input {
background-color: $form-background;
border-radius: 15px;
border: 1.75px solid transparent;
outline: 0;
padding: 1rem !important;
color: #757d94;
&:focus,
&:active {
background-color: $form-background;
border: 1.75px solid #2962ff;
// color: #313747;
}
&:read-only {
background-color: $form-background;
cursor: default;
&:focus,
&:active {
border: 1.75px solid transparent;
color: #757d94;
}
}
}
label {
color: #757d94;
}
}

12
src/main/webapp/content/scss/paper-dashboard/_datasurvey-global.scss Normal file
View File

@ -0,0 +1,12 @@
.ds-title {
color: #313747;
font-weight: 900;
letter-spacing: 0.025rem;
text-transform: uppercase;
font-size: 1.2rem;
}
.ds-subtitle {
color: #757d94;
font-size: 0.9rem;
}