From 619520dd8ed1f0a1fac83801f0d20834bf04430f Mon Sep 17 00:00:00 2001
From: Martin Leblanc <m26lebla@uwaterloo.ca>
Date: Tue, 8 Jun 2021 18:38:01 +0000
Subject: [PATCH] adding the card items width of 100% for when content dosent
fill card, it will flow properly
---
css/styles.css | 23 ++++++++++++++-----
.../_patterns/04-components/card/_card.scss | 13 +++++++----
2 files changed, 26 insertions(+), 10 deletions(-)
diff --git a/css/styles.css b/css/styles.css
index 0bcd35e8..71ceed94 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -3503,7 +3503,8 @@ button {
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
- flex-grow: 1; }
+ flex-grow: 1;
+ width: 100%; }
.views-row .card {
height: 100%; }
@@ -3525,7 +3526,8 @@ button {
.card__title {
margin: 0.5rem 0;
- padding: 0; }
+ padding: 0;
+ width: 100%; }
.card__title a {
color: #000;
text-decoration: none; }
@@ -3559,20 +3561,22 @@ button {
gap: 1.25rem;
gap: inherit;
height: 100%;
- padding: 1rem; }
+ padding: 1rem;
+ width: 100%; }
.card__body p:last-child {
margin-bottom: 0; }
.card__content {
display: flex;
flex-direction: column;
- margin-bottom: 1.5rem; }
+ margin-bottom: 1.5rem;
+ width: 100%; }
.card__media {
margin-bottom: 1.5rem;
- order: -1; }
+ order: -1;
+ width: 100%; }
.card__media a {
- background: #000;
display: block;
height: 100%;
width: 100%; }
@@ -3598,9 +3602,16 @@ button {
.card__footer > div:last-child {
margin-bottom: 0; }
+.card__tags {
+ width: 100%; }
+
.card__readmore {
text-align: right; }
+.card__social {
+ max-width: 20rem;
+ width: 100%; }
+
.card--feature .card__body {
padding-top: 1rem; }
diff --git a/source/_patterns/04-components/card/_card.scss b/source/_patterns/04-components/card/_card.scss
index 13122af2..8cda240d 100644
--- a/source/_patterns/04-components/card/_card.scss
+++ b/source/_patterns/04-components/card/_card.scss
@@ -10,6 +10,7 @@ $card-padding: rem(gesso-spacing(sm)) !default;
.card {
@include uw-flex-grid(card);
flex-grow: 1;
+ width: 100%;
//background:$test-color-1;
.views-row &{
height:100%;
@@ -41,6 +42,7 @@ $card-padding: rem(gesso-spacing(sm)) !default;
.card__title {
margin:rem(gesso-spacing(xs)) 0;
padding:0;
+ width: 100%;
a {
@include link-reverse(
$card-link-color,
@@ -68,6 +70,7 @@ $card-padding: rem(gesso-spacing(sm)) !default;
gap:inherit;
height:100%;
padding: $card-padding;
+ width: 100%;
p:last-child {
margin-bottom: 0;
}
@@ -77,18 +80,19 @@ $card-padding: rem(gesso-spacing(sm)) !default;
display:flex;
flex-direction: column;
margin-bottom: rem(gesso-spacing(md));
+ width: 100%;
}
.card__media {
//background:$test-color-4;
margin-bottom: rem(gesso-spacing(md));
order: -1;
+ width: 100%;
a {
- background:#000;
+
display: block;
height: 100%;
width: 100%;
-
}
img {
-webkit-filter: grayscale(0);
@@ -116,13 +120,14 @@ $card-padding: rem(gesso-spacing(sm)) !default;
}
}
.card__tags{
-
+ width: 100%;
}
.card__readmore {
text-align: right;
}
.card__social{
-
+ max-width:20rem;
+ width: 100%;
}
--
GitLab