kopia lustrzana https://github.com/manuelkasper/sotlas-frontend
83 wiersze
1.5 KiB
Vue
83 wiersze
1.5 KiB
Vue
<template>
|
|
<b-taglist v-if="points !== null && points !== undefined" :class="{ ['points-' + points]: true }" attached>
|
|
<b-tag>{{ points }}</b-tag>
|
|
<b-tag class="bonus" v-if="bonus">+{{ bonus }}</b-tag>
|
|
</b-taglist>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'SummitPointsLabel',
|
|
props: {
|
|
points: {
|
|
type: Number
|
|
},
|
|
bonus: {
|
|
type: Number
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.tags {
|
|
display: inline-block;
|
|
margin-bottom: 0 !important;
|
|
}
|
|
.tag {
|
|
min-width: 2.2em;
|
|
padding: 0.4em;
|
|
color: #fff;
|
|
line-height: 1em;
|
|
height: auto;
|
|
margin-bottom: 0 !important;
|
|
}
|
|
@media (max-width: 768px) {
|
|
.tag {
|
|
padding: 0.3em 0.4em;
|
|
}
|
|
}
|
|
.points-0 .tag {
|
|
background-color: rgba(160, 160, 160, 1);
|
|
}
|
|
.points-1 .tag {
|
|
background-color: rgba(77, 122, 32, 1);
|
|
}
|
|
.points-2 .tag {
|
|
background-color: rgba(109, 165, 54, 1);
|
|
}
|
|
.points-4 .tag {
|
|
background-color: rgba(174, 167, 39, 1);
|
|
}
|
|
.points-6 .tag {
|
|
background-color: rgba(239, 168, 24, 1);
|
|
}
|
|
.points-8 .tag {
|
|
background-color: rgba(220, 93, 4, 1);
|
|
}
|
|
.points-10 .tag {
|
|
background-color: rgba(200, 16, 30, 1);
|
|
}
|
|
.points-1 .tag.bonus {
|
|
background-color: rgba(51, 81, 21, 1);
|
|
}
|
|
.points-2 .tag.bonus {
|
|
background-color: rgba(77, 116, 37, 1);
|
|
}
|
|
.points-4 .tag.bonus {
|
|
background-color: rgba(125, 120, 28, 1);
|
|
}
|
|
.points-6 .tag.bonus {
|
|
background-color: rgba(167, 115, 12, 1);
|
|
}
|
|
.points-8 .tag.bonus {
|
|
background-color: rgba(150, 64, 3, 1);
|
|
}
|
|
.points-10 .tag.bonus {
|
|
background-color: rgba(118, 10, 19, 1);
|
|
}
|
|
.tag.bonus {
|
|
min-width: 0;
|
|
}
|
|
</style>
|