Add backplate to table size toggles

janfaracik · Apr 20, 2022 · e9cb78a · e9cb78a
1 parent 8cbfe00
commit e9cb78a
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 7 deletions.
diff --git a/core/src/main/resources/lib/hudson/iconSize.jelly b/core/src/main/resources/lib/hudson/iconSize.jelly
@@ -28,16 +28,15 @@ THE SOFTWARE.
   <div class="jenkins-icon-size">
     <d:taglib uri="local">
       <d:tag name="iconSizeLink">
-        <st:nbsp/>
         <j:choose>
           <j:when test="${sz==iconSize}">
-            <li class="jenkins-icon-size__items-item">
+            <li class="jenkins-icon-size__items-item" tooltip="${title}">
               ${title.charAt(0)}<span class="jenkins-visually-hidden">${title.substring(1)}</span>
             </li>
           </j:when>
           <j:otherwise>
             <li>
-              <a class="jenkins-button jenkins-button--transparent" href="${rootURL}/iconSize?${sz}">
+              <a class="jenkins-button jenkins-button--transparent" href="${rootURL}/iconSize?${sz}" tooltip="${title}">
                 ${title.charAt(0)}<span class="jenkins-visually-hidden">${title.substring(1)}</span>
               </a>
             </li>

diff --git a/war/src/main/less/modules/icon-size.less b/war/src/main/less/modules/icon-size.less
@@ -7,19 +7,36 @@
   &__items {
     display: flex;
     align-items: center;
+    gap: 0.5rem;
 
     ol {
+      position: relative;
+      display: flex;
+      align-items: center;
       margin: 0;
       padding: 0;
       list-style-type: none;
-      display: flex;
-      align-items: center;
       gap: 0.25rem;
+
+      &::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        border-radius: 8px;
+        background: currentColor;
+        opacity: 0;
+        transition: var(--standard-transition);
+      }
+
+      &:hover {
+        &::before {
+          inset: -0.2rem;
+          opacity: 0.05;
+        }
+      }
     }
 
     li {
-      width: 32px;
-
       .jenkins-button {
         margin: 0!important;
         padding: 0!important;