Add focus outline color to variables

eea · Apr 6, 2023 · 667fd04 · 667fd04
1 parent 05bc899
commit 667fd04
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 13 deletions.
diff --git a/src/SearchBlock/less/datahub.less b/src/SearchBlock/less/datahub.less
@@ -43,8 +43,8 @@
 }
 
 /**
-  * Datahub search
-  */
+    * Datahub search
+    */
 
 .view-datahub-item {
   .item.tabs-title {
@@ -84,11 +84,26 @@
 .datahub-view {
   .searchapp-datahub {
     /* Search box */
-    .sui-search-box .search-input .terms-box {
-      border-color: @darkCerulean;
+    .sui-search-box {
+      .search-input .terms-box input {
+        border-color: @darkCerulean;
+
+        &:focus {
+          border-bottom: 3px solid @blue-3;
+          outline: none !important;
+
+          &:focus + .terms-box-left {
+            border-bottom: 3px solid @blue-3;
+          }
+        }
+      }
+
+      .terms-box-left {
+        border-color: @darkCerulean;
 
-      .terms-box-left .search-icon svg {
-        fill: @darkCerulean !important;
+        .search-icon svg {
+          fill: @darkCerulean !important;
+        }
       }
 
       .input-controls .clear-button {
@@ -110,7 +125,8 @@
       a.item {
         color: @blue-grey-5;
 
-        &.active {
+        &.active,
+        &:active {
           border-color: @darkCerulean;
           color: @darkCerulean;
         }
@@ -142,8 +158,8 @@
 }
 
 /**
-  * Datahub item view
-  */
+    * Datahub item view
+    */
 .view-datahub-item {
   color: @blue-grey-5;
 

diff --git a/src/SearchBlock/less/dropdown-filterlist.less b/src/SearchBlock/less/dropdown-filterlist.less
@@ -330,7 +330,7 @@
 
     .sui-multi-checkbox-facet__checkbox:focus + .checkmark,
     .sui-multi-checkbox-facet__checkbox:focus + .radio-checkmark {
-      outline: 0.2rem solid #0083e0 !important;
+      outline: 0.2rem solid @blue-3 !important;
     }
 
     .checkmark:after,

diff --git a/src/SearchBlock/less/searchbox.less b/src/SearchBlock/less/searchbox.less
@@ -42,11 +42,11 @@
         font-size: 40px;
 
         &:focus {
-          border-bottom: 3px solid #0083e0;
+          border-bottom: 3px solid @blue-3;
           outline: none !important;
 
           &:focus + .terms-box-left {
-            border-bottom: 3px solid #0083e0;
+            border-bottom: 3px solid @blue-3;
           }
         }
       }

diff --git a/src/SearchBlock/less/searchview.less b/src/SearchBlock/less/searchview.less
@@ -188,7 +188,7 @@ body.searchlib-page {
   top: -1px;
 
   .ui.toggle.checkbox input:focus + label:before {
-    outline: 0.2rem solid #0083e0 !important;
+    outline: 0.2rem solid @blue-3 !important;
   }
 
   label {

diff --git a/src/SearchBlock/less/variables.less b/src/SearchBlock/less/variables.less
@@ -10,6 +10,7 @@ Colors
 @darkCerulean: #004b7f;
 @deepBlue: #3d5265;
 @blue-grey-5: #3d5265;
+@blue-3: #0083e0;
 @blue-4: #006bb8;
 @darkMidnightBlue: #0a3d61;