cncjs

1
.navbar {
2
    position: relative;
3
}
4

5
.icon {
6
    display: inline-block;
7
    vertical-align: middle;
8
    width: 32px;
9
    height: 32px;
10

11
    &.icon-xyz {
12
        background: url("./images/xyz.svg") no-repeat 0 0;
13
    }
14
    &.icon-gear {
15
        background: url("./images/gear.svg") no-repeat 0 0;
16
    }
17
}
18

19
.nav {
20
    padding-left: 0;
21
    margin-bottom: 0;
22
    list-style: none;
23

24
    > li {
25
        position: relative;
26
        display: block;
27

28
        > a {
29
            position: relative;
30
            display: block;
31
            background-color: #222;
32
            border-bottom: 1px solid #333;
33
            color: #9d9d9d;
34
            text-decoration: none;
35
            white-space: nowrap;
36
            padding: 10px 0;
37

38
            > .icon.icon-invert {
39
                filter: invert(60%);
40
            }
41
        }
42
        > a:focus,
43
        > a:hover {
44
            color: #fff;
45
            background-color: #222;
46

47
            > .icon.icon-invert {
48
                filter: invert(100%);
49
            }
50
        }
51
    }
52
    > li.active {
53
        > a,
54
        > a:focus,
55
        > a:hover {
56
            color: #fff;
57
            background-color: #080808;
58

59
            > .icon.icon-invert {
60
                filter: invert(100%);
61
            }
62
        }
63
    }
64
}
65