Commit ac2e7f2f authored by Martin Leblanc's avatar Martin Leblanc
Browse files

Merging ISTWCMS-5267

parents 8208643b cd3d69be
......@@ -4,44 +4,60 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
.#{$faculty} {
// If the UW branding group
@if $faculty == org-default {
.card__banner--caption{
background-color:$uw-black;
@include small {
background-color: rgba(0,0,0,.8);
}
a {
.card__banner{
a {
.card__banner--title {
color: $uw-gold;
&:hover {
}
.card__banner--sub-title {
color: $uw-white !important;
}
&:hover,
&:focus {
.card__banner--title {
color: $uw-gold;
text-decoration:underline;
}
.card__banner--sub-title {
color: $uw-white !important;
text-decoration:underline;
}
//color: $uw-gold;
}
}
.card__banner--sub-title {
color: $uw-white;
}
.card__banner--title {
color: $uw-gold;
}
}
.card__banner--caption{
background-color:$uw-black;
}
}
@else {
.card__banner--caption{
background:gesso-brand($faculty, 'primary');
@include small {
background: rgba(gesso-brand($faculty, 'primary'), 0.8);
.card__banner{
a {
.card__banner--title {
color:gesso-brand($faculty, 'lvl1');
}
a {
color:gesso-brand($faculty, 'lvl1');
&:hover {
.card__banner--sub-title {
color:gesso-brand($faculty, 'lvl1');
}
&:hover,
&:focus {
.card__banner--title {
color:gesso-brand($faculty, 'lvl1');
text-decoration: underline;
}
.card__banner--sub-title {
color:gesso-brand($faculty, 'lvl1');
text-decoration: underline;
}
}
}
}
.card__banner--sub-title {
color:gesso-brand($faculty, 'lvl1');
}
.card__banner--title {
color:gesso-brand($faculty, 'lvl1');
.card__banner--caption{
background:gesso-brand($faculty, 'primary');
}
}
}
......@@ -52,6 +68,7 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
}
}
.card__banner--image {
background: $uw-black;
margin-bottom: 0;
padding: 0;
position: relative;
......@@ -63,22 +80,12 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
opacity: 1;
padding: 1rem 2rem;
position:relative;
@include small{
bottom:0;
position:absolute;
}
text-align: center;
width: 100%;
z-index: gesso-z-index(overlay);
strong{
font-weight:400;
}
a {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
.card__banner--title {
display: block;
......@@ -98,25 +105,39 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
line-height: 1.25;
width:auto;
}
.card__banner--media {
background:$uw-black;
margin-bottom: 0;
order: inherit;
.card__banner {
a {
background:$uw-black;
display: block;
opacity:1;
transition-delay: 0s;
transition-duration: .2s;
transition-property: color,background-color,border-color,opacity;
transition-timing-function: linear;
&:hover{
opacity:0.6;
background: $uw-black;
.card__banner--media {
margin-bottom: 0;
opacity:1;
order: inherit;
transition-delay: 0s;
transition-duration: .2s;
transition-property: color,background-color,border-color,opacity;
transition-timing-function: linear;
}
&:hover {
.card__banner--media {
opacity: 0.6;
transition-delay: 0s;
transition-duration: .2s;
transition-property: color, background-color, border-color, opacity;
transition-timing-function: linear;
}
}
}
.card__body {
padding:inherit;
}
.uw-picture__fallback{
background: $uw-black;
display:block;
}
}
// Fixes spacing below embeded images
.uw-picture img{
display:block;
}
<div class="card__banner--image {{ image.faculty }}">
{% if image.link %}
<div class="card__banner--media">
<a href="{{ image.link }}">
<a href="{{ image.link }}">
{% endif %}
<div class="card__banner--media">
{% include "@components/responsive-image/responsive-image.twig" with {
sources: image.sources,
img_element: listing_image.img_element,
alt: listing_image.alt
}%}
{% if image.link %}
</a>
</div>
{% endif %}
{% if image.big_text or image.small_text %}
<div class="card__banner--caption">
{% if image.big_text %}
<strong>
{% if image.link %}
<a href="{{ image.link }}">
{% endif %}
<span class="card__banner--title">
{{ image.big_text }}
</span>
{% if image.link %}
</a>
{% endif %}
{% endif %}
</strong>
{% if image.small_text %}
......@@ -37,5 +25,7 @@
{% endif %}
</div>
{% endif %}
{% if image.link %}
</a>
{% endif %}
</div>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment