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

<template>
    <div :class="`we-number ${theme}`">
        <div class="number En Bold"> {{ number }} </div>
        <div class="label Fa" v-html="label"></div>
    </div>
</template>

<script>
    export default {
        props: {
            theme:      { default: '' },
            number:     { default: '' },
            label:      { default: 'آیتم' },
        },
    };
</script>
<style lang="scss" scoped>
    .we-number {
        padding: 5px 10px;
        border-radius: 3px;
        border: 1px solid transparent;
    }
    .we-number .number  {
        font-size: 25px;
        line-height: 20px;
    }
    .we-number .label {
        font-size: 12px;
        opacity: 0.7;
        text-align: left;
    }

    /*----------------------------------------------------*/
    /*                Left Label                          */
    /*----------------------------------------------------*/
    .we-number.label-left {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .we-number.label-left .label {
        font-size: 14px;
        opacity: 0.7;
        text-align: right;
        line-height: 16px;
        margin-right: 3px;
    }

    /*----------------------------------------------------*/
    /*                Lg Size                             */
    /*----------------------------------------------------*/
    /*--------------lg------------------------------------*/
    .we-number.lg .number {
        font-size: 60px;
        line-height: 45px;
    }
    /*--------------md------------------------------------*/
    .we-number.md .number {
        font-size: 50px;
        line-height: 35px;
    }
    /*--------------sm------------------------------------*/
    .we-number.sm .number {
        font-size: 35px;
        line-height: 30px;
    }
    /*--------------xl------------------------------------*/
    .we-number.xxl .number {
        font-size: 80px;
        line-height: 65px;
    }

    /*----------------------------------------------------*/
    /*                Colors                              */
    /*----------------------------------------------------*/
    @import "resources/js/Global/scss/_vars.scss";
    @each $color,
    $value in $colors {
        .we-number.bg-#{$color} {
            background-color: $value;
        }
    }
    @each $color,
    $value in $colors {
        .we-number.theme-#{$color} {
            color: $value;
        }
    }
</style>