[PRAC/cont] Add :hover/scale for "arrow-icon"

Adding small effect for drop-btn "arrow-icon" (in contact row).

Worth noting:
  - an attempt to exclude unclear flickering of drop-btn (at initial hover), by means of transform: translateZ(0).

core: B-3 / JS-BL

Author: matowdev

core-courses/3-js-basic-level/practicum-js-basic-level/sb-crm-client/css/modal-add.css

@@ -169,6 +169,11 @@
   font-size: 12px;
   background: transparent;
   outline: none;
+  /* попытка исключить не понятные мерцания кнопки */
+  transform: translateZ(0);
+  /* will-change: border-color, transform, opacity, box-shadow; */
+  /* backface-visibility: hidden; */
+  /* -webkit-font-smoothing: antialiased; */
 }
 
 .modal__add-body-add-contact-drop-btn:after {
@@ -183,6 +188,7 @@
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
+  transition: transform 0.1s ease;
   /* отработка клика и на arrow-icon */
   pointer-events: none;
 }
@@ -289,9 +295,9 @@
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
+  transition: opacity 0.2s ease;
   /* отработка клика и на arrow-icon */
   pointer-events: none;
-  transition: opacity 0.2s ease;
 }
 
 .modal__add-body-add-x-btn:before {
@@ -481,6 +487,14 @@
     background-color: var(--select-gray);
   }
 
+  .modal__add-body-add-contact-drop-btn:hover:after {
+    transform: translateY(-50%) scale(1.2);
+  }
+
+  .modal__add-body-add-contact-drop-btn.arrow-rotate:hover:after {
+    transform: translateY(-50%) rotate(180deg) scale(1.2);
+  }
+
   .modal__add-body-add-x-btn:hover:not(:active) {
     border-color: var(--bootstrap-red);
     box-shadow: 0 0 0 .25rem rgba(220, 53, 69, .25);