mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-08-14 23:08:07 -04:00
1e82b6f8b3
This is the technique that GOV.UK Frontend uses to make clickable areas
of buttons bigger.
See: 47407edcb5/src/components/button/_button.scss (L89)
112 lines
1.7 KiB
SCSS
112 lines
1.7 KiB
SCSS
%tick-cross {
|
|
|
|
@include core-19;
|
|
display: inline-block;
|
|
background-size: 19px 19px;
|
|
background-repeat: no-repeat;
|
|
background-position: 0 6px;
|
|
padding: 6px 0 5px 25px;
|
|
|
|
@include ie-lte(8) {
|
|
background-position: 0 3px;
|
|
}
|
|
|
|
}
|
|
|
|
.tick-cross {
|
|
|
|
&-tick {
|
|
|
|
@extend %tick-cross;
|
|
background-image: file-url('tick.png');
|
|
|
|
@include ie-lte(8) {
|
|
background-image: file-url('tick-16px.png');
|
|
}
|
|
|
|
}
|
|
|
|
&-cross {
|
|
|
|
@extend %tick-cross;
|
|
color: $secondary-text-colour;
|
|
background-image: file-url('cross-grey.png');
|
|
box-shadow: inset 20px 0 0 0 rgba(255, 255, 255, 0.6);
|
|
|
|
@include ie-lte(8) {
|
|
background-image: file-url('cross-grey-16px.png');
|
|
}
|
|
|
|
}
|
|
|
|
&-list {
|
|
|
|
@extend %grid-row;
|
|
position: relative;
|
|
|
|
&-permissions {
|
|
|
|
@include grid-column(3/4);
|
|
margin-top: 5px;
|
|
|
|
li {
|
|
display: block;
|
|
margin-right: 0.5em;
|
|
}
|
|
|
|
}
|
|
|
|
&-edit-link {
|
|
|
|
text-align: right;
|
|
position: absolute;
|
|
top: -25px;
|
|
right: -135px;
|
|
|
|
a {
|
|
|
|
&: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;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
&-hint {
|
|
color: #6F777B;
|
|
padding-top: 5px;
|
|
}
|
|
|
|
}
|
|
|
|
}
|