f285dfcbac
This way it's going to be easier to style the link on focus, since
styles like `box-shadow` weren't working properly when we had an inline
link with block elements inside, and adding the `display: inline-block`
element to the link didn't play well with the layout we were using for
the recommendations.
We're also fixing the focus outline on recommendations, which didn't
look properly because of the border added with:
```
.recommended-index {
// (...)
@include full-width-border(top, 1px solid #fafafa);
}
```
The border was on top of the outline, breaking it. Increasing the
`z-index` of the element containing the outline solves the issue.
In a similar way, we're making sure the button to hide recommendations
stays visible so it's easier to click it.
45 lines
861 B
SCSS
45 lines
861 B
SCSS
.public .groups-and-headings {
|
|
$spacing: $line-height / 2;
|
|
|
|
.headings-list {
|
|
@include flex-with-gap($spacing);
|
|
flex-wrap: wrap;
|
|
list-style: none;
|
|
}
|
|
|
|
.heading {
|
|
@include brand-color;
|
|
@include card;
|
|
border: 2px solid $border;
|
|
border-radius: rem-calc(6);
|
|
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
|
|
margin-bottom: $line-height / 2;
|
|
margin-top: $line-height / 4;
|
|
padding: $line-height / 2;
|
|
width: 100%;
|
|
|
|
@include breakpoint(medium) {
|
|
width: calc(100% / 3 - #{$spacing});
|
|
}
|
|
|
|
@include breakpoint(large) {
|
|
width: calc(100% / 6 - #{$spacing});
|
|
}
|
|
|
|
a {
|
|
font-weight: bold;
|
|
|
|
&:hover::before {
|
|
background: $light;
|
|
z-index: -1;
|
|
}
|
|
}
|
|
|
|
span {
|
|
display: block;
|
|
font-size: $small-font-size;
|
|
padding-top: $line-height / 2;
|
|
}
|
|
}
|
|
}
|