adds focus styles for inputs and navbar

bitzesty · Jul 18, 2023 · bd3c46d · bd3c46d
1 parent 28dce2d
commit bd3c46d
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 7 deletions.
diff --git a/app/assets/stylesheets/admin/base.scss b/app/assets/stylesheets/admin/base.scss
@@ -14,15 +14,26 @@ a {
   }
 }
 
-.btn, a {
-  &:focus {
+.btn, button, a, [role=menuitem] {
+  &:focus, &:focus-within {
     background-color: $govuk-highlight-yellow !important;
     border-color: $govuk-highlight-yellow;
     color: $black !important;
     outline: none !important;
   }
 }
 
+.search-submit, input[type=search],
+input[type=text], input[type=tel],
+input[type=email], input[type=password],
+input[type=checkbox], select {
+  &:focus {
+    outline: 3px solid #ffdd00;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 2px;
+  }
+}
+
 .btn-primary {
   &:focus {
     border-bottom-color: $black !important;
@@ -1451,6 +1462,10 @@ label.govuk-label.govuk-checkboxes__label.boolean.optional.govuk-label {
 
     &:focus {
       border-bottom: none !important;
+
+      small {
+        color: $black !important;
+      }
     }
 
     @include is-retina {

diff --git a/app/assets/stylesheets/admin/header-footer.scss b/app/assets/stylesheets/admin/header-footer.scss
@@ -254,9 +254,8 @@
 
   // moving down here seems to make it work
   .navbar-brand {
-    padding-top: 14px;
-    padding-bottom: 0;
-    text-align: left;
+    padding: 14px;
+    height: 100%;
     img {
       width: 28px;
       height: 33px;

diff --git a/app/assets/stylesheets/application-admin.scss b/app/assets/stylesheets/application-admin.scss
@@ -59,6 +59,5 @@ $todo-black: #333;
     &:focus {
       top: 20px;
       left: 20px;
-      color: white !important;
     }
 }
diff --git a/app/views/admin/form_answers/_section_case_summary.html.slim b/app/views/admin/form_answers/_section_case_summary.html.slim
@@ -1,7 +1,7 @@
 - if visible_case_summaries(current_subject, resource)
   - visible_case_summaries(current_subject, resource).each do |assessment_obj|
     - assessment = assessment_obj.assessment
-    .panel.panel-parent
+    .panel.panel-parent.panel-default
       .panel-heading id="case-summary-heading-#{assessment.position}"
         h3.panel-title
           a data-toggle="collapse" href="#section-case-summary-#{assessment.position}" aria-expanded="true" aria-controls="section-case-summary-#{assessment.position}"