refactor(button): consolidate button styles into Button.astro
Extends Button.astro with a center prop, native <button> element support (type, disabled, aria-describedby), harmonised padding (.65rem), and transition. Removes global .button, .button-small, .button-light, and .button-center rules from components.css, layout.css, and typography.css. Converts all inline class="button" usages across Header, HomeHero, HomeFinancialHelp, HomeServicesIntro, FormShell, TeamPage, CareersPage, and FaqPage to the <Button> component. Updates three scoped style selectors to :global() to reach the child component's elements.
This commit is contained in:
12 files changed
+56
-30
No files matched your search
@@ -1,4 +1,5 @@
|
||||
---
|
||||
import Button from './Button.astro';
|
||||
import LanguageSwitcher from './LanguageSwitcher.astro';
|
||||
import MainNav from './MainNav.astro';
|
||||
import MobileNav from './MobileNav.astro';
|
||||
@@ -21,7 +22,7 @@ const utility = lang === 'es'
|
||||
<MainNav lang={lang} />
|
||||
<MobileNav lang={lang} />
|
||||
<LanguageSwitcher />
|
||||
<a class="button button-small" href="/tour">Tour AIA</a>
|
||||
<Button href="/tour" size="small">Tour AIA</Button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -33,7 +34,7 @@ const utility = lang === 'es'
|
||||
.header-inner { align-items: center; display: flex; gap: 1.4rem; min-height: 110px; }
|
||||
.brand img { width: 150px; }
|
||||
@media (max-width: 950px) {
|
||||
.header-inner > .button { display: none; }
|
||||
.header-inner > :global(.content-button) { display: none; }
|
||||
}
|
||||
@media (max-width: 760px) {
|
||||
.utility-inner { justify-content: center; }
|
||||
|
||||
Reference in new issue
Block a user