Skip to content

Commit

Permalink
Merge pull request #126 from findify/FI-8182-liquid-autocomplete-new-…
Browse files Browse the repository at this point in the history 
…settings

added new settings
  • Loading branch information
@wolff95
wolff95 authored Oct 28, 2024
2 parents 86750da + 9fc17c3 commit 02e7a8f
Show file tree
Hide file tree
Showing 4 changed files with 214 additions and 164 deletions.
152 changes: 90 additions & 62 deletions assets/findify-autocomplete.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ body {
background: var(--findify-background-color);
z-index: 9999 !important;
}
.findify-autocomplete .findify-zero-result-container{
.findify-autocomplete .findify-zero-result-container {
text-align: center;
}
.findify-autocomplete.findify-hidden {
Expand Down Expand Up @@ -65,8 +65,9 @@ body {
flex-direction: row;
flex-wrap: wrap;
margin-left: -10px;
margin-top: 20px;
padding-right: 20px;
display: grid;
gap: 10px;
}

.findify-autocomplete .findify-product-card-image-wrapper {
Expand All @@ -83,16 +84,9 @@ body {
}

.findify-autocomplete .findify-products-container > div {
flex-basis: 25%;
max-width: 25%;
padding-left: 10px;
margin: 0;
}

.findify-autocomplete .findify-products-wrapper {
padding-left: 15px;
}

.findify-close-autocomplete {
cursor: pointer;
position: absolute;
Expand All @@ -101,6 +95,7 @@ body {
top: 5px;
width: 20px;
height: 20px;
background: transparent;
}

.findify-close-autocomplete svg {
Expand Down Expand Up @@ -142,6 +137,9 @@ body {
padding: 4px;
text-decoration: none;
background: initial;
top: 40px;
position: absolute;
right: 10px;
}

.findify-view-all span {
Expand Down Expand Up @@ -172,13 +170,24 @@ body {
/* horizontal suggestions */
/* Not currently in use */
@media (min-width: 767px) {
.findify-autocomplete .findify-suggestions-wrapper.findify-suggestions-horizontal ul {
.findify-autocomplete .findify-suggestions-wrapper.findify-suggestions-horizontal ul,
.findify-autocomplete.findify-suggestions-horizontal .findify-content-horizontal .findify-content-list {
display: flex;
flex-wrap: wrap;
margin-top: 20px;
}

.findify-autocomplete .findify-suggestions-wrapper.findify-suggestions-horizontal ul li {
flex-direction: row;
gap: 5px;
}
.findify-content-horizontal {
flex: 1;
flex-basis: 100%;
}
.findify-autocomplete .findify-suggestions-wrapper.findify-suggestions-horizontal ul li,
.findify-autocomplete.findify-suggestions-horizontal
.findify-content-horizontal
.findify-content-list
.findify-content-card[data-image="false"]
.findify-content-title {
background: #d3d3d3;
padding: 2px 10px;
border-radius: 90px;
Expand All @@ -188,38 +197,54 @@ body {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
height: auto;
line-height: 1;
display: flex;
cursor: pointer;
text-decoration: none;
}

.findify-suggestion {
cursor: pointer;
}

.findify-autocomplete .findify-suggestions-wrapper.findify-suggestions-horizontal ul li:hover {

.findify-autocomplete .findify-suggestions-wrapper.findify-suggestions-horizontal ul li:hover,
.findify-autocomplete.findify-suggestions-horizontal
.findify-content-horizontal
.findify-content-list
.findify-content-card[data-image="false"]
.findify-content-title:hover {
cursor: pointer;
background: #d9d9d9;
}

.findify-autocomplete .findify-suggestions-wrapper.findify-suggestions-horizontal ul li a {

.findify-autocomplete .findify-suggestions-wrapper.findify-suggestions-horizontal ul li a,
.findify-autocomplete.findify-suggestions-horizontal .findify-content-horizontal .findify-content-list a {
text-decoration: none;
color: #000;
height: auto;
line-height: 1;
padding: 5px;
}
.findify-autocomplete.findify-suggestions-horizontal .findify-content-horizontal .findify-content-list a {
text-decoration: none;
display: block;
height: auto;
padding: 0;
}
.findify-autocomplete.findify-suggestions-horizontal .findify-content-horizontal .findify-content-list .findify-content-title {
padding: 8px 12px;
}
.findify-autocomplete.findify-suggestions-horizontal .findify-content-horizontal .findify-content-list .findify-content-card[data-image="true"] {
width: 150px;
}
}


@media (max-width: 767px) {
.findify-autocomplete .findify-suggestions-wrapper.findify-mobile-horizontal ul {
display: flex;
flex-wrap: wrap;
margin-top: 20px;
}

.findify-autocomplete .findify-suggestions-wrapper.findify-mobile-horizontal ul li {
background: #d3d3d3;
padding: 2px 10px;
Expand All @@ -235,27 +260,25 @@ body {
display: flex;
cursor: pointer;
}

.findify-suggestion {
cursor: pointer;
}

.findify-autocomplete .findify-suggestions-wrapper.findify-mobile-horizontal ul li:hover {
cursor: pointer;
background: #d9d9d9;
}

.findify-autocomplete .findify-suggestions-wrapper.findify-mobile-horizontal ul li a {
text-decoration: none;
color: #000;
height: auto;
line-height: 1;
padding: 5px;
}

}


.findify-autocomplete .findify-suggestions-wrapper .findify-suggestion-item a {
color: #c0c0c0;
}
Expand Down Expand Up @@ -284,9 +307,7 @@ body {
.findify-autocomplete-dropdown .findify-products-wrapper h3 {
}

.findify-autocomplete-dropdown
.findify-autocomplete-title-wrapper
a.findify-view-all {
.findify-autocomplete-dropdown .findify-autocomplete-title-wrapper a.findify-view-all {
}

.findify-autocomplete-dropdown .findify-suggestions-wrapper ul {
Expand All @@ -305,32 +326,33 @@ body {

.findify-autocomplete-fullscreen .findify-autocomplete-content {
display: flex;
gap: 15px;
}
.findify-autocomplete-fullscreen.findify-suggestions-horizontal .findify-autocomplete-content{
flex-direction: column;
@media (min-width: 767px) {
.findify-autocomplete-fullscreen.findify-suggestions-horizontal .findify-autocomplete-content {
flex-wrap: wrap;
gap: 0;
.findify-suggestions-wrapper {
flex: 1;
flex-basis: 100%;
}
}
}

.findify-autocomplete-fullscreen .findify-suggestions-wrapper {
flex: 0.5;
}

.findify-autocomplete-fullscreen .findify-suggestions-wrapper h2 {
padding-left: 30px;
color: var(--findify-text-color);
}

.findify-autocomplete-fullscreen .findify-suggestions-wrapper ul {
padding-left: 30px;
}

.findify-autocomplete-fullscreen .findify-products-wrapper {
padding-left: 30px;
flex: 2;
}

/* fulscreen end */

/* slide-in */
.findify-autocomplete.findify-autocomplete-slide-in,
.findify-autocomplete.findify-autocomplete-slide-in.findify-hidden {
right: -100%;
Expand All @@ -352,8 +374,7 @@ body {
transition: right 0.5s ease-in;
}

.findify-autocomplete.findify-autocomplete-slide-in
.findify-autocomplete-header {
.findify-autocomplete.findify-autocomplete-slide-in .findify-autocomplete-header {
margin-bottom: 15px;
display: flex;
align-items: center;
Expand All @@ -370,14 +391,11 @@ body {
height: 40px;
}

.findify-autocomplete.findify-autocomplete-slide-in
.findify-close-autocomplete {
.findify-autocomplete.findify-autocomplete-slide-in .findify-close-autocomplete {
display: none;
}

.findify-autocomplete.findify-autocomplete-slide-in
.findify-autocomplete-header
.findify-close-autocomplete {
.findify-autocomplete.findify-autocomplete-slide-in .findify-autocomplete-header .findify-close-autocomplete {
display: block;
right: 15px;
top: 0;
Expand All @@ -388,9 +406,7 @@ body {
padding-right: 0;
}

.findify-autocomplete.findify-autocomplete-slide-in
.findify-autocomplete-title-wrapper
a.findify-view-all {
.findify-autocomplete.findify-autocomplete-slide-in .findify-autocomplete-title-wrapper a.findify-view-all {
padding-right: 0;
}

Expand Down Expand Up @@ -458,10 +474,6 @@ body {
white-space: normal;
}

.findify-autocomplete-fullscreen .findify-products-wrapper {
padding-top: 15px;
}

.findify-autocomplete-fullscreen .findify-suggestions-wrapper h2,
.findify-autocomplete-fullscreen .findify-suggestions-wrapper ul,
.findify-autocomplete-fullscreen .findify-products-wrapper,
Expand All @@ -473,7 +485,7 @@ body {

.findify-autocomplete .findify-suggestions-wrapper ul,
.findify-autocomplete .findify-suggestions-wrapper.findify-suggestions-horizontal ul {
margin-top: 10px;
margin: 0px;
}

.findify-autocomplete-title-wrapper a.findify-view-all {
Expand All @@ -495,16 +507,13 @@ body {
flex-direction: column;
flex-wrap: nowrap;
}
.findify-autocomplete .findify-products-container.findify-mobile-products-per-row-2{
.findify-autocomplete .findify-products-container.findify-mobile-products-per-row-2 {
flex-direction: row;
flex-wrap: wrap;
}
.findify-autocomplete .findify-products-container.findify-mobile-products-per-row-2 div.findify-product-card{
max-width: 50%;
width: 50%;
}
#findify-autocomplete .findify-products-container.findify-mobile-products-per-row-2 .findify-product-card{
flex-direction: column

#findify-autocomplete .findify-products-container.findify-mobile-products-per-row-2 .findify-product-link {
flex-direction: column;
}

.findify-view-all-bottom {
Expand Down Expand Up @@ -534,7 +543,6 @@ body {
margin-left: 15px;
width: 100%;
}

}

/* AUTOCOMPLETE CONTENT */
Expand All @@ -553,5 +561,25 @@ body {
margin-top: 0;
margin-bottom: 0;
color: var(--findify-text-color);
margin: 20px 0;
}
.findify-content-title {
margin: 0;
height: auto;
}
}
@media (max-width: 768px) {
.findify-autocomplete-content > div {
order: 2;
}
.findify-autocomplete-content .findify-suggestions-wrapper {
order: 0;
}
.findify-autocomplete-content .findify-content-horizontal {
order: 1;
}
.findify-autocomplete-title-wrapper h2,
.findify-autocomplete-content-wrapper .findify-autocomplete-tab-content .findify-autocomplete-content-title {
margin: 4px 0;
}
}
Loading

0 comments on commit 02e7a8f

Please sign in to comment.