darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-05-05 16:38:59 -04:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3700 from alphagov/fix-template-list-item-focus-style

Browse Source 
Fix template list item focus style
This commit is contained in:
Tom Byers
2020-10-30 15:58:35 +00:00
committed by GitHub
parent c620e4425c cad8953e25
commit 36708ccad0
5 changed files with 128 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
app/assets/stylesheets/components/message.scss
View File

@@ -28,45 +28,28 @@ $govuk-checkboxes-size: 40px;
$govuk-checkboxes-label-padding-left-right: govuk-spacing(3);
$message-type-bottom-spacing: govuk-spacing(4);
.message {
&-name {
margin: 0;
a {
margin-bottom: -1 * govuk-spacing(6);
padding-bottom: govuk-spacing(6);
&:hover .message-name-separator:before {
border-color: $link-hover-colour;
}
.message-name-separator {
margin-right: -2px;
margin-left: -2px;
&:before {
border-color: $link-colour;
}
}
}
&-separator {
@include separator;
}
a {
&:hover .message-name-separator:before {
border-color: $link-hover-colour;
}
&-type {
color: $govuk-secondary-text-colour;
margin: 0 0 $message-type-bottom-spacing 0;
padding-left: 0;
pointer-events: none;
.message-name-separator {
margin-right: -2px;
margin-left: -2px;
&:before {
border-color: $link-colour;
}
}
}
.message-name-separator {
@include separator;
}
.template-list {
&-item {
@@ -81,18 +64,20 @@ $message-type-bottom-spacing: govuk-spacing(4);
&-without-ancestors {
.message-name {
a {
a {
display: block;
&:first-child {
display: block;
}
&:first-child {
display: block;
}
&.template-list-folder:first-of-type {
background-position: 0 2px;
padding-left: 0;
text-indent: 35px;
&.template-list-folder:first-child {
background-position: 0 2px;
padding-left: 0;
@include govuk-media-query($from: tablet) {
text-indent: 40px;
}
@@ -100,6 +85,43 @@ $message-type-bottom-spacing: govuk-spacing(4);
}
.template-list-template,
.template-list-folder {
position: relative; /* contain absolutely positioned ::before pseudo element*/
display: block; /* fill horizontal space to allow hint/meta below to float */
&::before {
content: '';
position: absolute;
left: 0px;
bottom: -100%; /* extend link by 100% of vertical size so it covers the hint/meta */
width: 100%;
height: 100%;
}
&:active,
&:focus {
&::before {
background-color: $govuk-focus-colour;
box-shadow: 0px -2px $govuk-focus-colour, 0px 4px $govuk-focus-text-colour;
}
& + .template-list-item-hint,
.message-type {
color: $govuk-text-colour;
}
}
& + .template-list-item-hint,
& + .message-type {
position: relative; /* needs to be non-static to have a z-index above the link :before element */
}
}
}
&-label {
@@ -124,18 +146,25 @@ $message-type-bottom-spacing: govuk-spacing(4);
&-folder,
&-template {
@include govuk-font($size: 24, $weight: bold, $line-height: 1.25);
@include govuk-font($size: 24, $weight: bold, $line-height: 1.5);
@include govuk-media-query($from: tablet) {
line-height: 1.25;
}
}
&-folder {
display: inline;
padding-left: 40px;
padding-left: 35px;
background-image: file-url('folder-blue-bold.svg');
background-repeat: no-repeat;
background-size: auto 20px;
background-position: 0px 4px;
@include govuk-media-query($from: tablet) {
padding-left: 40px;
}
&:hover {
background-image: file-url('folder-blue-bold-hover.svg');
}