_toggles.scss 2.86 KB
Newer Older
1
2
3
4
5
6
// Navigation toggle styles
.nav-toggle-area {
    position: relative;
    .user-icon {
        padding: 0;
        position: absolute;
7
        margin: 6px 0 5px 7px;
8
        z-index: 3;
9
        left: 90px;
10
        display: block;
11
12
        width: 26px;
        height: 26px;
13
        @include media-breakpoint-up(md) {
14
            left: 45px;
15
        }
Evonne Cheung's avatar
Evonne Cheung committed
16
17
        &:hover,
        &:focus {
18
19
            color: $navbar-toggle-hover-color;
            background-color: $navbar-toggle-hover-bg;
Evonne Cheung's avatar
Evonne Cheung committed
20
        }
Naomi Guyer's avatar
Naomi Guyer committed
21
22
23
    }
}

24
25
26
.navbar-toggle {
    display: block;
    margin: 0;
27
    border-color: transparent;
28
    border-left-width: 0;
29
    border-radius: $border-radius;
30
    min-width: 45px;
31
    color: $navbar-toggle-color;
32
    padding: 6px 10px;
33
    background-color: $navbar-toggle-bg;
34
35
36
37
    position: relative;
    float: right;
    background-image: none;
    border: 1px solid transparent;
38
    cursor: pointer;
39

40
41
    &:hover,
    &:focus {
42
43
        color: $navbar-toggle-hover-color;
        background-color: $navbar-toggle-hover-bg;
44
45
    }

46
47
48
49
    &.collapsed {
        background-color: transparent;
        &:hover,
        &:focus {
50
51
            color: $navbar-toggle-hover-color;
            background-color: $navbar-toggle-hover-bg;
52
53
54
        }
    }

55
    &.search-toggle {
56
        @include media-breakpoint-up(md) {
57
58
59
            display: none;
        }
        .icon {
60
61
            color: $navbar-toggle-color;
            background-color: $navbar-toggle-bg;
62
63
        }
    }
Naomi Guyer's avatar
Naomi Guyer committed
64

65
    &.user-toggle {
66
        padding-left: 40px;
67
68
        color: $navbar-toggle-color;
        background-color: $navbar-toggle-bg;
69
        @include media-breakpoint-up(md) {
70
71
            border-left-width: 1px;
        }
Evonne Cheung's avatar
Evonne Cheung committed
72
73
        &:hover,
        &:focus {
74
75
            color: $navbar-toggle-hover-color;
            background-color: $navbar-toggle-hover-bg;
Evonne Cheung's avatar
Evonne Cheung committed
76
        }
77
    }
Naomi Guyer's avatar
Naomi Guyer committed
78

79
80
81
    &:last-of-type {
        border-left-width: 1px;
    }
Naomi Guyer's avatar
Naomi Guyer committed
82
83
}

Evonne Cheung's avatar
Evonne Cheung committed
84
85
86
87
88
89
90
91
92
// navbar menu children toggles
.nav {
    .navbar-showchildren {
        color: $navbar-inverse-toggle-color;
        background: $navbar-inverse-toggle-bg;
        border-radius: 0;
        border: 0;
        position: absolute;
        right: 10px;
Liam's avatar
Liam committed
93
        top: 5px;
Evonne Cheung's avatar
Evonne Cheung committed
94
95
96
        height: 37px;
        width:42px;
        margin: 0;
97
        transition-duration: 0.3s;
Evonne Cheung's avatar
Evonne Cheung committed
98
99
100
101
        cursor: pointer;

        &:hover,
        &:focus {
102
            background: $navbar-inverse-toggle-hover-bg;
Evonne Cheung's avatar
Evonne Cheung committed
103
104
105
106
            .icon {
                color: $navbar-inverse-toggle-hover-color;
            }
        }
107
        .icon {
Evonne Cheung's avatar
Evonne Cheung committed
108
            transform: rotate(-180deg);
109
110
            transition-duration: 0.3s;
        }
Evonne Cheung's avatar
Evonne Cheung committed
111
112
113
114
115
116
117
118
119
120
121
        &.collapsed {
            .icon {
                transform: rotate(0deg);
                transition-duration: 0.3s;
            }
        }
        .active & {
            background-color: $navbar-inverse-toggle-active-bg;
            .icon {
                color: $navbar-inverse-toggle-active-color;
            }
122
123
        }
    }
124
}