Merge branch '361641-focus-more-form-fields' into 'master'

Add focus ring to more form elements

See merge request gitlab-org/gitlab!88028

app/assets/stylesheets/framework/dropdowns.scss

@@ -70,6 +70,15 @@
   }
 }
+.dropdown-toggle,
+.dropdown-menu-toggle,
+.dropdown-menu-close {
+  &:active,
+  &:focus {
+    @include gl-focus;
+  }
+}
+
 // Get search dropdown to line up with other nav dropdowns
 .search-input-container .dropdown-menu {
   margin-top: 11px;

app/assets/stylesheets/framework/forms.scss

@@ -8,6 +8,13 @@ input {
   background-color: $input-bg;
 }
+input,
+textarea {
+  &:focus {
+    @include gl-focus;
+  }
+}
+
 input[type='text'].danger {
   background: $input-danger-bg !important;
   border-color: $red-400;
@@ -108,6 +115,10 @@ label {
       width: $input-short-md-width;
     }
   }
+
+  &:focus {
+    @include gl-focus;
+  }
 }
 .select-control {

app/assets/stylesheets/pages/note_form.scss

@@ -56,8 +56,7 @@
     background-color: $white;
     &.is-focused {
-      border-color: $input-focus-border-color;
-      box-shadow: $input-focus-box-shadow;
+      @include gl-focus;
       .comment-toolbar,
       .nav-links {
@@ -75,6 +74,11 @@
         border-color: $green-500;
       }
     }
+
+    // Disable inner focus
+    textarea:focus {
+      box-shadow: none;
+    }
   }
 }

app/assets/stylesheets/startup/startup-dark.scss

@@ -634,6 +634,10 @@ body {
 .dropdown {
   position: relative;
 }
+.dropdown-menu-toggle:active {
+  box-shadow: 0 0 0 1px #333, 0 0 0 3px #1f75cb;
+  outline: none;
+}
 .search-input-container .dropdown-menu {
   margin-top: 11px;
 }

app/assets/stylesheets/startup/startup-general.scss

@@ -619,6 +619,10 @@ body {
 .dropdown {
   position: relative;
 }
+.dropdown-menu-toggle:active {
+  box-shadow: 0 0 0 1px #fff, 0 0 0 3px #428fdc;
+  outline: none;
+}
 .search-input-container .dropdown-menu {
   margin-top: 11px;
 }

ee/app/assets/stylesheets/startup/startup-dark.scss

@@ -634,6 +634,10 @@ body {
 .dropdown {
   position: relative;
 }
+.dropdown-menu-toggle:active {
+  box-shadow: 0 0 0 1px #333, 0 0 0 3px #1f75cb;
+  outline: none;
+}
 .search-input-container .dropdown-menu {
   margin-top: 11px;
 }

ee/app/assets/stylesheets/startup/startup-general.scss

@@ -619,6 +619,10 @@ body {
 .dropdown {
   position: relative;
 }
+.dropdown-menu-toggle:active {
+  box-shadow: 0 0 0 1px #fff, 0 0 0 3px #428fdc;
+  outline: none;
+}
 .search-input-container .dropdown-menu {
   margin-top: 11px;
 }