studio-variable/index-main
3
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

hover card with bg
All checks were successful
Deploy / Deploy to Production (push) Successful in 12s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-01-28 01:15:51 +01:00
parent a0f0110fa6
commit dbf9097701
7 changed files with 110 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

27
assets/css/base/_body.scss
View file

@ -76,6 +76,31 @@ body, #site-header, #site-footer{
overflow: hidden;
}
@mixin hover-card-line(){
border-bottom: var(--border-light);
&:first-of-type{
border-top: var(--border-light);
}
position: relative;
&::before{
content: '';
width: 100%;
border-top: 1px solid transparent;
position: absolute;
top: -1px;
left: 0;
}
&:hover{
background-color: var(--grey-950);
border-color: var(--color-txt);
&::before{
border-color: var(--color-txt);
}
}
}
body.menu-open,
body.is-hidden{
@ -85,3 +110,5 @@ body.is-hidden{
opacity: 0.1;
}
}

6
assets/css/components/_card-article-small.scss
View file

@ -3,6 +3,7 @@
.card--article-small{
@include grid-content();
margin-bottom: calc(var(--spacing)*0.5);
padding-bottom: calc(var(--spacing)*0.5);
@ -45,11 +46,10 @@
max-width: 32ch;
}
&:hover{
background-color: var(--grey-950);
}
@include btn--go-to();
@include hover-card-line();
@media #{$medium}{

21
assets/css/components/_card-impact.scss
View file

@ -1,12 +1,14 @@
.card--impact{
@include grid-content();
// grid-row-gap: 0;
padding: calc(var(--spacing)*0.5) 0;
border-bottom: var(--border-light);
&:first-of-type{
border-top: var(--border-light);
}
&.has-link{
@include hover-card-line();
}
padding: calc(var(--spacing)*0.5) 0;
container-type: inline-size;
container-name: impact;
@ -75,9 +77,7 @@
}
&.has-link:hover{
background-color: var(--grey-950);
}
@ -127,12 +127,3 @@
}
[data-template="impacts"]{
.card--impact:not([data-impact-type="media"]):hover{
background-color: var(--grey-950);
}
}

54
assets/css/style.css
View file

@ -1251,6 +1251,8 @@ button.sort[data-sort-type=up] .arrow {
padding-bottom: calc(var(--spacing) * 0.5);
border-bottom: var(--border-light);
position: relative;
border-bottom: var(--border-light);
position: relative;
}
.card--article-small:first-of-type {
padding-top: calc(var(--spacing) * 0.5);
@ -1296,9 +1298,6 @@ button.sort[data-sort-type=up] .arrow {
z-index: 1000;
max-width: 32ch;
}
.card--article-small:hover {
background-color: var(--grey-950);
}
.card--article-small .btn--go-to {
position: absolute;
right: var(--padding-inner);
@ -1328,6 +1327,24 @@ button.sort[data-sort-type=up] .arrow {
.card--article-small:hover .btn--go-to {
animation: wiggle-left 0.8s ease-in-out;
}
.card--article-small:first-of-type {
border-top: var(--border-light);
}
.card--article-small::before {
content: "";
width: 100%;
border-top: 1px solid transparent;
position: absolute;
top: -1px;
left: 0;
}
.card--article-small:hover {
background-color: var(--grey-950);
border-color: var(--color-txt);
}
.card--article-small:hover::before {
border-color: var(--color-txt);
}
@media screen and (max-width: 1080px) {
.card--article-small .title {
font-size: var(--fs-normal);
@ -1357,8 +1374,8 @@ button.sort[data-sort-type=up] .arrow {
grid-gap: var(--padding-inner);
grid-template-columns: 2fr 3fr;
position: relative;
padding: calc(var(--spacing) * 0.5) 0;
border-bottom: var(--border-light);
padding: calc(var(--spacing) * 0.5) 0;
container-type: inline-size;
container-name: impact;
position: relative;
@ -1366,6 +1383,28 @@ button.sort[data-sort-type=up] .arrow {
.card--impact:first-of-type {
border-top: var(--border-light);
}
.card--impact.has-link {
border-bottom: var(--border-light);
position: relative;
}
.card--impact.has-link:first-of-type {
border-top: var(--border-light);
}
.card--impact.has-link::before {
content: "";
width: 100%;
border-top: 1px solid transparent;
position: absolute;
top: -1px;
left: 0;
}
.card--impact.has-link:hover {
background-color: var(--grey-950);
border-color: var(--color-txt);
}
.card--impact.has-link:hover::before {
border-color: var(--color-txt);
}
.card--impact .btn--go-to {
position: absolute;
right: var(--padding-inner);
@ -1441,9 +1480,6 @@ button.sort[data-sort-type=up] .arrow {
.card--impact .investigations li:hover .icon svg {
fill: var(--color-txt);
}
.card--impact.has-link:hover {
background-color: var(--grey-950);
}
.card--impact .open-graph__details {
grid-column: 2;
}
@ -1512,10 +1548,6 @@ button.sort[data-sort-type=up] .arrow {
font-size: 14px !important;
}
}
[data-template=impacts] .card--impact:not([data-impact-type=media]):hover {
background-color: var(--grey-950);
}
.card--folder {
position: relative;
max-width: var(--max-w-cards);

2
assets/css/style.css.map
View file

File diff suppressed because one or more lines are too long