mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2026-09-28 16:08:01 +00:00
67 lines
2.2 KiB
SCSS
67 lines
2.2 KiB
SCSS
/* Breadcrumbs -------------------------------------------------------------- */
|
|
|
|
.breadcrumbs-wrap {
|
|
position: relative;
|
|
z-index: 11;
|
|
padding: 0 0 2rem 0;
|
|
}
|
|
|
|
.interactive-block .breadcrumbs-wrap {
|
|
padding: 0;
|
|
}
|
|
|
|
.breadcrumb-item:first-of-type {
|
|
padding-left: var(--bs-breadcrumb-item-padding-x);
|
|
}
|
|
|
|
.breadcrumb-item + .breadcrumb-item:before {
|
|
content: "\f105"; /* fontawesome angle-right */
|
|
color: $gray-500;
|
|
font-family: FontAwesome;
|
|
padding-right: 5px;
|
|
}
|
|
|
|
.breadcrumbs-wrap .breadcrumb {
|
|
padding: 0;
|
|
margin-bottom: 0;
|
|
font-size: 0.833em;
|
|
}
|
|
|
|
.breadcrumb-item a {
|
|
color: $gray-200;
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
color: $primary
|
|
}
|
|
}
|
|
|
|
// overrides for visited breadcrumb links in light and dark modes
|
|
html.light .breadcrumb-item a:visited {
|
|
color: $true-black !important;
|
|
}
|
|
|
|
html.dark .breadcrumb-item a:visited {
|
|
color: $white !important;
|
|
}
|
|
|
|
// The Redocly breadcrumb "dropdown" caret (e.g. the year on blog posts) is an
|
|
// empty CDNIcon that masks an external SVG from cdn.redocly.com; that request
|
|
// doesn't resolve here, so the chevron is invisible. Force a local chevron-down
|
|
// mask so the dropdown affordance always shows. Targets the stable
|
|
// data-component-name attributes (styled-component class hashes are not stable);
|
|
// !important is needed to override the component's inline mask-image.
|
|
[data-component-name="Breadcrumbs/BreadcrumbDropdown"] [data-component-name="icons/CDNIcon/CDNIcon"] {
|
|
$bc-chevron: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E";
|
|
width: 0.7em;
|
|
height: 0.7em;
|
|
background-color: currentColor;
|
|
-webkit-mask-image: url("#{$bc-chevron}") !important;
|
|
mask-image: url("#{$bc-chevron}") !important;
|
|
}
|
|
|
|
// NOTE: the breadcrumb dropdown *menu* colors are set in @theme/styles.css, not
|
|
// here. A custom-property-only rule in this bundle gets stripped: PurgeCSS runs
|
|
// with `variables: true` (postcss.config.cjs) and its var() consumers are Redocly's
|
|
// runtime styled-components under node_modules, which is excluded from `content`.
|