(no bug) - Adjust hero / list spacing
This commit is contained in:
Родитель
063544f5e7
Коммит
c3184821be
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
Загрузка…
Ссылка в новой задаче