fix(accordion): se arregla layout interno (#239)

andes · Oct 30, 2020 · 33f5fbb · 33f5fbb
1 parent 8cf2019
commit 33f5fbb
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 8 deletions.
diff --git a/src/demo/app/accordion/accordion.html b/src/demo/app/accordion/accordion.html
@@ -3,7 +3,7 @@
         <plex-accordion>
             <plex-panel (toggle)="toggle($event)" active="true">
                 <div plex-accordion-title>
-                    Título con elementos html
+                    <div>Título con elementos html</div>
                     <plex-bool [(ngModel)]="test" type="slide" label="¿Está activo?" name="activo"
                                (change)="bool($event)">
                     </plex-bool>

diff --git a/src/lib/accordion/panel.component.ts b/src/lib/accordion/panel.component.ts
@@ -5,19 +5,17 @@ import { PlexAccordionComponent } from './accordion.component';
     selector: 'plex-panel',
     template: ` <div class="card">
                     <div class="card-header" role="tab" id="headingOne" (click)="selectPanel()">
-                    <h5 class="mb-0 hover">
                         <a  *ngIf="tituloPrincipal" class="card-action" role="button" data-toggle="collapse" data-parent="#accordion" aria-expanded="false" aria-controls="collapseOne">
                             <plex-icon type="default" size="xl" [name]="icon"></plex-icon>
                             <span class="title ml-1">
                                 {{tituloPrincipal}}
                             </span>
                         </a>
-                        <a *ngIf="!tituloPrincipal" class="card-action" role="button" data-toggle="collapse" data-parent="#accordion" aria-expanded="false" aria-controls="collapseOne">
-                            <span class="title ml-1">
+                        <a class="card-action hover" *ngIf="!tituloPrincipal">
+                            <div>
                                 <ng-content select="[plex-accordion-title]"></ng-content>
-                            </span>
+                            </div>
                         </a>
-                    </h5>
                     </div>
 
                     <div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingOne" [ngClass]="{show: active}">

diff --git a/src/lib/css/plex-accordion.scss b/src/lib/css/plex-accordion.scss
@@ -1,6 +1,6 @@
 plex-accordion {
   .card-header {
-    &> div {
+    & > div {
       width: 100%;
     }
     display: flex;
@@ -14,14 +14,24 @@ plex-accordion {
   .card-action {
     display: flex;
     align-items: flex-start;
-    .title {
+    width: 100%;
+
+    .title,
+    > div {
+      width: 100%;
       margin-left: 0.5rem;
       &:hover,
       :focus {
         color: $blue;
       }
     }
   }
+  [plex-accordion-title] {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
 }
 
 // Inverted