Marcelo Puebla / autoservicio-axion

Commit 5541ec9631e929982cd2de081566e02b70d36b0d

Authored by Marcelo Puebla 2020-01-30 11:13:14 -0300

Exists in develop

Add

Boton de cierre para modal sinonimos

Showing 2 changed files with 12 additions and 1 deletions Show diff stats

src/app/shared/sinonimo/sinonimo.component.html

Diff comments View file @ 5541ec9

 <div class="bg-primary rounded text-white">
-  <div class="modal-header">
+  <div class="modal-header pt-5">
+    <img
+      draggable="false"
+      ondragstart="return false;"
+      (contextmenu)="false"
+      (click)="modalRef.hide()"
+      class="btn-effect icon-30 mt-2 mr-2 position-absolute right-0 top-0"
+      src="assets/img/icono-cancelar-blanco.svg">
     <p class="col-7 h4 px-0 align-self-center">{{articulo.DetArt}}</p>
     <div class="col-5 pr-0 text-right">
       <p *ngFor="let s of sinonimos; let i = index">
         <span
           class="btn-effect"
           (click)="scrollTo(i)">
           Ir a opción {{i+1}}
           <i class="far fa-hand-point-left"></i>
         </span>
       </p>
     </div>
   </div>
   <div class="modal-body lista-sinonimos scroll-y-visible my-2 mr-2">
     <div *ngFor="let s of sinonimos; let i = index">
       <div [id]="i"></div>
       <hr [hidden]="i === 0" class="bg-white">
       <div *ngFor="let articulo of s.productos">
         <div class="custom-control custom-checkbox">
           <input
             type="checkbox"
             class="custom-control-input"
             [(ngModel)]="articulo.seleccionado"
             (click)="selectSinonimo(i, articulo)"
             [id]="articulo.id">
           <label
             class="custom-control-label"
             [for]="articulo.id">
             {{articulo.DET_LAR.toUpperCase()}}
           </label>
         </div>
       </div>
     </div>
   </div>
   <div class="modal-footer">
     <div
       [ngClass]="validate()"
       class="d-inline-block py-1 bg-white badge-pill text-primary"
       (click)="continue()">
       CONTINUAR
       <img
         draggable="false"
         ondragstart="return false;"
         (contextmenu)="false"
         class="icon-30"
         src="assets/img/ir-color.svg">
     </div>
   </div>
 </div>

src/styles.scss

Diff comments View file @ 5541ec9

 @import "scss/styles-bootstrap.scss";
 @import "scss/typography.scss";
 @import "scss/height-width.scss";
 @import "scss/animations.scss";
 @import "scss/icons.scss";
 @import "scss/scroll.scss";
 @import "node_modules/bootstrap/scss/_variables.scss";
 @font-face {
   font-family: "Gotham";
   font-style: normal;
   font-weight: normal;
   src: url("assets/fonts/gotham-medium.woff") format("woff");
 }
 html,
 body {
   max-height: 100vh;
   height: 100%;
   font-family: "Gotham";
   overflow: hidden;
   user-select: none;
 }
 body.media-pantalla {
   height: calc(50%) !important;
   position: absolute;
   bottom: 0;
   width: 100%;
   background-color: #3d3d3d;
 }
 .btn-effect {
   transition: all 0.3s !important;
   &:hover {
     cursor: pointer !important;
     opacity: 0.7 !important;
   }
   &:active {
     transform: scale(1.02) !important;
   }
 }
 .cursor-pointer {
   cursor: pointer;
 }
 p {
   margin: 0 !important;
 }
 .img-in-top {
   position: absolute;
   top: -35px;
   left: 50%;
   height: 70px;
   -webkit-transform: translateX(-50%);
   transform: translateX(-50%);
 }
 .right-0 {
   right: 0;
 }
+.top-0 {
+  top: 0;
+}
 .left-0 {
   left: 0;
 }
 .rotate-45 {
   transform: rotate(45deg);
 }
 .rotate-90 {
   transform: rotate(90deg);
 }
 .rotate-90-neg {
   transform: rotate(-90deg);
 }
 .rotate-180-neg {
   transform: rotate(-180deg);
 }
 .disabled {
   opacity: 0.5;
 }
 .modal-content.media-pantalla {
   margin-top: auto !important;
   margin-bottom: 50px !important;
 }
 .modal-content {
   background: transparent !important;
 }