inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[AAE-15236] Making about component panel styles configurable (#8660)

Browse Source 
* Rebasing

* AAE-15236: Fixing syntax
This commit is contained in:
Ehsan Rezaei
2023-06-14 08:15:49 +02:00
committed by GitHub
parent 18c3eff472
commit 64f9d0414d
5 changed files with 26 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
lib/core/src/lib/about/about.component.html
View File

@@ -1,8 +1,8 @@
<mat-accordion [togglePosition]="'before'"> <mat-accordion [togglePosition]="'before'" class="adf-about-panel">
<ng-container *ngFor="let panel of panels"> <ng-container *ngFor="let panel of panels">
<mat-expansion-panel> <mat-expansion-panel>
<mat-expansion-panel-header> <mat-expansion-panel-header class="adf-about-panel-header">
<mat-panel-title>{{panel.label}}</mat-panel-title> <mat-panel-title class="adf-about-panel-header__title">{{panel.label}}</mat-panel-title>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<ng-container *ngTemplateOutlet="panel.layoutTemplate"></ng-container> <ng-container *ngTemplateOutlet="panel.layoutTemplate"></ng-container>
</mat-expansion-panel> </mat-expansion-panel>

9
lib/core/src/lib/about/about.component.scss Normal file
View File

@@ -0,0 +1,9 @@
.adf-about-panel {
&-header {
height: var(--adf-about-panel-header-height);
&__title {
color: var(--adf-about-panel-header-title-color);
}
}
}

1
lib/core/src/lib/about/about.component.ts
View File

@@ -21,6 +21,7 @@ import { AboutPanelDirective } from './about-panel.directive';
@Component({ @Component({
selector: 'adf-about', selector: 'adf-about',
templateUrl: './about.component.html', templateUrl: './about.component.html',
styleUrls: ['about.component.scss'],
encapsulation: ViewEncapsulation.None encapsulation: ViewEncapsulation.None
}) })
export class AboutComponent { export class AboutComponent {

14
lib/core/src/lib/styles/_components-variables.scss
View File

@@ -2,15 +2,17 @@
@mixin adf-components-variables() { @mixin adf-components-variables() {
$defaults: ( $defaults: (
--adf-edit-task-and-service-filter-header-title-color: $adf-ref-edit-task-and-service-filter-header-title-color,
--adf-edit-task-and-service-filter-header-description-color: $adf-ref-edit-task-and-service-filter-header-description-color,
--adf-edit-task-and-service-filter-content-text-label-color: $adf-ref-edit-task-and-service-filter-content-text-label-color,
--adf-edit-task-and-service-filter-content-select-label-color: $adf-ref-edit-task-and-service-filter-content-select-label-color,
--adf-edit-task-and-service-filter-header-height: $adf-ref-edit-task-and-service-filter-header-height,
--adf-card-view-background: $adf-ref-card-background, --adf-card-view-background: $adf-ref-card-background,
--adf-card-view-border: $adf-ref-card-border, --adf-card-view-border: $adf-ref-card-border,
--adf-card-view-border-color: $adf-ref-card-border-color, --adf-card-view-border-color: $adf-ref-card-border-color,
--adf-card-view-border-radius: $adf-ref-card-border-radius --adf-card-view-border-radius: $adf-ref-card-border-radius,
--adf-edit-task-and-service-filter-header-title-color: $adf-ref-title-color,
--adf-edit-task-and-service-filter-header-description-color: $adf-ref-description-color,
--adf-edit-task-and-service-filter-content-text-label-color: $adf-ref-text-field-label-color,
--adf-edit-task-and-service-filter-content-select-label-color: $adf-ref-select-field-label-color,
--adf-edit-task-and-service-filter-header-height: $adf-ref-height-48,
--adf-about-panel-header-height: $adf-ref-height-48,
--adf-about-panel-header-title-color: $adf-ref-title-color,
); );
// propagates SCSS variables into the CSS variables scope // propagates SCSS variables into the CSS variables scope

12
lib/core/src/lib/styles/_reference-variables.scss
View File

@@ -1,11 +1,9 @@
$adf-ref-edit-task-and-service-filter-header-title-color: rgba(0, 0, 0, 0.87);
$adf-ref-edit-task-and-service-filter-header-description-color: rgba(0, 0, 0, 0.54);
$adf-ref-edit-task-and-service-filter-header-height: 48px;
$adf-ref-edit-task-and-service-filter-content-text-label-color: rgba(0, 0, 0, 0.54);
$adf-ref-edit-task-and-service-filter-content-text-input-color: rgba(0, 0, 0, 0.87);
$adf-ref-edit-task-and-service-filter-content-select-label-color: rgba(0, 0, 0, 0.54);
$adf-ref-edit-task-and-service-filter-content-select-input-color: rgba(0, 0, 0, 0.87);
$adf-ref-card-background: white; $adf-ref-card-background: white;
$adf-ref-card-border: unset; $adf-ref-card-border: unset;
$adf-ref-card-border-color: unset; $adf-ref-card-border-color: unset;
$adf-ref-card-border-radius: 0; $adf-ref-card-border-radius: 0;
$adf-ref-height-48: 48px;
$adf-ref-title-color: rgba(0, 0, 0, 0.87);
$adf-ref-description-color: rgba(0, 0, 0, 0.54);
$adf-ref-text-field-label-color: rgba(0, 0, 0, 0.54);
$adf-ref-select-field-label-color: rgba(0, 0, 0, 0.54);