Extract component to render an execution

Note that, in order to be consistent with the name of the component,
we're renaming the `budget-execution` class to
`budget-executions-investment`.
This commit is contained in:
Javi Martín
2024-03-10 21:57:11 +01:00
parent 764d22f57a
commit 75b03791b1
6 changed files with 78 additions and 71 deletions

View File

@@ -0,0 +1,54 @@
.budget-executions-investment {
@include card;
border: 1px solid $border;
overflow: hidden;
position: relative;
a {
color: inherit;
display: block;
img {
height: $line-height * 9;
max-width: none;
min-width: 100%;
transition-duration: 0.3s;
transition-property: transform;
}
&:hover {
text-decoration: none;
img {
transform: scale(1.05);
}
}
}
h5 {
font-size: $base-font-size;
margin-bottom: 0;
}
.budget-execution-info {
padding: calc(#{$line-height} / 2);
}
.author {
color: $text-medium;
font-size: $small-font-size;
}
.budget-execution-content {
min-height: $line-height * 3;
}
.price {
color: $budget;
font-size: rem-calc(24);
}
&:hover:not(:focus-within) {
box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.2);
}
}