_main-nav.scss 10.9 KB
Newer Older
Evonne Cheung's avatar
Evonne Cheung committed
1
2
3
4
/*
 * Primary navigation menu
 */
.main-nav {
5
    margin-bottom: 0;
Evonne Cheung's avatar
Evonne Cheung committed
6

Evonne Cheung's avatar
Evonne Cheung committed
7
    ul {
8
9
10
11
12
13
        @media (min-width: $screen-md-min) {
            margin:0;
        }
        @media (min-width: $screen-sm-min) and (max-width: $screen-md-min - 1) {
            margin:0;
        }
Evonne Cheung's avatar
Evonne Cheung committed
14
15
    }
    .navbar-header{
16
17
        @media (min-width: $screen-sm-min) {
            margin:0;
Evonne Cheung's avatar
Evonne Cheung committed
18
19
        }
    }
Evonne Cheung's avatar
Evonne Cheung committed
20

21
    .navbar-link {
Evonne Cheung's avatar
Evonne Cheung committed
22
        padding: 8px 25px;
23
        margin: 0;
24
        border-bottom: 0;
25
        color: #FFFFFF;
Evonne Cheung's avatar
Evonne Cheung committed
26
27
        height: auto;
        font-size: $font-size-base;
28
        background-color: darken($brand-primary, 2%);
Evonne Cheung's avatar
Evonne Cheung committed
29

Evonne Cheung's avatar
Evonne Cheung committed
30
        @media (min-width: $screen-sm-min) {
Evonne Cheung's avatar
Evonne Cheung committed
31
32
33
            padding: 8px;
            margin-right: 5px;
            background-color: transparent;
Evonne Cheung's avatar
Evonne Cheung committed
34
        }
Evonne Cheung's avatar
Evonne Cheung committed
35

36
37
38
39
        @media (max-width: $screen-sm-min) {
            display: block;
            background-color: transparent;
        }
Evonne Cheung's avatar
Evonne Cheung committed
40

Evonne Cheung's avatar
Evonne Cheung committed
41
42
43
44
45
       &:focus,
       &:hover {
           background-color: rgba(#FFFFFF, 0.2);
           border-radius: 3px;
           color: #FFFFFF;
46
           text-decoration: none;
Evonne Cheung's avatar
Evonne Cheung committed
47
       }
Evonne Cheung's avatar
Evonne Cheung committed
48

Evonne Cheung's avatar
Evonne Cheung committed
49
50
51
52
53
54
       .icon {
            top:3px;
       }
    }

    .nav > li > a {
55
56
        border-top: 0;
        border-bottom: 0;
Evonne Cheung's avatar
Evonne Cheung committed
57

Evonne Cheung's avatar
Evonne Cheung committed
58
59
60
61
        @media (min-width: $screen-sm-min) {
            padding: 10px 20px;
        }
        @media (min-width: $screen-sm-min) and (max-width: $screen-md-min - 1) {
Evonne Cheung's avatar
Evonne Cheung committed
62
            padding: 10px 10px;
Evonne Cheung's avatar
Evonne Cheung committed
63
64
65
66
        }
    }
    // Only shown on mobile, or when dropdowns are turned on
    .child-nav {
67
        background-color: transparent;
Evonne Cheung's avatar
Evonne Cheung committed
68
        padding: 0px;
Evonne Cheung's avatar
Evonne Cheung committed
69

Evonne Cheung's avatar
Evonne Cheung committed
70
        font-size: $font-size-base;
Evonne Cheung's avatar
Evonne Cheung committed
71
72

        li {
73
            background-color: transparent;
Evonne Cheung's avatar
Evonne Cheung committed
74
            a { //styles that need to override bootstrap specificity
Evonne Cheung's avatar
Evonne Cheung committed
75
76
                padding: 10px 29px 10px 50px;
                color: #FFFFFF;
77
                background-color: darken($brand-primary, 2%);
Evonne Cheung's avatar
Evonne Cheung committed
78

Evonne Cheung's avatar
Evonne Cheung committed
79
                &:hover, &:focus {
80
                    color: #FFFFFF;
Evonne Cheung's avatar
Evonne Cheung committed
81
                    background-color: rgba(#FFFFFF, 0.2);
Evonne Cheung's avatar
Evonne Cheung committed
82
83
                }
            }
84
85
86
            &.active {
                background-color: transparent;
            }
Evonne Cheung's avatar
Evonne Cheung committed
87
88
89
90
91
        }

       // If this link is the current page or section
        .active > a {
            font-weight: bold;
92
            background-color: rgba(#FFFFFF, 0.8);
Evonne Cheung's avatar
Evonne Cheung committed
93
            color: #000;
Evonne Cheung's avatar
Evonne Cheung committed
94

95
            &:hover, &:focus {
96
                color: #FFFFFF;
97
            }
Evonne Cheung's avatar
Evonne Cheung committed
98
            @media (min-width: $screen-sm-min) {
Evonne Cheung's avatar
Evonne Cheung committed
99
                &:focus,
Evonne Cheung's avatar
Evonne Cheung committed
100
101
102
103
104
105
106
107
108
                &:hover {
                    color: $text-color;
                }
            }
        }
    }

    .has-dropdown {
        @media (min-width: $screen-sm-min) {
Evonne Cheung's avatar
Evonne Cheung committed
109
110
            padding: 0;
            margin: 0; // override default ul
Evonne Cheung's avatar
Evonne Cheung committed
111
            background-color: $dropdown-bg;
Evonne Cheung's avatar
Evonne Cheung committed
112
            border:0;
Evonne Cheung's avatar
Evonne Cheung committed
113
114

            // Links within the dropdown menu
Evonne Cheung's avatar
Evonne Cheung committed
115
116
            > li a {
                padding: 4px 20px;
Evonne Cheung's avatar
Evonne Cheung committed
117
118
119
            }
        }
    }
Evonne Cheung's avatar
Evonne Cheung committed
120

121
122
123
124
    // when a container is at the same level as main-nav (but isn't for admin), add padding
    &:not(.adminnav)~ .container {
        padding-top: 25px;
    }
Evonne Cheung's avatar
Evonne Cheung committed
125
126
}

127
128

// admin menu with static second nav
Evonne Cheung's avatar
Evonne Cheung committed
129
130
.adminnav {
    .nav {
131
132
133
        > li {
            > a {
                font-size: $font-size-base;
Evonne Cheung's avatar
Evonne Cheung committed
134

135
136
137
138
139
140
141
142
143
144
                &:focus,
                &:hover {
                    background-color: rgba(#FFFFFF, 0.2);
                }
            }
            &.active {
                > a {
                    &:focus,
                    &:hover {
                        color: $brand-primary;
145
                        background-color: #FFFFFF;
146
147
148
149
150
151
                    }
                }
            }
            .child-nav {
                font-size: $font-size-base;
            }
Evonne Cheung's avatar
Evonne Cheung committed
152

153
            .navbar-toggle {
154
155
                background-color: darken($brand-primary, 2%);
                margin-top: 0;
156
157
158
159
160
            }
        }
    }
}

161

162
163
164
// admin menu with dropdown
.dropdown-adminnav {
    .navbar-nav {
Evonne Cheung's avatar
Evonne Cheung committed
165
166
167
        > li {
            > a {
                font-size: $font-size-base;
Evonne Cheung's avatar
Evonne Cheung committed
168

Evonne Cheung's avatar
Evonne Cheung committed
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
                &:focus,
                &:hover {
                    background-color: rgba(#FFFFFF, 0.2);
                }
            }
            &.active {
                > a {
                    &:focus,
                    &:hover {
                        color: #000000;
                    }
                }
            }
            .child-nav {
                font-size: $font-size-base;
Evonne Cheung's avatar
Evonne Cheung committed
184
                > li {
185
186
187
188
                    a:focus,
                    a:hover {
                        color: #FFFFFF;
                        background-color: $brand-primary;
Evonne Cheung's avatar
Evonne Cheung committed
189
                    }
190
191
192
                    &.active {
                        a:focus,
                        a:hover {
193
                            color: #FFFFFF;
Evonne Cheung's avatar
Evonne Cheung committed
194
                        }
195
196
                    }
                }
Evonne Cheung's avatar
Evonne Cheung committed
197
            }
Evonne Cheung's avatar
Evonne Cheung committed
198

Evonne Cheung's avatar
Evonne Cheung committed
199
            .navbar-toggle {
200
                background-color: darken($brand-primary, 2%);
Evonne Cheung's avatar
Evonne Cheung committed
201
202
203
204
205
            }
        }
    }
}

206
207

//custom main nav
208
209
.main-nav .navbar-nav {
     > li > a {
210
211
        font-weight: bold;
        color: #FFFFFF;
Evonne Cheung's avatar
Evonne Cheung committed
212

213
214
215
216
217
218
219
220
221
222
223
        &:before {
            font-family: 'FontAwesome';
            font-weight: normal;
            padding-right: 5px;
            font-size: 19px;
        }
        &:focus,
        &:hover {
            color: #FFFFFF;
        }
    }
224
    > .home {
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
        > a {
            background-color: #0591ce;
            &:before {
                content: $fa-var-tachometer;
                color: #FFFFFF;
            }
            &:focus,
            &:hover {
                background-color: lighten(#0591ce, 5%);
            }
        }
        &.active {
            background-color: #FFFFFF;
            > a {
                color: #333333;
                &:before {
                    color: #0591ce;
                }
                &:focus,
                &:hover {
                    background-color: lighten(#0591ce, 5%);
                    color: #FFFFFF;
247
248
249
                    &:before {
                        color: #FFFFFF;
                    }
250
251
252
253
                }
            }
        }
    }
254
    > .content {
255
256
257
258
259
260
261
262
263
264
265
        > a {
            background-color: #ca0238;
            &:before {
                content: $fa-var-pencil-square;
            }
            &:focus,
            &:hover {
                background-color: lighten(#ca0238, 2%);
            }
        }
        &.active {
266
            background-color: #FFFFFF;
Evonne Cheung's avatar
Evonne Cheung committed
267

268
269
            > a {
                @media (max-width: $screen-sm-min - 1) {
Evonne Cheung's avatar
Evonne Cheung committed
270
                    color: #333333;
271
272
273
                    &:focus,
                    &:hover {
                        color: #333333;
Evonne Cheung's avatar
Evonne Cheung committed
274
                    }
275
276
277
278
279
280
281
282
283
284
285
286
                }
                &:before {
                    color: #ca0238;
                    &:focus,
                    &:hover {
                        color: #FFFFFF;
                    }
                }
                &:focus,
                &:hover {
                    background-color: #FFFFFF;
                }
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
            }
        }
        .navbar-toggle {
            background-color: #ca0238;
            &:focus,
            &:hover {
                background-color: darken(#ca0238, 2%);
            }
        }
        .child-nav {
            li {
                a {
                    color: #FFFFFF;
                    background-color: darken(#ca0238, 2%);
                    &:focus,
                    &:hover {
                        background-color:#ca0238; 
                    }
                }
                &.active a {
307
308
                    color: #FFFFFF;
                    background-color: lighten(#ca0238, 4%);
309
310
311
312
                }
            }
        }
    }
313
    > .myportfolio {
314
315
316
317
318
319
320
321
322
323
        > a {
            background-color: #f29907;
            &:before {
                content: $fa-var-file;
            }
            &:focus,
            &:hover {
                background-color: lighten(#f29907, 2%);
            }
        }
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
        &.active {
            > a {
                @media (max-width: $screen-sm-min - 1) {
                    color: #333333;  
                    &:focus,
                    &:hover {
                        color: #333333;
                    }  
                }
                &:before {
                    color: #f29907;
                    &:focus,
                    &:hover {
                        color: #FFFFFF;
                    }
                }
                &:focus,
                &:hover {
                    background-color: #FFFFFF;
                }
            }
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
        }
        .navbar-toggle {
            background-color: #f29907;
            &:focus,
            &:hover {
                background-color: darken(#f29907, 2%);
            }
        }
        .child-nav {
            li {
                a {
                    color: #FFFFFF;
                    background-color: darken(#f29907, 2%);
                    &:focus,
                    &:hover {
                        background-color:#f29907; 
                    }
                }
                &.active a {
364
365
                    color: #FFFFFF;
                    background-color: lighten(#f29907, 4%);
366
367
368
369
                }
            }
        }
    }
370
    > .groups {
371
372
373
374
375
376
377
378
379
380
        > a {
            background-color: #799323;
            &:before {
                content: $fa-var-users;
            }
            &:focus,
            &:hover {
                background-color: lighten(#799323, 2%);
            }
        }
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
        &.active {
            > a {
                @media (max-width: $screen-sm-min - 1) {
                    color: #333333;  
                    &:focus,
                    &:hover {
                        color: #333333;
                    }  
                }
                &:before {
                    color: #799323;
                    &:focus,
                    &:hover {
                        color: #FFFFFF;
                    }
                }
                &:focus,
                &:hover {
                    background-color: #FFFFFF;
                }
            }
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
        }
        .navbar-toggle {
            background-color: #799323;
            &:focus,
            &:hover {
                background-color: darken(#799323, 2%);
            }
        }
        .child-nav {
            li {
                a {
                    color: #FFFFFF;
                    background-color: darken(#799323, 2%);
                    &:focus,
                    &:hover {
                        background-color:#799323; 
                    }
                }
                &.active a {
421
422
                    color: #FFFFFF;
                    background-color: lighten(#799323, 4%);
423
424
425
426
                }
            }
        }
    }
427
    > .instituteadmin,
428
    > .siteadmin {
429
430
431
432
433
434
435
436
437
438
439
440
441
442
        > a {
            background-color: #773f97;
            &:before {
                content: $fa-var-cog;
            }
            &:focus,
            &:hover {
                background-color: lighten(#773f97, 2%);
            }
        }
        &.active > a:before {
            color: #773f97;
        }
    }
443
    > .active > a {
444
445
446
        background-color: #FFFFFF;
    }
}