diff --git a/lib/core/src/lib/about/about-package/package-list.component.html b/lib/core/src/lib/about/about-package/package-list.component.html index f58a2cf6fa..33e1e00656 100644 --- a/lib/core/src/lib/about/about-package/package-list.component.html +++ b/lib/core/src/lib/about/about-package/package-list.component.html @@ -1,11 +1,11 @@ - + - + {{ column.header | translate }} - {{ column.cell(row) }} + {{ column.cell(row) }} - - + + diff --git a/lib/core/src/lib/about/about-package/package-list.component.scss b/lib/core/src/lib/about/about-package/package-list.component.scss new file mode 100644 index 0000000000..faec786e2e --- /dev/null +++ b/lib/core/src/lib/about/about-package/package-list.component.scss @@ -0,0 +1,27 @@ +.adf-package-list-table { + background: var(--adf-package-list-table-background); + + &__header-row { + border-bottom-color: var(--adf-package-list-table-header-border-bottom-color); + border-style: var(--adf-package-list-table-header-border-style); + border-width: var(--adf-package-list-table-header-border-width); + border-bottom-width: var(--adf-package-list-table-header-border-bottom-width); + min-height: var(--adf-package-list-table-header-min-height); + } + + &__header-cell { + color: var(--adf-package-list-table-header-cell-color); + } + + &__row { + border-bottom-color: var(--adf-package-list-table-row-border-bottom-color); + border-style: var(--adf-package-list-table-row-border-style); + border-width: var(--adf-package-list-table-row-border-width); + border-bottom-width: var(--adf-package-list-table-row-border-bottom-width); + min-height: var(--adf-package-list-table-row-min-height); + + &-cell { + color: var(--adf-package-list-table-row-cell-color); + } + } +} diff --git a/lib/core/src/lib/about/about-package/package-list.component.ts b/lib/core/src/lib/about/about-package/package-list.component.ts index 5e84d83d06..e2c57cafef 100644 --- a/lib/core/src/lib/about/about-package/package-list.component.ts +++ b/lib/core/src/lib/about/about-package/package-list.component.ts @@ -15,13 +15,13 @@ * limitations under the License. */ -import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input, OnInit } from '@angular/core'; +import { Component, ChangeDetectionStrategy, Input, OnInit } from '@angular/core'; import { PackageInfo } from '../interfaces'; @Component({ selector: 'adf-about-package-list', templateUrl: './package-list.component.html', - encapsulation: ViewEncapsulation.None, + styleUrls: ['./package-list.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush }) export class PackageListComponent implements OnInit { diff --git a/lib/core/src/lib/styles/_components-variables.scss b/lib/core/src/lib/styles/_components-variables.scss index c036d549e0..2598388538 100644 --- a/lib/core/src/lib/styles/_components-variables.scss +++ b/lib/core/src/lib/styles/_components-variables.scss @@ -22,6 +22,19 @@ --adf-about-server-settings-color: $adf-ref-card-color, --adf-about-server-settings-border-radius: $adf-ref-card-border-radius-4, --adf-about-server-settings-padding: $adf-ref-card-padding-16, + --adf-package-list-table-background: $adf-ref-table-background, + --adf-package-list-table-header-border-bottom-color: $adf-ref-table-header-border-bottom-color, + --adf-package-list-table-header-border-style: $adf-ref-table-header-border-style, + --adf-package-list-table-header-border-bottom-width: $adf-ref-table-header-border-bottom-width, + --adf-package-list-table-header-border-width: $adf-ref-table-header-border-width, + --adf-package-list-table-header-min-height: $adf-ref-table-header-min-height, + --adf-package-list-table-header-cell-color: $adf-table-header-cell-color, + --adf-package-list-table-row-border-bottom-color: $adf-ref-table-row-border-bottom-color, + --adf-package-list-table-row-border-style: $adf-ref-table-row-border-style, + --adf-package-list-table-row-border-bottom-width: $adf-ref-table-row-border-bottom-width, + --adf-package-list-table-row-border-width: $adf-ref-table-row-border-width, + --adf-package-list-table-row-min-height: $adf-ref-table-row-min-height, + --adf-package-list-table-row-cell-color: $adf-table-row-cell-color, ); // propagates SCSS variables into the CSS variables scope diff --git a/lib/core/src/lib/styles/_reference-variables.scss b/lib/core/src/lib/styles/_reference-variables.scss index 83ff6383df..f5167883b2 100644 --- a/lib/core/src/lib/styles/_reference-variables.scss +++ b/lib/core/src/lib/styles/_reference-variables.scss @@ -10,3 +10,16 @@ $adf-ref-select-field-label-color: rgba(0, 0, 0, 0.54); $adf-ref-card-color: rgba(0, 0, 0, 0.87); $adf-ref-card-padding-16: 16px; $adf-ref-card-border-radius-4: 4px; +$adf-ref-table-background: white; +$adf-ref-table-header-border-bottom-color: rgba(0, 0, 0, 0.12); +$adf-ref-table-header-border-style: solid; +$adf-ref-table-header-border-bottom-width: 1px; +$adf-ref-table-header-border-width: 0; +$adf-ref-table-header-min-height: 56px; +$adf-table-header-cell-color: rgba(0, 0, 0, 0.54); +$adf-ref-table-row-border-bottom-color: rgba(0, 0, 0, 0.12); +$adf-ref-table-row-border-style: solid; +$adf-ref-table-row-border-bottom-width: 1px; +$adf-ref-table-row-border-width: 0; +$adf-ref-table-row-min-height: 48px; +$adf-table-row-cell-color: rgba(0, 0, 0, 0.87);