fix: Update search styles
This commit is contained in:
Bouncey
mrugesh
@ -26,62 +26,6 @@ header {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Search bar */
|
||||
.fcc_searchBar {
|
||||
flex-grow: 1;
|
||||
padding: 0 10px;
|
||||
max-height: 33px;
|
||||
}
|
||||
|
||||
.fcc_searchBar .ais-SearchBox-input,
|
||||
.fcc_searchBar .ais-Hits {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.fcc_searchBar .ais-SearchBox-form {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.fcc_searchBar .ais-Hits {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 480px) {
|
||||
.fcc_searchBar .ais-Hits {
|
||||
width: 90%;
|
||||
left: 5%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 735px) {
|
||||
.fcc_searchBar .ais-Hits {
|
||||
width: 80%;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.fcc_searchBar {
|
||||
position: relative;
|
||||
}
|
||||
.fcc_searchBar .ais-Hits {
|
||||
width: calc(100% - 20px);
|
||||
left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* hits */
|
||||
.fcc_searchBar .ais-Highlight-highlighted {
|
||||
background-color: transparent;
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.fcc_searchBar .fcc_suggestion_item {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
/* Navbar logo */
|
||||
|
||||
#top-nav .nav-logo {
|
||||
|
||||
@ -6,15 +6,16 @@ import { createSelector } from 'reselect';
|
||||
import { SearchBox } from 'react-instantsearch-dom';
|
||||
import { navigate } from 'gatsby';
|
||||
|
||||
import SearchHits from './SearchHits';
|
||||
|
||||
import './searchbar.css';
|
||||
import {
|
||||
isSearchDropdownEnabledSelector,
|
||||
isSearchBarFocusedSelector,
|
||||
toggleSearchDropdown,
|
||||
toggleSearchFocused
|
||||
} from '../redux';
|
||||
import SearchHits from './SearchHits';
|
||||
|
||||
import './searchbar-base.css';
|
||||
import './searchbar.css';
|
||||
|
||||
const propTypes = {
|
||||
isDropdownEnabled: PropTypes.bool,
|
||||
|
||||
696
client/src/components/search/searchBar/searchbar-base.css
Normal file
696
client/src/components/search/searchBar/searchbar-base.css
Normal file
@ -0,0 +1,696 @@
|
||||
.ais-Breadcrumb-list,
|
||||
.ais-CurrentRefinements-list,
|
||||
.ais-HierarchicalMenu-list,
|
||||
.ais-Hits-list,
|
||||
.ais-Results-list,
|
||||
.ais-InfiniteHits-list,
|
||||
.ais-InfiniteResults-list,
|
||||
.ais-Menu-list,
|
||||
.ais-NumericMenu-list,
|
||||
.ais-Pagination-list,
|
||||
.ais-RatingMenu-list,
|
||||
.ais-RefinementList-list,
|
||||
.ais-ToggleRefinement-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.ais-ClearRefinements-button,
|
||||
.ais-CurrentRefinements-delete,
|
||||
.ais-CurrentRefinements-reset,
|
||||
.ais-HierarchicalMenu-showMore,
|
||||
.ais-InfiniteHits-loadMore,
|
||||
.ais-InfiniteResults-loadMore,
|
||||
.ais-Menu-showMore,
|
||||
.ais-RangeInput-submit,
|
||||
.ais-RefinementList-showMore,
|
||||
.ais-SearchBox-submit,
|
||||
.ais-SearchBox-reset {
|
||||
padding: 0;
|
||||
overflow: visible;
|
||||
font: inherit;
|
||||
line-height: normal;
|
||||
color: inherit;
|
||||
background: none;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.ais-ClearRefinements-button::-moz-focus-inner,
|
||||
.ais-CurrentRefinements-delete::-moz-focus-inner,
|
||||
.ais-CurrentRefinements-reset::-moz-focus-inner,
|
||||
.ais-HierarchicalMenu-showMore::-moz-focus-inner,
|
||||
.ais-InfiniteHits-loadMore::-moz-focus-inner,
|
||||
.ais-InfiniteResults-loadMore::-moz-focus-inner,
|
||||
.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 {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
.ais-ClearRefinements-button[disabled],
|
||||
.ais-CurrentRefinements-delete[disabled],
|
||||
.ais-CurrentRefinements-reset[disabled],
|
||||
.ais-HierarchicalMenu-showMore[disabled],
|
||||
.ais-InfiniteHits-loadMore[disabled],
|
||||
.ais-InfiniteResults-loadMore[disabled],
|
||||
.ais-Menu-showMore[disabled],
|
||||
.ais-RangeInput-submit[disabled],
|
||||
.ais-RefinementList-showMore[disabled],
|
||||
.ais-SearchBox-submit[disabled],
|
||||
.ais-SearchBox-reset[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
.ais-Breadcrumb-list,
|
||||
.ais-Breadcrumb-item,
|
||||
.ais-Pagination-list,
|
||||
.ais-RangeInput-form,
|
||||
.ais-RatingMenu-link,
|
||||
.ais-PoweredBy {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
.ais-HierarchicalMenu-list .ais-HierarchicalMenu-list {
|
||||
margin-left: 1em;
|
||||
}
|
||||
.ais-PoweredBy-logo {
|
||||
display: block;
|
||||
width: 70px;
|
||||
height: auto;
|
||||
}
|
||||
.ais-RatingMenu-starIcon {
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.ais-SearchBox-input::-ms-clear,
|
||||
.ais-SearchBox-input::-ms-reveal {
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
.ais-SearchBox-input::-webkit-search-decoration,
|
||||
.ais-SearchBox-input::-webkit-search-cancel-button,
|
||||
.ais-SearchBox-input::-webkit-search-results-button,
|
||||
.ais-SearchBox-input::-webkit-search-results-decoration {
|
||||
display: none;
|
||||
}
|
||||
.ais-RangeSlider .rheostat {
|
||||
overflow: visible;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.ais-RangeSlider .rheostat-background {
|
||||
height: 6px;
|
||||
top: 0px;
|
||||
width: 100%;
|
||||
}
|
||||
.ais-RangeSlider .rheostat-handle {
|
||||
margin-left: -12px;
|
||||
top: -7px;
|
||||
}
|
||||
.ais-RangeSlider .rheostat-background {
|
||||
position: relative;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #aaa;
|
||||
}
|
||||
.ais-RangeSlider .rheostat-progress {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
height: 4px;
|
||||
background-color: #333;
|
||||
}
|
||||
.rheostat-handle {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #333;
|
||||
border-radius: 50%;
|
||||
cursor: -webkit-grab;
|
||||
cursor: grab;
|
||||
}
|
||||
.rheostat-marker {
|
||||
margin-left: -1px;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 5px;
|
||||
background-color: #aaa;
|
||||
}
|
||||
.rheostat-marker--large {
|
||||
height: 9px;
|
||||
}
|
||||
.rheostat-value {
|
||||
margin-left: 50%;
|
||||
padding-top: 15px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
-webkit-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.rheostat-tooltip {
|
||||
margin-left: 50%;
|
||||
position: absolute;
|
||||
top: -22px;
|
||||
text-align: center;
|
||||
-webkit-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
[class^='ais-'] {
|
||||
font-size: 1rem;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
a[class^='ais-'] {
|
||||
text-decoration: none;
|
||||
}
|
||||
.ais-Breadcrumb,
|
||||
.ais-ClearRefinements,
|
||||
.ais-CurrentRefinements,
|
||||
.ais-HierarchicalMenu,
|
||||
.ais-Hits,
|
||||
.ais-Results,
|
||||
.ais-HitsPerPage,
|
||||
.ais-ResultsPerPage,
|
||||
.ais-InfiniteHits,
|
||||
.ais-InfiniteResults,
|
||||
.ais-Menu,
|
||||
.ais-MenuSelect,
|
||||
.ais-NumericMenu,
|
||||
.ais-NumericSelector,
|
||||
.ais-Pagination,
|
||||
.ais-Panel,
|
||||
.ais-PoweredBy,
|
||||
.ais-RangeInput,
|
||||
.ais-RangeSlider,
|
||||
.ais-RatingMenu,
|
||||
.ais-RefinementList,
|
||||
.ais-SearchBox,
|
||||
.ais-SortBy,
|
||||
.ais-Stats,
|
||||
.ais-ToggleRefinement {
|
||||
color: #3a4570;
|
||||
}
|
||||
.ais-Breadcrumb-item--selected,
|
||||
.ais-HierarchicalMenu-item--selected,
|
||||
.ais-Menu-item--selected {
|
||||
font-weight: bold;
|
||||
}
|
||||
.ais-Breadcrumb-separator {
|
||||
margin: 0 0.3em;
|
||||
font-weight: normal;
|
||||
}
|
||||
.ais-Breadcrumb-link,
|
||||
.ais-HierarchicalMenu-link,
|
||||
.ais-Menu-link,
|
||||
.ais-Pagination-link,
|
||||
.ais-RatingMenu-link {
|
||||
color: #0096db;
|
||||
-webkit-transition: color 0.2s ease-out;
|
||||
transition: color 0.2s ease-out;
|
||||
}
|
||||
.ais-Breadcrumb-link:hover,
|
||||
.ais-Breadcrumb-link:focus,
|
||||
.ais-HierarchicalMenu-link:hover,
|
||||
.ais-HierarchicalMenu-link:focus,
|
||||
.ais-Menu-link:hover,
|
||||
.ais-Menu-link:focus,
|
||||
.ais-Pagination-link:hover,
|
||||
.ais-Pagination-link:focus,
|
||||
.ais-RatingMenu-link:hover,
|
||||
.ais-RatingMenu-link:focus {
|
||||
color: #0073a8;
|
||||
}
|
||||
.ais-ClearRefinements-button,
|
||||
.ais-CurrentRefinements-reset,
|
||||
.ais-HierarchicalMenu-showMore,
|
||||
.ais-InfiniteHits-loadMore,
|
||||
.ais-InfiniteResults-loadMore,
|
||||
.ais-Menu-showMore,
|
||||
.ais-RefinementList-showMore {
|
||||
padding: 0.3rem 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
color: #fff;
|
||||
background-color: #0096db;
|
||||
border-radius: 5px;
|
||||
-webkit-transition: background-color 0.2s ease-out;
|
||||
transition: background-color 0.2s ease-out;
|
||||
outline: none;
|
||||
}
|
||||
.ais-ClearRefinements-button:hover,
|
||||
.ais-ClearRefinements-button:focus,
|
||||
.ais-CurrentRefinements-reset:hover,
|
||||
.ais-CurrentRefinements-reset:focus,
|
||||
.ais-HierarchicalMenu-showMore:hover,
|
||||
.ais-HierarchicalMenu-showMore:focus,
|
||||
.ais-InfiniteHits-loadMore:hover,
|
||||
.ais-InfiniteHits-loadMore:focus,
|
||||
.ais-InfiniteResults-loadMore:hover,
|
||||
.ais-InfiniteResults-loadMore:focus,
|
||||
.ais-Menu-showMore:hover,
|
||||
.ais-Menu-showMore:focus,
|
||||
.ais-RefinementList-showMore:hover,
|
||||
.ais-RefinementList-showMore:focus {
|
||||
background-color: #0073a8;
|
||||
}
|
||||
.ais-ClearRefinements-button--disabled,
|
||||
.ais-HierarchicalMenu-showMore--disabled,
|
||||
.ais-InfiniteHits-loadMore--disabled,
|
||||
.ais-InfiniteResults-loadMore--disabled,
|
||||
.ais-Menu-showMore--disabled,
|
||||
.ais-RefinementList-showMore--disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.ais-ClearRefinements-button--disabled:hover,
|
||||
.ais-ClearRefinements-button--disabled:focus,
|
||||
.ais-HierarchicalMenu-showMore--disabled:hover,
|
||||
.ais-HierarchicalMenu-showMore--disabled:focus,
|
||||
.ais-InfiniteHits-loadMore--disabled:hover,
|
||||
.ais-InfiniteHits-loadMore--disabled:focus,
|
||||
.ais-InfiniteResults-loadMore--disabled:hover,
|
||||
.ais-InfiniteResults-loadMore--disabled:focus,
|
||||
.ais-Menu-showMore--disabled:hover,
|
||||
.ais-Menu-showMore--disabled:focus,
|
||||
.ais-RefinementList-showMore--disabled:hover,
|
||||
.ais-RefinementList-showMore--disabled:focus {
|
||||
background-color: #0096db;
|
||||
}
|
||||
.ais-CurrentRefinements {
|
||||
margin-top: -0.3rem;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.ais-CurrentRefinements-list {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.ais-CurrentRefinements-item {
|
||||
margin-right: 0.3rem;
|
||||
margin-top: 0.3rem;
|
||||
padding: 0.3rem 0.5rem;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
background-color: #495588;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.ais-CurrentRefinements-category {
|
||||
margin-left: 0.3em;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
.ais-CurrentRefinements-delete {
|
||||
margin-left: 0.3rem;
|
||||
}
|
||||
.ais-CurrentRefinements-label,
|
||||
.ais-CurrentRefinements-categoryLabel,
|
||||
.ais-CurrentRefinements-delete {
|
||||
white-space: nowrap;
|
||||
font-size: 0.8rem;
|
||||
color: #fff;
|
||||
}
|
||||
.ais-CurrentRefinements-reset {
|
||||
margin-top: 0.3rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.ais-CurrentRefinements-reset + .ais-CurrentRefinements-list {
|
||||
margin-left: 0.3rem;
|
||||
}
|
||||
.ais-HierarchicalMenu-link,
|
||||
.ais-Menu-link {
|
||||
display: block;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.ais-HierarchicalMenu-list,
|
||||
.ais-Menu-list,
|
||||
.ais-NumericMenu-list,
|
||||
.ais-RatingMenu-list,
|
||||
.ais-RefinementList-list {
|
||||
font-weight: normal;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.ais-HierarchicalMenu-link:after {
|
||||
margin-left: 0.3em;
|
||||
content: '';
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
display: none;
|
||||
background-image: url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M7.33 24l-2.83-2.829 9.339-9.175-9.339-9.167 2.83-2.829 12.17 11.996z%27 fill%3D%22%233A4570%22 /%3E%3C/svg%3E');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.ais-HierarchicalMenu-item--parent > .ais-HierarchicalMenu-link:after {
|
||||
display: inline-block;
|
||||
}
|
||||
.ais-HierarchicalMenu-item--selected > .ais-HierarchicalMenu-link:after {
|
||||
-webkit-transform: rotate(90deg);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.ais-CurrentRefinements-count,
|
||||
.ais-RatingMenu-count {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.ais-CurrentRefinements-count:before,
|
||||
.ais-RatingMenu-count:before {
|
||||
content: '(';
|
||||
}
|
||||
.ais-CurrentRefinements-count:after,
|
||||
.ais-RatingMenu-count:after {
|
||||
content: ')';
|
||||
}
|
||||
.ais-HierarchicalMenu-count,
|
||||
.ais-Menu-count,
|
||||
.ais-RefinementList-count,
|
||||
.ais-ToggleRefinement-count {
|
||||
padding: 0.1rem 0.4rem;
|
||||
font-size: 0.8rem;
|
||||
color: #3a4570;
|
||||
background-color: #dfe2ee;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.ais-HierarchicalMenu-showMore,
|
||||
.ais-Menu-showMore,
|
||||
.ais-RefinementList-showMore {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.ais-Highlight-highlighted,
|
||||
.ais-Snippet-highlighted {
|
||||
background-color: #ffc168;
|
||||
}
|
||||
.ais-InfiniteHits-list,
|
||||
.ais-InfiniteResults-list,
|
||||
.ais-Hits-list,
|
||||
.ais-Results-list {
|
||||
margin-top: -1rem;
|
||||
margin-left: -1rem;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.ais-Panel-body .ais-InfiniteHits-list,
|
||||
.ais-Panel-body .ais-InfiniteResults-list,
|
||||
.ais-Panel-body .ais-Hits-list,
|
||||
.ais-Panel-body .ais-Results-list {
|
||||
margin: 0.5rem 0 0 -1rem;
|
||||
}
|
||||
.ais-InfiniteHits-item,
|
||||
.ais-InfiniteResults-item,
|
||||
.ais-Hits-item,
|
||||
.ais-Results-item {
|
||||
margin-top: 1rem;
|
||||
margin-left: 1rem;
|
||||
padding: 1rem;
|
||||
width: calc(25% - 1rem);
|
||||
border: 1px solid #c4c8d8;
|
||||
-webkit-box-shadow: 0 2px 5px 0px #e3e5ec;
|
||||
box-shadow: 0 2px 5px 0px #e3e5ec;
|
||||
}
|
||||
.ais-Panel-body .ais-InfiniteHits-item,
|
||||
.ais-Panel-body .ais-InfiniteResults-item,
|
||||
.ais-Panel-body .ais-Hits-item,
|
||||
.ais-Panel-body .ais-Results-item {
|
||||
margin: 0.5rem 0 0.5rem 1rem;
|
||||
}
|
||||
.ais-InfiniteHits-loadMore,
|
||||
.ais-InfiniteResults-loadMore {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.ais-MenuSelect-select,
|
||||
.ais-NumericSelector-select,
|
||||
.ais-HitsPerPage-select,
|
||||
.ais-ResultsPerPage-select,
|
||||
.ais-SortBy-select {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
padding: 0.3rem 2rem 0.3rem 0.3rem;
|
||||
background-color: #fff;
|
||||
background-image: url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M0 7.33l2.829-2.83 9.175 9.339 9.167-9.339 2.829 2.83-11.996 12.17z%27 fill%3D%22%233A4570%22 /%3E%3C/svg%3E');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 10px 10px;
|
||||
background-position: 92% 50%;
|
||||
border: 1px solid #c4c8d8;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.ais-Panel-header {
|
||||
margin-bottom: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
border-bottom: 1px solid #c4c8d8;
|
||||
}
|
||||
.ais-Panel-footer {
|
||||
margin-top: 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.ais-RangeInput-input {
|
||||
padding: 0 0.2rem;
|
||||
width: 5rem;
|
||||
height: 1.5rem;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
.ais-RangeInput-separator {
|
||||
margin: 0 0.3rem;
|
||||
}
|
||||
.ais-RangeInput-submit {
|
||||
margin-left: 0.3rem;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
padding: 0 0.5rem;
|
||||
height: 1.5rem;
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.8rem;
|
||||
color: #fff;
|
||||
background-color: #0096db;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
-webkit-transition: 0.2s ease-out;
|
||||
transition: 0.2s ease-out;
|
||||
outline: none;
|
||||
}
|
||||
.ais-RangeInput-submit:hover,
|
||||
.ais-RangeInput-submit:focus {
|
||||
background-color: #0073a8;
|
||||
}
|
||||
.ais-RatingMenu-count {
|
||||
color: #3a4570;
|
||||
}
|
||||
.ais-Pagination-list {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.ais-Pagination-item + .ais-Pagination-item {
|
||||
margin-left: 0.3rem;
|
||||
}
|
||||
.ais-Pagination-link {
|
||||
padding: 0.3rem 0.6rem;
|
||||
display: block;
|
||||
border: 1px solid #c4c8d8;
|
||||
border-radius: 5px;
|
||||
-webkit-transition: background-color 0.2s ease-out;
|
||||
transition: background-color 0.2s ease-out;
|
||||
}
|
||||
.ais-Pagination-link:hover,
|
||||
.ais-Pagination-link:focus {
|
||||
background-color: #e3e5ec;
|
||||
}
|
||||
.ais-Pagination-item--disabled .ais-Pagination-link {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
color: #a5abc4;
|
||||
}
|
||||
.ais-Pagination-item--disabled .ais-Pagination-link:hover,
|
||||
.ais-Pagination-item--disabled .ais-Pagination-link:focus {
|
||||
color: #a5abc4;
|
||||
background-color: #fff;
|
||||
}
|
||||
.ais-Pagination-item--selected .ais-Pagination-link {
|
||||
color: #fff;
|
||||
background-color: #0096db;
|
||||
border-color: #0096db;
|
||||
}
|
||||
.ais-Pagination-item--selected .ais-Pagination-link:hover,
|
||||
.ais-Pagination-item--selected .ais-Pagination-link:focus {
|
||||
color: #fff;
|
||||
}
|
||||
.ais-PoweredBy-text,
|
||||
.rheostat-tooltip,
|
||||
.rheostat-value,
|
||||
.ais-Stats-text {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.ais-PoweredBy-logo {
|
||||
margin-left: 0.3rem;
|
||||
}
|
||||
.ais-RangeSlider .rheostat-progress {
|
||||
background-color: #495588;
|
||||
}
|
||||
.ais-RangeSlider .rheostat-background {
|
||||
border-color: #878faf;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.ais-RangeSlider .rheostat-handle {
|
||||
border-color: #878faf;
|
||||
}
|
||||
.ais-RangeSlider .rheostat-marker {
|
||||
background-color: #878faf;
|
||||
}
|
||||
.ais-Panel-body .ais-RangeSlider {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
.ais-RatingMenu-item--disabled .ais-RatingMenu-count,
|
||||
.ais-RatingMenu-item--disabled .ais-RatingMenu-label {
|
||||
color: #c4c8d8;
|
||||
}
|
||||
.ais-RatingMenu-item--selected {
|
||||
font-weight: bold;
|
||||
}
|
||||
.ais-RatingMenu-link {
|
||||
line-height: 1.5;
|
||||
}
|
||||
.ais-RatingMenu-link > * + * {
|
||||
margin-left: 0.3rem;
|
||||
}
|
||||
.ais-RatingMenu-starIcon {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
width: 15px;
|
||||
fill: #ffc168;
|
||||
}
|
||||
.ais-RatingMenu-item--disabled .ais-RatingMenu-starIcon {
|
||||
fill: #c4c8d8;
|
||||
}
|
||||
.ais-HierarchicalMenu-searchBox > *,
|
||||
.ais-Menu-searchBox > *,
|
||||
.ais-RefinementList-searchBox > * {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.ais-SearchBox-form {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
.ais-SearchBox-input {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
padding: 0.3rem 1.7rem;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
border: 1px solid #c4c8d8;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.ais-SearchBox-input::-webkit-input-placeholder {
|
||||
color: #a5aed1;
|
||||
}
|
||||
.ais-SearchBox-input::-moz-placeholder {
|
||||
color: #a5aed1;
|
||||
}
|
||||
.ais-SearchBox-input:-ms-input-placeholder {
|
||||
color: #a5aed1;
|
||||
}
|
||||
.ais-SearchBox-input:-moz-placeholder {
|
||||
color: #a5aed1;
|
||||
}
|
||||
.ais-SearchBox-submit,
|
||||
.ais-SearchBox-reset,
|
||||
.ais-SearchBox-loadingIndicator {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
top: 50%;
|
||||
right: 0.3rem;
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.ais-SearchBox-submit {
|
||||
left: 0.3rem;
|
||||
}
|
||||
.ais-SearchBox-reset {
|
||||
right: 0.3rem;
|
||||
}
|
||||
.ais-SearchBox-submitIcon,
|
||||
.ais-SearchBox-resetIcon,
|
||||
.ais-SearchBox-loadingIcon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-webkit-transform: translateX(-50%) translateY(-50%);
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
.ais-SearchBox-submitIcon path,
|
||||
.ais-SearchBox-resetIcon path {
|
||||
fill: #495588;
|
||||
}
|
||||
.ais-SearchBox-submitIcon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
.ais-SearchBox-resetIcon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
.ais-SearchBox-loadingIcon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.ais-SearchBox-input {
|
||||
padding-left: 25px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.ais-SearchBox-submitIcon > path {
|
||||
fill: #006400;
|
||||
}
|
||||
.ais-Hits {
|
||||
position: absolute;
|
||||
width: 90%;
|
||||
background-color: #fff;
|
||||
}
|
||||
.ais-Hits-item {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.ais-Hits-list {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
border: 1px solid #c4c8d8;
|
||||
-webkit-box-shadow: 0 2px 5px 0px #e3e5ec;
|
||||
box-shadow: 0 2px 5px 0px #e3e5ec;
|
||||
}
|
||||
strong.ais-Highlight-highlighted {
|
||||
background-color: transparent;
|
||||
}
|
||||
@ -1,698 +1,56 @@
|
||||
.ais-Breadcrumb-list,
|
||||
.ais-CurrentRefinements-list,
|
||||
.ais-HierarchicalMenu-list,
|
||||
.ais-Hits-list,
|
||||
.ais-Results-list,
|
||||
.ais-InfiniteHits-list,
|
||||
.ais-InfiniteResults-list,
|
||||
.ais-Menu-list,
|
||||
.ais-NumericMenu-list,
|
||||
.ais-Pagination-list,
|
||||
.ais-RatingMenu-list,
|
||||
.ais-RefinementList-list,
|
||||
.ais-ToggleRefinement-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.ais-ClearRefinements-button,
|
||||
.ais-CurrentRefinements-delete,
|
||||
.ais-CurrentRefinements-reset,
|
||||
.ais-HierarchicalMenu-showMore,
|
||||
.ais-InfiniteHits-loadMore,
|
||||
.ais-InfiniteResults-loadMore,
|
||||
.ais-Menu-showMore,
|
||||
.ais-RangeInput-submit,
|
||||
.ais-RefinementList-showMore,
|
||||
.ais-SearchBox-submit,
|
||||
.ais-SearchBox-reset {
|
||||
padding: 0;
|
||||
overflow: visible;
|
||||
font: inherit;
|
||||
line-height: normal;
|
||||
color: inherit;
|
||||
background: none;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.ais-ClearRefinements-button::-moz-focus-inner,
|
||||
.ais-CurrentRefinements-delete::-moz-focus-inner,
|
||||
.ais-CurrentRefinements-reset::-moz-focus-inner,
|
||||
.ais-HierarchicalMenu-showMore::-moz-focus-inner,
|
||||
.ais-InfiniteHits-loadMore::-moz-focus-inner,
|
||||
.ais-InfiniteResults-loadMore::-moz-focus-inner,
|
||||
.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 {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
.ais-ClearRefinements-button[disabled],
|
||||
.ais-CurrentRefinements-delete[disabled],
|
||||
.ais-CurrentRefinements-reset[disabled],
|
||||
.ais-HierarchicalMenu-showMore[disabled],
|
||||
.ais-InfiniteHits-loadMore[disabled],
|
||||
.ais-InfiniteResults-loadMore[disabled],
|
||||
.ais-Menu-showMore[disabled],
|
||||
.ais-RangeInput-submit[disabled],
|
||||
.ais-RefinementList-showMore[disabled],
|
||||
.ais-SearchBox-submit[disabled],
|
||||
.ais-SearchBox-reset[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
.ais-Breadcrumb-list,
|
||||
.ais-Breadcrumb-item,
|
||||
.ais-Pagination-list,
|
||||
.ais-RangeInput-form,
|
||||
.ais-RatingMenu-link,
|
||||
.ais-PoweredBy {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
.ais-HierarchicalMenu-list .ais-HierarchicalMenu-list {
|
||||
margin-left: 1em;
|
||||
}
|
||||
.ais-PoweredBy-logo {
|
||||
display: block;
|
||||
width: 70px;
|
||||
height: auto;
|
||||
}
|
||||
.ais-RatingMenu-starIcon {
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.ais-SearchBox-input::-ms-clear,
|
||||
.ais-SearchBox-input::-ms-reveal {
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
.ais-SearchBox-input::-webkit-search-decoration,
|
||||
.ais-SearchBox-input::-webkit-search-cancel-button,
|
||||
.ais-SearchBox-input::-webkit-search-results-button,
|
||||
.ais-SearchBox-input::-webkit-search-results-decoration {
|
||||
display: none;
|
||||
}
|
||||
.ais-RangeSlider .rheostat {
|
||||
overflow: visible;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.ais-RangeSlider .rheostat-background {
|
||||
height: 6px;
|
||||
top: 0px;
|
||||
width: 100%;
|
||||
}
|
||||
.ais-RangeSlider .rheostat-handle {
|
||||
margin-left: -12px;
|
||||
top: -7px;
|
||||
}
|
||||
.ais-RangeSlider .rheostat-background {
|
||||
position: relative;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #aaa;
|
||||
}
|
||||
.ais-RangeSlider .rheostat-progress {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
height: 4px;
|
||||
background-color: #333;
|
||||
}
|
||||
.rheostat-handle {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #333;
|
||||
border-radius: 50%;
|
||||
cursor: -webkit-grab;
|
||||
cursor: grab;
|
||||
}
|
||||
.rheostat-marker {
|
||||
margin-left: -1px;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 5px;
|
||||
background-color: #aaa;
|
||||
}
|
||||
.rheostat-marker--large {
|
||||
height: 9px;
|
||||
}
|
||||
.rheostat-value {
|
||||
margin-left: 50%;
|
||||
padding-top: 15px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
-webkit-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.rheostat-tooltip {
|
||||
margin-left: 50%;
|
||||
position: absolute;
|
||||
top: -22px;
|
||||
text-align: center;
|
||||
-webkit-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
[class^='ais-'] {
|
||||
font-size: 1rem;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
a[class^='ais-'] {
|
||||
text-decoration: none;
|
||||
}
|
||||
.ais-Breadcrumb,
|
||||
.ais-ClearRefinements,
|
||||
.ais-CurrentRefinements,
|
||||
.ais-HierarchicalMenu,
|
||||
.ais-Hits,
|
||||
.ais-Results,
|
||||
.ais-HitsPerPage,
|
||||
.ais-ResultsPerPage,
|
||||
.ais-InfiniteHits,
|
||||
.ais-InfiniteResults,
|
||||
.ais-Menu,
|
||||
.ais-MenuSelect,
|
||||
.ais-NumericMenu,
|
||||
.ais-NumericSelector,
|
||||
.ais-Pagination,
|
||||
.ais-Panel,
|
||||
.ais-PoweredBy,
|
||||
.ais-RangeInput,
|
||||
.ais-RangeSlider,
|
||||
.ais-RatingMenu,
|
||||
.ais-RefinementList,
|
||||
.ais-SearchBox,
|
||||
.ais-SortBy,
|
||||
.ais-Stats,
|
||||
.ais-ToggleRefinement {
|
||||
color: #3a4570;
|
||||
}
|
||||
.ais-Breadcrumb-item--selected,
|
||||
.ais-HierarchicalMenu-item--selected,
|
||||
.ais-Menu-item--selected {
|
||||
font-weight: bold;
|
||||
}
|
||||
.ais-Breadcrumb-separator {
|
||||
margin: 0 0.3em;
|
||||
font-weight: normal;
|
||||
}
|
||||
.ais-Breadcrumb-link,
|
||||
.ais-HierarchicalMenu-link,
|
||||
.ais-Menu-link,
|
||||
.ais-Pagination-link,
|
||||
.ais-RatingMenu-link {
|
||||
color: #0096db;
|
||||
-webkit-transition: color 0.2s ease-out;
|
||||
transition: color 0.2s ease-out;
|
||||
}
|
||||
.ais-Breadcrumb-link:hover,
|
||||
.ais-Breadcrumb-link:focus,
|
||||
.ais-HierarchicalMenu-link:hover,
|
||||
.ais-HierarchicalMenu-link:focus,
|
||||
.ais-Menu-link:hover,
|
||||
.ais-Menu-link:focus,
|
||||
.ais-Pagination-link:hover,
|
||||
.ais-Pagination-link:focus,
|
||||
.ais-RatingMenu-link:hover,
|
||||
.ais-RatingMenu-link:focus {
|
||||
color: #0073a8;
|
||||
}
|
||||
.ais-ClearRefinements-button,
|
||||
.ais-CurrentRefinements-reset,
|
||||
.ais-HierarchicalMenu-showMore,
|
||||
.ais-InfiniteHits-loadMore,
|
||||
.ais-InfiniteResults-loadMore,
|
||||
.ais-Menu-showMore,
|
||||
.ais-RefinementList-showMore {
|
||||
padding: 0.3rem 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
color: #fff;
|
||||
background-color: #0096db;
|
||||
border-radius: 5px;
|
||||
-webkit-transition: background-color 0.2s ease-out;
|
||||
transition: background-color 0.2s ease-out;
|
||||
outline: none;
|
||||
}
|
||||
.ais-ClearRefinements-button:hover,
|
||||
.ais-ClearRefinements-button:focus,
|
||||
.ais-CurrentRefinements-reset:hover,
|
||||
.ais-CurrentRefinements-reset:focus,
|
||||
.ais-HierarchicalMenu-showMore:hover,
|
||||
.ais-HierarchicalMenu-showMore:focus,
|
||||
.ais-InfiniteHits-loadMore:hover,
|
||||
.ais-InfiniteHits-loadMore:focus,
|
||||
.ais-InfiniteResults-loadMore:hover,
|
||||
.ais-InfiniteResults-loadMore:focus,
|
||||
.ais-Menu-showMore:hover,
|
||||
.ais-Menu-showMore:focus,
|
||||
.ais-RefinementList-showMore:hover,
|
||||
.ais-RefinementList-showMore:focus {
|
||||
background-color: #0073a8;
|
||||
}
|
||||
.ais-ClearRefinements-button--disabled,
|
||||
.ais-HierarchicalMenu-showMore--disabled,
|
||||
.ais-InfiniteHits-loadMore--disabled,
|
||||
.ais-InfiniteResults-loadMore--disabled,
|
||||
.ais-Menu-showMore--disabled,
|
||||
.ais-RefinementList-showMore--disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.ais-ClearRefinements-button--disabled:hover,
|
||||
.ais-ClearRefinements-button--disabled:focus,
|
||||
.ais-HierarchicalMenu-showMore--disabled:hover,
|
||||
.ais-HierarchicalMenu-showMore--disabled:focus,
|
||||
.ais-InfiniteHits-loadMore--disabled:hover,
|
||||
.ais-InfiniteHits-loadMore--disabled:focus,
|
||||
.ais-InfiniteResults-loadMore--disabled:hover,
|
||||
.ais-InfiniteResults-loadMore--disabled:focus,
|
||||
.ais-Menu-showMore--disabled:hover,
|
||||
.ais-Menu-showMore--disabled:focus,
|
||||
.ais-RefinementList-showMore--disabled:hover,
|
||||
.ais-RefinementList-showMore--disabled:focus {
|
||||
background-color: #0096db;
|
||||
}
|
||||
.ais-CurrentRefinements {
|
||||
margin-top: -0.3rem;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.ais-CurrentRefinements-list {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.ais-CurrentRefinements-item {
|
||||
margin-right: 0.3rem;
|
||||
margin-top: 0.3rem;
|
||||
padding: 0.3rem 0.5rem;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
background-color: #495588;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.ais-CurrentRefinements-category {
|
||||
margin-left: 0.3em;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
.ais-CurrentRefinements-delete {
|
||||
margin-left: 0.3rem;
|
||||
}
|
||||
.ais-CurrentRefinements-label,
|
||||
.ais-CurrentRefinements-categoryLabel,
|
||||
.ais-CurrentRefinements-delete {
|
||||
white-space: nowrap;
|
||||
font-size: 0.8rem;
|
||||
color: #fff;
|
||||
}
|
||||
.ais-CurrentRefinements-reset {
|
||||
margin-top: 0.3rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.ais-CurrentRefinements-reset + .ais-CurrentRefinements-list {
|
||||
margin-left: 0.3rem;
|
||||
}
|
||||
.ais-HierarchicalMenu-link,
|
||||
.ais-Menu-link {
|
||||
display: block;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.ais-HierarchicalMenu-list,
|
||||
.ais-Menu-list,
|
||||
.ais-NumericMenu-list,
|
||||
.ais-RatingMenu-list,
|
||||
.ais-RefinementList-list {
|
||||
font-weight: normal;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.ais-HierarchicalMenu-link:after {
|
||||
margin-left: 0.3em;
|
||||
content: '';
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
display: none;
|
||||
background-image: url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M7.33 24l-2.83-2.829 9.339-9.175-9.339-9.167 2.83-2.829 12.17 11.996z%27 fill%3D%22%233A4570%22 /%3E%3C/svg%3E');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.ais-HierarchicalMenu-item--parent > .ais-HierarchicalMenu-link:after {
|
||||
display: inline-block;
|
||||
}
|
||||
.ais-HierarchicalMenu-item--selected > .ais-HierarchicalMenu-link:after {
|
||||
-webkit-transform: rotate(90deg);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.ais-CurrentRefinements-count,
|
||||
.ais-RatingMenu-count {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.ais-CurrentRefinements-count:before,
|
||||
.ais-RatingMenu-count:before {
|
||||
content: '(';
|
||||
}
|
||||
.ais-CurrentRefinements-count:after,
|
||||
.ais-RatingMenu-count:after {
|
||||
content: ')';
|
||||
}
|
||||
.ais-HierarchicalMenu-count,
|
||||
.ais-Menu-count,
|
||||
.ais-RefinementList-count,
|
||||
.ais-ToggleRefinement-count {
|
||||
padding: 0.1rem 0.4rem;
|
||||
font-size: 0.8rem;
|
||||
color: #3a4570;
|
||||
background-color: #dfe2ee;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.ais-HierarchicalMenu-showMore,
|
||||
.ais-Menu-showMore,
|
||||
.ais-RefinementList-showMore {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.ais-Highlight-highlighted,
|
||||
.ais-Snippet-highlighted {
|
||||
background-color: #ffc168;
|
||||
}
|
||||
.ais-InfiniteHits-list,
|
||||
.ais-InfiniteResults-list,
|
||||
.ais-Hits-list,
|
||||
.ais-Results-list {
|
||||
margin-top: -1rem;
|
||||
margin-left: -1rem;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.ais-Panel-body .ais-InfiniteHits-list,
|
||||
.ais-Panel-body .ais-InfiniteResults-list,
|
||||
.ais-Panel-body .ais-Hits-list,
|
||||
.ais-Panel-body .ais-Results-list {
|
||||
margin: 0.5rem 0 0 -1rem;
|
||||
}
|
||||
.ais-InfiniteHits-item,
|
||||
.ais-InfiniteResults-item,
|
||||
.ais-Hits-item,
|
||||
.ais-Results-item {
|
||||
margin-top: 1rem;
|
||||
margin-left: 1rem;
|
||||
padding: 1rem;
|
||||
width: calc(25% - 1rem);
|
||||
border: 1px solid #c4c8d8;
|
||||
-webkit-box-shadow: 0 2px 5px 0px #e3e5ec;
|
||||
box-shadow: 0 2px 5px 0px #e3e5ec;
|
||||
}
|
||||
.ais-Panel-body .ais-InfiniteHits-item,
|
||||
.ais-Panel-body .ais-InfiniteResults-item,
|
||||
.ais-Panel-body .ais-Hits-item,
|
||||
.ais-Panel-body .ais-Results-item {
|
||||
margin: 0.5rem 0 0.5rem 1rem;
|
||||
}
|
||||
.ais-InfiniteHits-loadMore,
|
||||
.ais-InfiniteResults-loadMore {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.ais-MenuSelect-select,
|
||||
.ais-NumericSelector-select,
|
||||
.ais-HitsPerPage-select,
|
||||
.ais-ResultsPerPage-select,
|
||||
.ais-SortBy-select {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
padding: 0.3rem 2rem 0.3rem 0.3rem;
|
||||
background-color: #fff;
|
||||
background-image: url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M0 7.33l2.829-2.83 9.175 9.339 9.167-9.339 2.829 2.83-11.996 12.17z%27 fill%3D%22%233A4570%22 /%3E%3C/svg%3E');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 10px 10px;
|
||||
background-position: 92% 50%;
|
||||
border: 1px solid #c4c8d8;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.ais-Panel-header {
|
||||
margin-bottom: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
border-bottom: 1px solid #c4c8d8;
|
||||
}
|
||||
.ais-Panel-footer {
|
||||
margin-top: 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.ais-RangeInput-input {
|
||||
padding: 0 0.2rem;
|
||||
width: 5rem;
|
||||
height: 1.5rem;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
.ais-RangeInput-separator {
|
||||
margin: 0 0.3rem;
|
||||
}
|
||||
.ais-RangeInput-submit {
|
||||
margin-left: 0.3rem;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
padding: 0 0.5rem;
|
||||
height: 1.5rem;
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.8rem;
|
||||
color: #fff;
|
||||
background-color: #0096db;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
-webkit-transition: 0.2s ease-out;
|
||||
transition: 0.2s ease-out;
|
||||
outline: none;
|
||||
}
|
||||
.ais-RangeInput-submit:hover,
|
||||
.ais-RangeInput-submit:focus {
|
||||
background-color: #0073a8;
|
||||
}
|
||||
.ais-RatingMenu-count {
|
||||
color: #3a4570;
|
||||
}
|
||||
.ais-Pagination-list {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.ais-Pagination-item + .ais-Pagination-item {
|
||||
margin-left: 0.3rem;
|
||||
}
|
||||
.ais-Pagination-link {
|
||||
padding: 0.3rem 0.6rem;
|
||||
display: block;
|
||||
border: 1px solid #c4c8d8;
|
||||
border-radius: 5px;
|
||||
-webkit-transition: background-color 0.2s ease-out;
|
||||
transition: background-color 0.2s ease-out;
|
||||
}
|
||||
.ais-Pagination-link:hover,
|
||||
.ais-Pagination-link:focus {
|
||||
background-color: #e3e5ec;
|
||||
}
|
||||
.ais-Pagination-item--disabled .ais-Pagination-link {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
color: #a5abc4;
|
||||
}
|
||||
.ais-Pagination-item--disabled .ais-Pagination-link:hover,
|
||||
.ais-Pagination-item--disabled .ais-Pagination-link:focus {
|
||||
color: #a5abc4;
|
||||
background-color: #fff;
|
||||
}
|
||||
.ais-Pagination-item--selected .ais-Pagination-link {
|
||||
color: #fff;
|
||||
background-color: #0096db;
|
||||
border-color: #0096db;
|
||||
}
|
||||
.ais-Pagination-item--selected .ais-Pagination-link:hover,
|
||||
.ais-Pagination-item--selected .ais-Pagination-link:focus {
|
||||
color: #fff;
|
||||
}
|
||||
.ais-PoweredBy-text,
|
||||
.rheostat-tooltip,
|
||||
.rheostat-value,
|
||||
.ais-Stats-text {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.ais-PoweredBy-logo {
|
||||
margin-left: 0.3rem;
|
||||
}
|
||||
.ais-RangeSlider .rheostat-progress {
|
||||
background-color: #495588;
|
||||
}
|
||||
.ais-RangeSlider .rheostat-background {
|
||||
border-color: #878faf;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.ais-RangeSlider .rheostat-handle {
|
||||
border-color: #878faf;
|
||||
}
|
||||
.ais-RangeSlider .rheostat-marker {
|
||||
background-color: #878faf;
|
||||
}
|
||||
.ais-Panel-body .ais-RangeSlider {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
.ais-RatingMenu-item--disabled .ais-RatingMenu-count,
|
||||
.ais-RatingMenu-item--disabled .ais-RatingMenu-label {
|
||||
color: #c4c8d8;
|
||||
}
|
||||
.ais-RatingMenu-item--selected {
|
||||
font-weight: bold;
|
||||
}
|
||||
.ais-RatingMenu-link {
|
||||
line-height: 1.5;
|
||||
}
|
||||
.ais-RatingMenu-link > * + * {
|
||||
margin-left: 0.3rem;
|
||||
}
|
||||
.ais-RatingMenu-starIcon {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
width: 15px;
|
||||
fill: #ffc168;
|
||||
}
|
||||
.ais-RatingMenu-item--disabled .ais-RatingMenu-starIcon {
|
||||
fill: #c4c8d8;
|
||||
}
|
||||
.ais-HierarchicalMenu-searchBox > *,
|
||||
.ais-Menu-searchBox > *,
|
||||
.ais-RefinementList-searchBox > * {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.ais-SearchBox-form {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
.ais-SearchBox-input {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
padding: 0.3rem 1.7rem;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
border: 1px solid #c4c8d8;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.ais-SearchBox-input::-webkit-input-placeholder {
|
||||
color: #a5aed1;
|
||||
}
|
||||
.ais-SearchBox-input::-moz-placeholder {
|
||||
color: #a5aed1;
|
||||
}
|
||||
.ais-SearchBox-input:-ms-input-placeholder {
|
||||
color: #a5aed1;
|
||||
}
|
||||
.ais-SearchBox-input:-moz-placeholder {
|
||||
color: #a5aed1;
|
||||
}
|
||||
.ais-SearchBox-submit,
|
||||
.ais-SearchBox-reset,
|
||||
.ais-SearchBox-loadingIndicator {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
top: 50%;
|
||||
right: 0.3rem;
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.ais-SearchBox-submit {
|
||||
left: 0.3rem;
|
||||
}
|
||||
.ais-SearchBox-reset {
|
||||
right: 0.3rem;
|
||||
}
|
||||
.ais-SearchBox-submitIcon,
|
||||
.ais-SearchBox-resetIcon,
|
||||
.ais-SearchBox-loadingIcon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-webkit-transform: translateX(-50%) translateY(-50%);
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
.ais-SearchBox-submitIcon path,
|
||||
.ais-SearchBox-resetIcon path {
|
||||
fill: #495588;
|
||||
}
|
||||
.ais-SearchBox-submitIcon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
.ais-SearchBox-resetIcon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
.ais-SearchBox-loadingIcon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
.fcc_searchBar {
|
||||
flex-grow: 1;
|
||||
padding: 0 10px;
|
||||
max-height: 33px;
|
||||
}
|
||||
|
||||
.ais-SearchBox-input {
|
||||
padding-left: 25px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.ais-SearchBox-submitIcon > path {
|
||||
fill: #006400;
|
||||
}
|
||||
.ais-Hits {
|
||||
position: absolute;
|
||||
width: 90%;
|
||||
.fcc_searchBar .ais-SearchBox-input,
|
||||
.fcc_searchBar .ais-Hits {
|
||||
background-color: #fff;
|
||||
}
|
||||
.ais-Hits-item {
|
||||
|
||||
.fcc_searchBar .ais-SearchBox-form {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.fcc_searchBar .ais-Hits {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
left: 0;
|
||||
}
|
||||
.ais-Hits-list {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
border: 1px solid #c4c8d8;
|
||||
-webkit-box-shadow: 0 2px 5px 0px #e3e5ec;
|
||||
box-shadow: 0 2px 5px 0px #e3e5ec;
|
||||
|
||||
@media (min-width: 480px) {
|
||||
.fcc_searchBar .ais-Hits {
|
||||
width: 90%;
|
||||
left: 5%;
|
||||
}
|
||||
strong.ais-Highlight-highlighted {
|
||||
}
|
||||
|
||||
@media (min-width: 735px) {
|
||||
.fcc_searchBar .ais-Hits {
|
||||
width: 80%;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.fcc_searchBar {
|
||||
position: relative;
|
||||
}
|
||||
.fcc_searchBar .ais-Hits {
|
||||
width: calc(100% - 20px);
|
||||
left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* hits */
|
||||
.fcc_searchBar .ais-Highlight-highlighted {
|
||||
background-color: transparent;
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.fcc_searchBar .fcc_suggestion_item {
|
||||
padding: 10px;
|
||||
}
|
||||
.fcc_hits_wrapper {
|
||||
display: flex;
|
||||
|
||||
@ -41,7 +41,7 @@ const AllHits = connectAutoComplete(({ hits, currentRefinement }) => {
|
||||
const isHitsEmpty = nonQuerySuggestionHits.every(({ hits }) => !hits.length);
|
||||
|
||||
return currentRefinement && !isHitsEmpty ? (
|
||||
<div className='ais-Hits'>
|
||||
<div className='ais-Hits search-page'>
|
||||
<ul className='ais-Hits-list'>
|
||||
{nonQuerySuggestionHits.map(({ hits: results, index }) =>
|
||||
results.map(result => (
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
.ais-Hits {
|
||||
margin-top: 36px;
|
||||
z-index: 100;
|
||||
.search-page.ais-Hits {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
background: #fefefe;
|
||||
}
|
||||
|
||||
.ais-Hits-list {
|
||||
.search-page .ais-Hits-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@ -13,16 +12,16 @@
|
||||
border: 1px solid #efefef;
|
||||
}
|
||||
|
||||
.ais-Hits-list > a {
|
||||
.search-page .ais-Hits-list > a {
|
||||
width: 100%;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ais-Hits-list > a:nth-child(odd) {
|
||||
.search-page .ais-Hits-list > a:nth-child(odd) {
|
||||
background-color: #efefef;
|
||||
}
|
||||
|
||||
.ais-Hits-item {
|
||||
.search-page .ais-Hits-item {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
border-color: transparent;
|
||||
@ -31,10 +30,11 @@
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.ais-Hits-item:hover {
|
||||
background-color: rgba(0, 100, 0, 0.4);
|
||||
.search-page .ais-Hits-item:hover,
|
||||
.search-page .ais-Hits-item:focus {
|
||||
background-color: #006400;
|
||||
color: white;
|
||||
}
|
||||
.ais-Hits-item:hover em {
|
||||
.search-page .ais-Hits-item:hover em {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user