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 class="Fa"> {{ name_fa }}  </div>
            <!------------------------Conditional::Begin----------------------->
            <div v-if="name_en" class="En"> {{ name_en }}  </div>
            <div v-if="date" class="Fa Thin date"> {{ date }}  </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,
            date:           String,
            colorBox:       String,
        },
    };
</script>
<style lang="scss" scoped>
    .name-block {
        display: flex;
        justify-content: right;
        align-items: center;
    }
    .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 .Fa {
        font-size: 20px;
        line-height: 22px;
    }
    .name-block .text .En {
        font-size: 12px;
        line-height: 18px;
        letter-spacing: 5px;
        text-transform: uppercase;
        margin-right: -5px;
        margin-top: -2px;
        color: #b1b1b1;
    }
    .name-block .text .date {
        font-size: 12px;
    }

    .name-block.en-origin .text .En {
        font-size: 13px;
        text-transform: none;
        letter-spacing: 0px;
        margin-right: 0px;
    }

    /*----------------------------------------------------*/
    /*                      Size MD                       */
    /*----------------------------------------------------*/
    .name-block.md {
        text-align:right;
        padding: 0px 2px;
    }
    .name-block.md .Fa {
        font-size: 18px;
    }
    .name-block.md .En {
        font-size: 10px;
        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 .Fa {
        font-size: 16px;
    }
    .name-block.sm .En {
        font-size: 10px;
        letter-spacing: 3px;
        text-transform: uppercase;
        margin-right: -3px;
    }
    .name-block.sm .En.number {
        font-size: 36px;
    }

    /*----------------------------------------------------*/
    /*                      Size MD                       */
    /*----------------------------------------------------*/
    .name-block.xl {
        text-align:right;
        padding: 0px 2px;
    }
    .name-block.xl .Fa {
        font-size: 28px;
    }
    .name-block.xl .En {
        font-size: 16px;
        letter-spacing: 5px;
        text-transform: uppercase;
        color: #9a9a9a;
        margin-right: -3px;
    }


    /*----------------------------------------------------*/
    /*                      Fa-Only                       */
    /*----------------------------------------------------*/
    .name-block.fa-only .En.number {
        font-size: 22px;
        line-height: 22px;
        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-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>