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-15296] added design tokens to InfoDrawerComponent (#9051)

Browse Source 
* [AAE-15296] added design tokens to InfoDrawerComponent

* [AAE-15296] added access to theme to component variables
This commit is contained in:
tomasz hanaj
2023-11-02 13:10:05 +01:00
committed by GitHub
parent 54e95bc5f7
commit 15f82c812c
5 changed files with 55 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
lib/core/src/lib/info-drawer/info-drawer-layout.component.scss
View File

@@ -20,13 +20,8 @@ $adf-info-drawer-icon-size-half: 24px !default;
& .mat-tab-label {
font-weight: bold;
text-align: left;
color: var(--theme-accent-color);
text-transform: uppercase;
opacity: 1;
&-active {
color: var(--theme-primary-color);
}
}
&-header {

5
lib/core/src/lib/info-drawer/info-drawer.component.html
View File

@@ -9,6 +9,11 @@
<ng-template #tabLayout>
<mat-tab-group [(selectedIndex)]="selectedIndex" class="adf-info-drawer-tabs" (selectedTabChange)="onTabChange($event)">
<mat-tab *ngFor="let contentBlock of contentBlocks"
#tab
[labelClass]="[
'adf-info-drawer-tab',
tab.isActive ? 'adf-info-drawer-tab--active' : '',
]"
[label]="contentBlock.label | translate"
class="adf-info-drawer-tab">

31
lib/core/src/lib/info-drawer/info-drawer.component.scss
View File

@@ -55,3 +55,34 @@
}
}
}
.adf-info-drawer-tab {
color: var(--adf-info-drawer-tab-default-color);
background-color: var(--adf-info-drawer-tab-default-background);
border-bottom: var(--adf-info-drawer-tab-default-bottom-line);
opacity: 1;
&--active {
color: var(--adf-info-drawer-tab-active-unfocused-color);
background-color: var(--adf-info-drawer-tab-active-unfocused-background);
border-bottom: var(--adf-info-drawer-tab-active-unfocused-bottom-line);
&:focus {
color: var(--adf-info-drawer-tab-active-focused-color);
background-color: var(--adf-info-drawer-tab-active-focused-background);
border-bottom: var(--adf-info-drawer-tab-active-focused-bottom-line);
}
}
&:hover:not([class*='--disabled'], [class*='--active']) {
color: var(--adf-info-drawer-tab-hover-color);
background-color: var(--adf-info-drawer-tab-hover-background);
border-bottom: var(--adf-info-drawer-tab-hover-bottom-line);
}
&--disabled {
color: var(--adf-info-drawer-tab-disabled-color);
background-color: var(--adf-info-drawer-tab-disabled-background);
border-bottom: var(--adf-info-drawer-tab-disabled-bottom-line);
}
}

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

@@ -1,6 +1,10 @@
@use './reference-variables' as *;
@use '@angular/material' as mat;
@mixin adf-components-variables($theme) {
$accent: map-get($theme, accent);
$test: mat.get-color-from-palette($accent);
@mixin adf-components-variables() {
$defaults: (
--adf-card-view-background: $adf-ref-card-background,
--adf-card-view-border: $adf-ref-card-border,
@@ -45,6 +49,19 @@
--adf-identity-user-info-line-height: $adf-ref-line-height,
--adf-identity-user-info-font-size: var(--theme-adf-picture-1-font-size),
--adf-user-info-container-margin-right: $adf-ref-margin-right,
--adf-info-drawer-tab-default-color: mat.get-color-from-palette($accent),
--adf-info-drawer-tab-default-background:unset,
--adf-info-drawer-tab-default-bottom-line:unset,
--adf-info-drawer-tab-hover-color:mat.get-color-from-palette($accent),
--adf-info-drawer-tab-hover-background:unset,
--adf-info-drawer-tab-hover-bottom-line:unset,
--adf-info-drawer-tab-active-unfocused-color: mat.get-color-from-palette($primary),
--adf-info-drawer-tab-active-unfocused-background:unset,
--adf-info-drawer-tab-active-unfocused-bottom-line:unset,
--adf-info-drawer-tab-active-focused-background: mat.get-color-from-palette($primary),
--adf-info-drawer-tab-active-focused-color:unset,
--adf-info-drawer-tab-active-focused-bottom-line:unset,
);
// propagates SCSS variables into the CSS variables scope

2
lib/core/src/lib/styles/_index.scss
View File

@@ -113,7 +113,7 @@
@include mat-datetimepicker-theme($theme);
@include adf-snackbar-theme;
@include adf-material-theme;
@include adf-components-variables;
@include adf-components-variables($theme);
}
$adf-custom-theme-sizes: (