update

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

@@ -1,10 +1,10 @@
 <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 v-if="icon" :class="'icon'"> <v-icon> 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`">
+            <div :class="`title Fa Bold`" v-if="title != ''"> {{ title }} </div>
+            <div :class="`desc Fa Thin`">
                 <slot name="text"></slot>
             </div>
         </div>
@@ -124,11 +124,11 @@ export default {
 
 
 /* ---------------------------------Modifications--------------------------------- */
-.info-box .texts, .info-box .icon i {
+.info-box.light .texts, .info-box.light .icon i, .info-box.light .text {
     color: #fff;
 }
 
-.info-box.LightGray .texts, .info-box.LightGray .icon i {
+.info-box.grey.lighten-3 .texts, .info-box.grey.lighten-3 .icon i, .info-box.grey.lighten-3 .text {
     color: #000;
 }
 

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

@@ -1,5 +1,5 @@
 <template>
-    <div :class="`name-block ${theme}`">
+    <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">
@@ -89,11 +89,11 @@
     }
     .name-block.md .title-fa {
         font-size: 18px;
-        line-height: 18px;
+        line-height: 22px;
     }
     .name-block.md .title-en {
         font-size: 10px;
-        line-height: 16px;
+        line-height: 18px;
         letter-spacing: 3px;
         text-transform: uppercase;
         margin-right: -3px;
@@ -147,9 +147,9 @@
     /*----------------------------------------------------*/
     /*                      Fa-Only                       */
     /*----------------------------------------------------*/
-    .name-block.fa-only .title-en.number {
-        font-size: 22px;
-        line-height: 22px;
+    .name-block.fa-only .number.En {
+        font-size: 20px;
+        line-height: 20px;
         margin-left: 0px;
     }
 

resources/js/Global/scss/Animations.scss

@@ -19,3 +19,18 @@ $Value in $delays {
         animation-delay: $Value;
     }
 }
+
+
+//--------------------------------------------
+//              States handler and animations
+//--------------------------------------------
+.hide-by-height {
+    max-height: 0px;
+    overflow: hidden;
+    opacity: 0;
+    transition: opacity 0.4s, max-height 0.4s cubic-bezier(1,0,.2,1);
+}
+.hide-by-height.active {
+    max-height: 5000px;
+    opacity: 1;
+}

resources/js/Global/scss/Misc.scss

@@ -680,6 +680,12 @@ $value in $backgrounds {
         background-color: $value;
     }
 }
+@each $color,
+$value in $colors {
+    .theme-#{$color}.active-border {
+        border-color: $value !important;
+    }
+}
 
 
 /*---------------------------------------------------------------*/