willaengine/resources/js/Global/components/Blocks/Hint.vue

<template>
    <div class="info-box" :class="theme">
        <div v-if="title_en" class="title-en En Bold"> {{ title_en }}</div>
        <div v-if="icon" :class="'icon'"> <v-icon :color="textColor"> WMi-{{icon}} </v-icon></div>
        <div :class="'texts'">
            <div :class="`title Fa Bold ${textColor}--text`" v-if="title != ''"> {{ title }} </div>
            <div :class="`desc Fa Thin ${textColor}--text`">
                <slot name="text"></slot>
            </div>
        </div>
        <div class="help-link">
            <v-tooltip
                v-if="hintID"
                top
                color="black"
                transition="fade-transition"
            >
                <template v-slot:activator="{ on }">
                    <v-btn
                        class="XS"
                        @click.native="$_helper(hintID)"
                        slot="activator"
                        fab
                        :color="$_color('help')"
                        dark
                        v-on="on"
                        x-small
                    >
                        <v-icon>WMi-{{ hintIcon }}</v-icon>
                    </v-btn>
                </template>
                <span> بیشتر بدانید (راهنما) </span>
            </v-tooltip>
        </div>
    </div>
</template>

<script>
export default {
    name: "we-hint-text",
    props: {
        icon:               { default: String},
        title:              { default: "" },
        title_en:           { default: String },
        text:               { default: " پسر خوب " },
        theme:              { default: "grey lighten-3 inline XS" },
        textColor:          { default: "black" },
        hintID:             { type: String },
        hintIcon:           { default: "info" },
    },
};
</script>
<style lang="scss" scoped>

/* --------------------------------------------------------
                        Info Box :: Begin
-------------------------------------------------------- */
.info-box {
    display:flex;
    color:#fff;
    border-radius: 10px;
}

.info-box .icon, .info-box .title-en {
    display:flex;
    background-color: rgba(0, 0, 0, 0.1);
    padding:10px 20px;
    border-radius: 10px;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    color: #000;
}

.info-box .icon .v-icon {
    line-height: 50px;
    font-size: 30px;
}

.info-box .texts {
    display:inline-block;
    padding:20px 20px;
    text-align: right;
    width: 100%
}

.info-box .texts .title {
    text-align: right;
    font-size: 16px;
}
.info-box.XS .texts .title {
    font-size: 14px;
}
.info-box .texts .desc {
    text-align: right;
    font-size: 12px;
    line-height: 20px;
}
.info-box.XS .texts .desc {
    font-size: 14px;
}
.info-box.inline .texts {
    display: flex;
    justify-content: right;
    align-items: center;
    margin-right: 10px;
    line-height: 34px;
}
.info-box.inline .texts .desc {
    margin-right: 10px;
}

/*---------------------------------XS Size-------------------*/
.info-box.XS .icon .v-icon {
    line-height: 40px;
    font-size: 20px;
}
.info-box.XS .texts {
    padding:10px 10px;
}
.info-box.XS .icon {
    padding:5px 10px;
}


/* ---------------------------------Modifications--------------------------------- */
.info-box .texts, .info-box .icon i {
    color: #fff;
}

.info-box.LightGray .texts, .info-box.LightGray .icon i {
    color: #000;
}



/* --------------------------------------------------------
                        Info Box :: End
-------------------------------------------------------- */

.help-link {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 10px;
}

</style>