Fix features table colors (#28)
This commit is contained in:
parent
7a021a21a4
commit
9dee4ed4e2
2 changed files with 35 additions and 18 deletions
|
@ -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';
|
||||
|
|
|
@ -96,6 +96,18 @@
|
|||
&--feature-name {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&--feature {
|
||||
min-width: 95px;
|
||||
}
|
||||
|
||||
&--wulkanowy {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
&--other {
|
||||
color: #1e88e5;
|
||||
}
|
||||
}
|
||||
|
||||
&__th {
|
||||
|
|
Loading…
Reference in a new issue