Update google.vue
This commit is contained in:
parent
969cd16638
commit
3bd827d7da
1 changed files with 6 additions and 14 deletions
|
@ -1,12 +1,13 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="mk-google">
|
<div class="mk-google">
|
||||||
<input type="search" v-model="query" :placeholder="q">
|
<input type="search" v-model="query" :placeholder="q">
|
||||||
<button @click="search"><fa icon="search"/> {{ $t('search') }}</button>
|
<button @click="search"><fa :icon="faSearch"/> {{ $t('search') }}</button>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Vue from 'vue';
|
import Vue from 'vue';
|
||||||
|
import { faSearch } from '@fortawesome/free-solid-svg-icons';
|
||||||
import i18n from '../i18n';
|
import i18n from '../i18n';
|
||||||
|
|
||||||
export default Vue.extend({
|
export default Vue.extend({
|
||||||
|
@ -14,7 +15,8 @@ export default Vue.extend({
|
||||||
props: ['q'],
|
props: ['q'],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
query: null
|
query: null,
|
||||||
|
faSearch
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
@ -42,27 +44,17 @@ export default Vue.extend({
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: var(--googleSearchFg);
|
border: solid 1px var(--divider);
|
||||||
background: var(--googleSearchBg);
|
|
||||||
border: solid 1px var(--googleSearchBorder);
|
|
||||||
border-radius: 4px 0 0 4px;
|
border-radius: 4px 0 0 4px;
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border-color: var(--googleSearchHoverBorder);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
> button {
|
> button {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
padding: 0 16px;
|
padding: 0 16px;
|
||||||
border: solid 1px var(--googleSearchBorder);
|
border: solid 1px var(--divider);
|
||||||
border-left: none;
|
border-left: none;
|
||||||
border-radius: 0 4px 4px 0;
|
border-radius: 0 4px 4px 0;
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--googleSearchHoverButton);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
box-shadow: 0 2px 4px rgba(#000, 0.15) inset;
|
box-shadow: 0 2px 4px rgba(#000, 0.15) inset;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue