chore(client): tweak style

This commit is contained in:
syuilo 2022-07-16 20:53:53 +09:00
parent c1c8c9c37c
commit fbb0cc686e
3 changed files with 24 additions and 23 deletions

View file

@ -77,9 +77,9 @@ const inputEl = ref<HTMLElement>();
const prefixEl = ref<HTMLElement>(); const prefixEl = ref<HTMLElement>();
const suffixEl = ref<HTMLElement>(); const suffixEl = ref<HTMLElement>();
const height = const height =
props.small ? 38 : props.small ? 36 :
props.large ? 42 : props.large ? 40 :
40; 38;
const focus = () => inputEl.value.focus(); const focus = () => inputEl.value.focus();
const onInput = (ev: KeyboardEvent) => { const onInput = (ev: KeyboardEvent) => {

View file

@ -63,9 +63,9 @@ const prefixEl = ref(null);
const suffixEl = ref(null); const suffixEl = ref(null);
const container = ref(null); const container = ref(null);
const height = const height =
props.small ? 38 : props.small ? 36 :
props.large ? 42 : props.large ? 40 :
40; 38;
const focus = () => inputEl.value.focus(); const focus = () => inputEl.value.focus();
const onInput = (ev) => { const onInput = (ev) => {

View file

@ -1,5 +1,6 @@
<template> <template>
<button v-if="!link" class="bghgjjyj _button" <button
v-if="!link" class="bghgjjyj _button"
:class="{ inline, primary, gradate, danger, rounded, full }" :class="{ inline, primary, gradate, danger, rounded, full }"
:type="type" :type="type"
@click="$emit('click', $event)" @click="$emit('click', $event)"
@ -10,7 +11,8 @@
<slot></slot> <slot></slot>
</div> </div>
</button> </button>
<MkA v-else class="bghgjjyj _button" <MkA
v-else class="bghgjjyj _button"
:class="{ inline, primary, gradate, danger, rounded, full }" :class="{ inline, primary, gradate, danger, rounded, full }"
:to="to" :to="to"
@mousedown="onMousedown" @mousedown="onMousedown"
@ -29,56 +31,56 @@ export default defineComponent({
props: { props: {
type: { type: {
type: String, type: String,
required: false required: false,
}, },
primary: { primary: {
type: Boolean, type: Boolean,
required: false, required: false,
default: false default: false,
}, },
gradate: { gradate: {
type: Boolean, type: Boolean,
required: false, required: false,
default: false default: false,
}, },
rounded: { rounded: {
type: Boolean, type: Boolean,
required: false, required: false,
default: false default: false,
}, },
inline: { inline: {
type: Boolean, type: Boolean,
required: false, required: false,
default: false default: false,
}, },
link: { link: {
type: Boolean, type: Boolean,
required: false, required: false,
default: false default: false,
}, },
to: { to: {
type: String, type: String,
required: false required: false,
}, },
autofocus: { autofocus: {
type: Boolean, type: Boolean,
required: false, required: false,
default: false default: false,
}, },
wait: { wait: {
type: Boolean, type: Boolean,
required: false, required: false,
default: false default: false,
}, },
danger: { danger: {
type: Boolean, type: Boolean,
required: false, required: false,
default: false default: false,
}, },
full: { full: {
type: Boolean, type: Boolean,
required: false, required: false,
default: false default: false,
}, },
}, },
emits: ['click'], emits: ['click'],
@ -127,8 +129,8 @@ export default defineComponent({
window.setTimeout(() => { window.setTimeout(() => {
if (this.$refs.ripples) this.$refs.ripples.removeChild(ripple); if (this.$refs.ripples) this.$refs.ripples.removeChild(ripple);
}, 2000); }, 2000);
} },
} },
}); });
</script> </script>
@ -142,8 +144,7 @@ export default defineComponent({
padding: 8px 14px; padding: 8px 14px;
text-align: center; text-align: center;
font-weight: normal; font-weight: normal;
font-size: 0.9em; font-size: 1em;
line-height: 22px;
box-shadow: none; box-shadow: none;
text-decoration: none; text-decoration: none;
background: var(--buttonBg); background: var(--buttonBg);