Migrated from @blog -> @site
[editorial.git] / assets / main / sass / layout / _menu.scss
1 ///
2 /// Editorial by HTML5 UP
3 /// html5up.net | @ajlkn
4 /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
5 ///
6
7 /* Menu */
8
9 #menu {
10 ul {
11 @include vendor('user-select', 'none');
12 color: _palette(fg-bold);
13 font-family: _font(family-heading);
14 font-family: _font(weight-heading-alt);
15 letter-spacing: _font(kerning-heading);
16 list-style: none;
17 margin-bottom: 0;
18 padding: 0;
19 text-transform: uppercase;
20
21 a, span {
22 border-bottom: 0;
23 color: inherit;
24 cursor: pointer;
25 display: block;
26 font-size: 0.9em;
27 padding: 0.625em 0;
28
29 &:hover {
30 color: _palette(accent);
31 }
32
33 &.opener {
34 @include vendor('transition', 'color #{_duration(transition)} ease-in-out');
35 @include icon;
36 -webkit-tap-highlight-color: rgba(255,255,255,0);
37 position: relative;
38
39 &:before {
40 @include vendor('transition', (
41 'color #{_duration(transition)} ease-in-out',
42 'transform #{_duration(transition)} ease-in-out'
43 ));
44 color: _palette(fg-light);
45 content: '\f078';
46 position: absolute;
47 right: 0;
48 }
49
50 &:hover {
51 &:before {
52 color: _palette(accent);
53 }
54 }
55
56 &.active {
57 & + ul {
58 display: block;
59 }
60
61 &:before {
62 @include vendor('transform', 'rotate(-180deg)');
63 }
64 }
65 }
66 }
67 }
68
69 > ul {
70 > li {
71 border-top: solid 1px _palette(border);
72 margin: 0.5em 0 0 0;
73 padding: 0.5em 0 0 0;
74
75 > ul {
76 color: _palette(fg-light);
77 display: none;
78 margin: 0.5em 0 1.5em 0;
79 padding-left: 1em;
80
81 a, span {
82 font-size: 0.8em;
83 }
84
85 > li {
86 margin: 0.125em 0 0 0;
87 padding: 0.125em 0 0 0;
88 }
89 }
90
91 &:first-child {
92 border-top: 0;
93 margin-top: 0;
94 padding-top: 0;
95 }
96 }
97 }
98 }