style: fixed reactSelect widget layout and subsite search buttons

RedTurtle · Mar 1, 2024 · 5c08579 · 5c08579
1 parent 01ed12b
commit 5c08579
Show file tree

Hide file tree

Showing 8 changed files with 78 additions and 45 deletions.
diff --git a/src/theme/ItaliaTheme/Components/_search.scss b/src/theme/ItaliaTheme/Components/_search.scss
diff --git a/src/theme/ItaliaTheme/Subsites/ItaliaTheme/Blocks/_searchSections.scss b/src/theme/ItaliaTheme/Subsites/ItaliaTheme/Blocks/_searchSections.scss
@@ -57,28 +57,29 @@
       .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);
             }
           }
         }
 
         .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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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';