UNPKG

1.11 kBSCSSView Raw
1/**
2 * Nav
3 */
4
5// Inline
6nav,
7nav ul {
8 display: flex;
9}
10
11nav {
12 justify-content: space-between;
13
14 ul {
15 align-items: center;
16 margin-bottom: 0;
17 padding: 0;
18 list-style: none;
19
20 &:first-of-type {
21 margin-left: -$spacing-gutter/2;
22 }
23 &:last-of-type {
24 margin-right: -$spacing-gutter/2;
25 }
26 }
27
28 li {
29 display: inline-block;
30 margin: 0;
31 padding: $spacing-gutter $spacing-gutter/2;
32
33 // HACK: Input & Button inside Nav
34 > *,
35 > input:not([type="checkbox"]):not([type="radio"]) {
36 margin-bottom: 0;
37 }
38 }
39
40 a {
41 display: block;
42 margin: -$spacing-gutter (-$spacing-gutter/2);
43 padding: $spacing-gutter $spacing-gutter/2;
44 border-radius: $round;
45
46 &:hover,
47 &:active,
48 &:focus {
49 text-decoration: none;
50 }
51
52 @if $enable-classes {
53 &.contrast:not([role="button"]) {
54 box-shadow: none;
55 }
56 }
57 }
58}
59
60// Vertical Nav
61aside {
62
63 nav,
64 ul,
65 li {
66 display: block;
67 }
68
69 li {
70 padding: $spacing-gutter/2;
71
72 a {
73 margin: -$spacing-gutter/2;
74 padding: $spacing-gutter/2;
75 }
76 }
77}