mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-08-15 15:28:50 -04:00
e56433e1f8
The ticks and crosses on the team page are served bigger than actual size (128×128px). They are then resized using CSS3 `background-size` to their displayed size (19px). The reason for doing this is so they display crisply on retina screens. IE8 doesn’t support `background-size` (see http://caniuse.com/#feat=background-img-opts). This means that the ticks and crosses get show at their original size (way too big). This commit adds resized versions of the ticks and crosses which are then served to these older browsers only.
65 lines
931 B
SCSS
65 lines
931 B
SCSS
%tick-cross {
|
|
|
|
@include core-16;
|
|
display: inline-block;
|
|
background-size: 19px 19px;
|
|
background-repeat: no-repeat;
|
|
background-position: 0 0;
|
|
padding: 1px 0 0 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');
|
|
|
|
@include ie-lte(8) {
|
|
background-image: file-url('cross-grey-16px.png');
|
|
}
|
|
|
|
}
|
|
|
|
&-list {
|
|
|
|
@extend %grid-row;
|
|
margin-top: 5px;
|
|
|
|
&-permissions {
|
|
|
|
@include grid-column(3/4);
|
|
|
|
li {
|
|
display: inline-block;
|
|
margin-right: 0.5em;
|
|
}
|
|
|
|
}
|
|
|
|
&-edit-link {
|
|
@include grid-column(1/4);
|
|
text-align: right;
|
|
}
|
|
|
|
}
|
|
|
|
}
|