Tint person pictures per styleguide but remove on hover

This commit is contained in:
benjamin melançon 2018-12-14 13:16:55 -05:00
parent eaad82c177
commit d418c47aa3
2 changed files with 30 additions and 2 deletions

View file

@ -42,6 +42,32 @@
.hero.is-blue {
color: $white;
background-color: $blue;
// This is the same as we do for all cards at sass/agaric/_component.card.scss
// but we're only doing this for people so far, who are hard-coded to blue.
& > .container > .hero-image > .hero-image-shadow {
position: relative;
}
& > .container > .hero-image > .hero-image-shadow:before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
box-shadow: inset 0 0 0 100vmax rgba($blue, .5);
-moz-transition: all .3s linear;
-webkit-transition: all .3s linear;
-ms-transition: all .3s linear;
-o-transition: all .3s linear;
transition: all .3s linear;
}
&:hover {
color: $white;
background-color: darken($blue, 5%);
& > .container > .hero-image > .hero-image-shadow:before {
box-shadow: none;
}
}
.hero.is-marine {

View file

@ -89,10 +89,12 @@
{% set classes = classes|merge(['is-blue']) %}
{% endif %}
{# Header hero region #}
<section{{ attributes.addClass(classes) }}>
<section{{ attributes.addClass(classes) }} data-headerbg="transparent">
<div class="container">
<div class="hero-image">
<div class="hero-image-shadow">
{{ content.field_image }}
</div>
<h1 class="title">{{ label }}</h1>
</div>
<div class="hero-body">