darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-09-10 01:55:41 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fix indent for folder items without ancestors

Browse Source 
These make space for the folder icon using
padding-left when they have ancestors as they are
inline so it only effects the line the first link
is on. Without ancestors they are block-level so
padding-left pads the whole block.

We had a block of CSS that fixed this, by using
text-indent for those without ancestors but the
selector was broken by changes to the HTML (it was
no longer the :first-child).

This uses the :first-of-type pseudo-class instead
to ignore preceding elements of different types.

Also includes changes that move styles for links
out from under elements with a class of
.message-name, which was removed in the previous
commit.
This commit is contained in:
Tom Byers
2020-10-30 13:34:18 +00:00
parent 2d5a165a2d
commit cad8953e25
1 changed files with 27 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -28,34 +28,26 @@ $govuk-checkboxes-size: 40px;
$govuk-checkboxes-label-padding-left-right: govuk-spacing(3); $govuk-checkboxes-label-padding-left-right: govuk-spacing(3);
$message-type-bottom-spacing: govuk-spacing(4); $message-type-bottom-spacing: govuk-spacing(4);
.message { a {
&-name {
margin: 0;
a {
&: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;
}
&:hover .message-name-separator:before {
border-color: $link-hover-colour;
} }
.message-name-separator {
margin-right: -2px;
margin-left: -2px;
&:before {
border-color: $link-colour;
}
}
}
.message-name-separator {
@include separator;
} }
.template-list { .template-list {
@@ -72,18 +64,20 @@ $message-type-bottom-spacing: govuk-spacing(4);
&-without-ancestors { &-without-ancestors {
.message-name { a {
a { display: block;
&:first-child {
display: block; display: block;
}
&:first-child { &.template-list-folder:first-of-type {
display: block; background-position: 0 2px;
} padding-left: 0;
text-indent: 35px;
&.template-list-folder:first-child { @include govuk-media-query($from: tablet) {
background-position: 0 2px;
padding-left: 0;
text-indent: 40px; text-indent: 40px;
} }