From 7ad5bbda7ffe98afe546cd8352d839ab30789cb3 Mon Sep 17 00:00:00 2001 From: gavin lazar suntop Date: Thu, 7 Feb 2019 11:11:00 -0500 Subject: [PATCH] =?UTF-8?q?Bug=201524632=20=E2=80=93=C2=A0Design=20refinem?= =?UTF-8?q?ents=20for=2066=20components=20(#4764)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../_DiscoveryStreamBase.scss | 2 +- .../CardGrid/_CardGrid.scss | 2 +- .../DSCard/_DSCard.scss | 11 +++---- .../DiscoveryStreamComponents/Hero/Hero.jsx | 2 +- .../DiscoveryStreamComponents/Hero/_Hero.scss | 29 ++++++++++++++----- .../DiscoveryStreamComponents/List/_List.scss | 6 ++-- .../Navigation/_Navigation.scss | 2 +- .../SectionTitle/_SectionTitle.scss | 3 +- 8 files changed, 36 insertions(+), 21 deletions(-) diff --git a/content-src/components/DiscoveryStreamBase/_DiscoveryStreamBase.scss b/content-src/components/DiscoveryStreamBase/_DiscoveryStreamBase.scss index f8a275813..5aa291bdf 100644 --- a/content-src/components/DiscoveryStreamBase/_DiscoveryStreamBase.scss +++ b/content-src/components/DiscoveryStreamBase/_DiscoveryStreamBase.scss @@ -29,5 +29,5 @@ font-weight: 600; line-height: 24px; color: $grey-90; - margin: 16px 0; + margin: 24px 0 12px; } diff --git a/content-src/components/DiscoveryStreamComponents/CardGrid/_CardGrid.scss b/content-src/components/DiscoveryStreamComponents/CardGrid/_CardGrid.scss index ca66b74b4..db48cab03 100644 --- a/content-src/components/DiscoveryStreamComponents/CardGrid/_CardGrid.scss +++ b/content-src/components/DiscoveryStreamComponents/CardGrid/_CardGrid.scss @@ -1,5 +1,5 @@ $col4-header-line-height: 20; -$col4-header-font-size: 13; +$col4-header-font-size: 14; .ds-card-grid { display: grid; diff --git a/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss b/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss index 8402be1e3..cb9668055 100644 --- a/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss +++ b/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss @@ -1,7 +1,7 @@ // Type sizes $header-font-size: 17; $header-line-height: 24; -$excerpt-font-size: 13; +$excerpt-font-size: 14; $excerpt-line-height: 20; .ds-card { @@ -50,6 +50,11 @@ $excerpt-line-height: 20; // show only 4 lines of copy @include limit-visibile-lines(4, $excerpt-line-height, $excerpt-font-size); } + + .context, + .source { + font-size: 13px; + } } header { @@ -65,8 +70,4 @@ $excerpt-line-height: 20; color: $grey-50; margin: 8px 0 0; } - - .context { - color: $teal-70; - } } diff --git a/content-src/components/DiscoveryStreamComponents/Hero/Hero.jsx b/content-src/components/DiscoveryStreamComponents/Hero/Hero.jsx index dbba27338..23ed0724f 100644 --- a/content-src/components/DiscoveryStreamComponents/Hero/Hero.jsx +++ b/content-src/components/DiscoveryStreamComponents/Hero/Hero.jsx @@ -74,7 +74,7 @@ export class Hero extends React.PureComponent {
{heroRec.title}
-

{heroRec.excerpt}

+

{heroRec.excerpt}

{heroRec.context ? (

{heroRec.context}

) : ( diff --git a/content-src/components/DiscoveryStreamComponents/Hero/_Hero.scss b/content-src/components/DiscoveryStreamComponents/Hero/_Hero.scss index 1ad113176..8e6c60c0c 100644 --- a/content-src/components/DiscoveryStreamComponents/Hero/_Hero.scss +++ b/content-src/components/DiscoveryStreamComponents/Hero/_Hero.scss @@ -1,4 +1,4 @@ -$card-header-in-hero-font-size: 13; +$card-header-in-hero-font-size: 14; $card-header-in-hero-line-height: 20; .ds-hero { @@ -12,6 +12,12 @@ $card-header-in-hero-line-height: 20; p { line-height: 1.538; + margin: 8px 0; + } + + .excerpt { + @include limit-visibile-lines(4, 23, 15); + margin: 4px 0 8px; } .ds-list { @@ -22,6 +28,10 @@ $card-header-in-hero-line-height: 20; .ds-card { border: 0; + p { + margin-top: 4px; + } + &:hover { border: 0; box-shadow: none; @@ -50,15 +60,15 @@ $card-header-in-hero-line-height: 20; .wrapper { color: $grey-50; display: block; - margin: 16px 0 24px; - padding: 24px 0; + margin: 12px 0 16px; + padding: 16px 0; border-top: $border-secondary; border-bottom: $border-secondary; @at-root .ds-hero-no-border .wrapper { border-top: 0; border-bottom: 0; - padding: 0; + padding: 0 0 8px; } &:hover .meta header { @@ -80,12 +90,12 @@ $card-header-in-hero-line-height: 20; .meta { header { - font-size: 22px; + @include limit-visibile-lines(2, 28, 22); color: $grey-90; } p { - font-size: 13px; + font-size: 14px; &.context { color: $teal-70; @@ -93,7 +103,10 @@ $card-header-in-hero-line-height: 20; } .source { + font-size: 13px; margin-bottom: 0; + overflow-x: hidden; + text-overflow: ellipsis; } } } @@ -157,11 +170,11 @@ $card-header-in-hero-line-height: 20; padding: 0 24px 0 0; header { - font-size: 22px; + @include limit-visibile-lines(6, 28, 22); + margin: 0 0 4px; } p { - font-size: 15px; line-height: 1.6; } } diff --git a/content-src/components/DiscoveryStreamComponents/List/_List.scss b/content-src/components/DiscoveryStreamComponents/List/_List.scss index 36267e3d1..f9a236ce2 100644 --- a/content-src/components/DiscoveryStreamComponents/List/_List.scss +++ b/content-src/components/DiscoveryStreamComponents/List/_List.scss @@ -1,6 +1,6 @@ // Type sizes $bordered-spacing: 16px; -$item-font-size: 13; +$item-font-size: 14; $item-image-size: 72px; $item-line-height: 20; @@ -167,7 +167,7 @@ $item-line-height: 20; .ds-list-item-excerpt { @include limit-visibile-lines(2, $item-line-height, $item-font-size); color: var(--newtab-text-secondary-color); - margin-bottom: 8px; + margin: 4px 0 8px; } .ds-list-item-info { @@ -178,7 +178,7 @@ $item-line-height: 20; .ds-list-item-title { font-weight: 600; - margin-bottom: 8px; + margin-bottom: 4px; } .ds-list-item-text { diff --git a/content-src/components/DiscoveryStreamComponents/Navigation/_Navigation.scss b/content-src/components/DiscoveryStreamComponents/Navigation/_Navigation.scss index a36e0f109..7132d8e85 100644 --- a/content-src/components/DiscoveryStreamComponents/Navigation/_Navigation.scss +++ b/content-src/components/DiscoveryStreamComponents/Navigation/_Navigation.scss @@ -1,7 +1,7 @@ .ds-navigation { line-height: 32px; padding: 4px 0; - font-size: 13px; + font-size: 14px; font-weight: 600; &.ds-navigation-centered { diff --git a/content-src/components/DiscoveryStreamComponents/SectionTitle/_SectionTitle.scss b/content-src/components/DiscoveryStreamComponents/SectionTitle/_SectionTitle.scss index ad9841788..140a32567 100644 --- a/content-src/components/DiscoveryStreamComponents/SectionTitle/_SectionTitle.scss +++ b/content-src/components/DiscoveryStreamComponents/SectionTitle/_SectionTitle.scss @@ -1,5 +1,6 @@ .ds-section-title { text-align: center; + margin-top: 24px; .title { line-height: 48px; @@ -10,7 +11,7 @@ .subtitle { line-height: 24px; - font-size: 15px; + font-size: 14px; color: $grey-50; margin-top: 4px; }