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