Make thinner border for focused links (#9277)

* Make thiner border for focused links

* Change border size of package manager tabs

* Delete comment line from base.less

* Change nav-tabs color and make overflow-y visible for package-tags

Author: dolczykk

src/Bootstrap/dist/css/bootstrap-theme.css

@@ -118,6 +118,13 @@ body {
 .main-container {
   padding-bottom: 75px;
   height: auto;
+
+  a[href] {
+    &:focus {
+      outline: solid 2px;
+      outline-offset: 1px;
+    }
+  }
 }
 
 .navbar-logo {
@@ -343,6 +350,13 @@ img.reserved-indicator-icon {
   li {
     list-style: none;
     display: list-item;
+
+    a {
+      &:focus {
+        outline: solid 0.25px;
+        outline-offset: 0;
+      }
+    }
   }
 
   @media (min-width: @screen-sm-min) {
@@ -353,6 +367,10 @@ img.reserved-indicator-icon {
       overflow-y: hidden;
       padding-right: @padding-small-horizontal;
     }
+
+    li.package-tags {
+      overflow-y: visible;
+    }
   }
 }
 

src/Bootstrap/less/theme/base.less

@@ -357,6 +357,11 @@
           border: 0;
           padding: 5px 10px;
           margin: 0;
+
+          &:focus {
+            outline: 3px solid #0078D4;
+            outline-offset: 0;
+          }
         }
       }
     }
@@ -371,7 +376,7 @@
 
     .tab-content {
       .tab-pane {
-        
+
         .install-script-row {
           display: flex;
           height: 100%;
@@ -426,6 +431,11 @@
       font-family: @font-family-base;
       color: #323130;
 
+      &:focus {
+        outline: 3px solid #0078D4;
+        outline-offset: 0;
+      }
+
       .ms-Icon {
         position: relative;
         top: 2px;