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

Use pseudo elements not borders

Browse Source 
This is the technique that GOV.UK Frontend uses to make clickable areas
of buttons bigger.

See: 47407edcb5/src/components/button/_button.scss (L89)
This commit is contained in:
Chris Hill-Scott
2019-02-13 13:28:32 +00:00
parent cb866ecc7b
commit 1e82b6f8b3
2 changed files with 57 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
app/assets/stylesheets/components/table.scss
View File

@@ -219,14 +219,40 @@
a {
display: block;
border-top: 11px solid transparent;
border-bottom: 8px solid transparent;
margin: -11px 0 -8px 0;
position: relative;
&:before {
content: "";
display: block;
position: absolute;
top: -$gutter-half;
right: 0;
bottom: -$gutter-half + 4px;
left: -$gutter-half;
background: transparent;
}
&:hover {
color: $link-hover-colour;
}
&:active,
&:focus {
color: $black;
&:before {
border-color: $yellow;
border-style: solid;
border-width: 15px 3px 15px 15px;
right: -3px;
}
}
}
}

31
app/assets/stylesheets/components/tick-cross.scss
View File

@@ -64,14 +64,39 @@
right: -135px;
a {
border-top: 11px solid transparent;
border-bottom: 10px solid transparent;
border-left: 15px solid transparent;
&:before {
content: "";
display: block;
position: absolute;
top: -$gutter-half - 1;
right: 0;
bottom: -$gutter-half;
left: -$gutter-half;
background: transparent;
}
&:hover {
color: $link-hover-colour;
}
&:active,
&:focus {
color: $black;
&:before {
border-color: $yellow;
border-style: solid;
border-width: 15px 3px 15px 15px;
right: -3px;
}
}
}
}