darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-08-01 12:19:47 -04:00
Code Issues Packages Projects Releases Wiki Activity

Tweak template-list items on mobile

Browse Source 
The font-size goes down to 16px on mobile. This
changes the line-height too which makes it too
small. This bumps it back up the be the same as on
desktop which makes space for the icon (if a
folder) and gives the link more space.

Also reduces the horizontal space between the icon
and its link by the same amount the font-size
changes.
This commit is contained in:
Tom Byers
2020-10-07 22:53:03 +01:00
parent 3263706fcd
commit 5058727587
1 changed files with 9 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -152,18 +152,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');
}