diff options
Diffstat (limited to 'source/bower_components/foundation/scss/foundation/components/_side-nav.scss')
-rw-r--r-- | source/bower_components/foundation/scss/foundation/components/_side-nav.scss | 116 |
1 files changed, 116 insertions, 0 deletions
diff --git a/source/bower_components/foundation/scss/foundation/components/_side-nav.scss b/source/bower_components/foundation/scss/foundation/components/_side-nav.scss new file mode 100644 index 0000000..d16be15 --- /dev/null +++ b/source/bower_components/foundation/scss/foundation/components/_side-nav.scss @@ -0,0 +1,116 @@ +// Foundation by ZURB +// foundation.zurb.com +// Licensed under MIT Open Source + +@import "global"; + +// +// @variables +// + +$include-html-nav-classes: $include-html-classes !default; + +// We use this to control padding. +$side-nav-padding: rem-calc(14 0) !default; + +// We use these to control list styles. +$side-nav-list-type: none !default; +$side-nav-list-position: outside !default; +$side-nav-list-margin: rem-calc(0 0 7 0) !default; + +// We use these to control link styles. +$side-nav-link-color: $primary-color !default; +$side-nav-link-color-active: scale-color($side-nav-link-color, $lightness: 30%) !default; +$side-nav-link-color-hover: scale-color($side-nav-link-color, $lightness: 30%) !default; +$side-nav-link-bg-hover: hsla(0, 0, 0, 0.025) !default; +$side-nav-link-margin: 0 !default; +$side-nav-link-padding: rem-calc(7 14) !default; +$side-nav-font-size: rem-calc(14) !default; +$side-nav-font-weight: $font-weight-normal !default; +$side-nav-font-weight-active: $side-nav-font-weight !default; +$side-nav-font-family: $body-font-family !default; +$side-nav-font-family-active: $side-nav-font-family !default; + +// We use these to control heading styles. +$side-nav-heading-color: $side-nav-link-color !default; +$side-nav-heading-font-size: $side-nav-font-size !default; +$side-nav-heading-font-weight: bold !default; +$side-nav-heading-text-transform: uppercase !default; + +// We use these to control border styles +$side-nav-divider-size: 1px !default; +$side-nav-divider-style: solid !default; +$side-nav-divider-color: scale-color($white, $lightness: 10%) !default; + + +// +// @mixins +// + + +// We use this to style the side-nav +// +// $divider-color - Border color of divider. Default: $side-nav-divider-color. +// $font-size - Font size of nav items. Default: $side-nav-font-size. +// $link-color - Color of navigation links. Default: $side-nav-link-color. +// $link-color-hover - Color of navigation links when hovered. Default: $side-nav-link-color-hover. +@mixin side-nav( + $divider-color:$side-nav-divider-color, + $font-size:$side-nav-font-size, + $link-color:$side-nav-link-color, + $link-color-hover:$side-nav-link-color-hover, + $link-bg-hover:$side-nav-link-bg-hover) { + display: block; + margin: 0; + padding: $side-nav-padding; + list-style-type: $side-nav-list-type; + list-style-position: $side-nav-list-position; + font-family: $side-nav-font-family; + + li { + margin: $side-nav-list-margin; + font-size: $font-size; + font-weight: $side-nav-font-weight; + + a:not(.button) { + display: block; + color: $link-color; + margin: $side-nav-link-margin; + padding: $side-nav-link-padding; + &:hover, + &:focus { + background: $link-bg-hover; + color: $link-color-hover; + } + } + + &.active > a:first-child:not(.button) { + color: $side-nav-link-color-active; + font-weight: $side-nav-font-weight-active; + font-family: $side-nav-font-family-active; + } + + &.divider { + border-top: $side-nav-divider-size $side-nav-divider-style; + height: 0; + padding: 0; + list-style: none; + border-top-color: $divider-color; + } + + &.heading { + color: $side-nav-heading-color; + font: { + size: $side-nav-heading-font-size; + weight: $side-nav-heading-font-weight; + } + text-transform: $side-nav-heading-text-transform; + } + } +} + +@include exports("side-nav") { + @if $include-html-nav-classes { + .side-nav { @include side-nav; } + } +} |