inteligr8/alfresco-content-app
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-content-app.git synced 2025-07-24 17:31:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACS-5347] New styles for filter states (#3274)

Browse Source 
* [ACS-5347] New styles for filter states

* [ACS-5347] Add disabled chips colors
This commit is contained in:
MichalKinas
2023-06-14 11:51:27 +02:00
committed by GitHub
parent fa27e0c05c
commit 9fd306d5b3
7 changed files with 32 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
projects/aca-content/src/lib/components/common/user-info/user-info.component.scss
View File

@@ -13,8 +13,8 @@
line-height: 32px;
text-align: center;
vertical-align: middle;
background: var(--theme-user-initials-background-color);
color: var(--theme-user-intials-text-color);
background: var(--theme-about-panel-border-color);
color: var(--theme-selected-text-color);
border: none;
}

25
projects/aca-content/src/lib/components/search/search-results/search-results.component.scss
View File

@@ -1,8 +1,5 @@
@import '../../../ui/mixins';
$adf-chip-background: #efefef;
$contrast-gray: #646569;
.adf-search-results {
@include flex-row;
@@ -28,13 +25,29 @@ $contrast-gray: #646569;
border-bottom: 1px solid var(--theme-border-color);
.adf-search-filter-chip {
&[disabled] {
&.mat-chip {
background-color: var(--theme-disabled-chip-background-color);
color: var(--theme-search-chip-icon-color);
}
}
&.mat-chip {
background-color: $adf-chip-background;
color: $contrast-gray;
background-color: var(--theme-dropdown-color);
color: var(--theme-selected-text-color);
&:hover,
&:focus {
background-color: var(--theme-grey-background-hover);
}
mat-icon {
color: var(--theme-search-chip-icon-color);
}
}
.adf-search-filter-placeholder {
color: $contrast-gray;
color: var(--theme-selected-text-color);
}
}
}

4
projects/aca-content/src/lib/components/sidenav/user-menu/user-menu.component.scss
View File

@@ -8,7 +8,7 @@
line-height: 32px;
text-align: center;
vertical-align: middle;
background: var(--theme-user-initials-background-color);
color: var(--theme-user-intials-text-color);
background: var(--theme-about-panel-border-color);
color: var(--theme-selected-text-color);
border: none;
}

2
projects/aca-content/src/lib/components/view-profile/view-profile.component.scss
View File

@@ -11,7 +11,7 @@ app-view-profile {
width: 100%;
height: 32px;
padding: 32px 0;
border-bottom: 1px solid var(--theme-header-border-color);
border-bottom: 1px solid var(--theme-about-panel-border-color);
}
.app-profile-title {

2
projects/aca-content/src/lib/ui/overrides/ay11.scss
View File

@@ -162,7 +162,7 @@
}
.mat-datetimepicker-calendar-body-active .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-selected {
background-color: var(--theme-datetimepicker-cell-focus-background);
background-color: var(--theme-about-panel-border-color);
color: var(--theme-datetimepicker-font-color);
}

15
projects/aca-content/src/lib/ui/variables/variables.scss
View File

@@ -22,20 +22,19 @@ $grey-hover-background: rgba(33, 33, 33, 0.24);
$blue-save-button-background: #1f74db;
$black-heading: #4e4c4c;
$grey-dropdown-background: #eee;
$grey-background-hover: #e0e0e0;
$grey-divider: rgba(0, 0, 0, 0.22);
$datetimepicker-font-color: rgba(black, 0.87);
$datetimepicker-selected-date-background: #2254b2;
$datetimepicker-cell-background-color: #fff;
$datetimepicker-cell-focus-border-color: #1f74db;
$datetimepicker-cell-focus-background-color: rgba(33, 33, 33, 0.12);
$sidenav-background-color: #f8f8f8;
$selected-text-color: #212121;
$selected-background-color: rgba(31, 116, 219, 0.24);
$action-button-text-color: rgba(33, 35, 40, 0.7);
$page-layout-header-background-color: #fff;
$aca-toolbar-button-background-color: rgba(33, 33, 33, 0.05);
$aca-user-initials-background: rgba(33, 33, 33, 0.12);
$aca-user-initials-text-color: #212121;
$search-chip-icon-color: #757575;
$disabled-chip-background-color: #f5f5f5;
// CSS Variables
$defaults: (
@@ -58,6 +57,7 @@ $defaults: (
--theme-blue-button-color: $blue-save-button-background,
--theme-heading-color: $black-heading,
--theme-dropdown-color: $grey-dropdown-background,
--theme-grey-background-hover: $grey-background-hover,
--theme-grey-divider-color: $grey-divider,
--theme-pagination-background-color: mat.get-color-from-palette($background, background),
--theme-about-panel-border-color: $grey-background,
@@ -67,17 +67,14 @@ $defaults: (
--theme-datetimepicker-selected-date-background: $datetimepicker-selected-date-background,
--theme-datetimepicker-cell-background: $datetimepicker-cell-background-color,
--theme-datetimepicker-cell-focus-border: $datetimepicker-cell-focus-border-color,
--theme-datetimepicker-cell-focus-background: $datetimepicker-cell-focus-background-color,
--theme-sidenav-background-color: $sidenav-background-color,
--theme-selected-text-color: $selected-text-color,
--theme-selected-background-color: $selected-background-color,
--theme-hover-background-color: $grey-text-background,
--theme-action-button-text-color: $action-button-text-color,
--theme-header-border-color: $grey-background,
--theme-page-layout-header-background-color: $page-layout-header-background-color,
--theme-app-toolbar-button-background-color: $aca-toolbar-button-background-color,
--theme-user-initials-background-color: $aca-user-initials-background,
--theme-user-intials-text-color: $aca-user-initials-text-color
--theme-search-chip-icon-color: $search-chip-icon-color,
--theme-disabled-chip-background-color: $disabled-chip-background-color
);
// propagates SCSS variables into the CSS variables scope

2
projects/aca-shared/src/lib/components/page-layout/page-layout.component.scss
View File

@@ -31,7 +31,7 @@
align-items: center;
border-radius: 6px;
height: 32px;
background: var(--theme-app-toolbar-button-background-color);
background: var(--theme-grey-text-background-color);
color: var(--theme-selected-text-color);
line-height: 32px;