(no bug) - Adjust hero / list spacing

This commit is contained in:
Ed Lee 2019-01-25 14:47:27 -08:00
Родитель 063544f5e7
Коммит c3184821be
3 изменённых файлов: 13 добавлений и 9 удалений

Просмотреть файл

@ -78,7 +78,7 @@ export class Hero extends React.PureComponent {
{heroRec.context ? ( {heroRec.context ? (
<p className="context">{truncateText(heroRec.context, 22)}</p> <p className="context">{truncateText(heroRec.context, 22)}</p>
) : ( ) : (
<p>{truncateText(heroRec.domain, 22)}</p> <p className="source">{truncateText(heroRec.domain, 22)}</p>
)} )}
</div> </div>
</a> </a>

Просмотреть файл

@ -49,14 +49,16 @@ $card-header-in-hero-line-height: 20;
// "1/3 width layout" (aka "Mobile First") // "1/3 width layout" (aka "Mobile First")
.wrapper { .wrapper {
color: $grey-50; color: $grey-50;
margin: 18px 0; display: block;
padding: 20px 0; margin: 16px 0 24px;
padding: 24px 0;
border-top: $border-secondary; border-top: $border-secondary;
border-bottom: $border-secondary; border-bottom: $border-secondary;
@at-root .ds-hero-no-border .wrapper { @at-root .ds-hero-no-border .wrapper {
border-top: 0; border-top: 0;
border-bottom: 0; border-bottom: 0;
padding: 0;
} }
&:hover .meta header { &:hover .meta header {
@ -89,6 +91,10 @@ $card-header-in-hero-line-height: 20;
color: $teal-70; color: $teal-70;
} }
} }
.source {
margin-bottom: 0;
}
} }
} }

Просмотреть файл

@ -1,4 +1,5 @@
// Type sizes // Type sizes
$bordered-spacing: 16px;
$item-font-size: 13; $item-font-size: 13;
$item-image-size: 72px; $item-image-size: 72px;
$item-line-height: 20; $item-line-height: 20;
@ -11,8 +12,7 @@ $item-line-height: 20;
.ds-list-item:not(:nth-last-child(-n+#{$columns})) { .ds-list-item:not(:nth-last-child(-n+#{$columns})) {
border-bottom: $border-secondary; border-bottom: $border-secondary;
margin-bottom: -1px; // cancel out the pixel we used for the border margin-bottom: -1px; // cancel out the pixel we used for the border
padding-bottom: $bordered-spacing;
padding-bottom: 2px;
} }
} }
@ -67,7 +67,6 @@ $item-line-height: 20;
.ds-column-11 &, .ds-column-11 &,
.ds-column-12 & { .ds-column-12 & {
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
grid-row-gap: 18px;
} }
.ds-list-item-excerpt { .ds-list-item-excerpt {
@ -126,7 +125,8 @@ $item-line-height: 20;
.ds-list-borders { .ds-list-borders {
border-top: $border-secondary; border-top: $border-secondary;
padding-top: $item-line-height * 1px; grid-row-gap: $bordered-spacing;
padding-top: $bordered-spacing;
&.ds-list-full-width, &.ds-list-full-width,
.ds-column-1 &, .ds-column-1 &,
@ -168,8 +168,6 @@ $item-line-height: 20;
.ds-list-item-link { .ds-list-item-link {
mix-blend-mode: normal; mix-blend-mode: normal;
padding-bottom: 16px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }