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

<template>
    <div :class="`name-block ${theme} `">
        <div v-if="number!=''" class="number En Bold"> {{ number }} </div>
        <div v-if="colorBox" :class="`color-box ${colorBox}`"></div>
        <div class="text">
            <div v-if="top_label" class="top-label Fa Thin" v-html="top_label"></div>
            <div class="Fa title-fa"> {{ name_fa }}  </div>
            <!------------------------Conditional::Begin----------------------->
            <div v-if="name_en" class="En title-en"> {{ name_en }}  </div>
            <div v-if="date" class="Fa Thin date">
                <template v-if="date_filter" >{{ date | moment("dddd ، jD jMMMM ماه jYYYY، HH:mm") }}  </template>
                <template v-else >{{date}}</template>
            </div>
            <div v-if="label" class="Fa Thin label"><v-icon v-if="labelIcon">WMi-{{ labelIcon }}</v-icon> {{ label }}  </div>
            <div v-if="$slots.customText">
                <slot name="customText"></slot>
            </div>
            <!------------------------Conditional::End----------------------->
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            theme:          { default: '' },
            number:         { default: '' },
            name_fa:        { default: 'نام فارسی' },
            name_en:        String,
            top_label:      String,
            date:           String,
            date_filter:    { default: false },
            label:          String,
            labelIcon:      String,
            colorBox:       String,
        },
    };
</script>
<style lang="scss" scoped>
    .name-block {
        display: flex;
        justify-content: right;
        align-items: center;
        position: relative;
    }
    .name-block .En.number {
        font-size: 55px;
        line-height: 55px;
        margin-left: 10px;
        min-width: 30px;
    }
    .name-block .text {
        text-align: right;
    }
    .name-block .text .title-fa {
        font-size: 20px;
        line-height: 22px;
    }
    .name-block .text .title-en {
        font-size: 12px;
        line-height: 18px;
        letter-spacing: 5px;
        text-transform: uppercase;
        margin-right: -5px;
        margin-top: -2px;
        color: #b1b1b1;
        direction: ltr;
    }
    .name-block.ltr-3 .text .title-en {
        letter-spacing: 3px;
    }
    .name-block.en-mt-3 .text .title-en {
        margin-top: 3px;
    }
    .name-block .text .date {
        font-size: 12px;
    }
    .name-block .text .label {
        font-size: 14px;
    }

    .name-block.en-origin .text .title-en {
        font-size: 13px;
        text-transform: none;
        letter-spacing: 0px;
        margin-right: 0px;
    }
    .name-block .text .top-label {
        font-size: 12px;
        opacity: 0.8;
    }

    /*----------------------------------------------------*/
    /*                      Size MD                       */
    /*----------------------------------------------------*/
    .name-block.md {
        text-align:right;
        padding: 0px 2px;
    }
    .name-block.md .title-fa {
        font-size: 18px;
        line-height: 22px;
    }
    .name-block.md .title-en {
        font-size: 10px;
        line-height: 18px;
        letter-spacing: 3px;
        text-transform: uppercase;
        margin-right: -3px;
    }
    .name-block.md .En.number {
        font-size: 36px;
    }
    /*----------------------------------------------------*/
    /*                      Size SM                       */
    /*----------------------------------------------------*/
    .name-block.sm {
        text-align:right;
        padding: 0px 2px;
    }
    .name-block.sm .title-fa {
        font-size: 16px;
        line-height: 26px;
    }
    .name-block.sm .title-en {
        font-size: 10px;
        line-height: 18px;
        letter-spacing: 2px;
        text-transform: uppercase;
        margin-right: -2px;
    }
    .name-block.sm .En.number {
        font-size: 36px;
    }

    /*----------------------------------------------------*/
    /*                      Size xl                       */
    /*----------------------------------------------------*/
    .name-block.xl {
        text-align:right;
        padding: 0px 2px;
    }
    .name-block.xl .title-fa {
        font-size: 28px;
        line-height: 38px;
    }
    .name-block.xl .title-en {
        font-size: 16px;
        line-height: 24px;
        letter-spacing: 5px;
        text-transform: uppercase;
        color: #9a9a9a;
        margin-right: -3px;
    }


    /*----------------------------------------------------*/
    /*                      Fa-Only                       */
    /*----------------------------------------------------*/
    .name-block.fa-only .number.En {
        font-size: 20px;
        line-height: 20px;
        margin-left: 0px;
    }


    /*----------------------------------------------------*/
    /*                      number-absolute               */
    /*----------------------------------------------------*/
    .name-block.number-absolute .number {
        position: absolute;
        bottom: -15px;
        right: 10px;
        font-size: 60px;
        opacity: 0.08;
        line-height: 80px;
    }
    .name-block.number-absolute.top-left .number {
        top: 0px;
        right: 0px;
        line-height: 36px;
    }

    .name-block.number-light-gray .number {
        color: var(--color-light-gray);
    }


    .color-box {
        width: 10px;
        height: 35px;
        margin: 0px 0px 5px 15px;
        border-radius: 3px;
    }

    /*----------------------------------------------------*/
    /*                      Colors                        */
    /*----------------------------------------------------*/
    @import "resources/js/Global/scss/_vars.scss";
    @each $color,
    $value in $colors {
        .name-block.theme-#{$color} {
            color: $value;
        }
    }



</style>