118 lines
3.2 KiB
SCSS
118 lines
3.2 KiB
SCSS
|
//
|
||
|
|
// Breadcrumb Variables
|
||
|
|
//
|
||
|
|
|
||
|
|
// We use this to set the background color for the breadcrumb container.
|
||
|
|
$crumb-bg: lighten($secondary-color, 5%) !default;
|
||
|
|
|
||
|
|
// We use these to set the padding around the breadcrumbs.
|
||
|
|
$crumb-padding: emCalc(6px) emCalc(14px) emCalc(9px) !default;
|
||
|
|
$crumb-side-padding: emCalc(12px) !default;
|
||
|
|
|
||
|
|
// We use these to control border styles.
|
||
|
|
$crumb-function-factor: 10% !default;
|
||
|
|
$crumb-border-size: 1px !default;
|
||
|
|
$crumb-border-style: solid !default;
|
||
|
|
$crumb-border-color: darken($crumb-bg, $crumb-function-factor) !default;
|
||
|
|
$crumb-radius: $global-radius !default;
|
||
|
|
|
||
|
|
// We use these to set various text styles for breadcrumbs.
|
||
|
|
$crumb-font-size: emCalc(11px) !default;
|
||
|
|
$crumb-font-color: $primary-color !default;
|
||
|
|
$crumb-font-color-current: #333 !default;
|
||
|
|
$crumb-font-color-unavailable: #999 !default;
|
||
|
|
$crumb-font-transform: uppercase !default;
|
||
|
|
$crumb-link-decor: underline !default;
|
||
|
|
|
||
|
|
// We use these to control the slash between breadcrumbs
|
||
|
|
$crumb-slash-color: #aaa !default;
|
||
|
|
$crumb-slash: "/" !default;
|
||
|
|
|
||
|
|
//
|
||
|
|
// Breakcrumb Mixins
|
||
|
|
//
|
||
|
|
|
||
|
|
// We use this mixin to create a container around our breadcrumbs
|
||
|
|
@mixin crumb-container {
|
||
|
|
display: block;
|
||
|
|
padding: $crumb-padding;
|
||
|
|
overflow: hidden;
|
||
|
|
margin-#{$default-float}: 0;
|
||
|
|
list-style: none;
|
||
|
|
border-style: $crumb-border-style;
|
||
|
|
border-width: $crumb-border-size;
|
||
|
|
|
||
|
|
// We control which background color and border come through.
|
||
|
|
background-color: $crumb-bg;
|
||
|
|
border-color: $crumb-border-color;
|
||
|
|
}
|
||
|
|
|
||
|
|
// We use this mixin to create breadcrumb styles from list items.
|
||
|
|
@mixin crumbs {
|
||
|
|
|
||
|
|
// A normal state will make the links look and act like clickable breadcrumbs.
|
||
|
|
margin: 0;
|
||
|
|
padding: 0 $crumb-side-padding 0 0;
|
||
|
|
float: $default-float;
|
||
|
|
|
||
|
|
&:hover a,
|
||
|
|
&:focus a { text-decoration: $crumb-link-decor; }
|
||
|
|
|
||
|
|
a,
|
||
|
|
span {
|
||
|
|
font-size: $crumb-font-size;
|
||
|
|
padding-#{$default-float}: $crumb-side-padding;
|
||
|
|
text-transform: $crumb-font-transform;
|
||
|
|
color: $crumb-font-color;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Current is for the link of the current page
|
||
|
|
&.current {
|
||
|
|
a {
|
||
|
|
cursor: default;
|
||
|
|
color: $crumb-font-color-current;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:hover a,
|
||
|
|
&:focus a { text-decoration: none; }
|
||
|
|
}
|
||
|
|
|
||
|
|
// Unavailable removed color and link styles so it looks inactive.
|
||
|
|
&.unavailable {
|
||
|
|
a { color: $crumb-font-color-unavailable; }
|
||
|
|
|
||
|
|
&:hover a,
|
||
|
|
a:focus {
|
||
|
|
text-decoration: none;
|
||
|
|
color: $crumb-font-color-unavailable;
|
||
|
|
cursor: default;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&:before {
|
||
|
|
content: "#{$crumb-slash}";
|
||
|
|
color: $crumb-slash-color;
|
||
|
|
position: relative;
|
||
|
|
top: 1px;
|
||
|
|
}
|
||
|
|
&:first-child a,
|
||
|
|
&:first-child span { padding-#{$default-float}: 0; }
|
||
|
|
&:first-child:before { content: " "; }
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
@if $include-html-nav-classes {
|
||
|
|
|
||
|
|
/* Breadcrumbs */
|
||
|
|
.breadcrumbs {
|
||
|
|
@include crumb-container;
|
||
|
|
@include radius($crumb-radius);
|
||
|
|
|
||
|
|
li {
|
||
|
|
@include crumbs;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|