From bb5ba029c1efd1c714a924a11bb4baba39f1b906 Mon Sep 17 00:00:00 2001
From: druid <druid@druids-MBP-2.lan>
Date: Sun, 21 Feb 2021 16:28:11 +0200
Subject: [PATCH] list item styles
---
.../hy-general-list-item.scss | 35 ++++++++++++++++---
1 file changed, 31 insertions(+), 4 deletions(-)
diff --git a/src/components/hy-general-list-item/hy-general-list-item.scss b/src/components/hy-general-list-item/hy-general-list-item.scss
index e59521b5..6329a24b 100644
--- a/src/components/hy-general-list-item/hy-general-list-item.scss
+++ b/src/components/hy-general-list-item/hy-general-list-item.scss
@@ -4,22 +4,48 @@
.hy-general-list-item {
display: flex;
- flex-direction: row;
+ flex-direction: column;
font-family: var(--main-font-family);
position: relative;
margin-bottom: 1rem;
+ @include breakpoint($narrow) {
+ flex-direction: row;
+ }
+
&:hover {
cursor: pointer;
}
&__image-container {
- flex-basis: 33.3%;
+ display: flex;
+ flex: 1;
+ justify-content: stretch;
+ min-height: 2rem;
position: relative;
+
+ @include breakpoint($narrow) {
+ flex-basis: 33.3%;
+ }
+
+ img {
+ height: 100%;
+ object-fit: cover;
+ width: 100%;
+ }
}
+
&__text-container {
- flex-basis: 66.6%;
- padding: 1.375rem 2rem;
+ background: var(--grayscale-background-box);
+ display: flex;
+ flex: 1;
+ flex-direction: column;
+ padding: 1rem;
+
+ @include breakpoint($narrow) {
+ flex-basis: 66.6%;
+ padding: 1.375rem 2rem;
+ }
}
&--image {
@@ -47,6 +73,7 @@
@include font-weight($bold);
color: var(--brand-main-nearly-black);
letter-spacing: -0.5px;
+ padding-bottom: 10px;
}
&--description {
--
GitLab