inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-12 17:04:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

[AAE-15259] Making Identity User Info Component customizable (#8675)

Browse Source 
* [AAE-15259] Making Identity User Info Component customizable

* AAE-15259: Added margin right var
This commit is contained in:
Ehsan Rezaei 2023-06-27 03:04:39 +02:00 committed by GitHub
parent 1940d3e81b
commit 82540a4496
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 25 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
lib/core/src/lib/identity-user-info/identity-user-info.component.scss
View File

@ -18,25 +18,25 @@
} }
&-userinfo-pic { &-userinfo-pic {
background: var(--adf-theme-primary-300); background: var(--adf-identity-user-info-background);
display: inline-block; display: inline-block;
width: 40px; width: var(--adf-identity-user-info-width);
height: 40px; height: var(--adf-identity-user-info-height);
border-radius: 100px; border-radius: 100px;
text-align: center; text-align: center;
font-weight: bolder; font-weight: bolder;
font-size: var(--theme-adf-picture-1-font-size); font-size: var(--adf-identity-user-info-font-size);
text-transform: uppercase; text-transform: uppercase;
vertical-align: middle; vertical-align: middle;
line-height: 40px; line-height: var(--adf-identity-user-info-line-height);
} }
&-userinfo-profile-image { &-userinfo-profile-image {
background: var(--adf-theme-primary-300); background: var(--adf-identity-user-info-background);
text-align: center; text-align: center;
border-radius: 90%; border-radius: 90%;
width: 40px; width: var(--adf-identity-user-info-width);
height: 40px; height: var(--adf-identity-user-info-height);
margin-right: 0; margin-right: 0;
cursor: pointer; cursor: pointer;
vertical-align: middle; vertical-align: middle;
@ -132,7 +132,7 @@
} }
&-userinfo-profile-picture { &-userinfo-profile-picture {
background: var(--adf-theme-primary-300); background: var(--adf-identity-user-info-background);
background-size: cover; background-size: cover;
border-radius: 50%; border-radius: 50%;
height: 80px; height: 80px;
@ -144,7 +144,7 @@
&-userinfo-profile-initials { &-userinfo-profile-initials {
text-transform: uppercase; text-transform: uppercase;
background-size: cover; background-size: cover;
background-color: var(--adf-theme-primary-300); background-color: var(--adf-identity-user-info-background);
border-radius: 50%; border-radius: 50%;
height: 80px; height: 80px;
width: 80px; width: 80px;

2
lib/core/src/lib/layout/components/header/header.component.scss
View File

@ -102,7 +102,7 @@ adf-layout-header .mat-toolbar-single-row {
} }
.adf-userinfo-container { .adf-userinfo-container {
margin-right: 16px; margin-right: var(--adf-user-info-container-margin-right);
} }
.adf-userinfo-name { .adf-userinfo-name {

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

@ -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-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-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-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-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-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-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-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-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 // propagates SCSS variables into the CSS variables scope

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

@ -16,10 +16,14 @@ $adf-ref-table-header-border-style: solid;
$adf-ref-table-header-border-bottom-width: 1px; $adf-ref-table-header-border-bottom-width: 1px;
$adf-ref-table-header-border-width: 0; $adf-ref-table-header-border-width: 0;
$adf-ref-table-header-min-height: 56px; $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-bottom-color: rgba(0, 0, 0, 0.12);
$adf-ref-table-row-border-style: solid; $adf-ref-table-row-border-style: solid;
$adf-ref-table-row-border-bottom-width: 1px; $adf-ref-table-row-border-bottom-width: 1px;
$adf-ref-table-row-border-width: 0; $adf-ref-table-row-border-width: 0;
$adf-ref-table-row-min-height: 48px; $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;