Skip to content

Unify button styles into two variants with a shared icon and state rule #183

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lukefretwell merged 1 commit into from
Oct 29, 2026
Merged

Unify button styles into two variants with a shared icon and state rule #183

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 19 additions & 21 deletions _includes/actions.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,24 +30,22 @@
#}
{% set actionsSocialSites = ["https://scangov.com", "https://scangov.org", "https://docs.scangov.org", "https://standards.scangov.org", "https://data.scangov.org"] %}
{% set actionsEmailSites = ["https://scangov.com", "https://scangov.org", "https://standards.scangov.org", "https://docs.scangov.org", "https://data.scangov.org"] %}
<ul class="actions list-group list-group-horizontal-sm gap-2 mt-3 mb-3 pb-3 border-bottom">
<li id="rescan-action" class="list-group-item d-none">
<a href="https://scangov.com" aria-label="Rescan" title="Rescan">
<i class="fa-solid fa-arrows-rotate"></i>
</a>
</li>
<div class="actions d-flex flex-wrap gap-2 mt-3 mb-3 pb-3 border-bottom">
<a href="https://scangov.com" id="rescan-action" class="btn btn-outline-primary btn-sm d-none" aria-label="Rescan" title="Rescan">
<i class="fa-solid fa-arrows-rotate" aria-hidden="true"></i>
</a>
{% if profile and not mapPage and not orgPage %}
<li class="list-group-item dropdown">
<a
href="#"
<div class="dropdown">
<button
type="button"
id="download-menu"
role="button"
class="btn btn-outline-primary btn-sm"
data-bs-toggle="dropdown"
aria-expanded="false"
aria-label="Download"
title="Download">
<i class="fa-solid fa-download"></i>
</a>
<i class="fa-solid fa-download" aria-hidden="true"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="download-menu">
<li class="small">
<a href="/profile/{{ domain.urlkey | slugify }}/report/" class="dropdown-item">
Expand All @@ -56,19 +54,19 @@
</a>
</li>
</ul>
</li>
</div>
{% endif %}
<li class="list-group-item dropdown">
<a
href="#"
<div class="dropdown">
<button
type="button"
id="share-menu"
role="button"
class="btn btn-outline-primary btn-sm"
data-bs-toggle="dropdown"
aria-expanded="false"
aria-label="Share"
title="Share">
<i class="fa-solid fa-share-from-square"></i>
</a>
<i class="fa-solid fa-share-from-square" aria-hidden="true"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="share-menu">
{% if profile and not mapPage and not orgPage %}
<li class="small">
Expand Down Expand Up @@ -143,8 +141,8 @@
</li>
{% endif %}
</ul>
</li>
</ul>
</div>
</div>
<div class="alert alert-success d-none mt-2" role="alert" id="copy-alert">
Link copied!
</div>
Expand Down
27 changes: 4 additions & 23 deletions _includes/cta.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,36 +23,17 @@
margin-top: 0;
margin-bottom: 0;
}

/* The crown has its own icon color rules (gold in dark mode, body color in
light mode); inside the primary button it should match the button text,
like the rocket in the hero */
.cta-band .btn.btn-primary svg.fa-crown,
.cta-band .btn.btn-primary i.fa-crown {
color: inherit !important;
fill: currentColor !important;
}

/* Some icons (the link icon, for one) keep a fixed color on hover in light
mode; inside the outline buttons they should follow the button text */
.cta-band .btn.btn-outline-primary:hover svg,
.cta-band .btn.btn-outline-primary:focus svg,
.cta-band .btn.btn-outline-primary:hover i,
.cta-band .btn.btn-outline-primary:focus i {
color: inherit !important;
fill: currentColor !important;
}
</style>
<div id="cta-band" class="cta-band border-top" role="region" aria-label="Get ScanGov, see the demo, and share this page">
<div class="container d-flex align-items-center justify-content-center gap-2">
<a href="https://scangov.com/plans/" class="btn btn-primary" aria-label="Plans">
<i class="fa-solid fa-crown" aria-hidden="true"></i><span class="d-none d-md-inline ms-2">Plans</span></a>
<i class="fa-solid fa-crown" aria-hidden="true"></i><span class="d-none d-md-inline">Plans</span></a>
<a href="https://scangov.com/demo/" class="btn btn-outline-primary" aria-label="Demo">
<i class="fa-solid fa-wand-magic-sparkles" aria-hidden="true"></i><span class="d-none d-md-inline ms-2">Demo</span></a>
<i class="fa-solid fa-wand-magic-sparkles" aria-hidden="true"></i><span class="d-none d-md-inline">Demo</span></a>
<button type="button" class="btn btn-outline-primary" id="cta-copy-link" aria-label="Copy link">
<i class="fa-solid fa-link" aria-hidden="true"></i><i class="fa-solid fa-check d-none" aria-hidden="true"></i><span class="d-none d-md-inline ms-2">Link</span></button>
<i class="fa-solid fa-link" aria-hidden="true"></i><i class="fa-solid fa-check d-none" aria-hidden="true"></i><span class="d-none d-md-inline">Link</span></button>
<button type="button" class="btn btn-outline-primary" id="cta-copy-text" aria-label="Copy text">
<i class="fa-solid fa-copy" aria-hidden="true"></i><i class="fa-solid fa-check d-none" aria-hidden="true"></i><span class="d-none d-md-inline ms-2">Text</span></button>
<i class="fa-solid fa-copy" aria-hidden="true"></i><i class="fa-solid fa-check d-none" aria-hidden="true"></i><span class="d-none d-md-inline">Text</span></button>
<span class="visually-hidden" role="status" aria-live="polite" id="cta-copy-status"></span>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion _includes/feedback.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<a
href="https://scangov.com/plans"
id="feedback-button"
class="feedback btn btn-sm"
class="feedback btn btn-outline-primary btn-sm"
aria-hidden="true"
tabindex="-1">
<i class="fa-solid fa-rocket"></i> Get ScanGov
Expand Down
Loading
Loading