diff options
Diffstat (limited to 'source/bower_components/foundation/scss/foundation/components/_sub-nav.scss')
-rw-r--r-- | source/bower_components/foundation/scss/foundation/components/_sub-nav.scss | 125 |
1 files changed, 125 insertions, 0 deletions
diff --git a/source/bower_components/foundation/scss/foundation/components/_sub-nav.scss b/source/bower_components/foundation/scss/foundation/components/_sub-nav.scss new file mode 100644 index 0000000..2849113 --- /dev/null +++ b/source/bower_components/foundation/scss/foundation/components/_sub-nav.scss @@ -0,0 +1,125 @@ +// Foundation by ZURB +// foundation.zurb.com +// Licensed under MIT Open Source + +@import "global"; + +// +// @name _sub-nav.scss +// @dependencies _global.scss +// + +// +// @variables +// + +$include-html-nav-classes: $include-html-classes !default; + +// We use these to control margin and padding +$sub-nav-list-margin: rem-calc(-4 0 18) !default; +$sub-nav-list-padding-top: rem-calc(4) !default; + +// We use this to control the definition +$sub-nav-font-family: $body-font-family !default; +$sub-nav-font-size: rem-calc(14) !default; +$sub-nav-font-color: $aluminum !default; +$sub-nav-font-weight: $font-weight-normal !default; +$sub-nav-text-decoration: none !default; +$sub-nav-padding: rem-calc(3 16) !default; +$sub-nav-border-radius: 3px !default; +$sub-nav-font-color-hover: scale-color($sub-nav-font-color, $lightness: -25%) !default; + + +// We use these to control the active item styles + +$sub-nav-active-font-weight: $font-weight-normal !default; +$sub-nav-active-bg: $primary-color !default; +$sub-nav-active-bg-hover: scale-color($sub-nav-active-bg, $lightness: -14%) !default; +$sub-nav-active-color: $white !default; +$sub-nav-active-padding: $sub-nav-padding !default; +$sub-nav-active-cursor: default !default; + +$sub-nav-item-divider: "" !default; +$sub-nav-item-divider-margin: rem-calc(12) !default; + +// +// @mixins +// + + +// Create a sub-nav item +// +// $font-color - Font color. Default: $sub-nav-font-color. +// $font-size - Font size. Default: $sub-nav-font-size. +// $active-bg - Background of active nav item. Default: $sub-nav-active-bg. +// $active-bg-hover - Background of active nav item, when hovered. Default: $sub-nav-active-bg-hover. +@mixin sub-nav( + $font-color: $sub-nav-font-color, + $font-size: $sub-nav-font-size, + $active-bg: $sub-nav-active-bg, + $active-bg-hover: $sub-nav-active-bg-hover) { + display: block; + width: auto; + overflow: hidden; + margin: $sub-nav-list-margin; + padding-top: $sub-nav-list-padding-top; + margin-#{$opposite-direction}: 0; + margin-#{$default-float}: rem-calc(-12); + + dt { + text-transform: uppercase; + } + + dt, + dd, + li { + float: $default-float; + display: inline; + margin-#{$default-float}: rem-calc(16); + margin-bottom: rem-calc(10); + font-family: $sub-nav-font-family; + font-weight: $sub-nav-font-weight; + font-size: $font-size; + color: $font-color; + + a { + text-decoration: $sub-nav-text-decoration; + color: $sub-nav-font-color; + padding: $sub-nav-padding; + &:hover { + color: $sub-nav-font-color-hover; + } + } + + &.active a { + @include radius($sub-nav-border-radius); + font-weight: $sub-nav-active-font-weight; + background: $active-bg; + padding: $sub-nav-active-padding; + cursor: $sub-nav-active-cursor; + color: $sub-nav-active-color; + &:hover { + background: $active-bg-hover; + } + } + @if $sub-nav-item-divider != "" { + margin-#{$default-float}: 0; + + &:before { + content: "#{$sub-nav-item-divider}"; + margin: 0 $sub-nav-item-divider-margin; + } + + &:first-child:before { + content: ""; + margin: 0; + } + } + } +} + +@include exports("sub-nav") { + @if $include-html-nav-classes { + .sub-nav { @include sub-nav; } + } +} |