oscar-surf/misskey
oscar-surf/misskey
0
0
Fork 0
Code Issues Activity

refactor(client): use css modules

Browse source
This commit is contained in:
syuilo 2023-01-14 20:31:48 +09:00
parent 8451e08aaa
commit 4606f23ed8
5 changed files with 70 additions and 88 deletions
Download patch file Download diff file Expand all files Collapse all files

50
packages/frontend/src/components/MkGoogle.vue
View file

@ -1,7 +1,7 @@
<template>
<div class="mk-google">
<input v-model="query" type="search" :placeholder="q">
<button @click="search"><i class="ti ti-search"></i> {{ $ts.searchByGoogle }}</button>
<div :class="$style.root">
<input v-model="query" :class="$style.input" type="search" :placeholder="q">
<button :class="$style.button" @click="search"><i class="ti ti-search"></i> {{ $ts.searchByGoogle }}</button>
</div>
</template>
@ -19,33 +19,33 @@ const search = () => {
};
</script>
<style lang="scss" scoped>
.mk-google {
<style lang="scss" module>
.root {
display: flex;
margin: 8px 0;
}
> input {
flex-shrink: 1;
padding: 10px;
width: 100%;
height: 40px;
font-size: 16px;
border: solid 1px var(--divider);
border-radius: 4px 0 0 4px;
-webkit-appearance: textfield;
}
.input {
flex-shrink: 1;
padding: 10px;
width: 100%;
height: 40px;
font-size: 16px;
border: solid 1px var(--divider);
border-radius: 4px 0 0 4px;
-webkit-appearance: textfield;
}
> button {
flex-shrink: 0;
margin: 0;
padding: 0 16px;
border: solid 1px var(--divider);
border-left: none;
border-radius: 0 4px 4px 0;
.button {
flex-shrink: 0;
margin: 0;
padding: 0 16px;
border: solid 1px var(--divider);
border-left: none;
border-radius: 0 4px 4px 0;
&:active {
box-shadow: 0 2px 4px rgba(#000, 0.15) inset;
}
&:active {
box-shadow: 0 2px 4px rgba(#000, 0.15) inset;
}
}
</style>