diff --git a/packages/core/styles/components/breadcrumb.pcss b/packages/core/styles/components/breadcrumb.pcss index c28d312e..b515d9e3 100644 --- a/packages/core/styles/components/breadcrumb.pcss +++ b/packages/core/styles/components/breadcrumb.pcss @@ -7,11 +7,11 @@ :root { --ifm-breadcrumb-border-radius: 1.5rem; - --ifm-breadcrumb-spacing: 0.0625rem; + --ifm-breadcrumb-spacing: 0.5rem; --ifm-breadcrumb-color-active: var(--ifm-color-primary); --ifm-breadcrumb-item-background-active: var(--ifm-hover-overlay); - --ifm-breadcrumb-padding-horizontal: 1rem; - --ifm-breadcrumb-padding-vertical: 0.5rem; + --ifm-breadcrumb-padding-horizontal: 0.8rem; + --ifm-breadcrumb-padding-vertical: 0.4rem; --ifm-breadcrumb-size-multiplier: 1; --ifm-breadcrumb-separator: url('data:image/svg+xml;utf8,'); --ifm-breadcrumb-separator-filter: none; @@ -26,31 +26,23 @@ &__item { display: inline-block; - &:not(:first-child) { - margin-left: var(--ifm-breadcrumb-spacing); - } - - &:not(:last-child) { - margin-right: var(--ifm-breadcrumb-spacing); - - &:after { - background: var(--ifm-breadcrumb-separator) center; - content: ' '; - display: inline-block; - filter: var(--ifm-breadcrumb-separator-filter); - height: calc( - var(--ifm-breadcrumb-separator-size) * - var(--ifm-breadcrumb-size-multiplier) * - var(--ifm-breadcrumb-separator-size-multiplier) - ); - margin: 0 0.5rem; - opacity: 0.5; - width: calc( - var(--ifm-breadcrumb-separator-size) * - var(--ifm-breadcrumb-size-multiplier) * - var(--ifm-breadcrumb-separator-size-multiplier) - ); - } + &:not(:last-child):after { + background: var(--ifm-breadcrumb-separator) center; + content: ' '; + display: inline-block; + filter: var(--ifm-breadcrumb-separator-filter); + height: calc( + var(--ifm-breadcrumb-separator-size) * + var(--ifm-breadcrumb-size-multiplier) * + var(--ifm-breadcrumb-separator-size-multiplier) + ); + margin: 0 var(--ifm-breadcrumb-spacing); + opacity: 0.5; + width: calc( + var(--ifm-breadcrumb-separator-size) * + var(--ifm-breadcrumb-size-multiplier) * + var(--ifm-breadcrumb-separator-size-multiplier) + ); } &--active {