1// Foundation by ZURB 2// foundation.zurb.com 3// Licensed under MIT Open Source 4 5@import 'global'; 6 7// 8// Breadcrumb Variables 9// 10$include-html-nav-classes: $include-html-classes !default; 11 12// We use this to set the background color for the breadcrumb container. 13$crumb-bg: scale-color($secondary-color, $lightness: 55%) !default; 14 15// We use these to set the padding around the breadcrumbs. 16$crumb-padding: rem-calc(9 14 9) !default; 17$crumb-side-padding: rem-calc(12) !default; 18 19// We use these to control border styles. 20$crumb-function-factor: -10% !default; 21$crumb-border-size: 1px !default; 22$crumb-border-style: solid !default; 23$crumb-border-color: scale-color($crumb-bg, $lightness: $crumb-function-factor) !default; 24$crumb-radius: $global-radius !default; 25 26// We use these to set various text styles for breadcrumbs. 27$crumb-font-size: rem-calc(11) !default; 28$crumb-font-color: $primary-color !default; 29$crumb-font-color-current: $oil !default; 30$crumb-font-color-unavailable: $aluminum !default; 31$crumb-font-transform: uppercase !default; 32$crumb-link-decor: underline !default; 33 34// We use these to control the slash between breadcrumbs 35$crumb-slash-color: $base !default; 36$crumb-slash: "/" !default; 37$crumb-slash-position: 1px !default; 38 39// 40// Breadcrumb Mixins 41// 42 43// We use this mixin to create a container around our breadcrumbs 44@mixin crumb-container { 45 border-style: $crumb-border-style; 46 border-width: $crumb-border-size; 47 display: block; 48 list-style: none; 49 margin-#{$default-float}: 0; 50 overflow: hidden; 51 padding: $crumb-padding; 52 53 // We control which background color and border come through. 54 background-color: $crumb-bg; 55 border-color: $crumb-border-color; 56} 57 58// We use this mixin to create breadcrumb styles from list items. 59@mixin crumbs { 60 61 // A normal state will make the links look and act like clickable breadcrumbs. 62 color: $crumb-font-color; 63 float: $default-float; 64 font-size: $crumb-font-size; 65 line-height: $crumb-font-size; 66 margin: 0; 67 text-transform: $crumb-font-transform; 68 69 &:hover a, &:focus a { text-decoration: $crumb-link-decor; } 70 71 a { 72 color: $crumb-font-color; 73 } 74 75 // Current is for the link of the current page 76 &.current { 77 color: $crumb-font-color-current; 78 cursor: $cursor-default-value; 79 a { 80 color: $crumb-font-color-current; 81 cursor: $cursor-default-value; 82 } 83 84 &:hover, &:hover a, 85 &:focus, &:focus a { text-decoration: none; } 86 } 87 88 // Unavailable removed color and link styles so it looks inactive. 89 &.unavailable { 90 color: $crumb-font-color-unavailable; 91 a { color: $crumb-font-color-unavailable; } 92 93 &:hover, 94 &:hover a, 95 &:focus, 96 a:focus { 97 color: $crumb-font-color-unavailable; 98 cursor: $cursor-disabled-value; 99 text-decoration: none; 100 } 101 } 102 103 &:before { 104 color: $crumb-slash-color; 105 content: "#{$crumb-slash}"; 106 margin: 0 $crumb-side-padding; 107 position: relative; 108 top: $crumb-slash-position; 109 } 110 111 &:first-child:before { 112 content: " "; 113 margin: 0; 114 } 115} 116 117@include exports("breadcrumbs") { 118 @if $include-html-nav-classes { 119 .breadcrumbs { 120 @include crumb-container; 121 @include radius($crumb-radius); 122 123 > * { 124 @include crumbs; 125 } 126 } 127 /* Accessibility - hides the forward slash */ 128 [aria-label="breadcrumbs"] [aria-hidden="true"]:after { 129 content: "/"; 130 } 131 } 132} 133