blob: 284911309d42ce6050669f13c47da5aa64b6edd3 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
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; }
}
}
|
