heartles/egirlskey
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

refactor(client): use css modules

Browse source
This commit is contained in:
syuilo 2023-01-15 08:01:46 +09:00
parent d075471b2d
commit bb5d2bda51
1 changed files with 44 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

83
packages/frontend/src/components/MkButton.vue
View file

@ -1,32 +1,34 @@
<template> <template>
<button <button
v-if="!link" v-if="!link"
ref="el" class="bghgjjyj _button" ref="el" class="_button"
:class="{ inline, primary, gradate, danger, rounded, full, small, large, asLike }" :class="[$style.root, { [$style.inline]: inline, [$style.primary]: primary, [$style.gradate]: gradate, [$style.danger]: danger, [$style.rounded]: rounded, [$style.full]: full, [$style.small]: small, [$style.large]: large, [$style.asLike]: asLike }]"
:type="type" :type="type"
@click="emit('click', $event)" @click="emit('click', $event)"
@mousedown="onMousedown" @mousedown="onMousedown"
> >
<div ref="ripples" class="ripples"></div> <div ref="ripples" :class="$style.ripples"></div>
<div class="content"> <div :class="$style.content">
<slot></slot> <slot></slot>
</div> </div>
</button> </button>
<MkA <MkA
v-else class="bghgjjyj _button" v-else class="_button"
:class="{ inline, primary, gradate, danger, rounded, full, small }" :class="[$style.root, { [$style.inline]: inline, [$style.primary]: primary, [$style.gradate]: gradate, [$style.danger]: danger, [$style.rounded]: rounded, [$style.full]: full, [$style.small]: small, [$style.large]: large, [$style.asLike]: asLike }]"
:to="to" :to="to"
@mousedown="onMousedown" @mousedown="onMousedown"
> >
<div ref="ripples" class="ripples"></div> <div ref="ripples" :class="$style.ripples"></div>
<div class="content"> <div :class="$style.content">
<slot></slot> <slot></slot>
</div> </div>
</MkA> </MkA>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { nextTick, onMounted } from 'vue'; import { nextTick, onMounted, useCssModule } from 'vue';
const $style = useCssModule();
const props = defineProps<{ const props = defineProps<{
type?: 'button' | 'submit' | 'reset'; type?: 'button' | 'submit' | 'reset';
@ -78,6 +80,7 @@ function onMousedown(evt: MouseEvent): void {
const rect = target.getBoundingClientRect(); const rect = target.getBoundingClientRect();
const ripple = document.createElement('div'); const ripple = document.createElement('div');
ripple.classList.add($style.ripple);
ripple.style.top = (evt.clientY - rect.top - 1).toString() + 'px'; ripple.style.top = (evt.clientY - rect.top - 1).toString() + 'px';
ripple.style.left = (evt.clientX - rect.left - 1).toString() + 'px'; ripple.style.left = (evt.clientX - rect.left - 1).toString() + 'px';
@ -101,8 +104,8 @@ function onMousedown(evt: MouseEvent): void {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" module>
.bghgjjyj { .root {
position: relative; position: relative;
z-index: 1; // 他コンポーネントのbox-shadowに隠されないようにするため z-index: 1; // 他コンポーネントのbox-shadowに隠されないようにするため
display: block; display: block;
@ -173,7 +176,7 @@ function onMousedown(evt: MouseEvent): void {
} }
> .ripples { > .ripples {
::v-deep(div) { > .ripple {
background: rgba(255, 60, 106, 0.15); background: rgba(255, 60, 106, 0.15);
} }
} }
@ -237,35 +240,37 @@ function onMousedown(evt: MouseEvent): void {
min-width: 100px; min-width: 100px;
} }
> .ripples { &.primary > .ripples > .ripple {
position: absolute;
z-index: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 6px;
overflow: clip;
::v-deep(div) {
position: absolute;
width: 2px;
height: 2px;
border-radius: 100%;
background: rgba(0, 0, 0, 0.1);
opacity: 1;
transform: scale(1);
transition: all 0.5s cubic-bezier(0,.5,0,1);
}
}
&.primary > .ripples ::v-deep(div) {
background: rgba(0, 0, 0, 0.15); background: rgba(0, 0, 0, 0.15);
} }
}
> .content { .ripples {
position: relative; position: absolute;
z-index: 1; z-index: 0;
} top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 6px;
overflow: clip;
pointer-events: none;
}
.ripple {
position: absolute;
width: 2px;
height: 2px;
border-radius: 100%;
background: rgba(0, 0, 0, 0.1);
opacity: 1;
transform: scale(1);
transition: all 0.5s cubic-bezier(0,.5,0,1);
}
.content {
position: relative;
z-index: 1;
pointer-events: none;
} }
</style> </style>