Created
June 17, 2019 20:52
-
-
Save cweachock/2d2170e623ab1f91f777aa0d6842c2c1 to your computer and use it in GitHub Desktop.
On Site Search Styling
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@media (max-width:639px){ | |
/****************** | |
SEARCH INPUT STYLES | |
*******************/ | |
.ea-active{ | |
position:relative; | |
overflow: hidden; | |
} | |
.ea-active div.icon-close{ | |
font-size: 1.74em; | |
padding: 1em; | |
top: 0px; | |
right: 0px; | |
position: fixed; | |
} | |
.ea-active .topnav-search-container{ | |
display: block; | |
top: 0px; | |
position: fixed; | |
width: 100%; | |
background: white; | |
} | |
.ea-active .topnav-search-container{ | |
display:block; | |
} | |
.ea-active .topnav-search-button-container{ | |
display:none; | |
} | |
.ea-active input.topnav-search-input{ | |
border-width:2px !important; | |
} | |
.ea-background { | |
width: 100%; | |
height: 100%; | |
background-color: white; | |
z-index: 103; | |
position: fixed; | |
opacity: 1; | |
top:60px; | |
left:0px; | |
display:none; | |
} | |
.ea-autocomplete-wrapper[style*="display: none;"]+.ea-background { | |
display:block; | |
} | |
.ea-autocomplete-wrapper[style*="display: block;"]+.ea-background { | |
z-index:99; | |
} | |
} | |
/******************** | |
main wrapper stylezzz | |
*********************/ | |
.ea-autocomplete-wrapper { | |
transition: all 300ms cubic-bezier(0.29, 0.75, 1, 1); | |
position:fixed; | |
z-index: 100; | |
display:none; | |
margin-top:0px; | |
background-color:white; | |
left: 0px !important; | |
width: 100%; | |
top:60px !important; | |
margin-left:0px; | |
overflow: scroll; | |
height: 100%; | |
} | |
a.ea-sug-nav-link{ | |
text-transform:lowercase; | |
} | |
.ea-products-area-title h6{ | |
margin-bottom:1.5em; | |
} | |
ul.ea-products li{ | |
margin-bottom:1em; | |
} | |
.ea-sug-product-name, .ea-sug-product-price { | |
padding-left:2em; | |
color:#2a2a2a; | |
text-align:left; | |
text-transform: uppercase; | |
font-family: Neue Helvetica VFDP Cond,helvetica,sans-serif; | |
font-size: .9rem; | |
font-weight: 400; | |
letter-spacing: .03em; | |
line-height: 1.2; | |
} | |
.ea-sug-product-price { | |
font-weight:300; | |
font-size:1rem; | |
} | |
.ea-autocomplete-wrapper{ | |
box-shadow:none; | |
} | |
.ea-products-area-title h6{ | |
display:none; | |
} | |
.ea-suggestions h6{ | |
margin-top:1em; | |
} | |
.ea-products-area-title-mobile{ | |
padding-top:.5em; | |
padding-bottom:.5em; | |
} | |
.ea-suggestions p{ | |
padding-top:1em; | |
} | |
ul.ea-suggestions>h6{ | |
font-family: "Neue Helvetica VFDP Cond",helvetica,sans-serif; | |
letter-spacing: inherit; | |
font-weight: 700; | |
text-transform: uppercase; | |
font-size: 1.38462rem; | |
} | |
.ea-products-area-title-mobile { | |
font-family: "Neue Helvetica VFDP Cond",helvetica,sans-serif !important; | |
letter-spacing: inherit !important; | |
font-weight: 700 !important; | |
text-transform: uppercase !important; | |
font-size: 1.38462rem !important; | |
margin-left:.75em; | |
} | |
.ea-autocomplete { | |
flex-direction:column; | |
padding:0px; | |
/*margin-top:2em;*/ | |
} | |
.ea-products li{ | |
width:100%; | |
display:block; | |
padding-right:0px; | |
min-width: 140px; | |
margin-right:-10px; | |
} | |
.ea-sug-product-picture img{ | |
width:150px; | |
} | |
div.ea-products-area{ | |
overflow-y: hidden; | |
overflow-x: scroll; | |
height:275px; | |
} | |
.ea-products-area ul{ | |
display:inline-flex; | |
overflow-x:scroll; | |
width:100%; | |
margin-left:0px; | |
} | |
.ea-sug-product-price{ | |
font-size:.85rem; | |
margin-left: .3em; | |
} | |
.ea-sug-product-name{ | |
padding-top:.5em; | |
padding-right:0px; | |
max-width:140px; | |
} | |
.ea-searches-area{ | |
margin-left:.5em; | |
} | |
.ea-search-query, .ea-highlight{ | |
font-weight:600; | |
} | |
ul.ea-cat-sug li { | |
list-style:none; | |
} | |
ul.ea-cat-sug{ | |
margin-left:0px; | |
} | |
ul.ea-suggestions li { | |
list-style:none; | |
} | |
@media (min-width:640px){ | |
/************ | |
GLOBAL STYLES | |
*************/ | |
.topnav .topnav-search-container .topnav-search-button-container{ | |
padding-right:1em; | |
} | |
/******************** | |
desktop main wrapper styles | |
*********************/ | |
.topnav-sticky-min .ea-autocomplete-wrapper{ | |
margin-top: -83px; | |
} | |
.ea-autocomplete-wrapper[style*="display: none;"]+.ea-background { | |
display: none; | |
opacity:0; | |
transition: opacity 2s cubic-bezier(0.29, 0.75, 1, 1); | |
} | |
.ea-autocomplete-wrapper[style*="display: block;"]{ | |
animation-name: slideDown; | |
animation-duration: .25s; | |
animation-timing-function: cubic-bezier(0, 0, .16, .99); | |
} | |
.ea-autocomplete-wrapper[style*="display: block;"]+.ea-background { | |
display: block; | |
transition: all 1s cubic-bezier(0.29, 0.75, 1, 1); | |
-webkit-transition: all 1s cubic-bezier(0.29, 0.75, 1, 1); | |
opacity: .7; | |
} | |
ul.ea-suggestions{ | |
margin-left:.5em; | |
} | |
ul.ea-suggestions>h6{ | |
font-family:"Neue Helvetica VFDP Cond",helvetica,sans-serif; | |
letter-spacing:inherit; | |
font-weight:500; | |
} | |
.ea-products-area-title h6{ | |
font-family:"Neue Helvetica VFDP Cond",helvetica,sans-serif; | |
letter-spacing:inherit; | |
font-weight:500; | |
} | |
@keyframes slideDown { | |
from {top: -1000px;} | |
to {top: 120px;} | |
} | |
@keyframes slideUp { | |
from {top: 120px;} | |
to {top: -1000px !important;} | |
} | |
@-webkit-keyframes slideDown { | |
from {top: -1000px;} | |
to {top: 120px;} | |
} | |
@-webkit-keyframes slideUp { | |
from {top: 120px;} | |
to {top: -1000px !important;} | |
} | |
/*********************************** | |
Begin background overlay container | |
to seperate search results from body | |
************************************/ | |
.ea-background { | |
width: 100%; | |
height: 100%; | |
background-color: black; | |
z-index: 98; | |
position: absolute; | |
opacity: .7; | |
top:0px; | |
left:0px; | |
display:none; | |
} | |
.ea-autocomplete-wrapper{ | |
position:fixed; | |
z-index:99; | |
border-radius: 0px 0px 0px .5em; | |
margin-top:-25px; | |
padding-top:3em; | |
left: unset !important; | |
right: 0px; | |
overflow: auto; | |
height:auto; | |
display:none; | |
} | |
.ea-autocomplete{ | |
display:flex; | |
flex-direction:row-reverse; | |
background: white; | |
text-align: left; | |
margin-top:0px; | |
border-radius: 0px 0px 0px .5em; | |
padding:1em; | |
} | |
/************************************* | |
Begin text search results list styling | |
**************************************/ | |
.overlay-bg.active{ | |
z-index:1; | |
} | |
ul.ea-suggestions>h6{ | |
font-size: 1.38462rem; | |
margin-top:1.5em; | |
font-weight:500; | |
margin-bottom:.5em; | |
color:#333; | |
} | |
a.ea-sug-nav-link:hover{ | |
color:#e72b1e; | |
} | |
ul.ea-cat-sug li:hover{ | |
color: rgb(231, 43, 30); | |
} | |
li.ea-search-suggestion:hover { | |
cursor: pointer; | |
color: rgb(231, 43, 30); | |
} | |
.ea-search-query{ | |
font-weight:700; | |
} | |
.ea-suggestions p{ | |
padding-bottom:1em; | |
padding-top:0px; | |
font-size:1em; | |
} | |
.ea-autocomplete .ea-highlight { | |
font-weight: bold; | |
} | |
.ea-products li{ | |
width:225px; | |
margin-right:0px; | |
} | |
div.ea-searches-area{ | |
min-width:25%; | |
} | |
.ea-autocomplete-wrapper{ | |
width:700px; | |
} | |
li.ea-search-suggestion, a.ea-sug-nav-link { | |
font-size:1rem; | |
} | |
.ea-sug-product-name{ | |
font-size:1rem; | |
max-width:200px; | |
} | |
.ea-searches-area{ | |
min-width:30%; | |
} | |
.ea-products-area{ | |
min-width:25%; | |
} | |
.ea-searches-area,.ea-products-area{ | |
height:auto; | |
background:white; | |
} | |
ul.ea-suggestions li p { | |
display:inline; | |
} | |
li.ea-first{ | |
display:inline-block; | |
} | |
/**************************************** | |
Begin Visual rich content results styling | |
*****************************************/ | |
/******* LAYOUT *******/ | |
.ea-products-area-title h6{ | |
display:block; | |
} | |
div.ea-products-area{ | |
height:100%; | |
overflow:visible; | |
} | |
.ea-autocomplete ul { | |
list-style: none; | |
margin: 0px; | |
padding: 0px; | |
display:block; | |
} | |
.ea-products li { | |
display:inline-flex; | |
align-items: center; | |
padding-right: 15px; | |
} | |
.ea-products-area ul{ | |
overflow-x: auto; | |
} | |
.ea-sug-product-info { | |
width: 100%; | |
} | |
.ea-sug-product-info-link:hover{ | |
color:#e72b1e; | |
} | |
.ea-products-area-title-mobile{ | |
display:none; | |
} | |
/******* PRODUCT IMAGES *******/ | |
.ea-products-area .ea-sug-product-picture { | |
text-align: center; | |
} | |
.ea-sug-product-picture a { | |
display: inline-block; | |
} | |
.ea-sug-product-picture img { | |
width: 100%; | |
transition: all 250ms cubic-bezier(0, 0, 0.32, 0.95); | |
-webkit-transition: all 250ms cubic-bezier(0, 0, 0.32, 0.95); | |
} | |
.ea-sug-product:hover img { | |
transform: scale(1.1); | |
} | |
.ea-sug-product-info-link:hover > .ea-sug-product-price{ | |
color:#e72b1e; | |
} | |
.ea-sug-product-info-link:hover > .ea-sug-product-name{ | |
color:#e72b1e; | |
} | |
} | |
@media (min-width:1024px){ | |
.ea-autocomplete-wrapper{ | |
max-width:900px; | |
width: 100%; | |
} | |
.ea-products li { | |
width: 300px; | |
} | |
div.ea-searches-area{ | |
min-width:30%; | |
} | |
.ea-products-area-title h6{ | |
font-size:1.5rem; | |
} | |
.ea-sug-product-name{ | |
font-size:1.25rem; | |
} | |
.ea-sug-product-picture img{ | |
width:250px; | |
} | |
.ea-sug-product-price{ | |
font-size:1.1rem; | |
margin-right:.5em; | |
} | |
li.ea-search-suggestion, a.ea-sug-nav-link { | |
font-size:1.1rem; | |
} | |
} | |
@media (min-width:1400px){ | |
.ea-autocomplete-wrapper{ | |
max-width:1308px; | |
width:100%; | |
} | |
.ea-products li{ | |
width:400px; | |
} | |
.ea-sug-product-picture img{ | |
width:300px; | |
} | |
.ea-products-area-title h6{ | |
font-size:1.75rem; | |
} | |
.ea-sug-product-name,{ | |
font-size:1.35rem; | |
} | |
li.ea-search-suggestion, a.ea-sug-nav-link { | |
font-size:1.2rem; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment