File "_search-overlay.scss"

Full Path: /home/amervokv/ecomlive.net/wp-content/themes/oceanwp/sass/components/header/_search-overlay.scss
File size: 3.01 KB
MIME-type: text/plain
Charset: utf-8

#searchform-overlay,
#icon-searchform-overlay {
	display: none;
    position: fixed;
    top: 0;
    left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.9);
    z-index: 9999;

    .container {
    	position: relative;
		width: 100%;
    	height: 100%;
    }

    a.search-overlay-close {
    	position: absolute;
	    top: -50px;
	    left: 50%;
	    margin-left: -20px;
	    width: 40px;
	    height: 40px;
	    background-color: rgba(255,255,255,0.2);
	    text-align: center;
	    @include border-radius( 2px );

    	&:hover {
    		background-color: rgba(255,255,255,0.3);
    	}

    	span {
    		position: relative;
		    display: inline-block;
		    width: 24px;
		    height: 24px;

		    &:before,
		    &:after {
		    	content: '';
			    position: absolute;
			    top: 50%;
			    left: 0;
			    height: 2px;
			    width: 100%;
			    margin-top: 6px;
			    background-color: $color-1;
		    	@include border-radius( 5px );
		    }

		    &:before {
			    @include transform( rotate(45deg) );
		    }

		    &:after {
			    @include transform( rotate(-45deg) );
		    }
    	}
    }

    form {
    	position: absolute;
	    top: 50%;
	    left: 0;
	    margin-top: -33px;
	    width: 100%;
	    text-align: center;

	    input, .search-text {
	    	font-size: 22px;
		    line-height: 1.3;
		    padding: 18px 0;
		    margin: 0;
		    min-height: 50px;
		    color: $color-1;
		    letter-spacing: 1px;
		    text-transform: uppercase;
		    text-align: center;
	    }

	    input {
	    	position: relative;
		    border: 0;
		    background-color: transparent;
		    border-bottom: 1px solid $color-14;
		    z-index: 2;
		    @include transition( border-color .3s ease );

		    &:hover {
		    	border-color: $color-15;
		    }

		    &:focus {
		    	border-color: $color-1;
		    }
	    }

		.search-text {
		    display: block;
			position: absolute;
		    top: 0;
		    bottom: 0;
		    left: 0;
		    right: 0;
		    cursor: text;
		    @include opacity( .5 );
		    z-index: 1;

		    i {
		    	display: inline-block;
			    background-color: $color-1;
			    width: 3px;
			    height: 3px;
			    margin-left: 3px;
			    @include animation( blink 1s linear infinite );
		    }

		    i+i {
			    @include animation-delay( .2s );
			}

			i+i+i {
			    @include animation-delay( .4s );
			}
		}

		&.search-filled .search-text {
			@include opacity( 0 );
		    @include transition-duration( 150ms );
		}
    }
}

#searchform-overlay {
	.container {
    	max-width: 550px;
    }
}

#icon-searchform-overlay {

	form {
		.search-text,
		input {
			font-size: 16px;
		}
	}
	.search-overlay-close {
		line-height: inherit;
	}
}

/*------------------------------------*
	All Devices under 960px
*------------------------------------*/
@media only screen and (max-width: 959px) {

	/* header > search overlay */
	#searchform-overlay {
		display: none !important;
	}

}