darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-08-26 09:13:58 -04:00
Code Issues Packages Projects Releases Wiki Activity

Tweak spacing, size and hover state when focused

Browse Source 
The size and position of the 'X' has deviated a
bit from the design intentions of the original.

The original shared the x-height of the area text
and has positioned to be vertically and
horizontally centered.

These changes assume an x-height of 11px and use
flexbox to center the new 'X' horizontally and
vertically.

This also tweaks the visual state when focused and
then hovered so matches other buttons without
breaking the design.
This commit is contained in:
Tom Byers
2021-10-25 15:50:07 +01:00
parent c34fd4de6e
commit b1ab167e1d
2 changed files with 28 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/templates/views/broadcast/preview-areas.html
View File

@@ -32,11 +32,11 @@
<li class="area-list-item">
{{ area.name }}
<a class="area-list-item-remove govuk-button" data-module="govuk-button" role="button" href="{{ url_for('.remove_broadcast_area', service_id=current_service.id, broadcast_message_id=broadcast_message.id, area_slug=area.id) }}">
<svg id="area-list-item-remove__icon" width="12" height="12" viewbox="0 0 12 12" aria-labelledby="area__{{ loop.index }}" role="img" xmlns="http://www.w3.org/2000/svg"> <g>
<svg id="area-list-item-remove__icon" width="11" height="11" viewbox="0 0 10 10" aria-labelledby="area__{{ loop.index }}" role="img" xmlns="http://www.w3.org/2000/svg"> <g>
<title id="area__{{ loop.index }}">Remove {{ area.name }}</title>
<g transform="rotate(45),translate(1, -7.5)">
<line stroke-width="2" id="svg_1" y2="0" x2="7.5" y1="15" x1="7.5" stroke="currentColor" fill="none"/>
<line stroke-width="2" id="svg_3" y2="7.5" x2="0" y1="7.5" x1="15" stroke="currentColor" fill="none"/>
<g transform="rotate(45),translate(1, -6)">
<line stroke-width="1.75" id="svg_1" y2="0" x2="6" y1="12" x1="6" stroke="currentColor" fill="none"/>
<line stroke-width="1.75" id="svg_3" y2="6" x2="0" y1="6" x1="12" stroke="currentColor" fill="none"/>
</g>
</svg>
</a>