Animations for asidebar

Абалденные анимации (кто нахрен сделал так, что размер всего бара зависит от размера джекпота)

luckydiamond/src/assets/css/ComponentsStyles/asidebar.css

@@ -9,11 +9,31 @@
     display: flex;
     align-items: center;
     flex-direction: column;
+    margin-top: 12%;
 }
 
 .menu__content--jackpot-icon{
-    width: 16vh;
+    width: 10vh;
     height: -4vh;
+    transition: 250ms;
+}
+
+.menu__content--jackpot-icon:hover {
+    width: 11vh;
+    height: -4vh;
+}
+
+.menu__content--chest-icon {
+    margin-left: -1px;
+    transition: 250ms;
+    width: 100%;
+    height: 100%;
+}
+
+.menu__content--chest-icon:hover {
+    margin-left: -5px;
+    height: 125%;
+    width: 125%;
 }
 
 .menu__btn--home {
@@ -54,11 +74,29 @@
 }
 
 .menu__content--cruch-icon {
-    margin-left: 6px
+    margin-left: 6px;
+    transition: 250ms;
+    width: 100%;
+    height: 100%;
+}
+
+.menu__content--cruch-icon:hover {
+    margin-left: 0px;
+    width: 125%;
+    height: 125%;
 }
 
 .menu__content--bomb-icon {
-    margin-left: 6px
+    margin-left: 6px;
+    width: 100%;
+    height: 100%;
+    transition: 250ms;
+}
+
+.menu__content--bomb-icon:hover {
+    margin-left: 0px;
+    width: 125%;
+    height: 125%;
 }
 
 .menu__content--gamemodes {
@@ -76,8 +114,6 @@
     justify-content: center;
     align-items: center;
     text-align: center;
-    max-width: 100%;
-    max-height: 100%;
 }
 
 .menu__btn--settings {

luckydiamond/src/assets/css/PagesStyles/home.css

@@ -229,6 +229,7 @@
     content: '\00bb';
     opacity: 0;
     transition: 250ms;
+    right: 20;
   }
 
 .line__btn:hover span:after {
@@ -241,6 +242,10 @@
     padding:11px 11px 11px 22px ;
   }
 
+.line__btn:active {
+    left: 5%;
+  }
+
 .line__btn__jackpot {
     border-radius: 21px;
     background: #FFF;
@@ -275,6 +280,10 @@
     padding:11px 11px 11px 22px ;
   }
 
+  .line__btn__jackpot:active {
+    left: 10%;
+  }
+
 .line__btn--elm {
     color: #000;
     font-size: 38px ;
@@ -323,7 +332,7 @@
     color: #fff;
     text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
     font-family: Montserrat Alternates;
-    font-size: 87px;
+    font-size: 80px;
     font-weight: 700;
     text-transform: uppercase;
     padding: 4.5% 2.2%;

luckydiamond/src/components/AsidebarComponent.vue

@@ -9,7 +9,7 @@
           <!-- <div class="fotosloti"><a href="#"><img  src="../assets/icons-menu/slots-icon.svg" ></a></div> -->
           <a href="#" @click="$router.push({ name: 'jackpot' })"><img  class="menu__content--jackpot-icon" src="../assets/icons-menu/jackpot-icon.svg"></a>
           <a href="#" @click="$router.push({ name: 'crash' })"><img  class="menu__content--cruch-icon" src="../assets/icons-menu/crush-icon.svg"></a>
-          <a href="#"><img  src="../assets/icons-menu/case-icon.png"></a>
+          <a href="#"><img class="menu__content--chest-icon" src="../assets/icons-menu/case-icon.png"></a>
            <!-- <a href="#" @click="$router.push({ name: 'saper' })"><img  class="menu__content--bomb-icon" src="../assets/icons-menu/bomb-icon.svg"></a> -->
           <a href="#" @click="$router.push({ name: 'saper' })"><img  class="menu__content--bomb-icon" src="../assets/icons-menu/bomb-icon.svg"></a>
         </div>