[PRAC/cont] Add icon/states for "add-btn"

Organiz states for "add-btn" (icon changes), styling according UI-kit.

Worth noting:
  - solution to using 3-ee "spans" to change/replace colors/icons (maybe not the final solve).

core: B-3 / JS-BL

Author: matowdev

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

@@ -1,5 +1,3 @@
-.crm__add-data {}
-
 .crm__add-container {
   display: flex;
   justify-content: center;
@@ -9,13 +7,88 @@
 }
 
 .crm__add-btn {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  position: relative;
   border: 1px solid var(--main-purple);
   padding: 12px 25px;
   min-width: 217px;
-  /* min-height: 47px; */
   font-family: var(--open-sans), sans-serif;
   font-weight: var(--semi-bold);
   font-size: var(--default-fs);
   color: var(--main-purple);
   background: transparent;
+  outline: none;
+  overflow: hidden;
+  transition-property: border, color, background-color;
+  transition-duration: var(--short);
+  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:focus-visible:not(:hover) .white-add-icon {
+  opacity: 1;
+}
+
+.crm__add-btn:active {
+  border: 1px solid var(--gray);
+  color: var(--gray);
+  background-color: transparent;
+}
+
+.crm__add-btn:active .default-add-icon {
+  opacity: 0;
+}
+
+.crm__add-btn:active .gray-add-icon {
+  opacity: 1;
+}
+
+.crm__add-btn-icon {
+  position: absolute;
+  left: 27px;
+  width: 22px;
+  height: 16px;
+  transition: opacity var(--short) ease;
+}
+
+.default-add-icon {
+  background: url('../images/add-client.svg') no-repeat center / contain;
+  opacity: 1;
+}
+
+.white-add-icon {
+  background: url('../images/add-client-white.svg') no-repeat center / contain;
+  opacity: 0;
+}
+
+.gray-add-icon {
+  background: url('../images/add-client-gray.svg') no-repeat center / contain;
+  opacity: 0;
+}
+
+/* media queries, any-hover */
+
+@media (any-hover: hover) {
+  .crm__add-btn:hover:not(:active) {
+    color: var(--white);
+    background-color: var(--light-purple);
+  }
+
+  .crm__add-btn:hover:not(:active) .default-add-icon {
+    opacity: 0;
+  }
+
+  .crm__add-btn:hover:not(:active) .white-add-icon {
+    opacity: 1;
+  }
 }

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

@@ -33,7 +33,7 @@
 
 .crm__output-table {
   margin-bottom: 0;
-  min-height: 400px;
+  min-height: 322px;
   font-family: var(--open-sans), sans-serif;
   font-weight: var(--regular);
   background-color: var(--white);

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

@@ -18,6 +18,9 @@
   --black: #333;
   --white: #fff;
   --main-purple: #9873FF;
+  --light-purple: #B89EFF;
+  --dark-purple: #8052FF;
+  --gray: #C8C5D1;
   --text-gray: #B0B0B0;
   --specific-gray: #85859b;
   --bg-page: #F5F5F5;

core-courses/3-js-basic-level/practicum-js-basic-level/sb-crm-client/images/add-client-gray.svg

@@ -224,12 +224,21 @@
   // организация кнопки/модального окна для добавления клиентов (удаления/изменения)
   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');
 
   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');
 
-  addBtn.textContent = 'Добавить клиента';
+  addBtnText.textContent = 'Добавить клиента';
 
+  addBtn.append(addBtnDefaultIcon, addBtnWhiteIcon, addBtnGrayIcon, addBtnText);
   addBtnWrap.append(addBtn, addModalWrap);
   crmAddContainer.append(addBtnWrap);