Skip to content

Commit

Permalink
Merge 263d71a into aaf665b
Browse files Browse the repository at this point in the history
  • Loading branch information
@AlexanderEerenberg
AlexanderEerenberg committed Oct 6, 2022
2 parents aaf665b + 263d71a commit 1ffaa23
Show file tree
Hide file tree
Showing 9 changed files with 68 additions and 68 deletions.
11 changes: 8 additions & 3 deletions __tests__/components/card/__snapshots__/HorizontalCard4.test.tsx.snap
View file
Expand Up @@ -52,16 +52,21 @@ https://images.example.com/image.png?auto=format&ixlib=react-9.5.2&w=8192 8192w"
<figcaption />
</figure>
<div
class="teaserText xs__pl+4 s__p+4 s__pt-0"
class="teaserText xs__pl+4 s__p+4"
>
<div
class="meta xs__m-0 xs__mb+2"
class="meta xs__m-0 xs__mb+2 body-text sans s"
>
<span
class="prefix xs__p+1 s__p+2"
class="prefix"
>
Ondernemen
</span>
<span
class="dot"
>
•
</span>
<time>
11:40
</time>
Expand Down
1 change: 0 additions & 1 deletion src/components/card/HorizontalCard1.module.scss
View file
Expand Up @@ -98,7 +98,6 @@
top: auto;
left: auto;
right: auto;
display: flex;
.update,
.prefix {
font-family: map-deep-get($typography, 'font-family', 'bold'),
Expand Down
1 change: 0 additions & 1 deletion src/components/card/HorizontalCard3.module.scss
View file
Expand Up @@ -26,7 +26,6 @@
position: relative;
flex: 1;
.meta {
display: flex;
position: inherit;
top: auto;
left: auto;
Expand Down
66 changes: 37 additions & 29 deletions src/components/card/HorizontalCard4.module.scss
View file
Expand Up @@ -11,9 +11,8 @@
background: #{map-deep-get($colors, 'colors', 'primary', 75)};
box-shadow: 0 1px 0.2px rgba(0, 0, 0, 0.1);
position: relative;

h1 {
color: #{map-deep-get($colors, 'colors', 'neutral', 90)};
color: #{map-deep-get($colors, 'colors', 'neutral', 100)};
}

a {
Expand Down Expand Up @@ -84,39 +83,48 @@
.teaserText {
position: relative;
flex: 1;
min-width: 0; // truncate label
.meta {
font-family: 'ProximaNovaBold', sans-serif;
display: flex;
justify-content: space-between;
font-size: 0.8125rem;
.prefix {
display: block; // truncate label
text-transform: uppercase;
white-space: nowrap; // truncate label
overflow: hidden; // truncate label
text-overflow: ellipsis; // truncate label
color: #{map-deep-get($colors, 'colors', 'primary', 75)};
background: #{map-deep-get($colors, 'colors', 'neutral', 90)};
letter-spacing: 1px;
}
time {
color: #{map-deep-get($colors, 'colors', 'neutral', 90)};
white-space: nowrap; // truncate label
margin-left: 0.5rem; // truncate label
}
@media screen and (min-width: 641px) {
font-size: 0.9375rem;
}
}

> a {
color: #191919;
color: var(--content-copy);
display: block;
overflow: visible;
}
}

.meta {
position: inherit;
top: auto;
left: auto;
right: auto;
.update,
.prefix {
font-family: map-deep-get($typography, 'font-family', 'bold'),
sans-serif;
}
.update {
padding: 1px 8px;
color: var(--card);
background-color: var(--primary);
line-height: 2em;
font-family: map-deep-get($typography, 'font-family', 'bold'),
sans-serif;
text-transform: uppercase;
}

.prefix {
color: #{map-deep-get($colors, 'colors', 'neutral', 90)};
}

.dot {
margin: 0 0.25rem;
color: #{map-deep-get($colors, 'colors', 'neutral', 100)};
}

time {
color: #{map-deep-get($colors, 'colors', 'neutral', 100)};
white-space: nowrap;
}
}

.empty.figure {
align-items: center;
}
Expand Down
17 changes: 12 additions & 5 deletions src/components/card/HorizontalCard4.tsx
View file
Expand Up @@ -47,11 +47,18 @@ function HorizontalCard4(props: Props) {
</div>
)}

<div className={`${styles.teaserText} xs__pl+4 s__p+4 s__pt-0`}>
<div className={`${styles.meta} xs__m-0 xs__mb+2`}>
<span className={`${styles.prefix} xs__p+1 s__p+2`}>
{props.label}
</span>
<div className={`${styles.teaserText} xs__pl+4 s__p+4`}>
<div
className={`${styles.meta} xs__m-0 xs__mb+2 body-text sans s`}
>
{props.label && (
<>
<span className={styles.prefix}>
{props.label}
</span>
<span className={styles.dot}>•</span>
</>
)}
<time>{props.time}</time>
</div>

Expand Down
17 changes: 4 additions & 13 deletions src/components/card/HybridCard4.module.scss
View file
Expand Up @@ -79,17 +79,9 @@
}

.prefix {
justify-content: space-between;
font-family: 'ProximaNovaBold', sans-serif;
line-height: 1.2em;
font-size: 0.8125rem;
text-transform: uppercase;
color: #{map-deep-get($colors, 'colors', 'primary', 75)};
background: #{map-deep-get($colors, 'colors', 'neutral', 90)};
letter-spacing: 1px;
@media screen and (min-width: 640px) {
font-size: 0.9375rem;
}
font-family: map-deep-get($typography, 'font-family', 'bold'),
sans-serif;
color: #{map-deep-get($colors, 'colors', 'neutral', 90)};
}

.teaserText {
Expand All @@ -103,8 +95,7 @@
}

h1 {
color: #{map-deep-get($colors, 'colors', 'neutral', 90)};
line-height: 120%;
color: #{map-deep-get($colors, 'colors', 'neutral', 100)};
}

&:focus:not(:active),
Expand Down
2 changes: 1 addition & 1 deletion src/components/card/HybridCard4.tsx
View file
Expand Up @@ -45,7 +45,7 @@ function HybridCard4(props: Props) {
<div className={`${styles.teaserText} xs__pl+4 s__p+4 m__p+4`}>
{props.label && (
<span
className={`${styles.prefix} xs__p+1 s__p+2 xs__mb+2`}
className={`${styles.prefix} xs__mb+2 body-text sans s`}
>
{props.label}
</span>
Expand Down
17 changes: 4 additions & 13 deletions src/components/card/VerticalCard6.module.scss
View file
Expand Up @@ -48,17 +48,9 @@
}

.prefix {
justify-content: space-between;
font-family: 'ProximaNovaBold', sans-serif;
line-height: 1.2em;
font-size: 0.8125rem;
text-transform: uppercase;
color: #{map-deep-get($colors, 'colors', 'primary', 75)};
background: #{map-deep-get($colors, 'colors', 'neutral', 90)};
letter-spacing: 1px;
@media screen and (min-width: 640px) {
font-size: 0.9375rem;
}
font-family: map-deep-get($typography, 'font-family', 'bold'),
sans-serif;
color: #{map-deep-get($colors, 'colors', 'neutral', 90)};
}

.teaserText {
Expand All @@ -71,8 +63,7 @@
}

h1 {
color: #{map-deep-get($colors, 'colors', 'neutral', 90)};
line-height: 120%;
color: #{map-deep-get($colors, 'colors', 'neutral', 100)};
}

&:focus:not(:active),
Expand Down
4 changes: 2 additions & 2 deletions src/components/card/VerticalCard6.tsx
View file
Expand Up @@ -44,11 +44,11 @@ function VerticalCard6(props: Props) {
)}

<div
className={`${styles.teaserText} xs__p+4 m__p-0 xs__p+2 m__p+4`}
className={`${styles.teaserText} xs__p+4 m__p-0 xs__p+2 m__p+4`}
>
{props.label && (
<div
className={`${styles.prefix} xs__p+1 s__p+2 xs__mb+2`}
className={`${styles.prefix} xs__mb+2 body-text sans s`}
>
{props.label}
</div>
Expand Down

0 comments on commit 1ffaa23

Please sign in to comment.