diff options
Diffstat (limited to 'assets/css/components/_nav.scss')
-rw-r--r-- | assets/css/components/_nav.scss | 132 |
1 files changed, 89 insertions, 43 deletions
diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss index cd3ef14..2472706 100644 --- a/assets/css/components/_nav.scss +++ b/assets/css/components/_nav.scss | |||
@@ -1,57 +1,103 @@ | |||
1 | .c-nav { | 1 | @include namespace('nav') { |
2 | position: sticky; | 2 | @include store(( |
3 | z-index: 1000; | 3 | --dims: ( |
4 | top: 0; | 4 | --font-size: 15px, |
5 | background-color: var(--nav--bg); | 5 | --pad-y: 1em, |
6 | font-size: $nav--font-size; | 6 | --pad-y-sm: .5em, |
7 | 7 | --item: ( | |
8 | &__items { | 8 | --pad-x: 1em, |
9 | --pad-x-sm: .75em, | ||
10 | --pad-y: 1em, | ||
11 | --pad-y-sm: .75em, | ||
12 | ), | ||
13 | ), | ||
14 | --colors: ( | ||
15 | --logo: ( | ||
16 | --idle: ( | ||
17 | --fg: prop(--colors --fg-hi, $global: true), | ||
18 | ), | ||
19 | --hover: ( | ||
20 | --fg: prop(--colors --fg-lo, $global: true), | ||
21 | ) | ||
22 | ), | ||
23 | --item: ( | ||
24 | --idle: ( | ||
25 | --fg: prop(--colors --fg, $global: true), | ||
26 | ), | ||
27 | --hover: ( | ||
28 | --fg: prop(--colors --fg-lo, $global: true), | ||
29 | ), | ||
30 | --active: ( | ||
31 | --fg: prop(--colors --fg-lo, $global: true), | ||
32 | ) | ||
33 | ) | ||
34 | ) | ||
35 | )); | ||
36 | |||
37 | @include component(namespace()) { | ||
9 | display: flex; | 38 | display: flex; |
10 | align-items: baseline; | 39 | align-items: center; |
11 | } | 40 | padding: prop(--dims --pad-y) 0; |
41 | font-size: prop(--dims --font-size); | ||
42 | |||
43 | @include element('logo') { | ||
44 | display: inline-block; | ||
45 | margin: 0; | ||
46 | padding: prop(--dims --item --pad-y) 0; | ||
47 | color: prop(--colors --logo --idle --fg); | ||
48 | font-family: $font-fam--mono; | ||
49 | text-decoration: none; | ||
50 | |||
51 | &:link, | ||
52 | &:visited { | ||
53 | &:hover { | ||
54 | background-color: transparent; | ||
55 | color: prop(--colors --logo --hover --fg); | ||
56 | } | ||
57 | } | ||
58 | } | ||
59 | |||
60 | @include element('logo-symbol') { | ||
61 | display: block; | ||
62 | width: $line-height * .9em; | ||
63 | height: $line-height * 1em; | ||
64 | } | ||
12 | 65 | ||
13 | &__logo { | 66 | @include element('item') { |
14 | display: inline-block; | 67 | display: inline-block; |
15 | margin: 0; | 68 | margin: 0 calc(-1 * #{prop(--dims --item --pad-x)}) 0 prop(--dims --item --pad-x); |
16 | padding: $nav--item--pad-v 0; | 69 | padding: prop(--dims --item --pad-y) prop(--dims --item --pad-x); |
17 | color: var(--nav--logo--fg); | 70 | color: prop(--colors --item --idle --fg); |
18 | font-family: $font-fam--mono; | 71 | text-decoration: none; |
19 | text-decoration: none; | 72 | text-transform: uppercase; |
20 | 73 | ||
21 | &:link, | ||
22 | &:visited { | ||
23 | &:hover { | 74 | &:hover { |
24 | background-color: transparent; | 75 | background-color: transparent; |
25 | color: var(--nav--item--hover--fg); | 76 | color: prop(--colors --item --hover --fg); |
77 | text-decoration: underline; | ||
78 | } | ||
79 | |||
80 | @include modifier('active') { | ||
81 | border-color: prop(--colors --item --active --fg); | ||
82 | color: prop(--colors --item --active --fg); | ||
26 | font-weight: bold; | 83 | font-weight: bold; |
27 | } | 84 | } |
28 | } | 85 | } |
29 | } | ||
30 | 86 | ||
31 | &__item { | 87 | @include media('<=sm') { |
32 | display: inline-block; | 88 | padding: prop(--dims --pad-y-sm) 0; |
33 | margin: 0 (-1 * $nav--item--pad-h) 0 ($nav--item--spacing - $nav--item--pad-h); | ||
34 | padding: $nav--item--pad-v $nav--item--pad-h calc(#{$nav--item--pad-v} - 2px); | ||
35 | border-bottom: 2px solid transparent; | ||
36 | color: var(--nav--item--idle--fg); | ||
37 | text-decoration: none; | ||
38 | |||
39 | &:hover { | ||
40 | background-color: transparent; | ||
41 | color: var(--nav--item--hover--fg); | ||
42 | font-weight: bold; | ||
43 | } | ||
44 | 89 | ||
45 | &--active { | 90 | @include element('logo', 'item') { |
46 | border-color: var(--nav--item--active--fg); | 91 | padding-top: prop(--dims --item --pad-y-sm); |
47 | color: var(--nav--item--active--fg); | 92 | padding-bottom: prop(--dims --item --pad-y-sm); |
48 | font-weight: bold; | 93 | } |
49 | } | ||
50 | } | ||
51 | 94 | ||
52 | @media (max-width: map-get($breakpoints, 'sm')) { | 95 | @include element('item') { |
53 | &__item { | 96 | margin-right: calc(-1 * #{prop(--dims --item --pad-x-sm)}); |
54 | margin-left: $nav--item--spacing--sm - $nav--item--pad-h; | 97 | margin-left: prop(--dims --item --pad-x-sm); |
98 | padding-right: prop(--dims --item --pad-x-sm); | ||
99 | padding-left: prop(--dims --item --pad-x-sm); | ||
100 | } | ||
55 | } | 101 | } |
56 | } | 102 | } |
57 | } | 103 | } |