Skip to content
Snippets Groups Projects
Commit 26a2998e authored by Martin Leblanc's avatar Martin Leblanc Committed by Eric Bremner
Browse files

pushing card footer outside of body to allow better flex of content

parent 689e929d
No related branches found
No related tags found
2 merge requests!63Tag 3.0.1,!62Feature/istwcms 4619 m26lebla theme blog news events listing pages
This commit is part of merge request !62. Comments created here will be created in the context of that merge request.
Hide whitespace changes
Inline Side-by-side
css/styles.css
+ 16
− 12
View file @ 26a2998e
...@@ -3503,7 +3503,6 @@ button { ...@@ -3503,7 +3503,6 @@ button {
-ms-flex-direction: column; -ms-flex-direction: column;
-webkit-flex-direction: column; -webkit-flex-direction: column;
flex-direction: column; flex-direction: column;
flex-grow: 1;
width: 100%; } width: 100%; }
.views-row .card { .views-row .card {
height: 100%; } height: 100%; }
...@@ -3560,15 +3559,12 @@ button { ...@@ -3560,15 +3559,12 @@ button {
flex-flow: row wrap; flex-flow: row wrap;
gap: 1.25rem; gap: 1.25rem;
gap: inherit; gap: inherit;
height: 100%;
padding: 1rem; padding: 1rem;
width: 100%; } width: 100%; }
.card__body p:last-child { .card__body p:last-child {
margin-bottom: 0; } margin-bottom: 0; }
.card__content { .card__content {
display: flex;
flex-direction: column;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
width: 100%; } width: 100%; }
...@@ -3577,25 +3573,33 @@ button { ...@@ -3577,25 +3573,33 @@ button {
order: -1; order: -1;
width: 100%; } width: 100%; }
.card__media a { .card__media a {
display: block; display: inline-block;
height: 100%; height: 100%;
width: 100%; } width: 100%; }
.card__media a:focus img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
transition: -webkit-filter 150ms cubic-bezier(0.4, 0, 1, 1);
transition: filter 150ms cubic-bezier(0.4, 0, 1, 1);
transition: filter 150ms cubic-bezier(0.4, 0, 1, 1), -webkit-filter 150ms cubic-bezier(0.4, 0, 1, 1); }
.card__media img { .card__media img {
-webkit-filter: grayscale(0); -webkit-filter: grayscale(0);
filter: grayscale(0); filter: grayscale(0);
transition: opacity 150ms cubic-bezier(0.4, 0, 1, 1), -webkit-filter; transition: -webkit-filter 150ms cubic-bezier(0.4, 0, 1, 1);
transition: filter, opacity 150ms cubic-bezier(0.4, 0, 1, 1); transition: filter 150ms cubic-bezier(0.4, 0, 1, 1);
transition: filter, opacity 150ms cubic-bezier(0.4, 0, 1, 1), -webkit-filter; transition: filter 150ms cubic-bezier(0.4, 0, 1, 1), -webkit-filter 150ms cubic-bezier(0.4, 0, 1, 1);
width: 100%; } width: 100%; }
.card__media img:hover { .card__media img:hover {
-webkit-filter: grayscale(100%); -webkit-filter: grayscale(100%);
filter: grayscale(100%); filter: grayscale(100%);
transition: opacity 150ms cubic-bezier(0.4, 0, 1, 1), -webkit-filter; transition: -webkit-filter 150ms cubic-bezier(0.4, 0, 1, 1);
transition: filter, opacity 150ms cubic-bezier(0.4, 0, 1, 1); transition: filter 150ms cubic-bezier(0.4, 0, 1, 1);
transition: filter, opacity 150ms cubic-bezier(0.4, 0, 1, 1), -webkit-filter; } transition: filter 150ms cubic-bezier(0.4, 0, 1, 1), -webkit-filter 150ms cubic-bezier(0.4, 0, 1, 1); }
.card__footer { .card__footer {
margin-top: auto; } margin-top: auto;
padding: 1.5rem;
width: 100%; }
.card__footer > div { .card__footer > div {
margin-bottom: 1rem; } margin-bottom: 1rem; }
.card__footer > div:last-child { .card__footer > div:last-child {
......
source/_patterns/04-components/card/_card.scss
+ 15
− 10
View file @ 26a2998e
...@@ -9,9 +9,9 @@ $card-padding: rem(gesso-spacing(sm)) !default; ...@@ -9,9 +9,9 @@ $card-padding: rem(gesso-spacing(sm)) !default;
.card { .card {
@include uw-flex-grid(card); @include uw-flex-grid(card);
flex-grow: 1;
width: 100%;
//background:$test-color-1; //background:$test-color-1;
width: 100%;
.views-row &{ .views-row &{
height:100%; height:100%;
} }
...@@ -68,7 +68,6 @@ $card-padding: rem(gesso-spacing(sm)) !default; ...@@ -68,7 +68,6 @@ $card-padding: rem(gesso-spacing(sm)) !default;
@include uw-flex-grid(); @include uw-flex-grid();
//background:$test-color-10; //background:$test-color-10;
gap:inherit; gap:inherit;
height:100%;
padding: $card-padding; padding: $card-padding;
width: 100%; width: 100%;
p:last-child { p:last-child {
...@@ -77,8 +76,6 @@ $card-padding: rem(gesso-spacing(sm)) !default; ...@@ -77,8 +76,6 @@ $card-padding: rem(gesso-spacing(sm)) !default;
} }
.card__content { .card__content {
//background:$test-color-9; //background:$test-color-9;
display:flex;
flex-direction: column;
margin-bottom: rem(gesso-spacing(md)); margin-bottom: rem(gesso-spacing(md));
width: 100%; width: 100%;
} }
...@@ -86,24 +83,30 @@ $card-padding: rem(gesso-spacing(sm)) !default; ...@@ -86,24 +83,30 @@ $card-padding: rem(gesso-spacing(sm)) !default;
.card__media { .card__media {
//background:$test-color-4; //background:$test-color-4;
margin-bottom: rem(gesso-spacing(md)); margin-bottom: rem(gesso-spacing(md));
order: -1; order:-1;
width: 100%; width: 100%;
a { a {
display: block; display:inline-block;
height: 100%; height: 100%;
width: 100%; width: 100%;
&:focus{
img{
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
transition:filter gesso-duration(shortest) gesso-easing(ease-in);
}
}
} }
img { img {
-webkit-filter: grayscale(0); -webkit-filter: grayscale(0);
filter: grayscale(0); filter: grayscale(0);
transition:filter ,opacity gesso-duration(shortest) gesso-easing(ease-in); transition:filter gesso-duration(shortest) gesso-easing(ease-in);
width: 100%; width: 100%;
&:hover{ &:hover{
-webkit-filter: grayscale(100%); -webkit-filter: grayscale(100%);
filter: grayscale(100%); filter: grayscale(100%);
transition:filter ,opacity gesso-duration(shortest) gesso-easing(ease-in); transition:filter gesso-duration(shortest) gesso-easing(ease-in);
} }
} }
} }
...@@ -111,6 +114,8 @@ $card-padding: rem(gesso-spacing(sm)) !default; ...@@ -111,6 +114,8 @@ $card-padding: rem(gesso-spacing(sm)) !default;
.card__footer { .card__footer {
//background:$test-color-12; //background:$test-color-12;
margin-top: auto; margin-top: auto;
padding: rem(gesso-spacing(md));
width: 100%;
> div { > div {
margin-bottom: rem(gesso-spacing(sm)); margin-bottom: rem(gesso-spacing(sm));
&:last-child { &:last-child {
......
source/_patterns/04-components/card/card.twig
+ 28
− 33
View file @ 26a2998e
...@@ -2,7 +2,6 @@ ...@@ -2,7 +2,6 @@
<article class="card {{ modifier_classes }} {% if show_hover %} card--show-hover {% endif %} {{ type }}" > <article class="card {{ modifier_classes }} {% if show_hover %} card--show-hover {% endif %} {{ type }}" >
<div class="card__body"> <div class="card__body">
{% if title or author or date or sub_title %} {% if title or author or date or sub_title %}
<div class="card__header"> <div class="card__header">
{% if date %} {% if date %}
...@@ -22,9 +21,7 @@ ...@@ -22,9 +21,7 @@
{% endif %} {% endif %}
</div> </div>
{% endif %} {% endif %}
{% if title or sub_title %} {% if title or sub_title %}
{% if title %} {% if title %}
<h{{ header_level }} class="card__title"> <h{{ header_level }} class="card__title">
{% if url %} {% if url %}
...@@ -51,41 +48,40 @@ ...@@ -51,41 +48,40 @@
{% endif %} {% endif %}
</div> </div>
{% endif %} {% endif %}
</div> </div>
{% endif %} {% endif %}
<div class="card__content"> {% if sources or img_element %}
{% if sources or img_element %} <div class="card__media">
<div class="card__media"> {% if url %}
{% if url %} <a href="{{ url }}">
<a href="{{ url }}">
{% endif %} {% endif %}
{% include "@components/responsive-image/responsive-image.twig" with { {% include "@components/responsive-image/responsive-image.twig" with {
sources: sources, sources: sources,
img_element: img_element, img_element: img_element,
alt: alt alt: alt
}%} }%}
{% if url %} {% if url %}
</a> </a>
{% endif %} {% endif %}
</div>
{% endif %}
<div class="card__content">
{{ content }}
</div>
</div>
{% if footer or read_more or tags or social_media %}
<div class="card__footer">
{{ footer }}
{% if tags %}
<div class="card__tags">
{% for tag in tags %}
{% include "@components/tag-list/tag-list.twig" with {
items: tag
} %}
{% endfor %}
</div> </div>
{% endif %} {% endif %}
<div class="card_summary">
{{ content }}
</div>
</div>
{% if footer or read_more or tags or card_social_media %}
<div class="card__footer">
{{ footer }}
{% if tags %}
<div class="card__tags">
{% for tag in tags %}
{% include "@components/tag-list/tag-list.twig" with {
items: tag
} %}
{% endfor %}
</div>
{% endif %}
{% if read_more and url %} {% if read_more and url %}
<div class="card__readmore"> <div class="card__readmore">
{{ macros.readmore(url, title) }} {{ macros.readmore(url, title) }}
...@@ -96,7 +92,6 @@ ...@@ -96,7 +92,6 @@
{% include "@components/menu/menu--social/menu--social.twig" %} {% include "@components/menu/menu--social/menu--social.twig" %}
</div> </div>
{% endif %} {% endif %}
</div> </div>
{% endif %} {% endif %}
</div>
</article> </article>
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