diff --git a/lib/content-services/src/lib/search/components/search-check-list/search-check-list.component.scss b/lib/content-services/src/lib/search/components/search-check-list/search-check-list.component.scss index 198ee758561..2c47984d464 100644 --- a/lib/content-services/src/lib/search/components/search-check-list/search-check-list.component.scss +++ b/lib/content-services/src/lib/search/components/search-check-list/search-check-list.component.scss @@ -1,3 +1,5 @@ +@import 'styles/mat-selectors'; + .adf-search-check-list > div { display: flex; flex-direction: column; @@ -9,6 +11,8 @@ text-overflow: ellipsis; overflow: hidden; width: 100%; + -webkit-font-smoothing: subpixel-antialiased; + margin-top: 1px; } .adf-facet-name { @@ -16,5 +20,15 @@ overflow: hidden; white-space: nowrap; } + + #{$mat-checkbox-box} { + margin-left: 4px; + margin-top: 5px; + margin-bottom: 4px; + } + + label { + padding-left: 0; + } } } diff --git a/lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.scss b/lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.scss index 64b19121c78..922484007ef 100644 --- a/lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.scss +++ b/lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.scss @@ -1,3 +1,6 @@ +@use '@angular/material' as mat; +@import 'styles/mat-selectors'; + .adf-filter { &-button:has(.adf-filter-icon) { margin-left: -7px; @@ -23,7 +26,7 @@ &-container { display: flex; flex-direction: column; - padding: 15px 15px 10px; + padding: 15.5px 15px 10px; color: var(--adf-theme-foreground-text-color-087); .adf-facet-buttons { @@ -43,9 +46,20 @@ font-size: 1.1em; padding-bottom: 5px; color: var(--adf-theme-foreground-text-color-087); + -webkit-font-smoothing: subpixel-antialiased; + } +} + +.adf-search-filter-menu.adf-filter-menu { + min-width: 260px; + + @include mat.elevation(4); + + > div:first-child { + padding: 0; } - &-actions { + .adf-filter-actions { display: flex; justify-content: flex-end; padding: 15px; @@ -53,15 +67,15 @@ > button { font-size: 0.9em; - color: var(--adf-theme-foreground-text-color-087); - } - } -} - -.adf-search-filter-menu.adf-filter-menu { - min-width: 260px; + height: 36px; + width: auto; + padding-left: 16px; + padding-right: 16px; + -webkit-font-smoothing: subpixel-antialiased; - > div:first-child { - padding: 0; + #{$mat-button-label} { + font-weight: unset; + } + } } } diff --git a/lib/content-services/src/lib/search/components/search-text/search-text.component.html b/lib/content-services/src/lib/search/components/search-text/search-text.component.html index 759807ac5a2..3b97888693e 100644 --- a/lib/content-services/src/lib/search/components/search-text/search-text.component.html +++ b/lib/content-services/src/lib/search/components/search-text/search-text.component.html @@ -1,10 +1,17 @@ - + + {{ settings?.placeholder | translate }} - diff --git a/lib/content-services/src/lib/search/components/search-text/search-text.component.scss b/lib/content-services/src/lib/search/components/search-text/search-text.component.scss index 5fa8cd23f13..99014b30f86 100644 --- a/lib/content-services/src/lib/search/components/search-text/search-text.component.scss +++ b/lib/content-services/src/lib/search/components/search-text/search-text.component.scss @@ -1,5 +1,18 @@ .adf-search-text { .adf-search-text-form-field { width: 100%; + height: 58.5px; + + &-clear-button { + min-width: unset; + border-radius: 50%; + height: 1.5em; + width: 1.5em; + margin-right: 8px; + + mat-icon { + margin-right: 0; + } + } } } diff --git a/lib/core/src/lib/styles/_mat-selectors.scss b/lib/core/src/lib/styles/_mat-selectors.scss index ff7c7192420..3792818d04d 100644 --- a/lib/core/src/lib/styles/_mat-selectors.scss +++ b/lib/core/src/lib/styles/_mat-selectors.scss @@ -23,6 +23,7 @@ $mat-chip: '.mat-mdc-chip'; $mat-chip-list: '.mat-mdc-chip-list'; $mat-chip-list-wrapper: '.mat-chip-list-wrapper'; $mat-checkbox: '.mat-mdc-checkbox'; +$mat-checkbox-box: '.mdc-checkbox'; $mat-checkbox-frame: '.mdc-checkbox__checkmark'; $mat-checkbox-label: '.mdc-label'; $mat-checkbox-checked: '.mat-mdc-checkbox-checked';