61 lines
1.3 KiB
Vue
61 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
interface ColorDict {
|
|
name: string
|
|
value: string
|
|
}
|
|
|
|
interface Props {
|
|
colors: ColorDict[]
|
|
}
|
|
|
|
defineProps<Props>()
|
|
</script>
|
|
|
|
<template>
|
|
<table class="color-table">
|
|
<thead class="color-table__head">
|
|
<tr class="color-table__row">
|
|
<th class="color-table__heading name">{{ $t('data.colors.headings[0]') }}</th>
|
|
<th class="color-table__heading value">{{ $t('data.colors.headings[1]') }}</th>
|
|
<th class="color-table__heading color">{{ $t('data.colors.headings[2]') }}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="color-table__body">
|
|
<tr class="color-table__row" v-for="(color, idx) in colors" :key="idx">
|
|
<td class="color-table__cell name">{{ $t(color.name) }}</td>
|
|
<td class="color-table__cell value">{{ color.value }}</td>
|
|
<td class="color-table__cell color" :style="{ 'background-color': color.value }"></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.color-table {
|
|
&__heading {
|
|
&.name {
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
&__cell {
|
|
&.name {
|
|
text-align: right;
|
|
}
|
|
|
|
&.value {
|
|
font-family:
|
|
Menlo,
|
|
JetBrains Mono,
|
|
Source Code Pro,
|
|
Monaco,
|
|
Ubuntu Mono,
|
|
Roboto Mono,
|
|
Cascadia Code,
|
|
Consolas,
|
|
monospace;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
</style>
|