-
Notifications
You must be signed in to change notification settings - Fork 10
/
_side-nav.scss
executable file
·115 lines (97 loc) · 3.33 KB
/
_side-nav.scss
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
// 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(#fff, $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;
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; }
}
}