exchange-2.0/resources/assets/vue/components/accounts/elements/OnboardingStepComponent.vue

<template>
    <div class="row m-b-15">
        <div class="col  padding-15" :class="[{'pointer': !active && !disabled}, {'bg-white': !active && !disabled}, {'bg-master-lighter': !active && disabled}, {'b-a': !active}, {'b-grey': !active}, {'bg-success': active}]">
            <div class="absolute bullet-connector thin hint-text" style="top: -50%; left: 29px; z-index: -1;"></div>
            <div class="row align-items-center" :class="[{'hint-text': !active && disabled}]">
                <div class="col-auto p-r-5">
                    <div class="btn-rounded bg-success-darker padding-5" v-if="active">
                        <i class="fa fa-check text-success fs-16 fa-fw"></i>
                    </div>
                    <div class="btn-rounded b-a padding-5" :class="[{'b-success': !active && !disabled}, {'b-grey': !active && disabled}, {'bg-master-light': !active && disabled}]" v-show="!active" >
                        <slot name="icon"></slot>
                    </div>
                </div>
                <div class="col">
                    <div class="row">
                        <div class="col">
                            <div class="font-heading bold fs-12" :class="[{'text-success': !active && !disabled}, {'text-white': active}]">
                                <slot name="title"></slot>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="font-heading fs-11" :class="[{'muted': !active}, {'text-white': active}]">
                                <slot name="subTitle"></slot>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            active: {
                type: Boolean,
                default: false
            },
            disabled: {
                type: Boolean,
                default: false
            }
        },
        watch: {
            'active': function() {
                this.address = this.data;
            }
        },
    }
</script>