[PRAC/cont] Correct logic for adding icons

Exclude spans, change to ::before/after logic in "add-client" btn.

Worth noting:
  - not full states/transitions synchronization, i.e. the button and icons.

core: B-3 / JS-BL

Author: matowdev

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

@@ -24,64 +24,56 @@
   color: var(--main-purple);
   background: transparent;
   outline: none;
-  overflow: hidden;
   transition-property: border, color, background-color;
-  transition-duration: var(--short);
+  transition-duration: 0.2s;
   transition-timing-function: ease;
 }
 
-.crm__add-btn:focus-visible:not(:hover) {
-  color: var(--white);
-  background-color: var(--dark-purple);
-}
-
-.crm__add-btn:focus-visible:not(:hover) .default-add-icon {
-  opacity: 0;
+.crm__add-btn::before,
+.crm__add-btn::after {
+  content: "";
+  position: absolute;
+  left: 22px;
+  width: 22px;
+  height: 16px;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  transition: opacity 0.2s ease;
 }
 
-.crm__add-btn:focus-visible:not(:hover) .white-add-icon {
+.crm__add-btn::before {
+  background-image: url('../images/add-client.svg');
   opacity: 1;
 }
 
-.crm__add-btn:focus-visible:active {
-  color: var(--gray);
-}
-
-.crm__add-btn:active {
-  border: 1px solid var(--gray);
-  color: var(--gray);
-  background-color: transparent;
-}
-
-.crm__add-btn:active .default-add-icon {
+.crm__add-btn::after {
   opacity: 0;
 }
 
-.crm__add-btn:active .gray-add-icon {
+.crm__add-btn:focus-visible::after {
+  background-image: url('../images/add-client-white.svg');
   opacity: 1;
 }
 
-.crm__add-btn-icon {
-  position: absolute;
-  left: 27px;
-  width: 22px;
-  height: 16px;
-  transition: opacity var(--short) ease;
+.crm__add-btn:active::after {
+  background-image: url('../images/add-client-gray.svg');
+  opacity: 1;
 }
 
-.default-add-icon {
-  background: url('../images/add-client.svg') no-repeat center / contain;
-  opacity: 1;
+.crm__add-btn:focus-visible:not(:hover) {
+  color: var(--white);
+  background-color: var(--dark-purple);
 }
 
-.white-add-icon {
-  background: url('../images/add-client-white.svg') no-repeat center / contain;
-  opacity: 0;
+.crm__add-btn:focus-visible:active {
+  color: var(--gray);
 }
 
-.gray-add-icon {
-  background: url('../images/add-client-gray.svg') no-repeat center / contain;
-  opacity: 0;
+.crm__add-btn:active {
+  border: 1px solid var(--gray);
+  color: var(--gray);
+  background-color: transparent;
 }
 
 /* media queries, any-hover */
@@ -92,11 +84,12 @@
     background-color: var(--light-purple);
   }
 
-  .crm__add-btn:hover:not(:active) .default-add-icon {
+  .crm__add-btn:hover::before {
     opacity: 0;
   }
 
-  .crm__add-btn:hover:not(:active) .white-add-icon {
+  .crm__add-btn:hover:not(:active)::after {
+    background-image: url('../images/add-client-white.svg');
     opacity: 1;
   }
 }

core-courses/3-js-basic-level/practicum-js-basic-level/sb-crm-client/js/index.js

@@ -234,10 +234,6 @@
   // организация кнопки/модального окна для добавления клиентов (удаления/изменения)
   const addBtnWrap = document.createElement('div');
   const addBtn = document.createElement('button');
-  const addBtnDefaultIcon = document.createElement('span');
-  const addBtnWhiteIcon = document.createElement('span');
-  const addBtnGrayIcon = document.createElement('span');
-  const addBtnText = document.createElement('span');
   const addModalWrap = document.createElement('div');
   const addModalDialog = document.createElement('div');
   const addModalContent = document.createElement('div');
@@ -274,10 +270,6 @@
 
   addBtnWrap.classList.add('crm__add-btn-wrap');
   addBtn.classList.add('crm__add-btn');
-  addBtnDefaultIcon.classList.add('crm__add-btn-icon', 'default-add-icon');
-  addBtnWhiteIcon.classList.add('crm__add-btn-icon', 'white-add-icon');
-  addBtnGrayIcon.classList.add('crm__add-btn-icon', 'gray-add-icon');
-  addBtnText.classList.add('crm__add-btn-text');
   addModalWrap.classList.add('modal', 'crm__add-btn-modal', 'fade');
   addModalDialog.classList.add('modal__add-dialog', 'modal-dialog');
   addModalContent.classList.add('modal__add-content-wrap', 'modal-content');
@@ -434,7 +426,7 @@
   addModalFooterCancelBtn.setAttribute('type', 'button');
   addModalFooterCancelBtn.setAttribute('data-bs-dismiss', 'modal');
 
-  addBtnText.textContent = 'Добавить клиента';
+  addBtn.textContent = 'Добавить клиента';
   addModalHeaderTitle.textContent = 'Новый клиент';
   addModalBodySurnameInputLabel.textContent = 'Фамилия';
   addModalBodySurnameLabelSpan.textContent = '*';
@@ -451,7 +443,6 @@
   addModalBodySaveBtn.textContent = 'Сохранить';
   addModalFooterCancelBtn.textContent = 'Отмена';
 
-  addBtn.append(addBtnDefaultIcon, addBtnWhiteIcon, addBtnGrayIcon, addBtnText);
   addBtnWrap.append(addBtn);
   addModalHeader.append(addModalHeaderTitle, addModalHeaderXBtn);
   addModalBodySurnameInputLabel.append(addModalBodySurnameLabelSpan);