feat(plex-options): cambia button por plex-button

andes · Apr 12, 2022 · eb05037 · eb05037
1 parent b4b553b
commit eb05037
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 15 deletions.
diff --git a/src/lib/css/plex-options.scss b/src/lib/css/plex-options.scss
@@ -1,9 +1,18 @@
 plex-options {
-    .options-container {
-        display: flex;        
-    }
-
-    .option-grow {
+    plex-button {
         flex-grow: 1;
+
+        &.active {
+            button {
+                color: #fff;
+                background-color: #0082ad;
+                background-image: none;
+                border-color: #007aa3;
+            }
+        }
+
+        button {
+            width: 100%;
+        }
     }
 }
diff --git a/src/lib/options/options.component.ts b/src/lib/options/options.component.ts
@@ -9,17 +9,14 @@ export interface IPlexOptionsItems {
 @Component({
     selector: 'plex-options',
     template: `
-        <div class="row">
-            <div class="d-flex col flex-wrap">
-                <ng-container *ngFor="let item of items">
-                    <button class="btn btn-primary btn-sm option-grow m-0" (click)="onOptionsClick(item)" [class.active]="active === item.key">
-                        {{ item.label }}
-                    </button>
-                </ng-container>
+            <div class="row">
+                <div class="d-flex col flex-wrap">
+                    <ng-container *ngFor="let item of items">
+                        <plex-button type="info" size="sm" label="{{ item.label }}" (click)="onOptionsClick(item)" [class.active]="active === item.key"></plex-button>
+                    </ng-container>
+                </div>
             </div>
-        </div>
-    `
-})
+    `})
 export class PlexOptionsComponent implements OnInit, OnChanges {
 
     /**