diff --git a/src/card/card.css b/src/card/card.css index 83d1112..a2c8a7b 100644 --- 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 index b4a890a..bab6b08 100644 --- 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 index bccebf9..9d40e7d 100644 --- 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(`bl-tab[href="${id}"]`); + const tab = this.querySelector(`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 index 862f3a1..fd5e995 100644 --- 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); }