96 lines
1.8 KiB
Vue
96 lines
1.8 KiB
Vue
<template>
|
|
<div class="action">
|
|
<a class="action-link" :class="{'active': active}" @click="$emit('click')">
|
|
<svg class="action-icon">
|
|
<use v-if="active && iconRefActive" :xlink:href="iconRefActive"></use>
|
|
<use v-else :xlink:href="iconRef"></use>
|
|
</svg>
|
|
<span class="action-text">{{ active && textActive ? textActive : text }}</span>
|
|
</a>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
iconRef: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
iconRefActive: {
|
|
type: String,
|
|
required: false
|
|
},
|
|
active: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
text: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
textActive: {
|
|
type: String,
|
|
required: false
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "./src/scss/loading-placeholder";
|
|
@import "./src/scss/variables";
|
|
@import "./src/scss/media-queries";
|
|
|
|
.action {
|
|
&-link {
|
|
display: flex;
|
|
align-items: center;
|
|
text-decoration: none;
|
|
text-transform: uppercase;
|
|
color: rgba($c-dark, 0.5);
|
|
transition: color 0.5s ease;
|
|
font-size: 11px;
|
|
padding: 5px 0;
|
|
border-bottom: 1px solid rgba($c-dark, 0.05);
|
|
&:hover {
|
|
color: rgba($c-dark, 0.75);
|
|
}
|
|
&.active {
|
|
color: $c-dark;
|
|
}
|
|
&.pending {
|
|
color: #f8bd2d;
|
|
}
|
|
}
|
|
&-icon {
|
|
width: 18px;
|
|
height: 18px;
|
|
margin: 0 10px 0 0;
|
|
fill: rgba($c-dark, 0.5);
|
|
transition: fill 0.5s ease, transform 0.5s ease;
|
|
&.waiting {
|
|
transform: scale(0.8, 0.8);
|
|
}
|
|
&.pending {
|
|
fill: #f8bd2d;
|
|
}
|
|
}
|
|
&-link:hover &-icon {
|
|
fill: rgba($c-dark, 0.75);
|
|
cursor: pointer;
|
|
}
|
|
&-link.active &-icon {
|
|
fill: $c-green;
|
|
}
|
|
&-text {
|
|
display: block;
|
|
padding-top: 2px;
|
|
cursor: pointer;
|
|
margin:4.4px;
|
|
margin-left: -3px;
|
|
}
|
|
}
|
|
|
|
</style>
|