name-block fix

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

@@ -1,10 +1,16 @@
 <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>
-            <div v-if="name_en != ''" class="En"> {{ name_en }}  </div>
-            <div v-if="date != ''" class="Fa Thin date"> {{ date }}  </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>
@@ -15,8 +21,9 @@
             theme:          { default: '' },
             number:         { default: '' },
             name_fa:        { default: 'نام فارسی' },
-            name_en:        { default: "" },
-            date:           { default: "" },
+            name_en:        String,
+            date:           String,
+            colorBox:       String,
         },
     };
 </script>
@@ -29,7 +36,8 @@
     .name-block .En.number {
         font-size: 55px;
         line-height: 55px;
-        margin-left: 15px;
+        margin-left: 10px;
+        min-width: 30px;
     }
     .name-block .text {
         text-align: right;
@@ -52,20 +60,23 @@
     /*----------------------------------------------------*/
     /*                      Size MD                       */
     /*----------------------------------------------------*/
-    .name-block.size-md {
+    .name-block.md {
         text-align:right;
         padding: 0px 2px;
     }
-    .name-block.size-md .Fa {
+    .name-block.md .Fa {
         font-size: 18px;
     }
-    .name-block.size-md .En {
+    .name-block.md .En {
         font-size: 10px;
         letter-spacing: 3px;
         text-transform: uppercase;
-        color: #9a9a9a;
+        color: #5a5a5a;
         margin-right: -3px;
     }
+    .name-block.md .En.number {
+        font-size: 36px;
+    }
 
     /*----------------------------------------------------*/
     /*                      Size MD                       */
@@ -103,6 +114,12 @@
     }
 
 
+    .color-box {
+        width: 10px;
+        height: 35px;
+        margin: 0px 0px 5px 15px;
+        border-radius: 3px;
+    }
 
     /*----------------------------------------------------*/
     /*                      Colors                        */