implement article-nav icon padding

This commit is contained in:
James Fenn
2023-07-15 15:02:19 -04:00
parent 491942bf0a
commit c9bdce3f43
2 changed files with 12 additions and 7 deletions

View File

@@ -50,11 +50,6 @@
@include transition(background-color border-color); @include transition(background-color border-color);
&__overline { &__overline {
svg {
width: var(--article-nav_item_arrow_size);
height: var(--article-nav_item_arrow_size);
}
color: var(--article-nav_item_overline-color); color: var(--article-nav_item_overline-color);
display: flex; display: flex;
align-items: center; align-items: center;
@@ -113,3 +108,13 @@
text-align: right; text-align: right;
} }
} }
.icon {
display: inline-flex;
padding: var(--icon-size-dense-padding);
svg {
width: var(--article-nav_item_arrow_size);
height: var(--article-nav_item_arrow_size);
}
}

View File

@@ -21,7 +21,7 @@ function ArticleNavItem({ post, type }: ArticleNavItemProps) {
? ( ? (
<span class={`${style.item__overline} text-style-button-regular`}> <span class={`${style.item__overline} text-style-button-regular`}>
<span <span
style="display: inline-flex;" class={`${style.icon}`}
dangerouslySetInnerHTML={{ __html: arrow_left }} dangerouslySetInnerHTML={{ __html: arrow_left }}
/> />
Previous article Previous article
@@ -31,7 +31,7 @@ function ArticleNavItem({ post, type }: ArticleNavItemProps) {
<span class={`${style.item__overline} text-style-button-regular`}> <span class={`${style.item__overline} text-style-button-regular`}>
Next article Next article
<span <span
style="display: inline-flex;" class={`${style.icon}`}
dangerouslySetInnerHTML={{ __html: arrow_right }} dangerouslySetInnerHTML={{ __html: arrow_right }}
/> />
</span> </span>