diff --git a/client/src/components/Header/components/universal-nav.css b/client/src/components/Header/components/universal-nav.css index c8bed3e19d6..5d86026ef06 100644 --- a/client/src/components/Header/components/universal-nav.css +++ b/client/src/components/Header/components/universal-nav.css @@ -41,6 +41,7 @@ display: flex; justify-content: flex-end; align-items: center; + gap: 10px; flex: 1 0 33%; height: var(--header-height); } @@ -332,7 +333,6 @@ button.nav-link[aria-disabled='true'] { background-color: var(--theme-color); cursor: pointer; max-height: calc(var(--header-height) - 8px); - margin-right: 10px; display: flex; align-items: center; } @@ -445,16 +445,14 @@ button.nav-link[aria-disabled='true'] { .universal-nav-right .fcc_searchBar { position: absolute; - top: 0; + top: var(--header-height); left: 0; } .universal-nav-right .fcc_searchBar .ais-SearchBox-form { width: 100vw; - height: var(--search-box-form); max-width: unset; padding: 0 15px; - left: 0; } /* In mobile layout, prevent search input from hanging around if the @@ -477,19 +475,12 @@ button.nav-link[aria-disabled='true'] { .universal-nav-right .ais-SearchBox-input { width: calc(100vw - 17rem); - padding-left: 27px; } .universal-nav-right .fcc_searchBar .ais-Hits { width: calc(100vw - 17rem); } -.universal-nav-right .fcc_searchBar .ais-SearchBox-submit { - top: unset; - margin-top: 19px; - left: 18px; -} - .ais-SearchBox-input:focus { outline: 3px solid var(--blue-mid); } @@ -529,9 +520,7 @@ button.nav-link[aria-disabled='true'] { .fcc_searchBar .ais-SearchBox-form { display: flex; - position: absolute; - top: var(--header-height); - left: 15px; + justify-content: flex-end; max-width: calc(100vw - 350px); } diff --git a/client/src/components/search/searchBar/searchbar-base.css b/client/src/components/search/searchBar/searchbar-base.css index d72a6c1076b..4123c8bd989 100644 --- a/client/src/components/search/searchBar/searchbar-base.css +++ b/client/src/components/search/searchBar/searchbar-base.css @@ -24,8 +24,7 @@ .ais-Menu-showMore, .ais-RangeInput-submit, .ais-RefinementList-showMore, -.ais-SearchBox-submit, -.ais-SearchBox-reset { +.ais-SearchBox-submit { padding: 0; overflow: visible; font: inherit; @@ -48,8 +47,7 @@ .ais-Menu-showMore::-moz-focus-inner, .ais-RangeInput-submit::-moz-focus-inner, .ais-RefinementList-showMore::-moz-focus-inner, -.ais-SearchBox-submit::-moz-focus-inner, -.ais-SearchBox-reset::-moz-focus-inner { +.ais-SearchBox-submit::-moz-focus-inner { padding: 0; border: 0; } @@ -62,8 +60,7 @@ .ais-Menu-showMore[disabled], .ais-RangeInput-submit[disabled], .ais-RefinementList-showMore[disabled], -.ais-SearchBox-submit[disabled], -.ais-SearchBox-reset[disabled] { +.ais-SearchBox-submit[disabled] { cursor: default; } .ais-Breadcrumb-list, @@ -611,25 +608,17 @@ a[class^='ais-'] { .ais-SearchBox-input:-moz-placeholder { color: var(--gray-15); } -.ais-SearchBox-submit, -.ais-SearchBox-reset, -.ais-SearchBox-loadingIndicator { +.ais-SearchBox-submit { -webkit-appearance: none; -moz-appearance: none; appearance: none; - position: absolute; z-index: 100; width: 20px; height: 20px; - top: 50%; - right: 0.3rem; - -webkit-transform: translateY(-50%); - transform: translateY(-50%); } -.ais-SearchBox-reset { - right: 0.3rem; +.ais-SearchBox-submit { + position: absolute; } -.ais-SearchBox-submitIcon, .ais-SearchBox-resetIcon, .ais-SearchBox-loadingIcon { position: absolute; @@ -639,8 +628,7 @@ a[class^='ais-'] { transform: translateX(-50%) translateY(-50%); } .ais-SearchBox-submitIcon path, -.ais-SearchBox-resetIcon path, -.ais-SearchBox-loadingIndicator { +.ais-SearchBox-resetIcon path { fill: var(--gray-15); } .ais-SearchBox-submitIcon { diff --git a/client/src/components/search/searchBar/searchbar.css b/client/src/components/search/searchBar/searchbar.css index 24dd7653ade..70e37aeb5e3 100644 --- a/client/src/components/search/searchBar/searchbar.css +++ b/client/src/components/search/searchBar/searchbar.css @@ -1,6 +1,5 @@ .fcc_searchBar { flex-grow: 1; - padding: 0 10px; max-height: 33px; font-family: 'Lato', sans-serif; } @@ -10,12 +9,13 @@ color: var(--gray-00); } -.ais-SearchBox-reset { +.ais-SearchBox-reset, +.ais-SearchBox-loadingIndicator { display: none; } .ais-SearchBox-input { - padding: 0 10px 0 30px; + padding: 0 10px; font-size: 18px; display: inline-block; margin-top: 6px; @@ -23,8 +23,11 @@ } .ais-SearchBox-submit { - left: 0.3rem; - top: 59.5%; + margin-top: 6px; + height: 26px; + width: 26px; + background-color: var(--gray-75); + padding-inline: 3px; } .fcc_searchBar .ais-SearchBox-input, @@ -34,18 +37,12 @@ color: var(--gray-00); } -.fcc_searchBar .ais-Hits { - top: 70px; - width: calc(100vw - 350px); - left: 15px; +.fcc_searchBar .ais-SearchBox-input { + padding-inline-start: 1.5em; } -.fcc_searchBar .ais-SearchBox-form { - margin-bottom: 0; - display: flex; - position: absolute; - top: var(--header-height); - right: 5px; +.fcc_searchBar .ais-Hits { + left: 15px; } /* hits */ @@ -130,13 +127,13 @@ and arrow keys */ } .fcc_searchBar .ais-SearchBox-form { + margin-bottom: 0; display: flex; - position: absolute; - top: var(--header-height); - right: 15px; + flex-direction: row-reverse; + gap: 0.25em; } -@media (min-width: 980px) { +@media (min-width: 981px) { .ais-SearchBox-input { width: 100%; max-width: 500px; @@ -147,17 +144,13 @@ and arrow keys */ } .fcc_searchBar .ais-Hits { top: auto; - width: calc(100% - 20px); + width: 100%; max-width: 500px; - left: 10px; + left: 0px; } .fcc_searchBar .ais-SearchBox-form { display: flex; - position: static; + justify-content: flex-end; top: auto; - right: 15px; - } - .ais-SearchBox-submit { - left: 0.85rem; } }