feat(focus): improve focus style to close #101

scss/_badge.scss

@@ -55,9 +55,10 @@
 
 // Boosted mod
 .badge[href] {
+  @include transition($transition-focus); // Boosted mod
   @include focus() {
     outline-color: $white;
-    outline-offset: -1px;
+    outline-offset: -#{$border-width};
 
     &.badge-light {
       outline-color: $black;

scss/_buttons.scss

@@ -181,7 +181,7 @@ fieldset:disabled a.btn {
   background-repeat: no-repeat;
   &:hover,
   &:focus {
-    outline: none;
+    outline: 0;
   }
 }
 // end mod

scss/_carousel.scss

@@ -104,7 +104,7 @@
   @include hover-focus() {
     color: $carousel-control-color;
     text-decoration: none;
-    outline: 2px dotted $input-focus-border-color; // Boosted mod
+    outline: $border-width solid $input-focus-border-color; // Boosted mod
     opacity: $carousel-control-hover-opacity;
   }
 }

scss/_custom-forms.scss

@@ -42,7 +42,7 @@
 
   &:focus ~ .custom-control-label::before {
     // the mixin is not used here to make sure there is feedback
-    outline: dotted 1px $black; // Boosted mod no box-shadow, replaced by outline
+    outline: $border-width solid $black; // Boosted mod no box-shadow, replaced by outline
     @if $enable-shadows {
       box-shadow: $input-box-shadow, $input-focus-box-shadow;
     } @else {
@@ -244,7 +244,7 @@
   .custom-control-input {
     @include focus() {
       ~ .custom-control-label::after {
-        outline: 1px dotted $white;
+        outline: $border-width solid $white;
       }
     }
   }
@@ -487,7 +487,7 @@
   appearance: none;
 
   &:focus {
-    outline: none;
+    outline: 0;
 
     // Pseudo-elements must be split across multiple rulesets to have an effect.
     // No box-shadow() mixin for focus accessibility.

scss/_navbar.scss

@@ -63,19 +63,20 @@
   font-weight: $font-weight-bold; // Boosted mod
   line-height: inherit;
   white-space: nowrap;
+  outline-offset: map-get($spacers, 4);
+  @include transition($transition-focus); // Boosted mod
 
   @include hover-focus() {
     text-decoration: none;
   }
 
   // Boosted mod
   + .navbar-brand {
-    margin-right: 0;
-    margin-left: $spacer;
+    margin: map-get($spacers, 2) 0 map-get($spacers, 2) $spacer;
   }
 
   @include focus() {
-    outline: 1px dotted $white;
+    outline: $border-width solid $white;
     outline-offset: map-get($spacers, 2);
   }
 
@@ -107,6 +108,8 @@
     padding: .875rem map-get($spacers, 2);
     margin-top: 0;
     text-decoration: none;
+    outline-offset: map-get($spacers, 4);
+    @include transition($transition-focus); // Boosted mod
 
     &.active::before {
       display: none;

scss/_o-carousel.scss

@@ -1,4 +1,4 @@
-// stylelint-disable property-blacklist, font-family-no-missing-generic-family-keyword
+// stylelint-disable font-family-no-missing-generic-family-keyword
 //
 // Carousel
 // --------------------------------------------------
@@ -25,12 +25,12 @@
   text-shadow: none;
   background-color: transparent;
   opacity: .8;
-  transition: width .5s ease;
+  @include transition($transition-carousel);
 
   // Boosted mod
   &:focus {
-    outline: 2px dotted $input-focus-border-color;
-    outline-offset: -1px;
+    outline: $border-width solid $input-focus-border-color;
+    outline-offset: -#{$border-width};
   }
   // end mod
 }
@@ -72,15 +72,15 @@
     margin-right: .375rem;
     background-color: #000;
     border: 1px solid #fff;
-    border-radius: 50%;
+    @include border-radius(50%);
 
     &:hover {
       cursor: pointer;
     }
+  }
 
-    &.active {
-      background-color: theme-color("primary"); // stylelint-disable-line selector-no-qualifying-type
-    }
+  .active {
+    background-color: theme-color("primary");
   }
 }
 
@@ -94,10 +94,11 @@
   cursor: pointer;
   background-image: none;
   background-size: 0;
+  @include transition($transition-focus); // Boosted mod
   // Boosted mod
   &:focus {
-    outline: 2px dotted $input-focus-border-color;
-    outline-offset: -1px;
+    outline: $border-width solid $input-focus-border-color;
+    outline-offset: -#{$border-width};
   }
   // end mod
 }
@@ -187,11 +188,6 @@
   .swiper-slide {
     width: 80%;
 
-    // .card-link .card-body {
-    //   padding: 20px;
-    //   text-align: left;
-    // }
-
     .card-img img {
       height: auto;
     }

scss/_o-forms.scss

@@ -91,7 +91,7 @@
 
   // browser reset
   .form-control:invalid {
-    outline: none;
+    outline: 0;
     box-shadow: none;
   }
 }

scss/_o-nav-local.scss

@@ -28,8 +28,8 @@
   .nav .nav-link,
   .nav .dropdown-toggle {
     @include focus() {
-      outline: 1px dotted;
-      outline-offset: -1px;
+      outline: $border-width solid;
+      outline-offset: -#{$border-width};
     }
     display: inline-block;
     padding: 1rem ($nav-link-padding-x * .5) 1.125rem;
@@ -54,7 +54,7 @@
 
     .nav-link {
       @include focus() {
-        outline-offset: -2px;
+        outline-offset: -#{$border-width};
       }
       display: block;
       padding: .625rem .625rem .625rem 1.25rem;
@@ -78,11 +78,11 @@
     }
 
     &:focus {
-      outline-color: #fff;
+      outline-color: $white;
     }
 
-    color: #fff;
-    background-color: #000;
+    color: $white;
+    background-color: $black;
 
     &.active {
       color: theme-color("primary");

scss/_o-nav.scss

@@ -46,8 +46,8 @@
     &,
     &.dropdown-toggle {
       @include focus() {
-        outline: 1px dotted;
-        outline-offset: -6px;
+        outline: $border-width solid;
+        outline-offset: -#{$border-width * 3};
       }
     }
   }
@@ -72,6 +72,7 @@
     background-color: $white;
     border: 0;
     border-bottom: 2px solid $black;
+    @include transition($transition-focus); // Boosted mod
 
     &:first-child {
       margin-left: 0;
@@ -89,7 +90,7 @@
     }
 
     &:focus {
-      outline-offset: -4px;
+      outline-offset: -#{$border-width * 2};
     }
 
     &:hover:not([aria-expanded="true"]) {
@@ -224,7 +225,7 @@
     @include focus() {
       color: $nav-pills-focus-link-color;
       background-color: $nav-pills-focus-link-bg;
-      outline: none;
+      outline: 0;
       &.disabled {
         color: $nav-link-disabled-color;
         background-color: $nav-link-disabled-hover-bg;
@@ -243,8 +244,8 @@
 
       .nav-link {
         @include focus() {
-          outline: 1px dotted $black;
-          outline-offset: -2px;
+          outline: $border-width solid $black;
+          outline-offset: -#{$border-width};
         }
         display: block;
         padding: map-get($spacers, 2) map-get($spacers, 2) map-get($spacers, 2) $spacer;
@@ -300,7 +301,7 @@
   .nav-link {
     border: 0;
     &:focus {
-      outline-offset: -2px;
+      outline-offset: -#{$border-width};
     }
   }
 

scss/_o-navbar.scss

@@ -61,6 +61,8 @@
 
   .nav-link,
   .dropdown-toggle {
+    @include transition($transition-focus); // Boosted mod
+
     @include focus() {
       outline-offset: .5rem;
     }
@@ -104,7 +106,7 @@
         &.minimized {
           .mega-menu .nav-link {
             padding-right: 0;
-            outline-offset: -1px;
+            outline-offset: -#{$border-width};
 
             &[data-toggle="collapse"]::before {
               margin-top: .3125rem;
@@ -222,7 +224,7 @@
           > .container > .navbar-nav .navbar-nav .nav-link {
             padding: 0;
             line-height: 1.25rem;
-            outline-offset: 1px;
+            outline-offset: $border-width;
           }
 
           > .container > .navbar-nav .nav-item:first-child,

scss/_o-skiplinks.scss

@@ -34,7 +34,7 @@
 .skiplinks .skiplinks-section a:focus {
   color: #f16e00;
   background-color: #fff;
-  outline: 0 none;
+  outline: 0;
 }
 
 .skiplinks a,

scss/_o-switches.scss

@@ -72,7 +72,7 @@
 .o-switch .checkbox {
   @include focus() {
     + .toggle::before {
-      outline: 1px dotted #fff;
+      outline: $border-width solid $white;
     }
   }
 
@@ -126,14 +126,15 @@
 .o-switch.btn-group-toggle {
   display: inline-flex;
   justify-content: flex-start;
-  border: 2px solid #ccc;
+  border: $border-width solid $gray-500;
 
   .btn {
     min-width: 2.5rem;
     padding-right: 0;
     padding-left: 0;
     margin: -2px 0;
-    border: 2px solid transparent;
+    border: $border-width solid transparent;
+    @include transition($transition-focus); // Boosted mod
 
     &:first-child {
       margin-left: -2px;
@@ -144,14 +145,14 @@
     }
 
     &.active {
-      color: #fff;
-      background-color: #000;
-      border-color: #000;
+      color: $white;
+      background-color: $black;
+      border-color: $black;
     }
 
     &.focus {
-      outline: 1px dotted #fff;
-      outline-offset: -2px;
+      outline: $border-width solid $white;
+      outline-offset: -#{$border-width};
     }
 
     &:active {
@@ -165,9 +166,9 @@
       }
 
       &.active {
-        color: #fff;
-        background-color: #000;
-        border-color: #000;
+        color: $white;
+        background-color: $black;
+        border-color: $black;
       }
     }
   }
@@ -176,8 +177,8 @@
     border-color: transparent;
 
     .btn {
-      border-top: 2px solid transparent;
-      border-bottom: 2px solid transparent;
+      border-top: $border-width solid transparent;
+      border-bottom: $border-width solid transparent;
 
       &:first-child {
         border-left-color: transparent;

scss/_orange-css.scss

@@ -2,18 +2,20 @@
 //
 
 // back from accessibility plugin css
-div.active:focus {
-  outline: dotted 1px;
-}
-
-a:focus {
-  color: theme-color("primary");
-  outline: dotted 1px;
+a {
+  outline-offset: $border-width * 2;
+  @include transition($transition-focus);
+  &:focus {
+    color: theme-color("primary");
+    outline: $border-width solid;
+    outline-offset: $border-width;
+  }
 }
 
 .close:hover,
-.close:focus {
-  outline: dotted 1px;
+.close:focus,
+div.active:focus {
+  outline: $border-width solid;
 }
 
 //