Header styling

hotosm · Sep 10, 2024 · 6409a3c · 6409a3c
1 parent 860ac81
commit 6409a3c
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 5 deletions.
diff --git a/components/header/header.styles.ts b/components/header/header.styles.ts
@@ -66,6 +66,14 @@ export const styles = css`
 
   .header--tab::part(base) {
     font-size: var(--sl-font-size-medium);
+    font-weight: var(--sl-font-weight-normal);
+    color: var(--sl-color-neutral-950);
+    padding: var(--sl-spacing-small) var(--sl-spacing-small);
+  }
+
+  .header--tab-group::part(base) {
+    --track-color: transparent;
+    --indicator-color: var(--sl-color-neutral-950);
   }
 
   .header--nav {

diff --git a/components/header/header.ts b/components/header/header.ts
@@ -93,9 +93,9 @@ export class Header extends LitElement {
 
         ${/* Navigation bar for desktop, hide on mobile */ ""}
         <nav
-          className="header--nav"
+          class="header--nav"
         >
-          <sl-tab-group className="header--tab-group">
+          <sl-tab-group class="header--tab-group">
             ${this.tabs.map(
               (item, index) => html`
                 <sl-tab
@@ -116,10 +116,10 @@ export class Header extends LitElement {
         ${/* Stacked navigation drawer for mobile */ ""}
         ${/* NOTE this should probably be in a drawer instead */ ""}
         <nav
-          className="header--nav-mobile"
+          class="header--nav-mobile"
         ></nav>
 
-        <div id="right-section" className="header--right-section">
+        <div id="right-section" class="header--right-section">
           <sl-icon-button
             library="bundled"
             name="person-circle"

diff --git a/theme/hot.css b/theme/hot.css
@@ -11,4 +11,5 @@
   --hot-height-medium: 8rem;
   --hot-height-large: 20rem;
 
-}
+}
+