diff options
Diffstat (limited to 'assets/css/components/_nav.scss')
-rw-r--r-- | assets/css/components/_nav.scss | 71 |
1 files changed, 31 insertions, 40 deletions
diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss index 2472706..8fc4564 100644 --- a/assets/css/components/_nav.scss +++ b/assets/css/components/_nav.scss | |||
@@ -2,13 +2,10 @@ | |||
2 | @include store(( | 2 | @include store(( |
3 | --dims: ( | 3 | --dims: ( |
4 | --font-size: 15px, | 4 | --font-size: 15px, |
5 | --pad-y: 1em, | 5 | --pad-y: 1em, |
6 | --pad-y-sm: .5em, | ||
7 | --item: ( | 6 | --item: ( |
8 | --pad-x: 1em, | 7 | --pad-x: 1em, |
9 | --pad-x-sm: .75em, | ||
10 | --pad-y: 1em, | 8 | --pad-y: 1em, |
11 | --pad-y-sm: .75em, | ||
12 | ), | 9 | ), |
13 | ), | 10 | ), |
14 | --colors: ( | 11 | --colors: ( |
@@ -34,69 +31,63 @@ | |||
34 | ) | 31 | ) |
35 | )); | 32 | )); |
36 | 33 | ||
34 | @include store(( | ||
35 | --dims: ( | ||
36 | --pad-y: .5em, | ||
37 | --item: ( | ||
38 | --pad-x: .75em, | ||
39 | --pad-y: .75em, | ||
40 | ), | ||
41 | ) | ||
42 | ), 'sm'); | ||
43 | |||
37 | @include component(namespace()) { | 44 | @include component(namespace()) { |
38 | display: flex; | 45 | display: flex; |
39 | align-items: center; | 46 | align-items: center; |
40 | padding: prop(--dims --pad-y) 0; | 47 | padding: prop(--dims --pad-y) 0; |
41 | font-size: prop(--dims --font-size); | 48 | font-size: prop(--dims --font-size); |
42 | 49 | ||
43 | @include element('logo') { | 50 | @include element('logo') { |
44 | display: inline-block; | 51 | display: inline-block; |
45 | margin: 0; | 52 | margin: 0; |
46 | padding: prop(--dims --item --pad-y) 0; | 53 | padding: prop(--dims --item --pad-y) 0; |
47 | color: prop(--colors --logo --idle --fg); | 54 | color: prop(--colors --logo --idle --fg); |
48 | font-family: $font-fam--mono; | 55 | font-family: $font-fam--mono; |
49 | text-decoration: none; | 56 | text-decoration: none; |
50 | 57 | ||
51 | &:link, | 58 | &:link, |
52 | &:visited { | 59 | &:visited { |
53 | &:hover { | 60 | &:hover { |
54 | background-color: transparent; | 61 | background-color: transparent; |
55 | color: prop(--colors --logo --hover --fg); | 62 | color: prop(--colors --logo --hover --fg); |
56 | } | 63 | } |
57 | } | 64 | } |
58 | } | 65 | } |
59 | 66 | ||
60 | @include element('logo-symbol') { | 67 | @include element('logo-symbol') { |
61 | display: block; | 68 | display: block; |
62 | width: $line-height * .9em; | 69 | width: $line-height * .9em; |
63 | height: $line-height * 1em; | 70 | height: $line-height * 1em; |
64 | } | 71 | } |
65 | 72 | ||
66 | @include element('item') { | 73 | @include element('item') { |
67 | display: inline-block; | 74 | display: inline-block; |
68 | margin: 0 calc(-1 * #{prop(--dims --item --pad-x)}) 0 prop(--dims --item --pad-x); | 75 | margin: 0 calc(-1 * #{prop(--dims --item --pad-x)}) 0 prop(--dims --item --pad-x); |
69 | padding: prop(--dims --item --pad-y) prop(--dims --item --pad-x); | 76 | padding: prop(--dims --item --pad-y) prop(--dims --item --pad-x); |
70 | color: prop(--colors --item --idle --fg); | 77 | color: prop(--colors --item --idle --fg); |
71 | text-decoration: none; | 78 | text-decoration: none; |
72 | text-transform: uppercase; | 79 | text-transform: uppercase; |
73 | 80 | ||
74 | &:hover { | 81 | &:hover { |
75 | background-color: transparent; | 82 | background-color: transparent; |
76 | color: prop(--colors --item --hover --fg); | 83 | color: prop(--colors --item --hover --fg); |
77 | text-decoration: underline; | 84 | text-decoration: underline; |
78 | } | 85 | } |
79 | 86 | ||
80 | @include modifier('active') { | 87 | @include modifier('active') { |
81 | border-color: prop(--colors --item --active --fg); | 88 | border-color: prop(--colors --item --active --fg); |
82 | color: prop(--colors --item --active --fg); | 89 | color: prop(--colors --item --active --fg); |
83 | font-weight: bold; | 90 | font-weight: bold; |
84 | } | ||
85 | } | ||
86 | |||
87 | @include media('<=sm') { | ||
88 | padding: prop(--dims --pad-y-sm) 0; | ||
89 | |||
90 | @include element('logo', 'item') { | ||
91 | padding-top: prop(--dims --item --pad-y-sm); | ||
92 | padding-bottom: prop(--dims --item --pad-y-sm); | ||
93 | } | ||
94 | |||
95 | @include element('item') { | ||
96 | margin-right: calc(-1 * #{prop(--dims --item --pad-x-sm)}); | ||
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 | } | 91 | } |
101 | } | 92 | } |
102 | } | 93 | } |