fix: tabs anchor, form height, card table border

balsigergil · Jan 17, 2025 · 4516786 · 4516786
1 parent 2fcc1db
commit 4516786
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 15 deletions.
diff --git a/src/card/card.css b/src/card/card.css
@@ -49,14 +49,14 @@
   padding-top: 0.5rem;
 }
 
-.card > .table {
+.card .table {
   margin-top: calc(var(--bl-card-padding) / 2);
 }
 
-.card > .table > tbody:not(:has(+ tfoot)) > tr:last-child > td {
+.card .table > tbody:not(:has(+ tfoot)) > tr:last-child > td {
   border-bottom-width: 0;
 }
 
-.card > .table > tfoot > tr:last-child > td {
+.card .table > tfoot > tr:last-child > td {
   border-bottom-width: 0;
 }
diff --git a/src/forms/forms.css b/src/forms/forms.css
@@ -1,6 +1,6 @@
 :root {
-  --bl-form-input-height: 2.5rem;
-  --bl-form-input-padding: 0.75rem;
+  --bl-form-input-height: 2.25rem;
+  --bl-form-input-padding: 0.625rem;
   --bl-form-border-color: var(--bl-clr-gray-300);
   --bl-form-border-radius: var(--bl-border-radius-md);
   --bl-form-primary-color: var(--bl-clr-primary-600);

diff --git a/src/tabs/Tabs.ts b/src/tabs/Tabs.ts
@@ -20,7 +20,7 @@ export class Tabs extends HTMLElement {
     // tab panels have been connected to the DOM.
     setTimeout(() => {
       this.init();
-    }, 10);
+    }, 1);
   }
 
   init() {
@@ -43,8 +43,7 @@ export class Tabs extends HTMLElement {
     if (useAnchor) {
       const hash = window.location.hash;
       if (hash) {
-        const id = hash.slice(1);
-        const tab = this.querySelector<Tab>(`bl-tab[href="${id}"]`);
+        const tab = this.querySelector<Tab>(`bl-tab[href="${hash}"]`);
         if (tab) {
           this.setSelected(Array.from(tabs).indexOf(tab), false);
         } else {

diff --git a/src/tabs/tabs.css b/src/tabs/tabs.css
@@ -1,7 +1,7 @@
 bl-tabs {
   --bl-tab-padding: 1rem;
-  --bl-tab-color: var(--bl-clr-gray-500);
-  --bl-tab-active-color: var(--bl-clr-gray-800);
+  --bl-tab-color: var(--bl-clr-gray-700);
+  --bl-tab-active-color: var(--bl-clr-primary-700);
   display: block;
 }
 
@@ -55,7 +55,7 @@ bl-tab {
   }
 
   &.active {
-    color: var(--bl-clr-text);
+    color: var(--bl-tab-active-color);
   }
 
   &.active::after {
@@ -69,7 +69,7 @@ bl-tab {
 
   &:focus-visible {
     outline: 2px solid var(--bl-clr-primary-600);
-    outline-offset: 3px;
+    outline-offset: -2px;
     border-radius: var(--bl-border-radius);
   }
 }
@@ -80,7 +80,7 @@ bl-tab-panel {
 
   &:focus-visible {
     outline: 2px solid var(--bl-clr-primary-600);
-    outline-offset: 1px;
+    outline-offset: -2px;
     border-radius: var(--bl-border-radius);
   }
 }
@@ -91,6 +91,6 @@ bl-tab-panel.show {
 
 .dark bl-tabs,
 [data-theme="dark"] bl-tabs {
-  --bl-tab-color: var(--bl-clr-gray-500);
-  --bl-tab-active-color: var(--bl-clr-gray-50);
+  --bl-tab-color: var(--bl-clr-gray-300);
+  --bl-tab-active-color: var(--bl-clr-primary-300);
 }