Current path: home/webdevt/www/wdp/wp-content/themes/quadric/assets/css/scss/modules/search/
?? Go up: /home/webdevt/www/wdp/wp-content/themes/quadric/assets/css/scss/modules
/* ==========================================================================
# Search style - begin
========================================================================== */
.edgtf-search-opener {
@include edgtfTransition(all 0.15s ease-out);
.edgtf-search-icon-text {
@include edgtfTransition(all 0.15s ease-out);
}
}
.edgtf-light-header .edgtf-page-header > div:not(.edgtf-sticky-header) .edgtf-search-opener,
.edgtf-light-header.edgtf-header-style-on-scroll .edgtf-page-header .edgtf-search-opener,
.edgtf-light-header .edgtf-top-bar .edgtf-search-opener {
color: $header-light-color !important; //Color can be set inline from widget opener
}
.edgtf-dark-header .edgtf-page-header > div:not(.edgtf-sticky-header) .edgtf-search-opener,
.edgtf-dark-header.edgtf-header-style-on-scroll .edgtf-page-header .edgtf-search-opener,
.edgtf-dark-header .edgtf-top-bar .edgtf-search-opener {
color: $header-dark-color !important; //Color can be set inline from widget opener
}
/* Search slides from window top - begin
========================================================================== */
.edgtf-search-slides-from-window-top {
.edgtf-top-bar,
.edgtf-page-header {
top: 0;
@include edgtfTransition(all 0.25s ease-out);
}
.edgtf-mobile-header {
@include edgtfTransition(all 0.25s ease-out);
}
.content_inner {
margin-top: 0;
@include edgtfTransition(all 0.25s ease-out);
}
.mobile-header-appear .edgtf-mobile-header-inner {
padding-top: 0;
@include edgtfTransition(all 0.25s ease-out);
}
}
.edgtf-search-slides-from-window-top.edgtf-search-open {
.edgtf-page-header,
.edgtf-top-bar {
top: 50px;
}
.edgtf-search-slide-window-top {
height: 50px;
}
.edgtf-mobile-header {
top: 50px !important; /* Mobile header has important top on max-width (1000px) */
}
.mobile-header-appear .edgtf-mobile-header-inner {
padding-top: 50px;
}
.content_inner {
margin-top: 50px;
}
.edgtf-sticky-header.header-appear {
@include edgtfTransform(translateY(50px));
}
}
.edgtf-fixed-wrapper.fixed .edgtf-search-slide-window-top {
position: static;
}
.edgtf-search-slide-window-top {
background: none repeat scroll 0 0 #262626;
color: #fff;
margin: 0;
overflow: hidden;
width: 100%;
height: 0;
position: fixed;
top:0;
left:0;
@include edgtfTransition(all 0.25s ease-out);
.form-inner {
padding: 0 45px;
}
.edgtf-container-inner {
position: relative;
}
i {
color: #959595;
font-size: 13px;
display: inline-block;
float: left;
line-height: 50px;
}
.edgtf-container {
i {
padding: 0;
}
input{
width: 90%;
padding: 0 0 0 10px;
}
.edgtf-search-close {
right: 0;
}
}
input,
input:focus {
background-color: #262626;
border: medium none;
box-shadow: none;
color: #959595;
display: inline-block;
font-size: 13px;
line-height: 20px;
height: 20px;
margin: 15px 0;
width: 90%;
padding: 0 0 0 10px;
font-family: inherit;
outline: none;
outline-offset:0;
-webkit-appearance: none;
border-radius: 0;
float: left;
}
input:focus{
outline-offset: 0 !important;
}
@media only screen and (max-width: 1200px){
input{
width: 80%;
}
}
@media only screen and (max-width: 768px){
input{
width: 70%;
}
}
@media only screen and (max-width: 500px){
input {
width: 65%;
}
}
input[type="submit"] {
border: 0 none;
clip: rect(0px, 0px, 0px, 0px);
height: 1px;
margin: -1px;
padding: 0;
position: absolute;
width: 1px;
visibility: hidden;
}
.edgtf-search-close {
color: #959595;
font-size: 13px;
position: absolute;
line-height: 50px;
height: 50px;
top: 0;
right: 45px;
}
}
::-webkit-input-placeholder,
:-moz-placeholder,
::-moz-placeholder,
:-ms-input-placeholder {
color: #959595;
margin-top: 10px;
}
/* Search slides from window top - end
========================================================================== */
/* Search slides from header bottom - begin
========================================================================== */
.edgtf-search-slides-from-header-bottom {
.edgtf-top-bar {
z-index: 120;
}
}
.edgtf-search-slide-header-bottom {
background: none repeat scroll 0 0 #f1f1f1;
color: #fff;
margin: 0;
overflow: hidden;
width: 100%;
height: 100px;
z-index: 0;
position: absolute;
top: 0;
left:0;
@include edgtfTransform(translateY(-100%));
@include edgtfTransition(all 0.35s cubic-bezier(0.55,0.085,0.68,0.53));
.edgtf-container {
z-index:auto;
}
.edgtf-form-holder-outer {
display: table;
height: 100px;
width: 100%;
}
.edgtf-form-holder {
display: table-cell;
vertical-align: middle;
position:relative;
padding: 0 45px;
}
input,
input:focus {
background-color: transparent;
border: medium none;
box-shadow: none;
color: #696969;
font-size: 15px;
font-weight: 700;
display: inline-block;
vertical-align: middle;
width: 90%;
padding: 0;
font-family: inherit;
outline: none;
outline-offset:0;
-webkit-appearance: none;
border-radius: 0;
text-transform: uppercase;
}
input:focus {
outline-offset: 0 !important;
}
.edgtf-search-submit {
width: auto;
cursor: pointer;
font-size:50px;
position:absolute;
right:45px;
top: 50%;
margin-top: -25px;
@include edgtfTransition(color 0.4s ease);
color: #696969;
padding: 0 0 0 1px;
}
.edgtf-search-submit:hover {
color:$first-main-color
}
.edgtf-container-inner {
.edgtf-search-submit {
right: 0;
}
.edgtf-form-holder {
padding: 0;
}
}
}
.edgtf-search-slide-header-bottom.edgtf-animated {
left:0;
@include edgtfTransform(translateY(0));
top: 100%;
.edgtf-form-holder-outer {
height: 100px;
}
}
.edgtf-search-slide-header-bottom.edgtf-disabled {
input,
input:focus {
font-weight: normal;
}
.edgtf-search-submit,
.edgtf-search-submit:hover {
cursor:default;
color:#959595;
}
}
/* Search slides from header bottom - end
========================================================================== */
/* Search covers header - begin
========================================================================== */
.edgtf-search-cover {
display: none;
color: #fff;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 115;
background:#fff;
.edgtf-form-holder-outer {
display: table;
width: 100%;
height:100%;
}
.edgtf-form-holder {
display: table-cell;
vertical-align: middle;
padding:0 45px;
position:relative;
}
.edgtf-form-holder-inner {
display: inline-block;
vertical-align: middle;
position: relative;
width: 100%;
}
.edgtf-container-inner {
.edgtf-form-holder {
padding: 0;
}
.edgtf-search-close {
right: 0;
}
}
input,
input:focus {
background-color: transparent;
border: medium none;
box-shadow: none;
color: #696969;
font-size: 15px;
font-weight: 700;
display: inline-block;
width: 90%;
padding:0;
font-family: inherit;
outline: none;
outline-offset:0px;
-webkit-appearance: none;
border-radius: 0;
float: left;
text-transform: uppercase;
margin: 0;
}
input:focus {
outline-offset: 0 !important;
}
input[type="submit"] {
border: 0 none;
clip: rect(0px,0px,0px,0px);
height: 1px;
margin: -1px;
padding: 0;
position: absolute;
width: 1px;
visibility: hidden;
}
.edgtf-search-close {
font-size: 34px;
position: absolute;
right: 24px;
top:50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
line-height:1em;
}
.edgtf-search-close {
a {
color: #9d9d9d;
display: inline-block;
}
a:hover {
color: $first-main-color;
}
a i {
vertical-align: top;
}
}
}
.edgtf-search-cover.disabled {
input,
input:focus{
font-weight: normal;
}
}
::-webkit-input-placeholder,
:-moz-placeholder,
::-moz-placeholder,
:-ms-input-placeholder{
color: #959595;
margin: 10px 0px 0px 0px;
}
/* Fullscreen search general style - start
========================================================================== */
.edgtf-fullscreen-search-holder {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:105;
opacity:0;
.edgtf-search-label {
font-size:30px;
line-height:1em;
color: #a1a1a1;
vertical-align:bottom;
}
.edgtf-field-holder {
width: 57.8%;
display:inline-block;
vertical-align:bottom;
position:relative;
border-bottom:1px solid $first-main-color;
.edgtf-zig-zag-separator-holder {
margin-bottom: 10px;
}
.edgtf-line {
position:absolute;
bottom:-1px;
left:0;
height:1px;
width:0;
background-color: #fff;
@include edgtfTransition(width 0.3s ease);
}
}
::-webkit-input-placeholder{
color: #fff;
}
:-moz-placeholder{
color: #fff;
}
::-moz-placeholder{
color: #fff;
opacity: 1;
line-height: 1.1em;
}
:-ms-input-placeholder{
color: #fff;
opacity: 1;
line-height: 1.1em;
}
.edgtf-search-field {
width:100%;
border-left:none;
border-top:none;
border-right:none;
border-bottom:none;
background:transparent;
outline:none;
height:100%;
font-size:30px;
color: #a1a1a1;
line-height:1.2em;
position:relative;
padding-right: 100px;
}
.edgtf-search-submit {
border:none;
background:transparent;
outline:none;
width: auto;
cursor: pointer;
font-family: 'FontAwesome';
font-size:63px;
line-height:1em;
color: #fff;
position: absolute;
right: 0;
top: 38px;
@include edgtfTransition(color 0.2s ease);
}
.edgtf-search-submit:hover{
color: $first-main-color;
}
.edgtf-search-close-holder {
float:right;
margin-right: 45px;
}
.edgtf-fullscreen-search-close-container {
position:absolute;
left:0;
top:0;
width:100%;
a {
opacity:0;
width:100%;
visibility:hidden;
-webkit-transition: opacity 0.2s ease, color 0.2s ease;
transition: opacity 0.2s ease, color 0.2s ease;
position: absolute;
top: 18px;
right: 25px;
color: #fff;
.close {
position: absolute;
top: 5px;
left: 15px;
display: table;
> span:first-child {
font-size: 22px;
text-transform: capitalize;
display: table-cell;
vertical-align: middle;
padding-right: 10px;
}
}
.lines {
display: table-cell;
vertical-align: middle;
width:25px;
height: 25px;
.line-1 {
content:'';
position:absolute;
width:36px;
height:7px;
@include edgtfTransform(rotate(45deg) scale(0,1));
@include edgtfTransformOrigin(0% 50%);
@include edgtfBorderRadius(2px);
background-color:#fff;
-webkit-transition: -webkit-transform .2s ease-out .1s;
transition: transform .2s ease-out .1s;
body.edgtf-fullscreen-search-opened & {
@include edgtfTransform(rotate(45deg) scale(1,1));
}
}
.line-2 {
content:'';
position:absolute;
width:36px;
height:7px;
top: 40px;
right: 3px;
@include edgtfTransform(rotate(-45deg) scale(0,1));
@include edgtfTransformOrigin(0% -50%);
@include edgtfBorderRadius(2px);
background-color:#fff;
-webkit-transition: -webkit-transform .2s ease-out .3s;
transition: transform .2s ease-out .3s;
body.edgtf-fullscreen-search-opened & {
@include edgtfTransform(rotate(-45deg) scale(1,1));
}
}
}
}
}
}
.edgtf-fullscreen-search-table {
display: table;
width:100%;
height:100%;
}
.edgtf-fullscreen-search-cell {
display: table-cell;
vertical-align: middle;
width:100%;
height:100%;
text-align:center;
}
//Fix for woocommerce page
.edgtf-fullscreen-search-opened .edgtf-form-holder .edgtf-search-field {
width:100%;
border-left:none;
border-top:none;
border-right:none;
border-bottom:none;
background:transparent;
outline:none;
height:100%;
font-size:80px;
text-transform: uppercase;
font-weight: 700;
color: #fff;
line-height:1.2em;
position:relative;
padding: 0;
}
/* Fullscreen search general style - end
========================================================================== */
/* Fullscreen search from circle style - start
========================================================================== */
.edgtf-fullscreen-search-overlay {
position:absolute;
width:2000px;
height:2000px;
margin-top:-1000px;
margin-left:-1000px;
top:50%;
left:0;
border-radius:100%;
opacity:0;
z-index:99;
-ms-transform-origin: 50%;
-webkit-transform-origin: 50%;
transform-origin: 50%;
@include edgtfTransform(scale(0));
background-color: rgba(255,255,255,0.98);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-ms-transition: -ms-transform 0.6s cubic-bezier(0.4,0,0.2,1), opacity 0.6s cubic-bezier(0.4,0,0.2,1);
-webkit-transition: -webkit-transform 0.6s cubic-bezier(0.4,0,0.2,1), opacity 0.6s cubic-bezier(0.4,0,0.2,1);
transition: transform 0.6s cubic-bezier(0.4,0,0.2,1), opacity 0.6s cubic-bezier(0.4,0,0.2,1);
}
.edgtf-fullscreen-search-overlay.edgtf-animate{
@include edgtfTransform(scale(3));
opacity:1;
}
.edgtf-search-from-circle .edgtf-fullscreen-search-holder {
@include edgtfTransition(opacity 0.3s ease);
display:none;
opacity:0;
visibility:visible;
z-index:111;
}
/* Fullscreen search from circle style - end
========================================================================== */
/* Fullscreen search fade style - start
========================================================================== */
.edgtf-search-fade .edgtf-fullscreen-search-holder {
visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
opacity: 0;
z-index:111;
box-sizing: border-box;
.edgtf-fullscreen-search-table {
background-color:rgba(0,0,0,0.93);
}
}
.edgtf-search-fade-out.edgtf-search-fade .edgtf-fullscreen-search-holder {
@include edgtfAnimation(search_fade_out .4s ease both);
}
.edgtf-search-fade-in.edgtf-search-fade .edgtf-fullscreen-search-holder.edgtf-animate{
@include edgtfAnimation(search_fade_in .2s ease both);
}
.edgtf-search-fade .edgtf-fullscreen-search-holder.edgtf-animate .edgtf-fullscreen-search-close {
opacity:1;
visibility:visible;
}
@-webkit-keyframes search_fade_out {
0%{
opacity:1;
visibility: visible;
}
100%{
opacity:0;
visibility: hidden;
}
}
@keyframes search_fade_out{
0%{
opacity:1;
visibility: visible;
}
100% {
opacity:0;
visibility: hidden;
}
}
@-webkit-keyframes search_fade_in {
0% {
opacity:0;
visibility: hidden;
}
100% {
opacity:1;
visibility: visible;
}
}
@keyframes search_fade_in{
0%{
opacity:0;
visibility: hidden;
}
100%{
opacity:1;
visibility: visible;
}
}
/* Fullscreen search fade style - end
========================================================================== */
/*---------------Fade animation with PUSH TEXT TOP------------*/
@-webkit-keyframes search_push_text_top{
0%{
opacity:0;
-webkit-transform:translateY(60px);
transform:translateY(60px)
}
100%{
opacity:1;
-webkit-transform:translateY(0);
transform:translateY(0)
}
}
@keyframes search_push_text_top{
0%{
opacity:0;
-webkit-transform:translateY(60px);
transform:translateY(60px);
}
100%{
opacity:1;
-webkit-transform:translateY(0);
transform:translateY(0)
}
}
.edgtf-search-fade.edgtf-fullscreen-search-opened .edgtf-fullscreen-search-holder .edgtf-form-holder {
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
@include edgtfAnimation(search_push_text_top .4s ease-out both .25s);
}
.edgtf-search-fade-out.edgtf-search-fade .edgtf-fullscreen-search-holder .edgtf-search-label,
.edgtf-search-fade-out.edgtf-search-fade .edgtf-fullscreen-search-holder .edgtf-search-submit,
.edgtf-search-fade-out.edgtf-search-fade .edgtf-fullscreen-search-holder .edgtf-field-holder {
opacity:0;
}
/*----------------------FULLSCREEN SEARCH style end--------------------------*/
/* #Search Page Styles - start
========================================================================== */
.search-no-results h2{
margin-bottom:78px;
}
.search-results .edgtf-btn{
margin-bottom:25px;
}
/* #Search Page Styles - end
========================================================================== */
/* ==========================================================================
# Search style - end
========================================================================== */