diff --git a/src/lib/css/plex-table.scss b/src/lib/css/plex-table.scss index 6094a7da..7b351a42 100644 --- 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 index 01a9ad99..41a9134a 100644 --- 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}}" >