Remove the white borders unless the button is active

fixes #2212

Author: carolyncole

app/assets/stylesheets/_dashboard.scss

@@ -429,14 +429,6 @@
       gap: 1px;
 
       .request-btn {
-        /* Outline properties */
-        outline-style: solid;
-        outline-color: black;
-        outline-width: 1px; /* Adjust outline thickness */
-
-        /* Space between button and outline */
-        outline-offset: 2px; /* Adjust the offset as needed */
-
         display: flex;
         padding: 0.5rem 1.25rem;
         align-items: flex-start;
@@ -451,17 +443,24 @@
         &:hover {
           background: $gray-60;
         }
+        &:active {
+          /* Outline properties */
+          outline-style: solid;
+          outline-color: black;
+          outline-width: 1px; /* Adjust outline thickness */
+          box-shadow: 0 0 0 0.2rem $white;
+
+          /* Space between button and outline */
+          outline-offset: 2px; /* Adjust the offset as needed */
+        }
+        &:focus {
+          border-width: 2px;
+          box-shadow: 0 0 0 0.2rem $bright-blue;
+          outline-color: $bright-blue;
+        }
       }
 
       .request-options {
-        /* Outline properties */
-        outline-style: solid;
-        outline-color: black;
-        outline-width: 1px; /* Adjust outline thickness */
-
-        /* Space between button and outline */
-        outline-offset: 2px; /* Adjust the offset as needed */
-
         display: flex;
         padding: 0.5rem 0.25rem;
         align-items: flex-start;
@@ -480,6 +479,16 @@
         &:hover {
           background: $gray-60;
         }
+        &:active {
+          /* Outline properties */
+          outline-style: solid;
+          outline-color: black;
+          outline-width: 1px; /* Adjust outline thickness */
+          box-shadow: 0 0 0 0.2rem $white;
+
+          /* Space between button and outline */
+          outline-offset: 2px; /* Adjust the offset as needed */
+        }
       }
 
       .request-dropdown {

app/assets/stylesheets/application.scss

@@ -141,16 +141,26 @@ h6 {
   align-items: center;
   gap: 0.25rem;
   border-radius: 0.25rem;
-}
 
-.pul-button:focus {
-  border-color: $princeton-orange !important;
-  border-width: 2px;
-  box-shadow: 0 0 0 0.2rem $bright-blue;
-}
+  &:focus {
+    border-width: 2px;
+    box-shadow: 0 0 0 0.2rem $bright-blue;
+  }
+  &:active {
+    border-color: $black;
+    /* Outline properties */
+    outline-style: solid;
+    outline-color: black;
+    outline-width: 1px; /* Adjust outline thickness */
+    box-shadow: 0 0 0 0.2rem $white;
+
+    /* Space between button and outline */
+    outline-offset: 2px; /* Adjust the offset as needed */
+  }
 
-.pul-button:hover {
-  text-decoration: underline !important;
+  &:hover {
+    text-decoration: underline !important;
+  }
 }
 
 .pul-button-primary {
@@ -159,44 +169,6 @@ h6 {
   text-decoration: none;
 }
 
-a.pul-button-primary {
-  /* Outline properties */
-  outline-style: solid;
-  outline-color: black;
-  outline-width: 1px; /* Adjust outline thickness */
-
-  /* Space between button and outline */
-  outline-offset: 2px; /* Adjust the offset as needed */
-}
-input[type="submit"]:enabled.pul-button-primary {
-  /* Outline properties */
-  outline-style: solid;
-  outline-color: black;
-  outline-width: 1px; /* Adjust outline thickness */
-
-  /* Space between button and outline */
-  outline-offset: 2px; /* Adjust the offset as needed */
-}
-
-input[type="submit"]:enabled.pul-button-secondary {
-  /* Outline properties */
-  outline-style: solid;
-  outline-color: black;
-  outline-width: 1px; /* Adjust outline thickness */
-
-  /* Space between button and outline */
-  outline-offset: 2px; /* Adjust the offset as needed */
-}
-input[type="button"]:enabled.pul-button-secondary {
-  /* Outline properties */
-  outline-style: solid;
-  outline-color: black;
-  outline-width: 1px; /* Adjust outline thickness */
-
-  /* Space between button and outline */
-  outline-offset: 2px; /* Adjust the offset as needed */
-}
-
 .pul-button-primary:hover {
   text-decoration-color: $white !important;
   color: $white;

app/assets/stylesheets/components/field_components.scss

@@ -35,10 +35,6 @@ input[type="text"]::placeholder {
   line-height: 1.5rem;
 }
 
-input[type="text"]:focus {
-  border-color: $princeton-orange !important;
-}
-
 .required-field {
   border: 1px solid $gray-20;
   background: $white;

app/views/new_project_wizard/_form_user_roles_input.html.erb

@@ -68,7 +68,7 @@
         </div>
       </div>
       <div class="button-frame">
-        <input type="button" popovertarget="user-role" popovertargetaction="hide" class="add-user-roles" value="Add Users"></input>
+        <input type="button" popovertarget="user-role" popovertargetaction="hide" class="pul-button add-user-roles" value="Add Users"></input>
       </div>
     </div>
   </div>