refactor: improved navigation controls style (#3410)

(cherry picked from commit 32d9815)
Kotlin · Jan 15, 2024 · b532688 · b532688
1 parent 5324006
commit b532688
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 49 deletions.
diff --git a/dokka-subprojects/plugin-base-frontend/src/main/components/search/search.scss b/dokka-subprojects/plugin-base-frontend/src/main/components/search/search.scss
@@ -13,10 +13,6 @@ $secondary-font-color: hsla(0, 0%, 100%, 0.6);
   fill: #fff;
   fill: var(--dark-mode-and-search-icon-color);
 
-  &:focus {
-    outline: none;
-  }
-
   &:hover {
     background: var(--white-10);
   }

diff --git a/dokka-subprojects/plugin-base/src/main/resources/dokka/images/homepage.svg b/dokka-subprojects/plugin-base/src/main/resources/dokka/images/homepage.svg
diff --git a/dokka-subprojects/plugin-base/src/main/resources/dokka/styles/style.css b/dokka-subprojects/plugin-base/src/main/resources/dokka/styles/style.css
@@ -355,74 +355,50 @@ td:first-child {
     display: none;
 }
 
-/* --- Navigation THEME --- */
-.navigation-controls--search {
+.navigation-controls--btn {
     display: inline-flex;
-    font-size: 0;
-    line-height: 0;
-}
-
-.navigation-controls--theme {
-    display: block;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
     border-radius: 50%;
     background-color: inherit;
+    background-position: 50% 50%;
     padding: 0;
     border: none;
     cursor: pointer;
     font-size: 0;
     line-height: 0;
+    transition: background-color 200ms ease-in-out;
+    will-change: background-color;
 }
 
-.navigation-controls--theme::before {
-    height: 40px;
-    width: 40px;
-}
-
-.navigation-controls--theme:hover {
-    background: var(--white-10);
+.navigation-controls--btn:hover {
+    background-color: var(--white-10);
 }
 
-.navigation-controls--theme::before {
-    display: block;
-    content: url("../images/theme-toggle.svg");
+.navigation-controls--theme {
+    background-image: url("../images/theme-toggle.svg");
+    background-repeat: no-repeat;
 }
 
 @media (max-width: 759px) {
     .navigation-controls--theme {
         display: none;
     }
 }
-/* /--- Navigation THEME --- */
 
-/* --- Navigation HOMEPAGE --- */
 .navigation-controls--homepage {
-    height: 40px;
-    width: 40px;
-    display: block;
-    border-radius: 50%;
-    cursor: pointer;
-}
-
-.navigation-controls--homepage a::before {
-    height: 100%;
-    width: 20px;
-    margin-left: 10px;
-    display: block;
-    content: "";
-    background: url("../images/homepage.svg");
-    background-size: 100% 100%;
-}
-
-.navigation-controls--homepage:hover {
-    background: var(--white-10);
+    background-image: url("../images/homepage.svg");
+    background-repeat: no-repeat;
+    background-size:  24px 24px;
 }
 
 @media (max-width: 759px) {
     .navigation-controls--homepage {
         display: none;
     }
 }
-/* /--- Navigation HOMEPAGE --- */
 
 .navigation .platform-selector:not([data-active]) {
     color: #fff;

diff --git a/dokka-subprojects/plugin-base/src/main/resources/dokka/templates/includes/header.ftl b/dokka-subprojects/plugin-base/src/main/resources/dokka/templates/includes/header.ftl
@@ -22,7 +22,7 @@
     </div>
     <div class="navigation-controls">
         <#if homepageLink?has_content>
-            <div class="navigation-controls--btn navigation-controls--homepage" id="homepage-link" role="button"><a href="${homepageLink}"></a></div>
+            <a class="navigation-controls--btn navigation-controls--homepage" id="homepage-link" href="${homepageLink}"></a>
         </#if>
         <button class="navigation-controls--btn navigation-controls--theme" id="theme-toggle-button" type="button">switch theme</button>
         <div class="navigation-controls--btn navigation-controls--search" id="searchBar" role="button">search in API</div>