darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-07-21 08:29:27 -04:00
Code Issues Packages Projects Releases Wiki Activity

Center-align pill text when there’s no big number

Browse Source 
When the text is left aligned it looks messy because the spacing is so
uneven and there are no big numbers to give it some rhythm.
This commit is contained in:
Chris Hill-Scott
2017-06-23 10:53:24 +01:00
parent f386b991cb
commit 867143e871
2 changed files with 7 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/assets/stylesheets/components/pill.scss
View File

@@ -58,6 +58,11 @@
}
}
&-centered-item {
text-align: center;
}
}
.pill-separate {

4
app/templates/components/pill.html
View File

@@ -10,7 +10,7 @@
{% for label, option, link, count in items %}
{% if current_value == option %}
<li aria-selected='true' role='tab'>
<div class='pill-selected-item' tabindex='0'>
<div class='pill-selected-item{% if not show_count %} pill-centered-item{% endif %}' tabindex='0'>
{% else %}
<li aria-selected='false' role='tab'>
<a href="{{ link }}">
@@ -18,7 +18,7 @@
{% if show_count %}
{{ big_number(count, **big_number_args) }}
{% endif %}
<div class="pill-label">{{ label }}</div>
<div class="pill-label{% if not show_count %} pill-centered-item{% endif %}">{{ label }}</div>
{% if current_value == option %}
</div>
{% else %}