graphite/Sharkey
1
0
Fork 0
mirror of https://git.joinsharkey.org/Sharkey/Sharkey.git synced 2024-12-23 20:03:09 +02:00
Code Issues 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>
<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>