_main-nav.scss 3.47 KB
Newer Older
Evonne Cheung's avatar
Evonne Cheung committed
1
2
3
/*
 * Primary navigation menu
 */
4
5
6
7
.navbar-default {
    border-left-color: #FFFFFF;
    border-right-color: #FFFFFF;
    border-bottom-color: #FFFFFF;
Evonne Cheung's avatar
Evonne Cheung committed
8
9
}

10
11
.navbar-main .navbar-nav > li > a {
    border-color: transparent;
12
13
}

14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
// User menu styles.
// Note: Admin menu and user setting menu use styles inherited from Raw with
// color values specified in Primary theme bootstrap-variable.scss

// To change section color, simply change color value.
$home-color: #0591ce;
$content-color: #ca0238;
$myportfolio-color: #f29907;
$groups-color: #799323;

// Menue section variable array
// 1) Section name
// 2) Section icon
// 3) Main color (see colour value above)
// 4) Lighter shade (can be specified in hex,rgba value)
// 5) Darker shade (can be specified in hex,rgba value)
$menu-styles: (
  ("home", $fa-var-tachometer, $home-color, lighten($home-color, 5%), darken($home-color, 5%)),
  ("content", $fa-var-pencil-square, $content-color, lighten($content-color, 5%), darken($content-color, 5%)),
  ("myportfolio", $fa-var-file, $myportfolio-color, lighten($myportfolio-color, 5%), darken($myportfolio-color, 5%)),
  ("groups", $fa-var-users, $groups-color, lighten($groups-color, 5%), darken($groups-color, 5%))
);

.nav-main .navbar-nav {
    // Override basic style color specified in Bootstrap variables
    > li {
40
        > a {
41
42
43
            font-weight: bold;
            color: #FFFFFF;
            border-color: transparent;
44
            &:before {
45
46
47
48
                font-family: 'FontAwesome';
                font-weight: normal;
                padding-right: 5px;
                font-size: 19px;
49
50
51
52
                color: #FFFFFF;
            }
            &:focus,
            &:hover {
53
                color: #FFFFFF;
54
55
            }
        }
56
        &.active > a {
57
58
            background-color: #FFFFFF;
        }
59
        .navbar-showchildren{
60
            top: 7px;
61
62
63
64
        }
        .child-nav > li {
            a {
                color: #FFFFFF;
65
            }
66
67
            &.active a {
                color: #FFFFFF;
68
69
            }
        }
70
71
72
    }
    @each $section in $menu-styles {
        > .#{nth($section, 1)} {
73
            > a {
74
                background-color: #{nth($section, 3)};
75
                &:before {
76
                    content: "#{nth($section, 2)}";
77
78
79
                }
                &:focus,
                &:hover {
80
                    background-color: #{nth($section, 4)};
81
                }
82
            }
83
            &.active > a {
84
                &:before {
85
                    color: #{nth($section, 3)};
86
87
                    &:focus,
                    &:hover {
88
                        background-color: #{nth($section, 4)};
89
90
91
92
93
94
95
96
                        color: #FFFFFF;
                    }
                }
                &:focus,
                &:hover {
                    background-color: #FFFFFF;
                }
            }
97
98
99
            .navbar-showchildren,
            &.active .navbar-showchildren {
                background-color: #{nth($section, 3)};
100
101
                &:focus,
                &:hover {
102
                    background-color: #{nth($section, 5)};
103
104
                }
            }
105
            .child-nav li {
106
                a {
107
                    background-color: #{nth($section, 5)};
108
109
                    &:focus,
                    &:hover {
110
                        background-color: #{nth($section, 3)};
111
112
113
                    }
                }
                &.active a {
114
                    background-color: #{nth($section, 4)};
115
116
117
118
119
                }
            }
        }
    }
}