Fix features table colors (#28)

This commit is contained in:
Dominik Korsa 2019-10-18 20:56:56 +02:00 committed by Mikołaj Pich
parent 7a021a21a4
commit 9dee4ed4e2
2 changed files with 35 additions and 18 deletions

View file

@ -1,44 +1,49 @@
<template>
<td v-if="value === 'y'" class="features-table__cell features-table__cell--yes" :class="wulkanowy ? 'features-table__cell--wulkanowy' : ''" title="Dostępne">
<td
v-if="value === 'y'"
class="features-table__cell features-table__cell--feature features-table__cell--yes"
:class="wulkanowy ? 'features-table__cell--wulkanowy' : ''"
title="Dostępne"
>
<check-icon
title="Dostępne"
:size="wulkanowy ? 36 : 28"
fillColor="#4caf50"
/>
</td>
<td v-else-if="value === 'n'" class="features-table__cell features-table__cell--no" :class="wulkanowy ? 'features-table__cell--wulkanowy' : ''" title="Niedostępne">
<td
v-else-if="value === 'n'"
class="features-table__cell features-table__cell--feature features-table__cell--no"
:class="wulkanowy ? 'features-table__cell--wulkanowy' : ''"
title="Niedostępne"
>
<close-icon
title="Niedostępne"
:size="28"
fillColor="#e53935"
/>
</td>
<td v-else-if="value === 'w'" class="features-table__cell features-table__cell--work-in-progress" :class="wulkanowy ? 'features-table__cell--wulkanowy' : ''" title="W trakcie">
<td
v-else-if="value === 'w'"
class="features-table__cell features-table__cell--feature features-table__cell--work-in-progress"
:class="wulkanowy ? 'features-table__cell--wulkanowy' : ''"
title="W trakcie"
>
<clock-icon
title="W trakcie"
:size="wulkanowy ? 36 : 28"
fillColor="#009688"
/>
</td>
<td v-else class="features-table__cell features-table__cell--other" :class="wulkanowy ? 'features-table__cell--wulkanowy' : ''">
<td
v-else
class="features-table__cell features-table__cell--feature features-table__cell--other"
:class="wulkanowy ? 'features-table__cell--wulkanowy' : ''"
>
{{ value }}
</td>
</template>
<style lang="scss">
.features-table__cell {
min-width: 95px;
&--wulkanowy {
background-color: #fff;
}
&--other {
color: #1e88e5;
}
}
</style>
<script>
import CheckIcon from 'vue-material-design-icons/Check.vue';
import CloseIcon from 'vue-material-design-icons/Close.vue';

View file

@ -96,6 +96,18 @@
&--feature-name {
font-weight: 500;
}
&--feature {
min-width: 95px;
}
&--wulkanowy {
background-color: #fff;
}
&--other {
color: #1e88e5;
}
}
&__th {