From 9fd306d5b3de840f2a7b9b832d432411776aa09d Mon Sep 17 00:00:00 2001 From: MichalKinas <113341662+MichalKinas@users.noreply.github.com> Date: Wed, 14 Jun 2023 11:51:27 +0200 Subject: [PATCH] [ACS-5347] New styles for filter states (#3274) * [ACS-5347] New styles for filter states * [ACS-5347] Add disabled chips colors --- .../common/user-info/user-info.component.scss | 4 +-- .../search-results.component.scss | 25 ++++++++++++++----- .../user-menu/user-menu.component.scss | 4 +-- .../view-profile/view-profile.component.scss | 2 +- .../src/lib/ui/overrides/ay11.scss | 2 +- .../src/lib/ui/variables/variables.scss | 15 +++++------ .../page-layout/page-layout.component.scss | 2 +- 7 files changed, 32 insertions(+), 22 deletions(-) diff --git a/projects/aca-content/src/lib/components/common/user-info/user-info.component.scss b/projects/aca-content/src/lib/components/common/user-info/user-info.component.scss index 1d168b2ece..de0fe59cb9 100644 --- a/projects/aca-content/src/lib/components/common/user-info/user-info.component.scss +++ b/projects/aca-content/src/lib/components/common/user-info/user-info.component.scss @@ -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; } diff --git a/projects/aca-content/src/lib/components/search/search-results/search-results.component.scss b/projects/aca-content/src/lib/components/search/search-results/search-results.component.scss index c6cd41c5d7..8a89d9d726 100644 --- a/projects/aca-content/src/lib/components/search/search-results/search-results.component.scss +++ b/projects/aca-content/src/lib/components/search/search-results/search-results.component.scss @@ -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); } } } diff --git a/projects/aca-content/src/lib/components/sidenav/user-menu/user-menu.component.scss b/projects/aca-content/src/lib/components/sidenav/user-menu/user-menu.component.scss index 01066a8eac..36cc0442b0 100644 --- a/projects/aca-content/src/lib/components/sidenav/user-menu/user-menu.component.scss +++ b/projects/aca-content/src/lib/components/sidenav/user-menu/user-menu.component.scss @@ -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; } diff --git a/projects/aca-content/src/lib/components/view-profile/view-profile.component.scss b/projects/aca-content/src/lib/components/view-profile/view-profile.component.scss index 00d6a85534..73134f9b6c 100644 --- a/projects/aca-content/src/lib/components/view-profile/view-profile.component.scss +++ b/projects/aca-content/src/lib/components/view-profile/view-profile.component.scss @@ -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 { diff --git a/projects/aca-content/src/lib/ui/overrides/ay11.scss b/projects/aca-content/src/lib/ui/overrides/ay11.scss index 8d5976f934..dac2b8593f 100644 --- a/projects/aca-content/src/lib/ui/overrides/ay11.scss +++ b/projects/aca-content/src/lib/ui/overrides/ay11.scss @@ -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); } diff --git a/projects/aca-content/src/lib/ui/variables/variables.scss b/projects/aca-content/src/lib/ui/variables/variables.scss index 6ce50b4d07..cd6559c85c 100644 --- a/projects/aca-content/src/lib/ui/variables/variables.scss +++ b/projects/aca-content/src/lib/ui/variables/variables.scss @@ -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 diff --git a/projects/aca-shared/src/lib/components/page-layout/page-layout.component.scss b/projects/aca-shared/src/lib/components/page-layout/page-layout.component.scss index 0c5b20304b..a5c31058fd 100644 --- a/projects/aca-shared/src/lib/components/page-layout/page-layout.component.scss +++ b/projects/aca-shared/src/lib/components/page-layout/page-layout.component.scss @@ -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;