summaryrefslogtreecommitdiff
path: root/idea/MkDisableSection.vue
blob: 360705071b4ffcfb1e5a699b0e8a29bfde571790 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!--
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->

<template>
<div :class="[$style.root]">
	<div :inert="disabled" :class="[{ [$style.disabled]: disabled }]">
		<slot></slot>
	</div>
	<div v-if="disabled" :class="[$style.cover]"></div>
</div>
</template>

<script lang="ts" setup>
defineProps<{
	disabled?: boolean;
}>();
</script>

<style lang="scss" module>
.root {
	position: relative;
}

.disabled {
	opacity: 0.7;
}

.cover {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	cursor: not-allowed;
	--color: color(from var(--MI_THEME-error) srgb r g b / 0.25);
	background-size: auto auto;
	background-image: repeating-linear-gradient(135deg, transparent, transparent 10px, var(--color) 4px, var(--color) 14px);
}
</style>