add focus indicator for copy to clipboard buttons

NatLibFi · Feb 1, 2024 · f5ee24c · f5ee24c
1 parent 864c4af
commit f5ee24c
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 10 deletions.
diff --git a/resource/css/skosmos.css b/resource/css/skosmos.css
@@ -694,23 +694,23 @@ body {
     display: inline;
   }
 
-  #copy-preflabel .fa-copy {
+  #copy-preflabel {
     color: var(--vocab-text);
     font-size: 30px;
     position: relative;
     bottom: 10px;
     left: 5px;
   }
 
-  #copy-uri .fa-copy {
+  #copy-uri {
     color: var(--vocab-text);
     position: relative;
-    bottom: 3px;
-    left: -0.6rem;
+    bottom: 4px;
   }
 
-  .copy-clipboard, .copy-clipboard:active, .copy-clipboard:focus, .copy-clipboard:active:focus {
-    border: none;
+  .copy-clipboard:focus {
+    border: 1px solid var(--vocab-text);
+    border-radius: 3px;
   }
 
   .property ul, .property li {

diff --git a/src/view/concept-card.inc b/src/view/concept-card.inc
@@ -30,8 +30,9 @@
       <div class="row" id="concept-heading">
         <div class="col-sm-4 px-0" id="concept-property-label">{{ "skos:prefLabel" | trans }}</div>
         <div class="col-sm-8" id="concept-label">
-          <h1 id="concept-preflabel" class="mb-0 user-select-all">{{ concept.label }}</h1>
-          <button class="btn btn-default copy-clipboard px-0" type="button" id="copy-preflabel"
+          <h1 id="concept-preflabel"
+              class="mb-0 user-select-all">{{ concept.label }}</h1><button
+                  class="btn btn-default copy-clipboard px-1" type="button" id="copy-preflabel"
                   data-bs-toggle="tooltip" data-bs-placement="button" title="{{ 'Copy to clipboard' | trans }}">
             <i class="fa-regular fa-copy"></i>
           </button>
@@ -88,8 +89,9 @@
       <div class="row property prop-uri">
         <div class="col-sm-4 px-0 property-label"><h2>URI</h2></div>
         <div class="col-sm-8">
-          <span id="concept-uri" class="user-select-all">{{ concept.uri }}</span>
-          <button class="btn btn-default copy-clipboard" type="button" id="copy-uri"
+          <span id="concept-uri"
+                class="user-select-all">{{ concept.uri }}</span><button
+                  class="btn btn-default copy-clipboard px-1" type="button" id="copy-uri"
                   data-bs-toggle="tooltip" data-bs-placement="button" title="{{ 'Copy to clipboard' | trans }}">
             <i class="fa-regular fa-copy"></i>
           </button>