mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 05:06:55 +04:00
89 lines
2.1 KiB
SCSS
89 lines
2.1 KiB
SCSS
@use 'sass:string';
|
|
|
|
@use '../config' as *;
|
|
|
|
.breadcrumb {
|
|
// scss-docs-start breadcrumb-css-vars
|
|
--breadcrumb-padding-x: #{$breadcrumb-padding-x};
|
|
--breadcrumb-padding-y: #{$breadcrumb-padding-y};
|
|
--breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
|
|
--breadcrumb-font-size: #{$breadcrumb-font-size};
|
|
--breadcrumb-bg: #{$breadcrumb-bg};
|
|
--breadcrumb-border-radius: #{$breadcrumb-border-radius};
|
|
--breadcrumb-divider-color: #{$breadcrumb-divider-color};
|
|
--breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
|
|
--breadcrumb-item-active-color: #{$breadcrumb-active-color};
|
|
--breadcrumb-item-active-font-weight: #{$breadcrumb-active-font-weight};
|
|
--breadcrumb-item-disabled-color: #{$breadcrumb-disabled-color};
|
|
--breadcrumb-link-color: #{$breadcrumb-link-color};
|
|
// scss-docs-end breadcrumb-css-vars
|
|
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding: 0;
|
|
margin: 0;
|
|
list-style: none;
|
|
background: transparent;
|
|
background-color: var(--breadcrumb-bg);
|
|
@include font-size(var(--breadcrumb-font-size));
|
|
@include border-radius(var(--breadcrumb-border-radius));
|
|
|
|
a {
|
|
color: var(--breadcrumb-link-color);
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
|
|
.breadcrumb-muted {
|
|
--breadcrumb-link-color: var(--secondary);
|
|
}
|
|
|
|
.breadcrumb-item {
|
|
&.active {
|
|
font-weight: var(--breadcrumb-item-active-font-weight);
|
|
color: var(--breadcrumb-item-active-color);
|
|
|
|
a {
|
|
color: inherit;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
&.disabled {
|
|
color: var(--breadcrumb-item-disabled-color);
|
|
|
|
&::before {
|
|
color: inherit;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
& + & {
|
|
padding-inline-start: var(--breadcrumb-item-padding-x);
|
|
|
|
&::before {
|
|
float: inline-start;
|
|
padding-inline-end: var(--breadcrumb-item-padding-x);
|
|
color: var(--breadcrumb-divider-color);
|
|
content: var(--breadcrumb-divider, escape-svg($breadcrumb-divider));
|
|
|
|
/* rtl:raw:
|
|
transform: scaleX(-1);
|
|
*/
|
|
}
|
|
}
|
|
}
|
|
|
|
@each $name, $symbol in $breadcrumb-variants {
|
|
.breadcrumb-#{$name} {
|
|
--breadcrumb-divider: '#{string.quote($symbol)}';
|
|
}
|
|
}
|