[PRAC/cont] Add states for "head-cell" text/icon

Realiz :focus/hover/active for output-tbl "head-cell", accord template.

Worth noting:
  - adding states for "output-title-hash" too.

core: B-3 / JS-BL

Author: matowdev

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

@@ -25,12 +25,18 @@
   line-height: 44px;
   color: var(--main-purple);
   cursor: pointer;
+  transition: color var(--short) ease;
 }
 
 .crm__output-title-hash:focus-visible {
+  color: var(--light-purple);
   outline: solid rgba(152, 115, 255, 0.5);
 }
 
+.crm__output-title-hash:active {
+  color: var(--gray);
+}
+
 .crm__output-table {
   margin-bottom: 0;
   min-height: 322px;
@@ -55,15 +61,15 @@
   cursor: pointer;
 }
 
-.crm__output-table .crm__o-table-head-cell {
+.crm__output-table .crm__output-table-head-cell {
   padding: 8px 10px;
 }
 
 .crm__output-table #table-th-id {
   padding-left: 20px;
   width: 70px;
   font-weight: var(--semi-bold);
-  color: var(--main-purple);
+  color: var(--text-gray);
 }
 
 .crm__output-table #table-th-fio {
@@ -87,10 +93,23 @@
   cursor: default;
 }
 
-.crm__o-table-head-cell:focus-visible {
+.crm__output-table-head-cell:focus-visible {
   outline: solid rgba(152, 115, 255, 0.5);
 }
 
+.head-cell__text,
+.head-cell__icon,
+.head-cell__sort {
+  transition-property: color, opacity;
+  transition-duration: var(--short);
+  transition-timing-function: ease;
+}
+
+.head-cell__icon,
+.head-cell__sort {
+  opacity: 0.7;
+}
+
 .head-cell__text {
   margin-right: 2px;
 }
@@ -99,6 +118,30 @@
   padding-right: 16px;
 }
 
+.head-cell-with-icon:focus-visible .head-cell__text {
+  color: var(--main-purple);
+}
+
+.head-cell-with-icon:focus-visible .head-cell__icon {
+  opacity: 1;
+}
+
+.head-cell-with-icon:focus-visible .head-cell__sort {
+  opacity: 1;
+}
+
+.head-cell-with-icon:active .head-cell__text {
+  color: var(--main-purple);
+}
+
+.head-cell-with-icon:active .head-cell__icon {
+  opacity: 1;
+}
+
+.head-cell-with-icon:active .head-cell__sort {
+  opacity: 1;
+}
+
 .head-cell__icon-up {
   background: url(../images/cell-arrow-up.svg) no-repeat 0px 1px / 17px;
 }
@@ -147,3 +190,21 @@
     width: 190px;
   }
 }
+
+@media (any-hover: hover) {
+  .crm__output-title-hash:hover:not(:active) {
+    color: var(--light-purple);
+  }
+
+  .head-cell-with-icon:hover:not(:focus-visible):not(:active) .head-cell__text {
+    color: var(--black);
+  }
+
+  .head-cell-with-icon:hover .head-cell__icon {
+    opacity: 1;
+  }
+
+  .head-cell-with-icon:hover .head-cell__sort {
+    opacity: 1;
+  }
+}

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

@@ -92,11 +92,11 @@
   outputTable.classList.add('crm__output-table', 'table', 'table-hover');
   outTableHead.classList.add('crm__output-table-head');
   outTableBody.classList.add('crm__output-table-body');
-  outTblHeadTr.classList.add('crm__o-table-head-row');
+  outTblHeadTr.classList.add('crm__output-table-head-row');
   outTblHeadThId.classList.add(
     'head-cell',
     'head-cell-with-icon',
-    'crm__o-table-head-cell'
+    'crm__output-table-head-cell'
   );
   outTblHeadThIdWrap.classList.add('head-cell__wrap', 'head-cell__wrap-id');
   outTblHeadThIdText.classList.add('head-cell__text', 'head-cell__text-id');
@@ -108,7 +108,7 @@
   outTblHeadThFIO.classList.add(
     'head-cell',
     'head-cell-with-icon',
-    'crm__o-table-head-cell'
+    'crm__output-table-head-cell'
   );
   outTblHeadThFIOWrap.classList.add('head-cell__wrap', 'head-cell__wrap-fio');
   outTblHeadThFIOText.classList.add('head-cell__text', 'head-cell__text-fio');
@@ -121,7 +121,7 @@
   outTblHeadThCreationDT.classList.add(
     'head-cell',
     'head-cell-with-icon',
-    'crm__o-table-head-cell'
+    'crm__output-table-head-cell'
   );
   outTblHeadThDTWrap.classList.add('head-cell__wrap', 'head-cell__wrap-dt');
   outTblHeadThDTText.classList.add('head-cell__text', 'head-cell__text-dt');
@@ -133,7 +133,7 @@
   outTblHeadThChanges.classList.add(
     'head-cell',
     'head-cell-with-icon',
-    'crm__o-table-head-cell'
+    'crm__output-table-head-cell'
   );
   outTblHeadThChangeWrap.classList.add(
     'head-cell__wrap',
@@ -148,7 +148,10 @@
     'head-cell__icon-change',
     'head-cell__icon-down'
   );
-  outTblHeadThContacts.classList.add('head-cell', 'crm__o-table-head-cell');
+  outTblHeadThContacts.classList.add(
+    'head-cell',
+    'crm__output-table-head-cell'
+  );
   outTblHeadThContactWrap.classList.add(
     'head-cell__wrap',
     'head-cell__wrap-contact'
@@ -157,7 +160,7 @@
     'head-cell__text',
     'head-cell__text-contact'
   );
-  outTblHeadThActions.classList.add('head-cell', 'crm__o-table-head-cell');
+  outTblHeadThActions.classList.add('head-cell', 'crm__output-table-head-cell');
   outTblHeadThActionWrap.classList.add(
     'head-cell__wrap',
     'head-cell__wrap-action'
@@ -545,7 +548,7 @@
 
   // ** изменение направления стрелки/svg-icon, согласно прожатия по заглавной ячейке (при сортировке данных)
   const allHeaderRowCells = document.querySelectorAll(
-    '.crm__o-table-head-cell'
+    '.crm__output-table-head-cell'
   );
 
   function changeIconDirection(event) {