refactor: improved navigation controls style

Kotlin · Dec 12, 2023 · 7fcfcff · 7fcfcff
1 parent 3d8be6c
commit 7fcfcff
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 54 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,49 @@ td:first-child {
     display: none;
 }
 
-/* --- Navigation THEME --- */
-.navigation-controls--search {
+.navigation-controls--button {
     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--button:hover {
+    background-color: var(--white-10);
 }
 
-.navigation-controls--theme:hover {
-    background: var(--white-10);
-}
-
-.navigation-controls--theme::before {
-    display: block;
-    content: url("../images/theme-toggle.svg");
+.navigation-controls--button_theme {
+    background-image: url("../images/theme-toggle.svg");
+    background-repeat: no-repeat;
 }
 
 @media (max-width: 759px) {
-    .navigation-controls--theme {
+    .navigation-controls--button_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);
+.navigation-controls--button_homepage {
+    background-image: url("../images/homepage.svg");
+    background-repeat: no-repeat;
 }
 
 @media (max-width: 759px) {
-    .navigation-controls--homepage {
+    .navigation-controls--button_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,10 +22,10 @@
     </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--button navigation-controls--button_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>
+        <button class="navigation-controls--button navigation-controls--button_theme" id="theme-toggle-button">switch theme</button>
+        <div class="navigation-controls--button navigation-controls--button_search" id="searchBar">search in API</div>
     </div>
 </nav>
 </#macro>