summaryrefslogtreecommitdiff
path: root/source/bower_components/foundation/scss/foundation/components/_breadcrumbs.scss
diff options
context:
space:
mode:
Diffstat (limited to 'source/bower_components/foundation/scss/foundation/components/_breadcrumbs.scss')
-rw-r--r--source/bower_components/foundation/scss/foundation/components/_breadcrumbs.scss132
1 files changed, 132 insertions, 0 deletions
diff --git a/source/bower_components/foundation/scss/foundation/components/_breadcrumbs.scss b/source/bower_components/foundation/scss/foundation/components/_breadcrumbs.scss
new file mode 100644
index 0000000..612a146
--- /dev/null
+++ b/source/bower_components/foundation/scss/foundation/components/_breadcrumbs.scss
@@ -0,0 +1,132 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+@import "global";
+
+//
+// Breadcrumb Variables
+//
+$include-html-nav-classes: $include-html-classes !default;
+
+// We use this to set the background color for the breadcrumb container.
+$crumb-bg: scale-color($secondary-color, $lightness: 55%) !default;
+
+// We use these to set the padding around the breadcrumbs.
+$crumb-padding: rem-calc(9 14 9) !default;
+$crumb-side-padding: rem-calc(12) !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: scale-color($crumb-bg, $lightness: $crumb-function-factor) !default;
+$crumb-radius: $global-radius !default;
+
+// We use these to set various text styles for breadcrumbs.
+$crumb-font-size: rem-calc(11) !default;
+$crumb-font-color: $primary-color !default;
+$crumb-font-color-current: $oil !default;
+$crumb-font-color-unavailable: $aluminum !default;
+$crumb-font-transform: uppercase !default;
+$crumb-link-decor: underline !default;
+
+// We use these to control the slash between breadcrumbs
+$crumb-slash-color: $base !default;
+$crumb-slash: "/" !default;
+
+//
+// Breadcrumb 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;
+ float: $default-float;
+ font-size: $crumb-font-size;
+ line-height: $crumb-font-size;
+ text-transform: $crumb-font-transform;
+ color: $crumb-font-color;
+
+ &:hover a, &:focus a { text-decoration: $crumb-link-decor; }
+
+ a {
+ color: $crumb-font-color;
+ }
+
+ // Current is for the link of the current page
+ &.current {
+ cursor: $cursor-default-value;
+ color: $crumb-font-color-current;
+ a {
+ cursor: $cursor-default-value;
+ color: $crumb-font-color-current;
+ }
+
+ &:hover, &:hover a,
+ &:focus, &:focus a { text-decoration: none; }
+ }
+
+ // Unavailable removed color and link styles so it looks inactive.
+ &.unavailable {
+ color: $crumb-font-color-unavailable;
+ a { color: $crumb-font-color-unavailable; }
+
+ &:hover,
+ &:hover a,
+ &:focus,
+ a:focus {
+ text-decoration: none;
+ color: $crumb-font-color-unavailable;
+ cursor: $cursor-default-value;
+ }
+ }
+
+ &:before {
+ content: "#{$crumb-slash}";
+ color: $crumb-slash-color;
+ margin: 0 $crumb-side-padding;
+ position: relative;
+ top: 1px;
+ }
+
+ &:first-child:before {
+ content: " ";
+ margin: 0;
+ }
+}
+
+@include exports("breadcrumbs") {
+ @if $include-html-nav-classes {
+ .breadcrumbs {
+ @include crumb-container;
+ @include radius($crumb-radius);
+
+ &>* {
+ @include crumbs;
+ }
+ }
+ }
+}
+
+/* Accessibility - hides the forward slash */
+[aria-label="breadcrumbs"] [aria-hidden="true"]:after {
+ content: "/";
+ }