diff --git a/packages/frontend/src/components/MkButton.vue b/packages/frontend/src/components/MkButton.vue index f9602de787..0ddee34f0a 100644 --- a/packages/frontend/src/components/MkButton.vue +++ b/packages/frontend/src/components/MkButton.vue @@ -1,32 +1,34 @@ <template> <button v-if="!link" - ref="el" class="bghgjjyj _button" - :class="{ inline, primary, gradate, danger, rounded, full, small, large, asLike }" + ref="el" class="_button" + :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" @click="emit('click', $event)" @mousedown="onMousedown" > - <div ref="ripples" class="ripples"></div> - <div class="content"> + <div ref="ripples" :class="$style.ripples"></div> + <div :class="$style.content"> <slot></slot> </div> </button> <MkA - v-else class="bghgjjyj _button" - :class="{ inline, primary, gradate, danger, rounded, full, small }" + v-else class="_button" + :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" @mousedown="onMousedown" > - <div ref="ripples" class="ripples"></div> - <div class="content"> + <div ref="ripples" :class="$style.ripples"></div> + <div :class="$style.content"> <slot></slot> </div> </MkA> </template> <script lang="ts" setup> -import { nextTick, onMounted } from 'vue'; +import { nextTick, onMounted, useCssModule } from 'vue'; + +const $style = useCssModule(); const props = defineProps<{ type?: 'button' | 'submit' | 'reset'; @@ -78,6 +80,7 @@ function onMousedown(evt: MouseEvent): void { const rect = target.getBoundingClientRect(); const ripple = document.createElement('div'); + ripple.classList.add($style.ripple); ripple.style.top = (evt.clientY - rect.top - 1).toString() + 'px'; ripple.style.left = (evt.clientX - rect.left - 1).toString() + 'px'; @@ -101,8 +104,8 @@ function onMousedown(evt: MouseEvent): void { } </script> -<style lang="scss" scoped> -.bghgjjyj { +<style lang="scss" module> +.root { position: relative; z-index: 1; // 他コンポーネントのbox-shadowに隠されないようにするため display: block; @@ -173,7 +176,7 @@ function onMousedown(evt: MouseEvent): void { } > .ripples { - ::v-deep(div) { + > .ripple { background: rgba(255, 60, 106, 0.15); } } @@ -237,35 +240,37 @@ function onMousedown(evt: MouseEvent): void { min-width: 100px; } - > .ripples { - 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) { + &.primary > .ripples > .ripple { background: rgba(0, 0, 0, 0.15); } +} - > .content { - position: relative; - z-index: 1; - } +.ripples { + position: absolute; + 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>