@dialpad/dialtone-css
Version:
Dialpad's design system
88 lines (75 loc) • 2.78 kB
text/less
//
// DIALTONE
// COMPONENTS: BREADCRUMBS
//
// These are breadcrumb classes for Dialpad's design system Dialtone.
// For further information, visit https://dialtone.dialpad.com/components/breadcrumbs
//
// TABLE OF CONTENTS
// • WRAPPER
// • INVERTED STYLE
// • ITEMS & LINKS
//
.d-breadcrumbs {
--breadcrumbs-font-size: var(--dt-font-size-200);
--breadcrumbs-line-height: var(--dt-font-line-height-300);
--breadcrumbs-color-separator: var(--dt-color-foreground-muted);
--breadcrumbs-color-text: var(--dt-color-link-muted);
// ============================================================================
// $ INVERTED STYLE
// ----------------------------------------------------------------------------
&--inverted {
--breadcrumbs-color-separator: var(--dt-color-foreground-muted-inverted);
--breadcrumbs-color-text: var(--dt-color-link-muted-inverted);
}
// ============================================================================
// $ WRAPPER
// ----------------------------------------------------------------------------
> ol {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
box-sizing: border-box;
margin: 0;
padding: 0;
font-size: var(--breadcrumbs-font-size);
line-height: var(--breadcrumbs-line-height);
list-style: none;
}
// ============================================================================
// $ ITEMS & LINKS
// ----------------------------------------------------------------------------
&__item {
position: relative;
margin: 0 0 0 var(--dt-space-400);
padding: 0;
list-style: none;
// Provide a forward slash with each element except when it's the last one.
&:not(:last-of-type) {
margin-right: var(--dt-space-450);
&::before {
position: absolute;
right: var(--dt-space-450-negative);
margin-top: var(--dt-space-100-negative);
color: var(--breadcrumbs-color-separator);
content: '/';
}
}
.d-link {
color: var(--breadcrumbs-color-text);
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
// -- SELECTED STATE (CURRENT PAGE)
&--selected {
--breadcrumbs-color-text: var(--dt-color-foreground-primary);
font-weight: var(--dt-font-weight-medium);
cursor: default;
.d-breadcrumbs--inverted & {
--breadcrumbs-color-text: var(--dt-color-foreground-primary-inverted);
}
}
}
}