101 lines
2.2 KiB
Vue
101 lines
2.2 KiB
Vue
|
<!--
|
||
|
|
SPDX-FileCopyrightText: syuilo and other misskey contributors
|
||
|
|
SPDX-License-Identifier: AGPL-3.0-only
|
||
|
|
-->
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div
|
||
|
|
:class="[
|
||
|
|
$style.root,
|
||
|
|
tail === 'left' ? $style.left : $style.right,
|
||
|
|
negativeMargin === true && $style.negativeMergin,
|
||
|
|
shadow === true && $style.shadow,
|
||
|
|
]"
|
||
|
|
>
|
||
|
|
<div :class="$style.bg">
|
||
|
|
<svg v-if="tail !== 'none'" :class="$style.tail" version="1.1" viewBox="0 0 14.597 14.58" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<g transform="translate(-173.71 -87.184)">
|
||
|
|
<path d="m188.19 87.657c-1.469 2.3218-3.9315 3.8312-6.667 4.0865-2.2309-1.7379-4.9781-2.6816-7.8061-2.6815h-5.1e-4v12.702h12.702v-5.1e-4c2e-5 -1.9998-0.47213-3.9713-1.378-5.754 2.0709-1.6834 3.2732-4.2102 3.273-6.8791-6e-5 -0.49375-0.0413-0.98662-0.1235-1.4735z" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-width=".33225" style="paint-order:stroke fill markers"/>
|
||
|
|
</g>
|
||
|
|
</svg>
|
||
|
|
<div :class="$style.content">
|
||
|
|
<slot></slot>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
withDefaults(defineProps<{
|
||
|
|
tail?: 'left' | 'right' | 'none';
|
||
|
|
negativeMargin?: boolean;
|
||
|
|
shadow?: boolean;
|
||
|
|
}>(), {
|
||
|
|
tail: 'right',
|
||
|
|
negativeMargin: false,
|
||
|
|
shadow: false,
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style module lang="scss">
|
||
|
|
.root {
|
||
|
|
--fukidashi-radius: var(--radius);
|
||
|
|
--fukidashi-bg: var(--panel);
|
||
|
|
|
||
|
|
position: relative;
|
||
|
|
display: inline-block;
|
||
|
|
min-height: calc(var(--fukidashi-radius) * 2);
|
||
|
|
padding-top: calc(var(--fukidashi-radius) * .13);
|
||
|
|
|
||
|
|
&.shadow {
|
||
|
|
filter: drop-shadow(0 4px 32px var(--shadow));
|
||
|
|
}
|
||
|
|
|
||
|
|
&.left {
|
||
|
|
padding-left: calc(var(--fukidashi-radius) * .13);
|
||
|
|
|
||
|
|
&.negativeMergin {
|
||
|
|
margin-left: calc(calc(var(--fukidashi-radius) * .13) * -1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.right {
|
||
|
|
padding-right: calc(var(--fukidashi-radius) * .13);
|
||
|
|
|
||
|
|
&.negativeMergin {
|
||
|
|
margin-right: calc(calc(var(--fukidashi-radius) * .13) * -1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.bg {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background: var(--fukidashi-bg);
|
||
|
|
border-radius: var(--fukidashi-radius);
|
||
|
|
}
|
||
|
|
|
||
|
|
.content {
|
||
|
|
position: relative;
|
||
|
|
padding: 8px 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tail {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
display: block;
|
||
|
|
width: calc(var(--fukidashi-radius) * 1.13);
|
||
|
|
height: auto;
|
||
|
|
fill: var(--fukidashi-bg);
|
||
|
|
}
|
||
|
|
|
||
|
|
.left .tail {
|
||
|
|
left: 0;
|
||
|
|
transform: rotateY(180deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
.right .tail {
|
||
|
|
right: 0;
|
||
|
|
}
|
||
|
|
</style>
|