d3eeffded1
In some cases, like SDG icons and the proposals map, the image was bigger than the link containing it, resulting in a funny-looking outline on focus. For reasons I don't understand, using `&:active,&:focus:active` didn't compile to the CSS I was expecting, so I'm repeating the same code for these two separate cases.
59 lines
1.0 KiB
SCSS
59 lines
1.0 KiB
SCSS
@mixin sdg-goal-list($spacing: 1ch) {
|
|
$min-spacing: $sdg-icon-min-width / 10;
|
|
$max-spacing: #{"Max(#{$min-spacing}, #{$spacing})"};
|
|
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
list-style: none;
|
|
margin: -$spacing 0 $line-height / 3 -#{$spacing};
|
|
margin-left: calc(-1 * #{$max-spacing});
|
|
margin-top: calc(-1 * #{$max-spacing});
|
|
width: calc(100% + #{$spacing});
|
|
width: calc(100% + #{$max-spacing});
|
|
|
|
> *,
|
|
> .tabs-title {
|
|
margin-bottom: 0;
|
|
margin-left: $spacing;
|
|
margin-left: $max-spacing;
|
|
margin-right: 0;
|
|
margin-top: $spacing;
|
|
margin-top: $max-spacing;
|
|
}
|
|
|
|
a:hover .sdg-goal-icon {
|
|
filter: brightness(90%);
|
|
}
|
|
|
|
a {
|
|
@include focus-outline-on-img;
|
|
}
|
|
}
|
|
|
|
%sdg-goal-list {
|
|
@include sdg-goal-list;
|
|
}
|
|
|
|
%sdg-goal-list-expanded {
|
|
$spacing: 0.5%;
|
|
@include sdg-goal-list($spacing);
|
|
|
|
label,
|
|
li {
|
|
min-width: $sdg-icon-min-width;
|
|
width: calc(100% / 17 - #{$spacing});
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.sdg-goal-icon {
|
|
width: 100%;
|
|
}
|
|
|
|
a {
|
|
@include focus-outline-on-img;
|
|
}
|
|
}
|
|
}
|