//https://tympanus.net/codrops/2014/11/04/simple-morphing-search/
@import "compass/css3";
@import 'https://fonts.googleapis.com/css?family=Roboto:300,400,500';
@import 'https://fonts.googleapis.com/css?family=Poiret+One';
*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { content: ''; display: table; }
.clearfix:after { clear: both; }
html, body {
height: 100%;
}
body {
font-family: 'Poiret One', 'Roboto', 'Helvetica';
overflow-x: hidden;
overflow-y: scroll;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: flex;
flex-wrap: wrap;
background: rgba(203,96,179,1);
@include background-image(
linear-gradient(125deg, rgba(206, 190, 41, .3) 0%, rgba(155, 31, 80, .3) 33%, rgba(41, 137, 216, .3) 71%, rgba(155, 31, 80, .3) 95%),
linear-gradient(-88deg, rgba(206, 190, 41, .8) 0%, rgba(155, 31, 80, .3) 33%, rgba(41, 137, 216, .7) 71%, rgba(155, 31, 80, .7) 95%),
linear-gradient(23deg, rgba(206, 190, 41, 1) 0%, rgba(155, 31, 80, .6) 33%, rgba(41, 137, 216, 1) 71%, rgba(155, 31, 80, 1) 95%)
);
}
.result-wrap {
color: #333;
margin-top: 4.5em;
height: 0;
overflow: hidden;
padding: 0 10.5%;
background: #f1f1f1;
position: relative;
pointer-events: none;
opacity: 0;
}
input[type="search"] { /* reset normalize */
box-sizing: border-box;
}
.result {
background: #eee;
padding: .7em;
margin-top: 1em;
}
a {
color: #000;
text-transform: capitalize;
text-decoration: none;
&:hover {
text-decoration: line-through;
}
}
//
.search-bar-form {
width: 100%;
height: 40px;
margin: 0 auto;
position: relative;
transition-property: width, height, transform;
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
opacity: 0;
pointer-events: none;
transition: opacity 0.5s;
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.search-bar-submit {
position: absolute;
width: 80px;
height: 80px;
text-indent: 100px;
overflow: hidden;
right: 0;
top: 50%;
background: transparent url(../img/magnifier.svg) no repeat center center;
background-size: 100%;
border: none;
pointer-events: none;
transform-origin: 50% 50%;
opacity: 0;
transform: translate3d(-30px,-50%,0) scale3d(0,0,1);
&:focus {
outline: none;
}
}
.search-bar {
float: right;
width: 200px;
min-height: 40px;
background: #f1f1f1;
position: absolute;
z-index: 10000;
top: 50px;
right: 50px;
transform-origin: 100% 0;
transition-property: min-height, width, top, right;
transition-duration: .5s;
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
&.open {
width: 100%;
min-height: 100%;
top: 0px;
right: 0px;
.search-bar-form {
width: 80%;
height: 160px;
transform: translate3d(0,3em,0);
}
.search-bar-input {
font-size: 7em;
}
~ .overlay {
opacity: 1;
}
.result-wrap {
opacity: 1;
height: auto;
overflow: visible;
pointer-events: auto;
transition: opacity 0.3s 0.5s;
&:first-child {
transition-timing-function: ease-in-out;
transition-delay: .5s;
}
&:nth-child(2) {
transition-timing-function: ease-in-out;
transition-delay: 1s;
}
&:nth-child(3) {
transition-timing-function: ease-in-out;
transition-delay: 2s;
}
}
.search-bar-submit {
pointer-events: auto;
opacity: 1;
transform: translate3d(-30px,-50%,0) scale3d(1,1,1);
transition: opacity 0.3s, transform 0.3s;
transition-delay: 0.5s;
&:hover {
background-color: #555;
}
}
.search-bar-close {
opacity: 1;
pointer-events: auto;
transform: scale3d(1,1,1);
transition: opacity 0.3s, transform 0.3s;
transition-delay: 0.5s;
}
.expand-transition {
transition: all 1s ease;
overflow: hidden;
}
/* .expand-enter defines the starting state for entering */
/* .expand-leave defines the ending state for leaving */
.expand-enter, .expand-leave {
height: 0;
padding: 0 10px;
opacity: 0;
}
}
}
.search-bar-close {
width: 36px;
height: 36px;
position: absolute;
right: 1em;
top: 1em;
overflow: hidden;
text-indent: 100%;
cursor: pointer;
pointer-events: none;
opacity: 0;
transform: scale3d(0,0,1);
&::before, &::after {
content: '';
position: absolute;
width: 2px;
height: 100%;
top: 0;
left: 50%;
border-radius: 3px;
opacity: 0.2;
background: #000;
}
&::before {
transform: rotate(45deg);
}
&::after {
transform: rotate(-45deg);
}
&:hover {
&::before, &::after {
opacity: 1;
}
}
}
.search-bar-input {
width: 100%;
height: 100%;
padding: 0 10% 0 10px;
font-weight: 700;
border: none;
background: transparent;
font-size: 0.8em;
color: #ec5a62;
transition: font-size 0.5s cubic-bezier(0.7,0,0.3,1);
&::placeholder {
color: #c2c2c2;
}
&::clear {
display: none;
}
&:focus {
outline: none;
}
}
@media screen and (max-width: 53.125em) {
.search-bar-input {
padding: 0 25% 0 10px;
}
.search-bar {
&.open {
.search-bar-input {
font-size: 2em;
}
.search-bar-submit {
transform: translate3d(0,-50%,0) scale3d(0.5,0.5,1);
}
}
}
}
@media screen and (max-width: 60.525em) {
.search-bar {
width: 80%;
top: 10%;
right: 10%;
}
}
View Compiled
const vm = new Vue({
el: 'body',
data: {
test1: '',
askRes: null,
newAsk: '',
newUrl: '',
ask: null,
askChecked: false
},
ready: function () {
// this.getLink()
},
methods: {
getOpen: function () {
this.test1 = 'open'
},
closeForm: function () {
this.test1 = ''
this.newAsk = ''
this.askRes = ''
this.askChecked = false
},
getUrl: function () {
var apiUrl = "https://en.wikipedia.org/w/api.php?action=query&generator=search&gsrnamespace=0&exsentences=1&exintro&explaintext&exlimit=max&prop=extracts&gsrlimit=10&gsrsearch="+this.newAsk+"&format=json"
this.$set('newUrl', apiUrl)
},
getAsk: function () {
this.getUrl()
this.$http.jsonp(this.newUrl).then((response) => {
this.askRes = response.data.query.pages
this.askChecked = true
}, (response) => {
// if api not working
console.log(response.data)
})
},
}
})
