_nav.scss 4.66 KB
Newer Older
1
.navigation {
Benthe Kuijpers's avatar
Benthe Kuijpers committed
2
3
4
5
6
7
8
	position: fixed;
	background: white;
	top: 0;
	right: 0;
	z-index: $z-nav;
	
	// Hamburger menu styles
9
	@media only screen and (max-width: $mediumlarge - 1px) {
Benthe Kuijpers's avatar
Benthe Kuijpers committed
10
11
12
13
14
15
		padding: 60px 20px 40px;
		box-shadow: 0 0 10px rgba(0,0,0,0.16);
		width: 280px;
		opacity: 0;
		transform: translateX(100%);
		visibility: hidden;
alain's avatar
alain committed
16
		transition: all 0.1s ease;
Benthe Kuijpers's avatar
Benthe Kuijpers committed
17
18
19
20
21

		&--shown {
			transform: translateX(0%);
			opacity: 1;
			visibility: visible;
alain's avatar
alain committed
22
			transition: all 0.2s ease;
Benthe Kuijpers's avatar
Benthe Kuijpers committed
23
24
25
		}
	}

26
	@media only screen and (min-width: $mediumlarge) {
Benthe Kuijpers's avatar
Benthe Kuijpers committed
27
28
29
30
		flex: 1;
		left: 0;
		position: relative;
	}
31
32
33
34
35

	ul {
		list-style: none;
		margin: 0;
		padding: 0;
Benthe Kuijpers's avatar
Benthe Kuijpers committed
36

37
		@media only screen and (min-width: $mediumlarge) {
Benthe Kuijpers's avatar
Benthe Kuijpers committed
38
39
40
41
42
			display: flex;
			flex-wrap: wrap;
			align-items: flex-end;
			justify-content: flex-end;
		}
43
44
45

		li {
			a {
Benthe Kuijpers's avatar
Benthe Kuijpers committed
46
47
				display: inline-block;
				font-weight: bold;
48
49
				text-decoration: none;
				color: black;
Benthe Kuijpers's avatar
Benthe Kuijpers committed
50
				padding: 20px 10px;
51
				font-family: $font-header;
Benthe Kuijpers's avatar
Benthe Kuijpers committed
52
53
				font-size: 19px;
				line-height: 21px;
54
				position: relative;
Benthe Kuijpers's avatar
Benthe Kuijpers committed
55

56
				@media only screen and (min-width: $medium) {
57
58
					padding: 10px 10px 0;
					font-size: 17px;
Benthe Kuijpers's avatar
Benthe Kuijpers committed
59
60
				}

61
				@media only screen and (min-width: 1100px) {
62
					padding: 15px 15px 0;
63
					font-size: 19px;
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
				}

				&:before, &:after {
					z-index: -2;
					content: "";
					position: absolute;
					height: 3px;
					bottom: 18px;
					left: 10px;
					right: 12px;
					mix-blend-mode: multiply;
					transition: background 0.2s ease;
					background: transparent;

					@media only screen and (min-width: $medium) {
						bottom: -2px;
					}

82
					@media only screen and (min-width: 1100px) {
83
84
85
86
87
88
89
90
91
						left: 15px;
						right: 17px;
					}
				}

				&:after {
					transform: translate(2px,2px);
				}

alain's avatar
alain committed
92
93
				//&:hover:before,
				&:hover:after {
94
					background: $bg-yellow;
Benthe Kuijpers's avatar
Benthe Kuijpers committed
95
				}
96
97
			}

Benthe Kuijpers's avatar
Benthe Kuijpers committed
98
99
100
101
102
103
104
105
106
107
108
			// Open schooling navigator link
			&.osn {
				position: relative;

				&:before,
				&:after,
				a:before,
				a:after {
					z-index: -2;
					content: "";
					position: absolute;
alain's avatar
alain committed
109
110
					height: 3px;
					bottom: 4px;
Benthe Kuijpers's avatar
Benthe Kuijpers committed
111
112
113
114
					left: 10px;
					right: 145px;
					mix-blend-mode: multiply;

Benthe Kuijpers's avatar
Benthe Kuijpers committed
115
					@media only screen and (min-width: $mediumlarge) {
Benthe Kuijpers's avatar
Benthe Kuijpers committed
116
117
118
119
120
121
122
123
124
125
						right: 65px;
					}
				}

				// second line coloured bar
				&:before {
					background: $red;
				}

				&:after {
alain's avatar
alain committed
126
127
					transform: translate(1.5px, 1.5px);
					background: $bg-green;
Benthe Kuijpers's avatar
Benthe Kuijpers committed
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
				}

				a {
					padding: 0 10px 5px;
					display: inline-block;
					position: relative;

					.arrow {
						display: inline-block;
						position: relative;
						font-weight: bold;
						font-family: $font-header;
						transform: translate(0px, -1px);
					}

					&:hover .arrow {
						transform: translate(2px, -3px);
alain's avatar
alain committed
145
						transition: all 0.2s ease;
Benthe Kuijpers's avatar
Benthe Kuijpers committed
146
147
148
149
150
151
152
153
154
155
156
157
158
					}

					// first line coloured bar
					&:before {
						right: 12px;
						bottom: 25px;
						background: $red;
					}

					// first line coloured bar
					&:after {
						right: 12px;
						bottom: 25px;
alain's avatar
alain committed
159
160
						transform: translate(1.5px,1.5px);
						background: $bg-green;
Benthe Kuijpers's avatar
Benthe Kuijpers committed
161
162
163
					}
				}

164
165
166
167
				@media only screen and (min-width: 1100px) {
					margin-left: 20px;
				}

168
				@media only screen and (min-width: $large) {
Benthe Kuijpers's avatar
Benthe Kuijpers committed
169
					margin-left: 50px;
alain's avatar
alain committed
170
				}
Benthe Kuijpers's avatar
Benthe Kuijpers committed
171
172
			}

173
174
175
176
			&.current-menu-item {
				a:before {
					background: $blue;
				}
Benthe Kuijpers's avatar
Benthe Kuijpers committed
177

178
179
180
				a:after {
					background: $bg-yellow;
				}
Benthe Kuijpers's avatar
Benthe Kuijpers committed
181

182
183
184
				&.news a:before {
					background: $red;
				}
Benthe Kuijpers's avatar
Benthe Kuijpers committed
185

186
187
				&.resources a:before {
					background: $green;
Benthe Kuijpers's avatar
Benthe Kuijpers committed
188
189
				}

190
191
				&.getinvolved a:before {
					background: $purple;
Benthe Kuijpers's avatar
Benthe Kuijpers committed
192
193
				}

194
195
				&.about a:before {
					background: $yellow;
Benthe Kuijpers's avatar
Benthe Kuijpers committed
196
				}
197
198
199
			}
		}
	}
Benthe Kuijpers's avatar
Benthe Kuijpers committed
200
201
202
203
204
205
}

.hamburger {
	outline: none;
	// flex: 1;
	padding: 10px;
alain's avatar
alain committed
206
	transition: all 0.2s ease;
Benthe Kuijpers's avatar
Benthe Kuijpers committed
207
208
	z-index: $z-hamburger;

209
	@media only screen and (min-width: $mediumlarge) {
Benthe Kuijpers's avatar
Benthe Kuijpers committed
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
		display: none;
	}

	div {
		width: 16px;
		height: 16px;
		margin: 12px auto;
		position: relative;
		content: " ";
	}

	span {
		position: absolute;
		top: calc(50% - 1px);
		left: 0;
		right: 0;
		height: 2px;
		background: black;
		content: " ";
		display: block;
alain's avatar
alain committed
230
		transition: all 0.2s ease;
Benthe Kuijpers's avatar
Benthe Kuijpers committed
231
232
233

		&:nth-child(1) {
			transform: translateY(-5px);
alain's avatar
alain committed
234
			transition: transform 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6) 0s;
Benthe Kuijpers's avatar
Benthe Kuijpers committed
235
236
237
238
		}

		&:nth-child(2) {
			transform: scaleX(1);
alain's avatar
alain committed
239
			transition: transform 0.2s cubic-bezier(0.68, -0.6, 0.32, 1.6) 0.25s;
Benthe Kuijpers's avatar
Benthe Kuijpers committed
240
241
242
243
		}

		&:nth-child(3) {
			transform: translateY(5px);
alain's avatar
alain committed
244
			transition: transform 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6) 0s;
Benthe Kuijpers's avatar
Benthe Kuijpers committed
245
246
247
248
249
250
		}
	}

	&--active {
		span:nth-child(1) {
			transform: rotate(45deg);
alain's avatar
alain committed
251
			transition: transform 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6) 0.15s;
Benthe Kuijpers's avatar
Benthe Kuijpers committed
252
253
254
		}
		span:nth-child(2) {
			transform: scaleX(0);
alain's avatar
alain committed
255
			transition: transform 0.2s cubic-bezier(0.68, -0.6, 0.32, 1.6) 0s;
Benthe Kuijpers's avatar
Benthe Kuijpers committed
256
257
258
		}
		span:nth-child(3) {
			transform: rotate(-45deg);
alain's avatar
alain committed
259
			transition: transform 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6) 0.15s;
Benthe Kuijpers's avatar
Benthe Kuijpers committed
260
261
		}
	}
262
}