Add data survey custom select styles

This commit is contained in:
Pablo Bonilla 2021-07-10 22:16:42 -06:00
parent 792e80081b
commit c4dd44716c
No known key found for this signature in database
GPG Key ID: 46877262B8DE47E2
4 changed files with 86 additions and 5 deletions

View File

@ -123,7 +123,7 @@
> >
<div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content"> <div class="modal-content">
<form class="ds-form" name="editForm" role="form" novalidate (ngSubmit)="save()" [formGroup]="editForm"> <form autocomplete="off" class="ds-form" name="editForm" role="form" novalidate (ngSubmit)="save()" [formGroup]="editForm">
<div class="modal-header"> <div class="modal-header">
<h1 class="modal-title" id="exampleModalLongTitle">Crear Encuesta</h1> <h1 class="modal-title" id="exampleModalLongTitle">Crear Encuesta</h1>
</div> </div>
@ -219,7 +219,13 @@
<button type="button" class="ds-btn ds-btn--secondary" data-dismiss="modal"> <button type="button" class="ds-btn ds-btn--secondary" data-dismiss="modal">
<fa-icon icon="arrow-left"></fa-icon>&nbsp;&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>
<button type="button" class="ds-btn ds-btn--primary"> <button
type="submit"
id="save-entity"
data-cy="entityCreateSaveButton"
[disabled]="editForm.invalid || isSaving"
class="ds-btn ds-btn--primary"
>
<span jhiTranslate="entity.action.create">Create</span> <span jhiTranslate="entity.action.create">Create</span>
</button> </button>
</div> </div>

View File

@ -0,0 +1,44 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 491.996 491.996" style="enable-background:new 0 0 491.996 491.996; fill: #b4b6b8;" xml:space="preserve">
<g>
<g>
<path d="M484.132,124.986l-16.116-16.228c-5.072-5.068-11.82-7.86-19.032-7.86c-7.208,0-13.964,2.792-19.036,7.86l-183.84,183.848
L62.056,108.554c-5.064-5.068-11.82-7.856-19.028-7.856s-13.968,2.788-19.036,7.856l-16.12,16.128
c-10.496,10.488-10.496,27.572,0,38.06l219.136,219.924c5.064,5.064,11.812,8.632,19.084,8.632h0.084
c7.212,0,13.96-3.572,19.024-8.632l218.932-219.328c5.072-5.064,7.856-12.016,7.864-19.224
C491.996,136.902,489.204,130.046,484.132,124.986z"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

@ -13,7 +13,8 @@ $form-background: #f1f5f9;
} }
} }
input { input,
select {
background-color: $form-background; background-color: $form-background;
border-radius: 15px; border-radius: 15px;
border: 1.75px solid transparent; border: 1.75px solid transparent;
@ -25,7 +26,6 @@ $form-background: #f1f5f9;
&:active { &:active {
background-color: $form-background; background-color: $form-background;
border: 1.75px solid #2962ff; border: 1.75px solid #2962ff;
// color: #313747;
} }
&:read-only { &:read-only {
@ -41,6 +41,37 @@ $form-background: #f1f5f9;
} }
} }
select {
background-color: $form-background !important;
appearance: none;
cursor: pointer !important;
border: none;
outline: 0;
background: url(./../../img_datasurvey/down-arrow.svg) no-repeat right;
background-size: 3.5%;
-webkit-appearance: none;
background-position-x: 94%;
&:focus,
&:active {
background-color: $form-background !important;
border: 1.75px solid #2962ff !important;
}
option {
background-color: #fff !important;
color: #313747 !important;
padding: 1rem !important;
&:hover,
&:focus,
&:active {
background-color: #efefef !important;
}
}
}
label { label {
color: #757d94; color: #757d94;
} }

View File

@ -12,7 +12,7 @@
.modal-header, .modal-header,
.modal-footer { .modal-footer {
border: none; border: none;
padding: 1.5rem; padding: 2rem;
} }
.modal-body { .modal-body {