791aebc346
Some checks failed
continuous-integration/drone/push Build is failing
- Complete GGZ Ecademy Nuxt.js user portal - Learning products browser and management - Member management interface - User authentication and roles - Multi-language support (NL/EN) - Vuex store for state management - Component-based architecture
75 lines
1.3 KiB
Vue
75 lines
1.3 KiB
Vue
<template>
|
|
<div>
|
|
<div class="searchbar">
|
|
<input
|
|
v-model="search"
|
|
@keyup.enter="query"
|
|
class="search_input"
|
|
type="text"
|
|
autofocus
|
|
name
|
|
placeholder="Search Image"
|
|
/>
|
|
<a href="#" @click="query" class="search_icon">
|
|
<v-icon>icon-search</v-icon>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
middleware: 'auth',
|
|
layout: `${process.env.CUSTOMER}Admin`,
|
|
data() {
|
|
return {
|
|
search: 'value'
|
|
}
|
|
},
|
|
methods: {
|
|
query() {}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
@import 'https://getbootstrap.com/docs/4.0/examples/cover/cover.css';
|
|
.searchbar {
|
|
/* margin-bottom: auto;
|
|
margin-top: auto;
|
|
height: 60px; */
|
|
background-color: #353b48;
|
|
border-radius: 30px;
|
|
padding: 10px;
|
|
}
|
|
.search_input {
|
|
color: white;
|
|
border: 0;
|
|
outline: 0;
|
|
background: none;
|
|
width: 0;
|
|
caret-color: transparent;
|
|
line-height: 40px;
|
|
transition: width 0.3s linear;
|
|
}
|
|
.searchbar:hover > .search_input {
|
|
padding: 0 10px;
|
|
width: 250px;
|
|
caret-color: red;
|
|
transition: width 0.3s linear;
|
|
}
|
|
.searchbar:hover > .search_icon {
|
|
background: white;
|
|
color: #e74c3c;
|
|
}
|
|
.search_icon {
|
|
height: 40px;
|
|
width: 40px;
|
|
float: right;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: 50%;
|
|
color: white;
|
|
}
|
|
</style> |