Files
openfoodnetwork/app/assets/javascripts/foundation4/foundation/components/_sub-nav.scss
2014-03-27 13:01:01 +11:00

85 lines
2.1 KiB
SCSS
Executable File

//
// Sub Nav Variables
//
$include-html-nav-classes: $include-html-classes !default;
// We use these to control margin and padding
$sub-nav-list-margin: em-calc(-4 0 18) !default;
$sub-nav-list-padding-top: em-calc(4) !default;
// We use this to control the definition
$sub-nav-font-size: em-calc(14) !default;
$sub-nav-font-color: #999 !default;
$sub-nav-font-weight: normal !default;
$sub-nav-text-decoration: none !default;
$sub-nav-border-radius: 1000px !default;
// We use these to control the active item styles
$sub-nav-active-font-weight: bold !default;
$sub-nav-active-bg: $primary-color !default;
$sub-nav-active-color: #fff !default;
$sub-nav-active-padding: em-calc(3 9) !default;
$sub-nav-active-cursor: default !default;
$sub-nav-item-divider: "" !default;
$sub-nav-item-divider-margin: emCalc(12) !default;
//
// Sub Nav Mixins
//
@mixin sub-nav($font-color:$sub-nav-font-color, $font-size:$sub-nav-font-size, $active-bg:$sub-nav-active-bg) {
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}: em-calc(-9);
dt,
dd,
li {
float: $default-float;
display: inline;
margin-#{$default-float}: em-calc(9);
margin-bottom: em-calc(10);
font-weight: $sub-nav-font-weight;
font-size: $font-size;
a {
color: $font-color;
text-decoration: $sub-nav-text-decoration; }
&.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;
}
@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;
}
}
}
}
@if $include-html-nav-classes != false {
/* Side Nav */
.sub-nav { @include sub-nav; }
}