darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-05-26 08:09:51 -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

30
app/assets/stylesheets/components/area-list.scss
View File

@@ -7,25 +7,28 @@
display: inline-block;
border: 2px solid $black;
// Create space for the remove link on the right of the list item (including borders)
padding: (govuk-spacing(1) + 1px) (govuk-spacing(2) + 35px + (2 * 2px)) govuk-spacing(1) govuk-spacing(2);
padding: (govuk-spacing(1) + 1px) (govuk-spacing(2) + 37px) govuk-spacing(1) govuk-spacing(2);
margin: 0 govuk-spacing(1) govuk-spacing(2) 0;
position: relative;
&-remove {
display: block;
display: block; // fallback for browsers that don't support flexbox
display: flex;
// center SVG vertically and horizontally
align-items: center;
justify-content: center;
position: absolute;
top: -2px; // cover list-item border-top
right: -2px; // cover list-item border-right
bottom: -2px; // cover list-item border-bottom
width: 35px;
padding: (govuk-spacing(1) + 1px) 0 govuk-spacing(1);
width: 37px;
padding: 0;
border: 2px solid $govuk-blue;
border-left: none;
text-align: center;
text-decoration: none;
font-size: inherit; // counter govuk-button styles
line-height: inherit; // counter govuk-button styles
line-height: 36px; // match area-list-item for browsers that don't support flexbox
// set styles so they don't get overriden by govuk-button styles
&,
@@ -54,15 +57,22 @@
// set styles so they don't get overriden by govuk-button styles
&,
&:focus,
&:focus:not(:active):not(:hover) {
box-shadow: -2px 0 0 0 $black, inset 1px 0 0 0 rgba($white, 0.1);
}
// set styles so they don't get overriden by govuk-button styles
&:focus,
&:focus:not(:active):not(:hover) {
border-color: $black;
}
&:focus:hover {
background-color: $govuk-focus-colour;
color: $black;
}
// show outline to make focus visible when background colours are overridden
@media (-ms-high-contrast: active), (forced-colors: active) {
@@ -71,6 +81,14 @@
outline: 3px solid transparent;
}
// override hover styles when focused, to preserve dimensions and outline
&:focus:hover {
top: -2px;
right: -2px;
bottom: -2px;
width: 37px;
}
}
}

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>