From 82540a4496409bbd7e00bcb18b0ae4fe384e8bad Mon Sep 17 00:00:00 2001 From: Ehsan Rezaei Date: Tue, 27 Jun 2023 03:04:39 +0200 Subject: [PATCH] [AAE-15259] Making Identity User Info Component customizable (#8675) * [AAE-15259] Making Identity User Info Component customizable * AAE-15259: Added margin right var --- .../identity-user-info.component.scss | 20 +++++++++---------- .../components/header/header.component.scss | 2 +- .../src/lib/styles/_components-variables.scss | 10 ++++++++-- .../src/lib/styles/_reference-variables.scss | 8 ++++++-- 4 files changed, 25 insertions(+), 15 deletions(-) diff --git a/lib/core/src/lib/identity-user-info/identity-user-info.component.scss b/lib/core/src/lib/identity-user-info/identity-user-info.component.scss index 0f42de3b16..4088c303ee 100644 --- a/lib/core/src/lib/identity-user-info/identity-user-info.component.scss +++ b/lib/core/src/lib/identity-user-info/identity-user-info.component.scss @@ -18,25 +18,25 @@ } &-userinfo-pic { - background: var(--adf-theme-primary-300); + background: var(--adf-identity-user-info-background); display: inline-block; - width: 40px; - height: 40px; + width: var(--adf-identity-user-info-width); + height: var(--adf-identity-user-info-height); border-radius: 100px; text-align: center; font-weight: bolder; - font-size: var(--theme-adf-picture-1-font-size); + font-size: var(--adf-identity-user-info-font-size); text-transform: uppercase; vertical-align: middle; - line-height: 40px; + line-height: var(--adf-identity-user-info-line-height); } &-userinfo-profile-image { - background: var(--adf-theme-primary-300); + background: var(--adf-identity-user-info-background); text-align: center; border-radius: 90%; - width: 40px; - height: 40px; + width: var(--adf-identity-user-info-width); + height: var(--adf-identity-user-info-height); margin-right: 0; cursor: pointer; vertical-align: middle; @@ -132,7 +132,7 @@ } &-userinfo-profile-picture { - background: var(--adf-theme-primary-300); + background: var(--adf-identity-user-info-background); background-size: cover; border-radius: 50%; height: 80px; @@ -144,7 +144,7 @@ &-userinfo-profile-initials { text-transform: uppercase; background-size: cover; - background-color: var(--adf-theme-primary-300); + background-color: var(--adf-identity-user-info-background); border-radius: 50%; height: 80px; width: 80px; diff --git a/lib/core/src/lib/layout/components/header/header.component.scss b/lib/core/src/lib/layout/components/header/header.component.scss index 13eccdd07a..38a4bca467 100644 --- a/lib/core/src/lib/layout/components/header/header.component.scss +++ b/lib/core/src/lib/layout/components/header/header.component.scss @@ -102,7 +102,7 @@ adf-layout-header .mat-toolbar-single-row { } .adf-userinfo-container { - margin-right: 16px; + margin-right: var(--adf-user-info-container-margin-right); } .adf-userinfo-name { diff --git a/lib/core/src/lib/styles/_components-variables.scss b/lib/core/src/lib/styles/_components-variables.scss index 2598388538..e1dcf64548 100644 --- a/lib/core/src/lib/styles/_components-variables.scss +++ b/lib/core/src/lib/styles/_components-variables.scss @@ -28,13 +28,19 @@ --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-header-cell-color: $adf-ref-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, + --adf-package-list-table-row-cell-color: $adf-ref-table-row-cell-color, + --adf-identity-user-info-background: var(--adf-theme-primary-300), + --adf-identity-user-info-height: $adf-ref-height-40, + --adf-identity-user-info-width: $adf-ref-width-40, + --adf-identity-user-info-line-height: $adf-ref-line-height-40, + --adf-identity-user-info-font-size: var(--theme-adf-picture-1-font-size), + --adf-user-info-container-margin-right: $adf-ref-margin-right-8, ); // 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 f5167883b2..b054a6c26a 100644 --- a/lib/core/src/lib/styles/_reference-variables.scss +++ b/lib/core/src/lib/styles/_reference-variables.scss @@ -16,10 +16,14 @@ $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-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); +$adf-ref-table-row-cell-color: rgba(0, 0, 0, 0.87); +$adf-ref-height-40: 40px; +$adf-ref-width-40: 40px; +$adf-ref-line-height-40: 40px; +$adf-ref-margin-right-8: 8px;