feat(plex-327): selector de transparecia en table head

andes · Jul 28, 2023 · 432fba0 · 432fba0
1 parent 7005996
commit 432fba0
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/src/lib/css/plex-table.scss b/src/lib/css/plex-table.scss
@@ -1,5 +1,7 @@
 @import "./variables.scss";
 
+$tags: 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100;
+
 plex-table {
     table {
         width: 100%;
@@ -11,7 +13,12 @@ plex-table {
             top: 0 !important;
             z-index: 10 !important;
             height: fit-content;
-            background-color: rgba(255, 255, 255, 0.5) !important;
+
+            @each $tag in $tags {
+                &.opacity-#{$tag} {
+                    background-color: rgba(255, 255, 255, $tag/100) !important;
+                }
+            }
 
             &.sortable {
                 .th-label {
@@ -125,7 +132,11 @@ plex-layout-sidebar {
         table {
             thead {
                 th {
-                    background-color: rgba(0, 39, 56, 0.5) !important;
+                    @each $tag in $tags {
+                        &.opacity-#{$tag} {
+                            background-color: rgba(0, 39, 56, $tag/100) !important;
+                        }
+                    }
                 }
             }
 

diff --git a/src/lib/table/table.component.ts b/src/lib/table/table.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Optional, Output, Self, ViewEncapsulation } from '@angular/core';
+import { Component, EventEmitter, Input, Optional, Output, Self } from '@angular/core';
 import { Observable } from 'rxjs';
 import { PlexColumnDirective } from './columns.directive';
 import { IPlexTableColumns } from './table.interfaces';
@@ -21,6 +21,7 @@ import { IPlexTableColumns } from './table.interfaces';
                             (click)="onColumnClick(column)"
                             *ngIf="vm.displayColumns[column.key] || !column.opcional"
                             [class.column-right]="column.right"
+                            class="opacity-{{headOpacity}}"
                             >
                             <div class="d-flex">
                                 <div class="th-label">
@@ -65,6 +66,8 @@ export class PlexTableComponent {
 
     public _height: string;
 
+    @Input() headOpacity = 0;
+
     /**
      * Indica la altura del listado respecto a su contenedor
      */