diff --git a/src/theme/ItaliaTheme/Components/_search.scss b/src/theme/ItaliaTheme/Components/_search.scss deleted file mode 100644 index eb2d2dc1a..000000000 --- a/src/theme/ItaliaTheme/Components/_search.scss +++ /dev/null @@ -1,12 +0,0 @@ -.search-view { - label.has-prepend { - z-index: unset; - } - - .react-select__option--is-focused { - border-color: var(--focus-outline-color) !important; - box-shadow: 0 0 0 2px var(--focus-outline-color) !important; - outline: none !important; - background-color: #0062e2; - } -} diff --git a/src/theme/ItaliaTheme/Subsites/ItaliaTheme/Blocks/_searchSections.scss b/src/theme/ItaliaTheme/Subsites/ItaliaTheme/Blocks/_searchSections.scss index 4e7a77fec..2ba2a51c6 100644 --- a/src/theme/ItaliaTheme/Subsites/ItaliaTheme/Blocks/_searchSections.scss +++ b/src/theme/ItaliaTheme/Subsites/ItaliaTheme/Blocks/_searchSections.scss @@ -57,12 +57,13 @@ .search-container { .filter-wrapper.select-filter { .react-select__control { - .react-select__placeholder { - color: $subsite-primary-text !important; + .react-select__placeholder, + .react-select__single-value { + color: color-contrast($subsite-primary) !important; } .react-select__indicators svg { - fill: $subsite-primary-text; + fill: color-contrast($subsite-primary); } } } @@ -70,15 +71,15 @@ .date-filter { .DateRangePickerInput { .DateInput_input { - color: $subsite-primary-text; + color: color-contrast($subsite-primary); } .DateRangePickerInput_arrow .DateRangePickerInput_arrow_svg { - fill: $subsite-primary-text; + fill: color-contrast($subsite-primary); } .DateRangePickerInput_clearDates svg { - fill: $subsite-primary-text; + fill: color-contrast($subsite-primary); } } } @@ -87,43 +88,42 @@ .bg-secondary { .search-container { - &.filter-wrapper { - .select-filter { - .react-select__control { - .react-select__placeholder { - color: $subsite-secondary-text !important; - } + .filter-wrapper.select-filter { + .react-select__control { + .react-select__placeholder, + .react-select__single-value { + color: color-contrast($subsite-secondary) !important; + } - .react-select__indicators svg { - fill: $subsite-secondary-text; - } + .react-select__indicators svg { + fill: color-contrast($subsite-secondary); } } &.date-filter { .DateRangePickerInput { .DateInput_input { - color: $subsite-secondary-text; + color: color-contrast($subsite-secondary); } .DateRangePickerInput_arrow .DateRangePickerInput_arrow_svg { - fill: $subsite-secondary-text; + fill: color-contrast($subsite-secondary); } .DateRangePickerInput_clearDates svg { - fill: $subsite-secondary-text; + fill: color-contrast($subsite-secondary); } } } &.date-filter .DateRangePickerInput { .DateInput_input { - color: $subsite-secondary-text !important; + color: color-contrast($subsite-secondary) !important; } .DateRangePickerInput_arrow .DateRangePickerInput_arrow_svg, .DateRangePickerInput_clearDates svg { - fill: $subsite-secondary-text !important; + fill: color-contrast($subsite-secondary) !important; } } } diff --git a/src/theme/ItaliaTheme/Subsites/ItaliaTheme/Widgets/reactSelect.scss b/src/theme/ItaliaTheme/Subsites/ItaliaTheme/Widgets/reactSelect.scss new file mode 100644 index 000000000..84daea14a --- /dev/null +++ b/src/theme/ItaliaTheme/Subsites/ItaliaTheme/Widgets/reactSelect.scss @@ -0,0 +1,19 @@ +@use '../../all_variables' as *; + +@mixin common($subsite-primary-a0, $subsite-secondary) { + .react-select__menu { + .react-select__option { + color: color-contrast($subsite-primary-a0); + + &.react-select__option--is-focused { + background-color: $subsite-primary-a0; + color: color-contrast($subsite-primary-a0); + } + &.react-select__option--is-focused.react-select__option--is-selected, + &.react-select__option--is-selected { + background-color: $subsite-secondary; + color: color-contrast($subsite-secondary); + } + } + } +} diff --git a/src/theme/ItaliaTheme/Subsites/ItaliaTheme/_common.scss b/src/theme/ItaliaTheme/Subsites/ItaliaTheme/_common.scss index 4a49acd25..3ebe21876 100644 --- a/src/theme/ItaliaTheme/Subsites/ItaliaTheme/_common.scss +++ b/src/theme/ItaliaTheme/Subsites/ItaliaTheme/_common.scss @@ -77,7 +77,11 @@ //btn mini .select-all-cts.btn.btn-link.btn-mini, .subsite-header .text a.select-all-cts.btn-link.btn-mini { - color: $subsite-primary !important; + @if $subsite-light-theme { + color: $subsite-secondary !important; + } @else { + color: $subsite-primary !important; + } } //icons - general @@ -353,12 +357,4 @@ .DayPickerKeyboardShortcuts_showSpan { color: $subsite-primary-text; } - - .react-select__menu-list { - .select-list { - .react-select__option--is-focused { - background-color: $subsite-primary-a0 !important; - } - } - } } diff --git a/src/theme/ItaliaTheme/Subsites/_mixin.scss b/src/theme/ItaliaTheme/Subsites/_mixin.scss index d0392abcb..9421f1c25 100644 --- a/src/theme/ItaliaTheme/Subsites/_mixin.scss +++ b/src/theme/ItaliaTheme/Subsites/_mixin.scss @@ -31,6 +31,7 @@ @use 'ItaliaTheme/Blocks/searchSections' as it-search-sections; @use 'ItaliaTheme/Blocks/tableOfContents' as it-table-contents; @use 'ItaliaTheme/Views/common' as it-views; +@use 'ItaliaTheme/Widgets/reactSelect' as it-select-widget; @use 'ItaliaTheme/common' as it-common; @function create-primary-a0($color) { @@ -183,6 +184,7 @@ $subsite-link-color, $subsite-light-theme ); + @include it-select-widget.common($subsite-primary-a0, $subsite-secondary); @include it-common.common( $subsite-primary-a0, $subsite-primary-c1, @@ -210,7 +212,7 @@ box-shadow: inset 0 0 0 1px $subsite-primary, 0 0 0 0.2rem rgba(var($subsite-primary), 0.2); - color: $subsite-primary; + color: color-contrast($subsite-primary); } //listing diff --git a/src/theme/ItaliaTheme/Views/_search.scss b/src/theme/ItaliaTheme/Views/_search.scss new file mode 100644 index 000000000..6039ca109 --- /dev/null +++ b/src/theme/ItaliaTheme/Views/_search.scss @@ -0,0 +1,6 @@ +.search-view { + /* nasconde la label "Cerca nel sito" nell'input di ricerca */ + label.has-prepend { + z-index: unset; + } +} diff --git a/src/theme/ItaliaTheme/Widgets/_reactSelect.scss b/src/theme/ItaliaTheme/Widgets/_reactSelect.scss index ed3b96d65..0817daddf 100644 --- a/src/theme/ItaliaTheme/Widgets/_reactSelect.scss +++ b/src/theme/ItaliaTheme/Widgets/_reactSelect.scss @@ -1,3 +1,25 @@ -.react-select__control--is-focused { - box-shadow: 0 0 0 2px $focus-outline-color !important; +.public-ui { + .react-select__menu { + .react-select__option { + color: color-contrast($primary-a0); + + &.react-select__option--is-focused { + background-color: $primary-a0; + color: color-contrast($primary-a0); + } + + &.react-select__option--is-focused.react-select__option--is-selected, + &.react-select__option--is-selected { + background-color: $primary; + color: color-contrast($primary); + } + } + } +} + +.react-select__control, +.react-select__control:hover { + &.react-select__control--is-focused { + box-shadow: 0 0 0 2px $focus-outline-color !important; + } } diff --git a/src/theme/site.scss b/src/theme/site.scss index 322278aca..2703fc96c 100644 --- a/src/theme/site.scss +++ b/src/theme/site.scss @@ -29,7 +29,6 @@ @import 'ItaliaTheme/Components/unauthorized'; @import 'ItaliaTheme/Components/parentSiteMenu'; @import 'ItaliaTheme/Components/tertiaryMenu'; -@import 'ItaliaTheme/Components/search'; @import 'ItaliaTheme/Components/subsiteHeader'; @import 'ItaliaTheme/Components/subsiteFooter'; @import 'ItaliaTheme/Components/scrollToTop'; @@ -108,6 +107,7 @@ @import 'ItaliaTheme/Views/puntoDiContatto'; @import 'ItaliaTheme/Views/persona'; @import 'ItaliaTheme/Views/servizio'; +@import 'ItaliaTheme/Views/search'; @import 'ItaliaTheme/Views/venue'; @import 'ItaliaTheme/Widgets/iconWidget'; @import 'ItaliaTheme/Widgets/searchSectionsConfigurationWidget';