From 64c3f951656f532f7d54271f6b76b1fc64693035 Mon Sep 17 00:00:00 2001
From: druid <druid@druids-MBP-2.lan>
Date: Sun, 21 Feb 2021 16:05:30 +0200
Subject: [PATCH] styles
---
src/components/hy-box/readme.md | 2 -
.../hy-general-list-item.scss | 54 +++++++++++++++++++
.../hy-general-list-item.tsx | 2 +-
.../hy-general-list/hy-general-list.tsx | 7 ++-
src/components/hy-general-list/readme.md | 2 -
5 files changed, 58 insertions(+), 9 deletions(-)
diff --git a/src/components/hy-box/readme.md b/src/components/hy-box/readme.md
index 3571b840..fcb67c48 100644
--- a/src/components/hy-box/readme.md
+++ b/src/components/hy-box/readme.md
@@ -30,7 +30,6 @@
- [hy-accordion-container](../accordion-container)
- [hy-adjacent-image-text](../adjacent-image-text)
- [hy-banner](../hy-banner)
-- [hy-general-list](../hy-general-list)
- [hy-heading](../heading)
- [hy-hero](../hy-hero)
- [hy-image](../image)
@@ -51,7 +50,6 @@ graph TD;
hy-accordion-container --> hy-box
hy-adjacent-image-text --> hy-box
hy-banner --> hy-box
- hy-general-list --> hy-box
hy-heading --> hy-box
hy-hero --> hy-box
hy-image --> hy-box
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 5d4e87f3..ba63dc04 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
@@ -1,3 +1,57 @@
:host {
display: block;
}
+
+.hy-general-list-item {
+ display: flex;
+ flex-direction: row;
+ font-family: var(--main-font-family);
+ position: relative;
+ margin-bottom: 1rem;
+
+ &:hover {
+ cursor: pointer;
+ }
+
+ &__image-container {
+ flex-basis: 33.3%;
+ position: relative;
+ }
+ &__text-container {
+ flex-basis: 66.6%;
+ padding-left: 2rem;
+ }
+
+ &--image {
+ background-color: #ececec;
+ border: 1px solid red;
+ width: 100%;
+ height: 100%;
+ }
+
+ &--label {
+ @include font-size(12px, 14px);
+ @include font-weight($bold);
+ background-color: var(--grayscale-black);
+ color: #ffffff;
+ letter-spacing: -0.1px;
+ padding: 5px 8px;
+ position: absolute;
+ top: 16px;
+ left: -8px;
+ text-transform: uppercase;
+ }
+
+ &--title {
+ @include font-size(20px, 24px);
+ @include font-weight($bold);
+ color: var(--brand-main-nearly-black);
+ letter-spacing: -0.5px;
+ }
+
+ &--description {
+ @include font-size(14px, 18px);
+ color: var(--grayscale-dark);
+ letter-spacing: -0.08px;
+ }
+}
diff --git a/src/components/hy-general-list-item/hy-general-list-item.tsx b/src/components/hy-general-list-item/hy-general-list-item.tsx
index ce5ad711..fcf24a1a 100644
--- a/src/components/hy-general-list-item/hy-general-list-item.tsx
+++ b/src/components/hy-general-list-item/hy-general-list-item.tsx
@@ -33,7 +33,7 @@ export class HyGeneralListItem {
return [
<div class={classAttributes} tabindex="0">
<div class={imageClassAttributes} style={aspectRatio}>
- <img alt={this.imageAlt} class="hy-image__image" src={this.imageUrl} />
+ <img alt={this.imageAlt} class="hy-general-list-item--image" src={this.imageUrl} />
<div class="hy-general-list-item--label">{this.label}</div>
</div>
<div class={contentClassAttributes}>
diff --git a/src/components/hy-general-list/hy-general-list.tsx b/src/components/hy-general-list/hy-general-list.tsx
index ebff727b..011ff501 100644
--- a/src/components/hy-general-list/hy-general-list.tsx
+++ b/src/components/hy-general-list/hy-general-list.tsx
@@ -43,7 +43,7 @@ export class HyGeneralList {
return [
<div class={classAttributes}>
{this._dataItems.map((x) => {
- return (
+ return [
<hy-general-list-item
id={x.id}
item-title={x.title}
@@ -53,11 +53,10 @@ export class HyGeneralList {
type={x.type}
data-location={x.url}
onClick={() => this.handleCardClick(x.id)}
- ></hy-general-list-item>
- );
+ ></hy-general-list-item>,
+ ];
})}
</div>,
- <hy-box mb="1.75, 1.75, 2, 2.5" />,
];
}
}
diff --git a/src/components/hy-general-list/readme.md b/src/components/hy-general-list/readme.md
index 2127658d..c36a4fa0 100644
--- a/src/components/hy-general-list/readme.md
+++ b/src/components/hy-general-list/readme.md
@@ -13,14 +13,12 @@
### Depends on
- [hy-general-list-item](../hy-general-list-item)
-- [hy-box](../hy-box)
### Graph
```mermaid
graph TD;
hy-general-list --> hy-general-list-item
- hy-general-list --> hy-box
style hy-general-list fill:#f9f,stroke:#333,stroke-width:4px
```
--
GitLab