96 lines
2.1 KiB
SCSS
96 lines
2.1 KiB
SCSS
// Foundation for Sites by ZURB
|
|
// foundation.zurb.com
|
|
// Licensed under MIT Open Source
|
|
|
|
////
|
|
/// @group breadcrumbs
|
|
////
|
|
|
|
/// Margin around a breadcrumbs container.
|
|
/// @type Number
|
|
$breadcrumbs-margin: 0 0 $global-margin 0 !default;
|
|
|
|
/// Font size of breadcrumb links.
|
|
/// @type Number
|
|
$breadcrumbs-item-font-size: rem-calc(11) !default;
|
|
|
|
/// Color of breadcrumb links.
|
|
/// @type Color
|
|
$breadcrumbs-item-color: $primary-color !default;
|
|
|
|
/// Color of the active breadcrumb link.
|
|
/// @type Color
|
|
$breadcrumbs-item-color-current: $black !default;
|
|
|
|
/// Opacity of disabled breadcrumb links.
|
|
/// @type Number
|
|
$breadcrumbs-item-color-disabled: $medium-gray !default;
|
|
|
|
/// Margin between breadcrumb items.
|
|
/// @type Number
|
|
$breadcrumbs-item-margin: 0.75rem !default;
|
|
|
|
/// If `true`, makes breadcrumb links uppercase.
|
|
/// @type Boolean
|
|
$breadcrumbs-item-uppercase: true !default;
|
|
|
|
/// If `true`, adds a slash between breadcrumb links.
|
|
/// @type Boolean
|
|
$breadcrumbs-item-slash: true !default;
|
|
|
|
/// Adds styles for a breadcrumbs container, along with the styles for the `<li>` and `<a>` elements inside of it.
|
|
@mixin breadcrumbs-container {
|
|
@include clearfix;
|
|
list-style: none;
|
|
margin: $breadcrumbs-margin;
|
|
|
|
// Item wrapper
|
|
li {
|
|
float: #{$global-left};
|
|
color: $breadcrumbs-item-color-current;
|
|
font-size: $breadcrumbs-item-font-size;
|
|
cursor: default;
|
|
|
|
@if $breadcrumbs-item-uppercase {
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
@if $breadcrumbs-item-slash {
|
|
// Need to escape the backslash
|
|
$slash: if($global-text-direction == 'ltr', '/', '\\');
|
|
|
|
&:not(:last-child)::after {
|
|
color: $medium-gray;
|
|
content: $slash;
|
|
margin: 0 $breadcrumbs-item-margin;
|
|
position: relative;
|
|
top: 1px;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@else {
|
|
margin-#{$global-right}: $breadcrumbs-item-margin;
|
|
}
|
|
}
|
|
|
|
// Page links
|
|
a {
|
|
color: $breadcrumbs-item-color;
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin foundation-breadcrumbs {
|
|
.breadcrumbs {
|
|
@include breadcrumbs-container;
|
|
|
|
.disabled {
|
|
color: $breadcrumbs-item-color-disabled;
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
}
|