assets/css/scss/lsx-search.scss
/**
* LSX Search styles.
*
* @package lsx-search
*/
@import "include-media";
@import "customizer-search-body-colours";
@import "lsx-blog-customizer";
@import "layout-selector";
// Spacing
/*@include media('phone') {
.search, .archive {
.facetwp-sidebar.widget-area {
+ .content-area {
width: 66.66667%;
}
}
}
}*/
@include media(">=tablet") {
.search,
.archive,
.blog {
.content.role.row {
margin-right: auto;
margin-left: auto;
}
.facetwp-sidebar.widget-area {
padding: 0px 20px 20px 20px;
margin-top: 4.25rem;
max-width: 271px;
margin-left: 5px;
margin-right: 5px;
+ .content-area {
margin-top: 4.25rem;
width: 100%;
max-width: 695px;
padding-left: 20px;
padding-right: 0;
&.search-sidebar-left {
padding-left: 0;
padding-right: 20px;
}
.facetwp-template {
.lsx-to-archive-item {
margin-top: 2.4rem;
}
}
.facetwp-bottom-row-1 {
margin-top: 2.4rem;
}
}
}
}
}
@include media(">=desktop") {
.search,
.archive,
.blog {
.facetwp-sidebar.widget-area {
+ .content-area {
width: 100%;
max-width: 859px;
}
}
}
}
%bootstrap-form-control {
display: block;
width: 100%;
height: 50px;
// padding: 6px 12px;
// font-size: 15px;
// line-height: 1.6;
color: #4a4a4a;
background-color: #fff;
background-image: none;
border: 1px solid #ddd;
border-radius: 2px;
// box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
// transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
// lsx-form-control
border-width: 2px;
box-shadow: none;
font-size: 18px;
line-height: 1.33;
padding: 10px 20px;
transition: all 150ms ease;
&:focus {
border-color: #418ad0;
// outline: 0;
// box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(65, 138, 208, 0.6);
}
}
#primary.content-area {
@include media("<phone") {
margin-top: 4.25rem;
}
#facetwp-top {
.facetwp-sort-select,
.facetwp-type-sort select {
//left: 10px;
position: relative;
}
}
}
#secondary.facetwp-sidebar {
padding: 0px 15px 15px 11px;
@include media("<phone") {
margin-top: 4.25rem;
margin-bottom: 2.4rem;
// .row:not(.facetwp-row) {
// display: none;
// }
}
@media (min-width: 768px) {
.facetwp-row {
border-radius: 3px 3px 3px 3px;
}
}
.facetwp-filter-title {
text-align: left;
@include media("<phone") {
display: none;
}
}
.facetwp-item,
.facetwp-filter-title {
background: #ffffff;
border-radius: 0;
padding: 15px 12px;
margin-bottom: 3px;
}
.facetwp-type-search {
background: transparent;
padding: 0px;
margin-top: 0 !important;
}
.facetwp-item.facetwp-form {
background: transparent;
padding: 0px;
margin-bottom: 25px;
.search-form {
.input-group {
.field:first-child {
width: 77%;
}
.field:nth-child(2) {
width: 23%;
}
}
.btn.search-submit {
box-shadow: 1px 1px 0 0 #27639e;
border-radius: 0 2px 2px 0;
}
}
}
}
.archive-tour-operator {
.facetwp-template {
.row.lsx-to-archive-items {
margin-top: -2.5rem;
}
}
}
.facetwp-type-search {
.facetwp-search-wrap {
.facetwp-search {
@extend %bootstrap-form-control;
border-radius: 2px 0 0 2px;
float: none;
padding: 8px 14px 10px;
width: 190px;
@include media(">=phone") {
width: 120px;
}
@include media(">=desktop") {
width: 170px;
}
}
}
}
.search-submit-facetwp {
body.facetwp-loading-body & {
display: none;
}
}
.lsx-search-form {
.input-group {
width: 100%;
}
.field {
display: inline-block;
float: left;
margin-left: 0;
margin-top: 10px;
width: 80%;
.facetwp-search {
min-width: 100%;
border: 1px solid rgb(228, 228, 228);
}
&:not(.submit-button) {
position: relative;
z-index: 2;
}
&.submit-button {
width: 20%;
.search-submit {
width: 100%;
}
}
@include media(">=phone") {
margin-left: 10px;
margin-top: 0;
&:first-child {
margin-left: 0;
}
}
&.combination-toggle.hidden {
display: none;
}
.search-field {
border-radius: 0;
float: none;
padding: 8px 14px 10px;
width: 230px;
@include media(">=phone") {
width: 400px;
}
&.error {
border-color: red;
}
}
.btn {
@include media("<phone") {
padding: {
left: 20px;
right: 20px;
}
.fa {
display: none;
}
}
}
.btn-dropdown {
@include media("<phone") {
min-width: 230px;
}
}
&.submit-button:nth-child(2) {
margin-left: 0;
.btn {
margin-left: -3px;
@include media("<phone") {
padding-right: 17px;
}
}
}
&.submit-button:not(:nth-child(2)) {
.btn {
@include media("<phone") {
min-width: 228px;
}
}
}
}
}
.blog,
.archive,
.search-results,
.search-no-results {
.is-loading .facetwp-overlay {
position:absolute;
}
.facetwp-sidebar.widget-area {
.facetwp-item {
//margin-top: 4.25rem;
&:first-child {
margin-top: 0;
}
.facetwp-collapsed {
display: flex;
justify-content: space-between;
button.facetwp-collapse {
border: none;
background: none;
height: 100%;
&:before {
content: " ";
font-family: FontAwesome;
font-size: 15px;
}
&[aria-expanded="false"] {
&:before {
content: "\f067";
}
}
&[aria-expanded="true"] {
&:before {
content: "\f068";
}
}
}
}
}
.facetwp-facet {
margin-bottom: 0;
margin-top: 2rem;
}
.lsx-search-title {
text-align: left;
@include media(">=phone") {
margin-top: 2rem;
margin-bottom: 2rem;
&.lsx-to-search-title-results {
padding-bottom: 2rem;
}
}
@include media(">=phone") {
margin-top: 0;
margin-bottom: 0;
}
.facetwp-counts {
display: inline-block;
}
}
.facetwp-results {
margin-top: 20px !important;
//border-bottom: 1px solid #edebeb;
padding-bottom: 20px;
.lsx-search-title {
margin-bottom: 0;
}
}
.facetwp-results {
.input-group-btn {
vertical-align: top;
}
}
.facetwp-type-slider {
.noUi-connect {
box-shadow: none;
}
.noUi-target {
background-color: #fff;
border-radius: 2px;
box-shadow: none;
padding: 0 15px;
}
}
.facetwp-form {
.search-field {
width: 190px;
height: 50px;
@include media(">=phone") {
width: 120px;
}
@include media(">=desktop") {
width: 170px;
}
}
.btn.search-submit {
padding-left: 20px;
padding-right: 17px;
font-size: 0;
height: 48px;
&:before {
content: "\f002";
font-family: FontAwesome;
font-size: 20px;
text-align: center;
font-weight: 200;
}
}
}
}
}
.lsx-pagination-wrapper.facetwp-custom {
margin-top: 2.4rem;
@include media(">=phone") {
margin-top: 0;
}
.facetwp-page {
margin: 0;
padding: 0;
cursor: pointer;
}
}
.facetwp-type-alpha {
&.facetwp-type-alpha {
margin-bottom: 0;
@include media(">=desktop") {
line-height: 40px;
}
}
.facetwp-alpha {
margin-right: 0;
&.available {
transition: color 300ms ease;
}
& + .facetwp-alpha {
margin-left: 5px;
}
}
}
.facetwp-top-row-1 {
margin: 0;
}
.facetwp-top-row-2 {
margin-top: 12px;
}
.facetwp-bottom-row-1 {
margin-top: 4.25rem;
}
.facetwp-sort,
.facetwp-per-page,
#facetwp-top .facetwp-type-sort
{
@include media(">=phone") {
float: left;
}
}
//Original facetwp pager
.facetwp-type-pager {
@include media(">=phone") {
float: right;
}
}
.facetwp-pager {
@include media(">=phone") {
float: right;
}
> .facetwp-page {
border-radius: 3px;
border-style: solid;
border-width: 2px;
display: inline-block;
height: 40px;
line-height: 36px;
text-align: center;
vertical-align: top;
width: 40px;
cursor: pointer;
margin-right: 5px;
&.active,
&:hover {
color: #fff !important;
}
&.dots {
border: none;
}
&.prev {
font-size: 0;
&:before {
font: normal normal normal 15px/1 FontAwesome;
content: "\f100";
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
}
&.next {
font-size: 0;
&:before {
font: normal normal normal 15px/1 FontAwesome;
content: "\f101";
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
}
}
}
.facetwp-sort,
.facetwp-per-page,
#facetwp-top .facetwp-type-sort {
background-color: white;
border: 1px solid #dadddf;
&:hover {
cursor: pointer;
box-shadow: 0.5px 0.5px 1px #ddd;
z-index: 1;
}
}
.facetwp-sort-select,
.facetwp-per-page-select,
.woocommerce select.facetwp-sort-select,
#facetwp-top .facetwp-type-sort select {
cursor: pointer;
appearance: none;
background: transparent;
background-repeat: no-repeat;
background-position-x: 100%;
background-position-y: 50%;
border-style: solid;
border-width: 1px;
box-shadow: none;
display: inline-block;
font-size: 14px;
line-height: 1.25;
min-width: 160px;
height: 50px;
padding: 0;
transition: all 150ms ease;
width: auto;
border-radius: 0;
background: none;
border: none;
z-index: 1;
}
.facetwp-per-page:after,
.facetwp-sort:after,
#facetwp-top .facetwp-type-sort:after {
content: "\f078";
color: #999999;
position: relative;
right: 30px;
font-family: FontAwesome;
font-size: 10px;
top: 0px;
cursor: pointer;
z-index: 0;
}
.lsx-body-grid-layout.search {
.facetwp-template {
> .post-wrapper {
margin-top: 0 !important;
.lsx-slot {
&:first-child,
&:nth-child(2),
&:nth-child(3) {
@include media(">=phone") {
margin-top: 0 !important;
}
}
.moretag {
display: block;
margin: 0px -15px -15px;
padding: 1.3rem 0;
text-align: center;
transition: background 300ms ease;
color: #fff;
text-transform: initial;
@include media("<=phone") {
margin: 0px -10px -15px;
}
}
.entry-layout {
padding-bottom: 0;
}
.post-tags-wrapper,
.entry-meta,
.post-meta-categories {
display: none;
}
.entry-title {
text-align: center;
}
}
}
}
}
.facetwp-template {
.searchwp-revised-search-notice {
display: block;
width: 100%;
padding: 0 15px;
}
> .no-results {
margin-top: 4rem;
}
article.lsx-slot {
position: relative;
.lsx-label-post-type {
padding: 4px 1rem;
position: absolute;
right: 25px;
top: 10px;
z-index: 1;
}
.entry-layout {
padding-bottom: 0;
.entry-summary {
padding-bottom: 15px;
}
}
.post-tags-wrapper,
.entry-meta,
.post-meta-categories {
display: none;
}
.moretag {
text-transform: initial;
}
}
}
body.blog,
body.category,
body.tag {
&:not(.lsx-hide-post-category) {
.facetwp-template {
article.lsx-slot {
.post-meta-categories {
display: block;
}
}
}
}
&:not(.lsx-hide-post-tags) {
.facetwp-template {
article.lsx-slot {
.post-tags-wrapper {
display: block;
}
}
}
}
&:not(.lsx-hide-post-author) {
.facetwp-template {
article.lsx-slot {
.entry-meta {
display: block;
padding-top: 0;
.post-meta-author {
display: inline;
}
}
}
}
}
&:not(.lsx-hide-post-date) {
.facetwp-template {
article.lsx-slot {
.entry-meta {
display: block;
padding-top: 0;
.post-meta-time {
display: inline;
}
}
}
}
}
}
.lsx-body-list-layout {
.facetwp-template {
article.lsx-slot {
.lsx-label-post-type {
left: 10px;
right: initial;
text-transform: capitalize;
}
}
}
}
.woocommerce,
.woocommerce-page {
.facetwp-template {
ul.products {
margin-top: 0; // Same margin-bottom from li.product
li.product {
@include media(">=phone") {
width: 30.75%;
}
}
}
}
}
.facetwp-filters-wrap {
@include media("<phone") {
height: 100%;
left: 0;
margin: 0 !important;
padding: 15px;
position: fixed !important;
overflow-x: visible;
overflow-y: auto;
top: 0;
transform: translate(-100%, 0);
z-index: 7;
}
}
.ssm-overlay {
background-color: rgba(0, 0, 0, 0.2);
bottom: 0;
display: none;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 5;
}
.ssm-nav-is-open {
overflow: hidden;
#secondary {
z-index: 9999;
}
}
.ssm-row-margin-bottom {
margin-bottom: 4.25rem;
}
.ssm-row-margin-top {
margin-top: 4.25rem;
}
.facetwp-slider-wrap {
padding-bottom: 2.4rem;
}
.facetwp-slider-label {
font-size: 18px;
}
.facetwp-hidden {
display: none;
}
.facetwp-toggle {
cursor: pointer;
}
.facetwp-checkbox {
cursor: pointer;
padding-left: 25px;
position: relative;
& + & {
margin-top: 5px;
}
&:before {
content: "\f096";
color: inherit;
display: inline-block;
font-family: "FontAwesome";
font-size: 18px;
line-height: 1;
position: absolute;
left: 0;
text-rendering: auto;
top: 4px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
&.checked {
&:before {
content: "\f14a";
}
}
&.depth-1 {
margin-left: 25px;
}
&.depth-2 {
margin-left: 50px;
}
&.country {
display: none;
.continent-visible & {
margin-left: 20px;
}
&.continent-checked {
display: block;
}
}
&.region {
margin-left: 20px;
display: none;
.continent-visible & {
margin-left: 40px;
}
&.country-checked {
display: block;
}
}
}
.facetwp-radio {
cursor: pointer;
padding-left: 25px;
position: relative;
& + & {
margin-top: 5px;
}
&:before {
content: "\f10c";
color: inherit;
display: inline-block;
font-family: "FontAwesome";
font-size: 15px;
line-height: 1;
position: absolute;
left: 0;
text-rendering: auto;
top: 5px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
&.checked {
&:before {
content: "\f111";
}
}
&.depth-1 {
margin-left: 25px;
}
&.depth-2 {
margin-left: 50px;
}
}
.facetwp-overflow {
margin-top: 5px;
}
.facetwp-loading {
display: block;
&:before {
animation: fa-spin 2s infinite linear;
content: "\f110";
color: inherit;
display: inline-block;
font-family: "FontAwesome";
font-size: 16px;
line-height: 1;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
.facetwp-results-clear-btn {
margin-top: 10px;
}
.facetwp-slider-reset {
margin-top: 10px;
}
@include customizer-search-body-colours(
#f6f6f6,
#dadddf,
#4a4a4a,
#418ad0,
#f7ae00,
#919191
);
#ui-datepicker-div {
z-index: 99 !important;
}
/* New style */
body:not(.search-no-results) {
#facetwp-top,
#facetwp-bottom > .row {
background-color: transparent;
border: none;
}
.lsx-search-title.lsx-search-title-results {
display: flex;
margin-bottom: 0;
}
.facetwp-sidebar {
background-color: transparent;
border: none;
}
#facetwp-top {
margin-bottom: 25px;
}
#facetwp-top,
#facetwp-bottom > .row {
padding: 0;
margin-left: 0;
margin-right: 0;
min-height: 50px;
@media (max-width: 767px) {
margin-left: 0;
margin-right: 0;
}
.row > .col-xs-12 {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0;
height: 51px;
.facetwp-pager {
flex-grow: 2;
display: flex;
justify-content: flex-end;
}
}
}
#facetwp-bottom {
.col-xs-12 {
padding: 0;
}
}
}
.search-no-results {
#facetwp-top,
.facetwp-sidebar {
background-color: transparent;
border: none;
}
#facetwp-top,
#facetwp-bottom {
display: none;
}
.facetwp-template {
margin-top: 1em;
background-color: #ffffff;
border: 1px solid #e4e4e4;
display: flex;
flex-direction: column;
min-height: 300px;
justify-content: center;
}
}
@media (max-width: 767px) {
#facetwp-top,
.search-form:not(.form-inline) {
display: none;
}
.lsx-pagination-wrapper.facetwp-custom {
margin-top: 0;
}
.logged-in {
.facetwp-item.facetwp-filters-wrap {
padding-top: 10rem;
}
.facetwp-item-wrap > .ssm-row-margin-bottom:first-child {
margin-top: 12.4rem;
}
.ssm-row-margin-bottom {
margin-top: 8.4rem;
}
}
.facetwp-sort-select,
.facetwp-per-page-select,
#facetwp-top .facetwp-type-sort select {
width: 100%;
margin-bottom: 0;
}
}